/* ===================================================================== Apple Watch Series 10 · 46mm（208 × 248 pt，显示放大 1.4×） 第 47 轮重构：Watch 自己的设计语言（见 design-v2/09-Watch重构.md） - 只在黑上用光：不用卡片，分组靠留白 / 字重 / 透明度，只有可点的行才有底 - 身份色 = iOS 同一组颜色往亮调一档；每屏 ≤1 个身份色 - 屏幕圆角边缘 = 休息 / 倒计时的进度条 ===================================================================== */ :root{ --w-bg:#000; --w-t1:#fff; --w-t2:rgba(255,255,255,.62); --w-t3:rgba(255,255,255,.38); --w-t4:rgba(255,255,255,.2); --w-fill:rgba(255,255,255,.08); --w-fill-2:rgba(255,255,255,.14); --w-line:rgba(255,255,255,.12); --w-action:#4AA8FF; --w-action-dim:rgba(74,168,255,.2); --w-quality:#2ED3A8; --w-orm:#FF9233; --w-volume:#3FA0FF; --w-drift:#E65BD0; --w-ready:#9B7BFF; --w-sleep:#7C8CFF; --w-hrv:#2CC7C2; --w-hr:#FF5C6A; --w-hr-dim:rgba(255,92,106,.2); --w-warn:#FF9F0A; --w-ease:cubic-bezier(.32,.72,0,1); --w-ease-in:cubic-bezier(.2,.9,.3,1); } /* ---- 外壳：Apple Watch Series 10 · 46mm 亮黑铝金属（正视图）---- 真机特征：表壳 46×39mm、四角大圆角；正面几乎全是玻璃（细黑边 + 极窄的金属侧缘）； 数码表冠在右上，无红圈（红点是旧款蜂窝版）；侧边按钮是一条细长的平按键； 运动表带（氟橡胶）宽约表壳的 60%，从上下沿伸出并向后弯折远离视线 —— 用透视收窄 + 远端渐暗表现 */ .watch{position:relative;width:322px;height:386px;flex:0 0 auto;margin-top:120px} .wband{position:absolute;left:50%;width:198px;height:138px;transform:translateX(-50%);z-index:0;pointer-events:none; background: linear-gradient(var(--bd,180deg),rgba(0,0,0,0) 0,rgba(0,0,0,0) 18px,rgba(0,0,0,.6) 18px,rgba(0,0,0,.6) 20px,rgba(255,255,255,.07) 20px,rgba(255,255,255,0) 26px), linear-gradient(var(--bd,180deg),rgba(255,255,255,.05),rgba(0,0,0,.55)), linear-gradient(90deg,#0e0f11 0%,#24252a 8%,#1b1c20 30%,#1e1f23 50%,#1b1c20 70%,#24252a 92%,#0e0f11 100%)} .wband.t{bottom:calc(100% - 22px);--bd:0deg;clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);border-radius:0 0 4px 4px; -webkit-mask-image:linear-gradient(0deg,#000 50%,transparent 100%);mask-image:linear-gradient(0deg,#000 50%,transparent 100%)} .wband.b{top:calc(100% - 22px);--bd:180deg;clip-path:polygon(0 0,100% 0,95% 100%,5% 100%);border-radius:4px 4px 0 0; -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)} .wcase{position:absolute;inset:0;z-index:1;border-radius:94px;padding:5px; background:linear-gradient(158deg,#62656b 0%,#2c2e32 16%,#151619 48%,#25272b 80%,#55585e 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1.5px 0 rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.55), 0 30px 52px -18px rgba(10,15,25,.55),0 8px 18px rgba(10,15,25,.2)} .wcrown{position:absolute;right:-12px;top:88px;width:16px;height:54px;border-radius:4px 7px 7px 4px;cursor:ns-resize;z-index:2;touch-action:none; background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 38%,rgba(255,255,255,.16) 72%,rgba(0,0,0,.35)), repeating-linear-gradient(0deg,#4d5056 0 1.4px,#25272b 1.4px 2.8px); box-shadow:0 0 0 .5px #0b0c0d,0 2px 4px rgba(0,0,0,.35)} .wcrown i{position:absolute;left:-5px;top:5px;width:6px;height:44px;border-radius:2px;background:linear-gradient(90deg,#0d0e10,#2b2d31);pointer-events:none} .wside{position:absolute;right:-7px;top:172px;width:8px;height:76px;border-radius:3px 4px 4px 3px;cursor:pointer;z-index:2; background:linear-gradient(90deg,#141518,#3b3e43 58%,#1e1f22);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.3)} .wglass{width:100%;height:100%;border-radius:89px;background:#030304;overflow:hidden;position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 0 3px #000} /* 玻璃反光：左上一道很淡的高光，压在屏幕之上、不挡点击 */ .wglass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:60; background:linear-gradient(150deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.035) 24%,rgba(255,255,255,0) 42%); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.05)} .wscreen{position:absolute;left:50%;top:50%;width:208px;height:248px;transform:translate(-50%,-50%) scale(1.4);transform-origin:center; border-radius:52px;overflow:hidden;background:var(--w-bg);color:var(--w-t1);font-family:var(--f);-webkit-font-smoothing:antialiased;user-select:none} .whint{font-family:var(--fs);font-size:11px;color:#8C94A1;text-align:center;line-height:1.6;max-width:300px} .whint b{color:#5A6270} /* ---------- 通用 ---------- */ .w-abs{position:absolute;inset:0} /* 换页容器：必须自己铺满 —— 入场动画给它加 transform 时，它会成为里面绝对定位元素的包含块 */ .w-pgx{position:absolute;inset:0} /* 标题和系统时间共用一条顶线：上 10 / 两侧 30，既让开圆角环，也留出可见的呼吸空间。 不再把时钟上 5 与标题上 6 分开调；字体同为 15、行高同为 20。 */ .w-clock{position:absolute;right:30px;top:10px;height:20px;line-height:20px;font-size:15px;font-weight:600;z-index:40;font-variant-numeric:tabular-nums} .wscroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none} .wscroll::-webkit-scrollbar{display:none} .wmono{font-variant-numeric:tabular-nums} .w-k{font-size:11px;font-weight:600;color:var(--w-t2);letter-spacing:.2px} .w-big{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.8px;line-height:1} .w-big i{font-style:normal;font-size:.36em;font-weight:500;color:var(--w-t3);letter-spacing:0;margin-left:3px} .w-note{font-size:12px;font-weight:500;color:var(--w-t2);line-height:1.35} /* 角落工具按钮（watchOS 26 角落玻璃圆） */ .w-x{position:absolute;left:12px;top:8px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:41;color:#fff; background:var(--w-fill-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .w-x svg{width:14px;height:14px} /* 屏幕边缘进度（休息 / 换动作 / 开场倒计时）：剩余时间沿圆角边缘收回 */ .w-edge{position:absolute;inset:0;width:208px;height:248px;pointer-events:none;z-index:5} .w-edge path{fill:none;stroke-width:4;stroke-linecap:round} .w-edge .tr{stroke:var(--w-fill)} .w-edge .pg{stroke:var(--w-action);transition:stroke-dasharray 1s linear,stroke .3s,opacity .3s} /* 开场节拍：每秒触发一次 500ms 平滑收回 + 500ms 停住（合计正好一拍 1000ms）。 不是硬切，也不是整秒持续爬行 —— 收回看得清，停顿时也明确。 */ .w-edge.step .pg{transition:stroke-dasharray .5s cubic-bezier(.2,.8,.2,1)} .w-edge.warn .pg{stroke:var(--w-warn)} .w-edge.pz .pg{opacity:.35} /* 竖向分页的页点（贴着表冠一侧） */ .w-vp{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:30} .w-vp i{width:4px;height:4px;border-radius:2px;background:var(--w-t4);transition:height .3s var(--w-ease),background .3s} .w-vp i.on{height:10px;background:#fff} /* 训练中横向三页的页点 */ /* 页点 8px 起：倒计时环的下边缘在 243.5–247.5，贴 4px 会被环压到 */ .w-pg{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:45} .w-pg i{width:5px;height:5px;border-radius:50%;background:var(--w-t4)} .w-pg i.on{background:#fff} /* ---------- 待机 · 下一练 / 本周 / 质量 / 1RM ---------- */ .w-play{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--dc);color:#000} .w-play svg{width:18px;height:18px;margin-left:2px} .w-wk{display:flex;gap:5px;margin-top:14px} .w-wk span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9.5px;font-weight:600;color:var(--w-t3)} .w-wk span i{width:100%;height:26px;border-radius:7px;background:var(--w-fill)} .w-wk span.d i{background:var(--w-action)} .w-wk span.t{color:#fff} .w-wk span.t i{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)} .w-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 24px;text-align:center} .w-empty svg{width:34px;height:34px;color:var(--w-t3)} .w-empty b{font-size:14px;font-weight:600} /* 训练日列表（换一天练） */ .w-list{display:flex;flex-direction:column;gap:6px} .w-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px;border-radius:16px;background:var(--w-fill);text-align:left;color:#fff} .w-row .dt{width:8px;height:8px;border-radius:50%;flex:0 0 auto} .w-row .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .w-row .bd b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .w-row .bd span{font-size:11px;font-weight:500;color:var(--w-t2);font-variant-numeric:tabular-nums} .w-row .ck{width:14px;height:14px;color:var(--w-action);flex:0 0 auto} .w-ttl{font-size:15px;font-weight:700;padding:0 4px 8px} /* ---------- 训练中 · 表头 ---------- */ /* 三条信息线：10–30 标题 / 时钟；32–46 组进度 / kcal；46–60 总时长。 第二行顶对齐，组进度不再悬在 kcal 和时长的中间；两条数据行统一 14px 行高，不掺 1px 小缝。 64px 表头 = 10 + 20 + 2 + 28 + 4；训练主体和播放器另留完整区域。 */ .w-hd{position:absolute;left:0;right:0;top:0;height:64px;padding:10px 30px 0;z-index:20} .w-hd .l1{display:flex;align-items:center;gap:4px;height:20px;line-height:20px;padding-right:48px} .w-hd .ttl{font-size:15px;font-weight:700;flex:1;min-width:0;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .w-hd .l1 svg{width:10px;height:10px;color:var(--w-warn);flex:0 0 auto} .w-hd .l2{display:flex;align-items:flex-start;gap:8px;margin-top:2px;min-height:14px;line-height:14px;font-size:11px;font-weight:600;color:var(--w-t2)} .w-hd .l2 > span:not(.w-tm){min-width:0;white-space:nowrap} .w-hd .el{margin-left:auto;font-weight:500;color:var(--w-t2);font-variant-numeric:tabular-nums;line-height:14px} /* kcal 与时长共享右对齐线；不到 1 kcal 只隐藏内容，整列位置不动。 */ .w-hd .w-tm{margin-left:auto;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:0;line-height:14px} .w-hd .w-tm .el{margin-left:0;height:14px} .w-hd .kc{height:14px;font-size:11px;font-weight:600;color:var(--w-t1);font-variant-numeric:tabular-nums} .w-hd .kc i{font-style:normal;font-size:10px;font-weight:500;color:var(--w-t3);margin-left:3px} .w-hd .kc.none{visibility:hidden} /* 组进度：同 iOS 播放器 —— 当前组写成「2/4」，做完的暗点，后面的更暗 */ .w-sp{display:flex;align-items:center;gap:4px;height:14px;line-height:14px} .w-sp i{width:6px;height:6px;border-radius:50%;background:var(--w-t4)} .w-sp i.d{background:var(--w-t2)} .w-sp b{font-size:11px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums} /* 开场只留一位主角，完整屏幕居中，不借用带表头 / 播放条预留空间的训练主体。 */ .w-launch{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px} .w-launch .w-big{font-size:64px} /* ---------- 训练中 · 主角区 ---------- */ /* 主体 64–180，播放按钮最上缘 183：上下不相互挤占。正文两侧 26，保留大数字的空间。 */ .w-body{position:absolute;left:0;right:0;top:64px;bottom:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 26px;text-align:center} .w-body.pz{opacity:.45;transition:opacity 1.2s} .w-lift{width:100%;display:flex;flex-direction:column;align-items:center} .w-wave{width:100%;height:26px;display:block;overflow:visible} .w-wave .wl{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round} .w-wave .pk{fill:var(--w-t3)} .w-wave .pk.on{fill:var(--w-action)} .w-wave .pk.lo{fill:var(--w-warn)} .w-wave .hd{fill:#fff} .w-vl{font-size:11px;font-weight:600;color:var(--w-warn);height:12px;line-height:12px;margin-top:0} /* 休息 / 换动作 */ .w-rest .w-big{font-size:52px} .w-rest .w-note{margin-top:5px;font-size:11px} .w-rest .why{color:var(--w-warn)} .w-big.warn{color:var(--w-warn)} /* 热身：心率 */ .w-hrn{display:flex;align-items:center;gap:6px} .w-hrn svg{width:18px;height:18px;color:var(--w-hr);animation:wbeat 1s ease-in-out infinite} .w-hrn .w-big{font-size:46px} .w-hrt{width:150px;height:26px;display:block;margin-top:6px} .w-hrt path{fill:none;stroke-width:2.2;stroke-linecap:round} .w-hrt .tk{stroke:var(--w-hr-dim)} .w-hrt .tk.on{stroke:var(--w-hr)} @keyframes wbeat{0%,100%{transform:scale(.92)}35%{transform:scale(1.08)}} /* ---------- 播放条 ---------- */ /* 播放条上移 6px：按钮与页点之间 4px、页点与环之间 3.5px，不再互相贴住。 */ .w-tp{position:absolute;left:0;right:0;bottom:18px;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:30} .w-tb{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff; background:var(--w-fill);transition:transform .15s,opacity .2s,background .25s} .w-tb:active{transform:scale(.92);opacity:.75} .w-tb.c{width:48px;height:48px;background:var(--w-fill-2)} .w-tb.warn{color:var(--w-warn)} .w-tb.dis{opacity:.35;pointer-events:none} .w-tb svg{width:16px;height:16px} .w-tb.c svg{width:18px;height:18px} /* ---------- 训练中 · 控制页 ---------- */ .w-ctl{display:flex;flex-direction:column;align-items:center;gap:14px;padding:2px 0 14px} .w-ctl .pos{font-size:12px;font-weight:600;color:var(--w-t2);font-variant-numeric:tabular-nums} .w-ctl .btns{display:flex;gap:22px} .w-cb{display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;font-size:12px;font-weight:600} .w-cb .o{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--w-fill-2)} .w-cb .o svg{width:24px;height:24px} .w-cb.end .o{background:var(--w-hr-dim);color:var(--w-hr)} .w-cb:active .o{transform:scale(.94)} /* ---------- 训练中 · 接下来（队列） ---------- */ .w-q{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:6px 10px;border-radius:14px;text-align:left;color:var(--w-t2)} .w-q .n{width:16px;flex:0 0 auto;display:flex;justify-content:center;font-size:11px;font-weight:600;color:var(--w-t3);font-variant-numeric:tabular-nums} .w-q .n svg{width:12px;height:12px} .w-q .nm{flex:1;min-width:0;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .w-q .sr{font-size:11px;font-weight:500;color:var(--w-t3);font-variant-numeric:tabular-nums} .w-q.done{color:var(--w-t3)} .w-q.done .n{color:var(--w-t3)} .w-q.now{background:var(--w-fill);color:#fff} .w-q.now .nm{font-weight:600} .w-q.now .sr{color:var(--w-t2)} .w-q.add{color:var(--w-action);font-weight:600;justify-content:flex-start} .w-q.add .n{color:var(--w-action)} /* 「正在播放」的三根条：暂停就停 */ .w-eq{display:flex;align-items:flex-end;gap:1.5px;height:11px} .w-eq i{width:2.5px;border-radius:1px;background:var(--w-action);animation:weq 1.1s ease-in-out infinite} .w-eq i:nth-child(1){height:6px;animation-delay:-.2s}.w-eq i:nth-child(2){height:11px;animation-delay:-.6s}.w-eq i:nth-child(3){height:8px} .w-eq.pz i{animation:none} @keyframes weq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}} .w-eq i{transform-origin:bottom} /* ---------- 完成 ---------- */ /* 总结滚动从时钟下方开始，数据不会从固定时钟下面穿过去。 */ .w-summary-scroll{top:34px} .w-sum{padding:0 16px 24px} .w-sum .hd{display:flex;flex-direction:column;align-items:center;text-align:center} .w-sum .hd .w-k{display:flex;align-items:center;gap:4px} .w-sum .hd .w-k svg{width:12px;height:12px;color:var(--w-action)} .w-sum .hd .w-big{font-size:40px;margin-top:6px} .w-sum .hd .dn{font-size:12px;font-weight:500;color:var(--w-t2);margin-top:4px} .w-bars{display:flex;gap:4px;margin-top:10px;width:120px} .w-bars i{flex:1;height:5px;border-radius:3px;background:var(--w-fill-2)} .w-sum .ss{font-size:11px;font-weight:600;color:var(--w-t3);margin-top:6px;font-variant-numeric:tabular-nums} .w-kv{margin-top:14px;display:flex;flex-direction:column} .w-kv div{display:flex;align-items:baseline;justify-content:space-between;padding:7px 4px;font-size:13px;font-weight:500;color:var(--w-t2)} .w-kv div+div{box-shadow:inset 0 .5px 0 var(--w-line)} .w-kv b{font-size:17px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums} .w-kv b i{font-style:normal;font-size:11px;font-weight:500;color:var(--w-t3);margin-left:2px} .w-pr{display:flex;align-items:center;gap:6px;margin-top:8px;padding:0 4px;font-size:12px;font-weight:600;color:var(--w-orm)} .w-pr svg{width:13px;height:13px} .w-rpe{margin-top:10px;min-height:44px} .w-rpe .bd b{font-size:13px} /* 完成是总结最后一项：读完数据、滚到底再看见，不固定遮住内容。 */ .w-done{margin-top:14px;padding:0 2px} .w-done button{width:100%;height:44px;border-radius:22px;background:var(--w-action);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center} /* ---------- 表盘 ---------- */ .w-face{position:absolute;inset:0;padding:22px 16px 0} .w-face .top{display:flex;justify-content:space-between;align-items:flex-start} .w-face .nx{display:flex;flex-direction:column;text-align:left;padding-top:4px} .w-face .nx span{font-size:10px;font-weight:600;color:var(--w-t2)} .w-face .nx b{font-size:15px;font-weight:700;color:var(--dc)} .w-face .tm{display:flex;flex-direction:column;align-items:flex-end} .w-face .tm b{font-size:34px;font-weight:600;line-height:1;letter-spacing:-.6px;font-variant-numeric:tabular-nums} .w-face .tm span{font-size:11px;font-weight:600;color:var(--w-t2);margin-top:3px} .w-face .rect{display:block;width:100%;margin-top:14px;padding:9px 12px;border-radius:16px;background:var(--w-fill);text-align:left} .w-face .rect .w-k{display:block} .w-face .rect b{display:block;font-size:14px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums} .w-face .rings{display:flex;justify-content:space-between;margin-top:12px;padding:0 4px} .w-cx{width:52px;height:52px;position:relative} .w-cx svg{position:absolute;inset:0;transform:rotate(-90deg)} .w-cx .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .w-cx .v b{font-size:14px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums} .w-cx .v span{font-size:10px;font-weight:600;color:var(--w-t2);margin-top:2px} /* ---------- 对话框 / 子页 ---------- */ .w-dialog{position:absolute;inset:0;background:rgba(0,0,0,.94);z-index:70;display:flex;flex-direction:column;justify-content:center;padding:30px 16px 20px;gap:8px;animation:wfade .2s} .w-dialog h5{font-size:16px;font-weight:600;text-align:center} .w-dialog p{font-size:12px;color:var(--w-t2);text-align:center;line-height:1.35} .w-dialog button{height:42px;border-radius:21px;background:var(--w-fill-2);font-size:15px;font-weight:600;color:#fff;text-align:center} .w-dialog button.des{background:var(--w-hr-dim);color:var(--w-hr)} .w-fade{animation:wfade .3s ease} @keyframes wfade{from{opacity:0}to{opacity:1}} /* ---------- 第 48 轮 ---------- */ /* 手表里的