/* finesse · register=h5 · morph=A.1-daily-desk (app shell, unchanged furniture) · motion layer only (U-222)
 * A=page tokens (burnt orange on warm paper) · D=R1 transitions + hand-written rAF physics (wheel fling, swipe rubber-band), clip-path reveal
 * beats: 圆形扩散进详情 · 滑动吸附划线 · 惯性滚轮 · 完成打勾；still = every control at its end state, no motion
 * 交互层：用页面自己的颜色（--accent 等），没有的用默认值 */
:root { --fx-ease: cubic-bezier(.32, .86, .28, 1); --fx-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* ── 1 完成反馈按钮 ─────────────────────────────────────────── */
.fx-btn { position: relative; overflow: visible; }
.fx-btn .fx-lb { display: inline-flex; align-items: center; justify-content: center; gap: inherit; transition: opacity .18s, transform .28s var(--fx-ease); }
.fx-btn .fx-ind { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.fx-btn .fx-ind > * { grid-area: 1 / 1; }
.fx-spin { width: 20px; height: 20px; border-radius: 50%; border: 2.4px solid currentColor; border-right-color: transparent; opacity: 0; transform: scale(.6); transition: opacity .18s, transform .28s var(--fx-ease); }
.fx-btn.fx-busy .fx-spin { opacity: .9; transform: none; animation: fx-rot .7s linear infinite; }
.fx-btn .fx-ind svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.fx-btn.fx-busy .fx-lb, .fx-btn.fx-ok .fx-lb { opacity: 0; transform: scale(.86); }
.fx-btn.fx-ok .fx-ind svg { stroke-dashoffset: 0; transition: stroke-dashoffset .34s var(--fx-ease) .04s; }
.fx-btn.fx-ok { transform: scale(1.02); transition: transform .3s var(--fx-spring), background-color .2s; }
.fx-btn.fx-ok::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--up, #2f7a55); opacity: 0; animation: fx-ring .62s var(--fx-ease); pointer-events: none; }
.btn-main.fx-btn.fx-busy:disabled, .btn-main.fx-btn.fx-ok:disabled, .btn-main.fx-btn.fx-ok { background: var(--accent, #c4561f); color: var(--on-accent, #fffaf4); box-shadow: 0 14px 28px -14px var(--glow, rgba(196, 86, 31, .34)); }
.btn-main.fx-btn.fx-ok { background: var(--up, #2f7a55); box-shadow: 0 14px 28px -14px rgba(47, 122, 85, .5); }
.mini.fx-btn.fx-ok { background: var(--up-soft, rgba(47, 122, 85, .12)); color: var(--up, #2f7a55); border-color: transparent; }
.mini.fx-btn .fx-spin { width: 14px; height: 14px; border-width: 2px; }
.mini.fx-btn .fx-ind svg { width: 18px; height: 18px; }
.fx-btn.fx-bad { animation: fx-shake .42s var(--fx-ease); }
@keyframes fx-rot { to { transform: rotate(360deg); } }
@keyframes fx-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.35); } }
@keyframes fx-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.fx-bump { animation: fx-bump .38s var(--fx-spring); display: inline-block; }
@keyframes fx-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ── 2 勾选联动 ─────────────────────────────────────────────── */
.fx-ck { position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-2, rgba(48, 32, 20, .2)); background: var(--bg, #fffdf9);
         display: grid; place-items: center; transition: background-color .18s, border-color .18s, transform .22s var(--fx-spring); }
.fx-ck::before { content: ""; position: absolute; inset: -10px; }  /* 点的范围 46px */
.fx-ck svg { width: 18px; height: 18px; fill: none; stroke: var(--on-accent, #fffaf4); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-ck .fx-ck-v { stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset .26s var(--fx-ease); }
.fx-ck .fx-ck-m { opacity: 0; transform: scaleX(.3); transform-origin: center; transition: opacity .15s, transform .22s var(--fx-ease); }
.fx-ck[aria-checked="true"], [aria-checked="true"] > .fx-ck, [aria-checked="mixed"] > .fx-ck { background: var(--accent, #c4561f); border-color: var(--accent, #c4561f); }
.fx-ck[aria-checked="true"] .fx-ck-v, [aria-checked="true"] > .fx-ck .fx-ck-v { stroke-dashoffset: 0; }
[aria-checked="mixed"] > .fx-ck .fx-ck-m { opacity: 1; transform: none; }
.fx-ck:active, .fx-ck-all:active .fx-ck { transform: scale(.88); }
.fx-ck-all { display: inline-flex; align-items: center; gap: 9px; height: 44px; font-weight: 800; font-size: 15px; color: var(--ink-1, #1f1710); }
.fx-off { opacity: .5; transition: opacity .2s; }
.fx-off input { pointer-events: none; }

/* ── 3 叠卡展开 ─────────────────────────────────────────────── */
.fx-deck { --h: 74px; --gap: 9px; --peek: 9px; position: relative; height: calc(var(--h) + min(var(--n) - 1, 2) * var(--peek)); transition: height .46s var(--fx-ease); }
.fx-deck.open { height: calc(var(--n) * (var(--h) + var(--gap)) - var(--gap)); }
.fx-dc { position: absolute; left: 0; right: 0; top: 0; height: var(--h); z-index: calc(20 - var(--i)); transform-origin: 50% 100%;
         transform: translateY(calc(var(--i) * (var(--h) + var(--gap)))); transition: transform .5s var(--fx-ease) calc(var(--i) * 26ms), opacity .3s, background-color .3s; }
.fx-deck:not(.open) .fx-dc { transform: translateY(calc(min(var(--i), 2) * var(--peek))) scale(calc(1 - min(var(--i), 2) * .05)); opacity: calc(1 - max(var(--i) - 2, 0)); transition-delay: 0s; }
.fx-deck:not(.open) .fx-dc + .fx-dc { background: var(--panel-2, #f8f3eb); }
.fx-dc > * { transition: opacity .22s .12s; }
.fx-deck:not(.open) .fx-dc + .fx-dc > * { opacity: 0; transition-delay: 0s; }

/* ── 4 吸附划线 ─────────────────────────────────────────────── */
.fx-swr { position: relative; border-radius: var(--r, 18px); }
.fx-trk { position: absolute; inset: 0; border-radius: inherit; background: var(--up-soft, rgba(47, 122, 85, .12)); color: var(--up, #2f7a55); display: flex; align-items: center; gap: 8px;
          padding-left: 18px; font-weight: 800; font-size: 15px; opacity: 0; }
.fx-trk svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: scale(calc(.6 + var(--p, 0) * .4)); }
.fx-sw { position: relative; touch-action: pan-y; transform: translateX(var(--dx, 0)); transition: transform .55s var(--fx-spring), opacity .3s; }
.fx-sw.fx-drag { transition: none; }
.fx-swr:has(.fx-drag) .fx-trk, .fx-swr:has(.fx-armed) .fx-trk { opacity: 1; }
.fx-swr:has(.fx-armed) .fx-trk { background: var(--up, #2f7a55); color: var(--on-accent, #fffaf4); }
.fx-strike { background: linear-gradient(currentColor, currentColor) 0 58% / 0 2px no-repeat; transition: background-size .42s var(--fx-ease) .1s; }
.fx-struck .fx-strike { background-size: 100% 2px; }
.fx-struck { opacity: .62; }

/* ── 5 惯性滚轮 ─────────────────────────────────────────────── */
.fx-wheel { position: relative; height: 126px; overflow: hidden; touch-action: none; perspective: 420px; border-radius: 14px; background: var(--panel-2, #f8f3eb); user-select: none; -webkit-user-select: none;
            -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); }
.fx-wheel::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 42px; margin-top: -21px; border-radius: 11px; background: var(--bg, #fffdf9); box-shadow: 0 1px 3px rgba(60, 38, 20, .08); }
.fx-wl { position: absolute; left: 0; right: 0; top: 50%; height: 42px; margin-top: -21px; display: grid; place-items: center; font: 800 21px/1 var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
         color: var(--ink-1, #1f1710); will-change: transform, opacity; pointer-events: none; }
.fx-wheel input { position: absolute; left: 6px; right: 6px; top: 50%; height: 42px; margin-top: -21px; z-index: 2; border: 0; background: transparent; text-align: center;
                  font: 800 22px/1 var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; color: var(--ink-1, #1f1710); width: auto; min-width: 0; }
.fx-wheel input:focus { outline: 2px solid var(--accent, #c4561f); outline-offset: -2px; border-radius: 11px; background: var(--bg, #fffdf9); }
.fx-wheel.fx-moving input { color: transparent; }
.fx-wheel:not(.fx-moving) .fx-wl.mid { visibility: hidden; }

/* ── 6 圆形扩散转场 ─────────────────────────────────────────── */
.fx-rv { transform: none !important; clip-path: circle(0 at var(--rx) var(--ry)); transition: clip-path .4s cubic-bezier(.4, 0, .6, 1) !important; will-change: clip-path; }
.fx-rv.fx-rv-in { clip-path: circle(var(--rr) at var(--rx) var(--ry)); transition: clip-path .56s var(--fx-ease) !important; }
.fx-rv > .push-body, .fx-rv > .push-head { transition: transform .56s var(--fx-ease), opacity .4s; }
.fx-rv:not(.fx-rv-in) > .push-body { transform: scale(.97); opacity: .3; }
.fx-rv-off, .fx-rv-off * { transition: none !important; }

/* ── 底部面板下拉 ───────────────────────────────────────────── */
.fx-pull { transition: none !important; }

/* ── 进场：一行行依次落位 ───────────────────────────────────── */
.fx-in > * { animation: fx-rise .42s var(--fx-ease) both; animation-delay: calc(min(var(--k, 0), 6) * 45ms); }
@keyframes fx-rise { from { opacity: 0; transform: translateY(8px); } }

/* ── app：提醒设置 ─────────────────────────────────────────── */
.fx-ov { position: absolute; inset: 0; z-index: 120; pointer-events: none; }
.fx-ov.on { pointer-events: auto; }
.fx-ov-bg { position: absolute; inset: 0; background: rgba(31, 23, 16, .38); opacity: 0; transition: opacity .3s; }
.fx-ov.on .fx-ov-bg { opacity: 1; }
.fx-ov-p { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; background: var(--bg, #fffdf9); border-radius: 28px 28px 0 0; padding: 10px 18px calc(env(safe-area-inset-bottom) + 18px);
           transform: translateY(102%); transition: transform .42s var(--fx-ease); box-shadow: 0 -20px 50px -30px rgba(60, 38, 20, .5); color: var(--ink-1, #1f1710); font-family: var(--sans, sans-serif); }
.fx-ov-p.on { transform: none; }
.fx-ov-grab { width: 42px; height: 4px; border-radius: 99px; background: rgba(48, 32, 20, .16); margin: 0 auto 12px; }
.fx-ov-b h3 { font-size: 19px; font-weight: 800; margin: 0 0 12px; }
.fx-hero { border-radius: 16px; padding: 14px 16px; background: rgba(184, 64, 47, .08); display: flex; flex-direction: column; gap: 3px; }
.fx-hero b { font-size: 17px; font-weight: 800; color: var(--down, #b8402f); }
.fx-hero span { font-size: 13.5px; color: var(--ink-2, #4a3f34); }
.fx-hero.ok { background: var(--up-soft, rgba(47, 122, 85, .12)); }
.fx-hero.ok b { color: var(--up, #2f7a55); }
.fx-rule { font-size: 13.5px; color: var(--ink-3, #75655a); line-height: 1.6; margin: 10px 2px 6px; }
.fx-sts { border: 1px solid var(--line, rgba(48, 32, 20, .1)); border-radius: 16px; overflow: hidden; }
.fx-st { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 60px; }
.fx-st + .fx-st { border-top: 1px solid var(--line, rgba(48, 32, 20, .1)); }
.fx-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--warn, #9a6512); }
.fx-dot.ok { background: var(--up, #2f7a55); }
.fx-dot.na { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-3, #75655a); }
.fx-st-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fx-st-m b { font-size: 15.5px; font-weight: 800; }
.fx-st-m small { font-size: 12.5px; color: var(--ink-3, #75655a); line-height: 1.45; }
.fx-st-go { flex: none; height: 36px; padding: 0 13px; border-radius: 10px; background: var(--accent-soft, rgba(196, 86, 31, .11)); color: var(--accent, #c4561f); font-weight: 800; font-size: 13.5px; border: 0; }
.fx-st-go:active, .fx-b:active { transform: scale(.95); }
.fx-ov-btns { display: flex; gap: 10px; margin-top: 14px; }
.fx-b { flex: 1; height: 50px; border-radius: 14px; font-weight: 800; font-size: 16px; border: 1px solid var(--line-2, rgba(48, 32, 20, .16)); background: var(--bg, #fffdf9); color: var(--ink-1, #1f1710); }
.fx-snd { margin-top: 12px; }
.fx-tmsg { text-align: center; font-size: 13.5px; color: var(--up, #2f7a55); margin-top: 10px; min-height: 1em; }
.fx-tmsg:empty { display: none; }
.fx-tmsg.bad { color: var(--warn, #a8541b); }
.fx-ver { text-align: center; font-size: 12.5px; color: var(--ink-3, #75655a); margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .fx-btn .fx-lb, .fx-spin, .fx-ck, .fx-ck .fx-ck-v, .fx-ck .fx-ck-m, .fx-deck, .fx-dc, .fx-dc > *, .fx-sw, .fx-strike, .fx-rv, .fx-ov-p, .fx-ov-bg { transition: none !important; }
  .fx-btn.fx-busy .fx-spin { animation: none; }
  .fx-btn.fx-ok::after, .fx-btn.fx-bad, .fx-bump, .fx-in > * { animation: none !important; }
}

/* 麒麟 / 华为自研显卡的华为、荣耀手机（html.lowfx，shared/ui.js 认）：毛玻璃、一直转的动画会让屏幕一直闪（10-22 华为 P40 Pro，U-296），关掉；底栏本来就是 94% 不透明，看不出差别 */
html.lowfx *, html.lowfx *::before, html.lowfx *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lowfx .lt-ic .lt-hand, html.lowfx .lt-ic .lt-pulse { animation: none !important; }
html.lowfx .lt-ic .lt-pulse { opacity: 0; }
html.lowfx .rec-card .ring::before { animation: none !important; display: none; }