:root{--bg:#f7f4ef;--card:#fff;--ink:#2f3437;--muted:#80878c;--line:#e8e2d8;--line2:#f1ece4;--pri:#3f7f86;--pri-ink:#2f6a70;--soft:#e7f1f1;--acc:#d48a5c;--accs:#fbeee4;--ok:#3f8f6b;--oks:#e4f3ec;--bad:#c4596b;--bads:#f8e6ea;--r:16px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;font-size:16px;line-height:1.6}
button{font:inherit;cursor:pointer}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(247,244,239,.95);border-bottom:1px solid var(--line)}
.logo{width:32px;height:32px;border-radius:9px;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.brand b{display:block;font-size:16px;line-height:1.2}.brand span{font-size:12px;color:var(--muted)}
.sp{flex:1}
.wrap{max-width:720px;margin:0 auto;padding:14px 16px 90px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
h2{font-size:18px;margin:0 0 8px}
.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:12px}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:10px 16px;font-size:15px}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.big{width:100%;padding:16px;font-size:18px;font-weight:700;border-radius:14px}
.ex{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line2)}
.ex:last-child{border:0}
.ex .ic{width:44px;height:44px;border-radius:12px;background:var(--soft);display:grid;place-items:center;color:var(--pri);font-weight:800}
.ex .main{flex:1}.ex .main b{display:block}
.done{background:var(--oks);color:var(--ok);font-size:12px;border-radius:10px;padding:2px 8px}
/* 運動畫面 */
.stage{position:fixed;inset:0;background:#111;z-index:20;display:none}
.stage.on{display:block}
.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .mirror{transform:scaleX(-1)}
.hud{position:absolute;left:0;right:0;top:0;padding:14px 16px;display:flex;justify-content:space-between;align-items:flex-start;color:#fff;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0))}
.hud .nm{font-size:18px;font-weight:700}.hud .set{font-size:14px;opacity:.85}
.count{position:absolute;right:16px;top:64px;color:#fff;text-align:right;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.count b{font-size:84px;line-height:1;font-weight:800}.count span{font-size:20px}
.live{position:absolute;left:16px;top:70px;color:#fff;font-size:16px;background:rgba(0,0,0,.35);border-radius:10px;padding:4px 10px}
.cue{position:absolute;left:16px;right:16px;bottom:96px;text-align:center;font-size:24px;font-weight:800;color:#fff;background:var(--acc);border-radius:14px;padding:10px;display:none}
.cue.on{display:block}
.ctrl{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;display:flex;gap:10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55))}
.ctrl .btn{flex:1;background:rgba(255,255,255,.92)}
.msg{position:absolute;left:16px;right:16px;top:45%;text-align:center;color:#fff;font-size:18px;background:rgba(0,0,0,.45);border-radius:14px;padding:14px}
/* 表單 */
label.f{display:block;font-size:13px;color:var(--muted);margin-top:8px}
input,select{font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;width:100%;background:#fff;color:var(--ink)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tabs{display:flex;gap:6px;margin-bottom:12px}.tabs button{flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px;color:var(--muted)}
.tabs button.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line2);font-size:14px}.kv:last-child{border:0}
.notice{background:var(--accs);color:#8a6222;border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:12px}
/* 疼痛與費力回報 */
.painbox{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.45);display:flex;align-items:flex-end}
.painbox[hidden]{display:none}
.painbox .sheet{background:#fff;width:100%;border-radius:20px 20px 0 0;padding:18px 16px 26px;max-height:90vh;overflow:auto}
.scale{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;margin-top:6px}
.sc{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 0;font-size:15px}
.sc.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
/* 示範動畫 */
.demo{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#f7f4ef}
.demo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease-in-out}
.demo img.on{opacity:1}
.demo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
.demo.sm{width:56px;height:56px;border-radius:12px}
.demo.md{width:min(60vw,260px);margin:0 auto 10px}
.demo.lg{width:100%;max-width:420px;margin:10px auto 0}
.thumb{border:0;padding:0;background:none;border-radius:12px;flex:none}