/* Wang Fu fitness — pro tools. Light pages (html.xl) use the calm palette; home additions stay on the dark home. */
:root{--xbg:#faf7f2;--xink:#2b2420;--xmut:#6f655c;--xacc:#a1463e;--xgold:#a8894a;--xcard:#fff;--xline:#e8e0d4}
html.xl,html.xl body{background:#faf7f2;color:#2b2420}
html.xl .fbg,html.xl .fbg-dim{display:none}
html.xl .fh{background:rgba(250,247,242,.88)}
html.xl .fh-b{background:#efe6d8;color:#2b2420}
html.xl .fh-t b,html.xl .fh-l button{color:#2b2420}
html.xl .fh-l button{background:#efe6d8}
html.xl .fh-l button.on{background:#a1463e;color:#fff}
html.xl .sh{color:#2b2420}
html.xl .btn{background:#a1463e;color:#fff}
html.xl .btn.ghost{background:#efe6d8;color:#2b2420}
.xsub{margin:-2px 2px 12px;color:var(--xmut);font-size:14px;line-height:1.5}
.xmut{color:var(--xmut);font-size:13px;line-height:1.55;margin:6px 0}
html:not(.xl) .xmut{color:rgba(255,255,255,.7)}
.xc{background:var(--xcard);border:1px solid var(--xline);border-radius:18px;padding:14px;margin:0 0 12px;box-shadow:0 1px 2px rgba(60,40,20,.04)}
.xc h3{margin:0 0 10px;font-size:16px}
.xc-c{text-align:center;display:flex;flex-direction:column;align-items:center}
.xh2{font-size:17px;margin:20px 2px 10px}.xh2 small{color:var(--xmut);font-weight:400;font-size:13px}
.xps{display:grid;grid-template-columns:1fr;gap:10px}
.xp{display:flex;gap:12px;align-items:center;text-align:start;background:#fff;border:1px solid var(--xline);border-radius:16px;padding:10px;color:#2b2420;width:100%}
.xp-f{width:74px;height:74px;flex:none;border-radius:12px;background:#f3ece1;overflow:hidden;display:grid;place-items:center}
.xp-f img,.xp-f svg{width:100%;height:100%;object-fit:cover}
.xp-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.xp-t b{font-size:15px}.xp-t small{color:var(--xmut);font-size:12.5px;line-height:1.4}
.xp-t em{font-style:normal;font-size:12px;color:var(--xgold)}
.xp-t .lvl i{background:#e2d6c4}.xp-t .lvl i.on{background:var(--xacc)}
.xbar{display:block;height:6px;border-radius:3px;background:#efe6d8;overflow:hidden;margin-top:4px}
.xbar>i{display:block;height:100%;background:var(--xacc);border-radius:3px}
.xchips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}.xchips::-webkit-scrollbar{display:none}
.xchip{flex:none;padding:7px 13px;border-radius:999px;background:#efe6d8;color:#2b2420;font-size:13.5px;white-space:nowrap}
.xchip.on{background:var(--xacc);color:#fff}
.xseg{display:flex;background:#efe6d8;border-radius:12px;padding:3px;gap:3px;margin:0 0 10px}
.xseg button{flex:1;padding:8px 4px;border-radius:9px;font-size:13.5px;color:#2b2420}
.xseg button.on{background:#fff;color:var(--xacc);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.xexl{display:flex;flex-direction:column;gap:8px}
.xex{display:flex;gap:12px;align-items:center;text-align:start;background:#fff;border:1px solid var(--xline);border-radius:14px;padding:8px;color:#2b2420;width:100%}
.xex b{font-size:14.5px;display:block}.xex small{color:var(--xmut);font-size:12px}
.xfig{width:64px;height:64px;flex:none;border-radius:10px;background:#f3ece1;overflow:hidden;display:grid;place-items:center}
.xfig svg,.xfig img{width:100%;height:100%}
.sh-card .xex{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
.sh-card .xex small{color:rgba(255,255,255,.65)}
.xin{width:100%;font:inherit;font-size:16px;padding:10px 12px;border-radius:12px;border:1px solid var(--xline);background:#fff;color:#2b2420;margin:0 0 8px}
.xin:focus{outline:2px solid rgba(161,70,62,.35);border-color:var(--xacc)}
textarea.xin{resize:vertical}
.xsearch{margin-bottom:10px}
.xf{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--xmut)}
.xf .xin,.xf select{margin:0}
.xgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.xrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.xrow .xin{flex:1;min-width:120px;margin:0}
.xbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:12px;background:#efe6d8;color:#2b2420;font-size:14.5px;text-decoration:none;margin:4px 0}
.xbtn.pri{background:var(--xacc);color:#fff;font-weight:600}
.xbtn.wide{width:100%}
.sh-card .xbtn{background:rgba(255,255,255,.14);color:#fff}
.xlink{color:var(--xacc);font-size:13.5px;padding:6px;text-decoration:none}
.xring{position:relative;width:170px;height:170px;margin:4px auto}
.xring svg{width:100%;height:100%;transform:rotate(-90deg)}
.xr-bg{fill:none;stroke:#efe6d8;stroke-width:11}
.xr-fg{fill:none;stroke-width:11;stroke-linecap:round;transition:stroke-dasharray .6s}
.xring>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.xring b{font-size:26px}.xring small{color:var(--xmut);font-size:12.5px}
.xchart{width:100%;height:auto;display:block;margin:6px 0}
.xchart text{font-size:10px;fill:#8a7f74}
.xgoal{stroke:var(--xgold);stroke-dasharray:4 4;stroke-width:1.5}
.xline{fill:none;stroke:var(--xacc);stroke-width:2.5;stroke-linejoin:round}
.xdot{fill:#fff;stroke:var(--xacc);stroke-width:2}
.xv-t{font-weight:600;fill:#2b2420!important}
.xkpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.xkpi>div{background:#fff;border:1px solid var(--xline);border-radius:14px;padding:10px;text-align:center}
.xkpi b{display:block;font-size:19px;color:var(--xacc)}.xkpi small{font-size:11.5px;color:var(--xmut)}
.xbig{font-size:30px;font-weight:700;color:var(--xacc)}
.xbmi{height:10px;border-radius:5px;background:linear-gradient(90deg,#5b8def 0 18%,#2bb39a 18% 50%,#e5b450 50% 70%,#d0614f 70%);position:relative;margin:10px 0 18px}
.xbmi i{position:absolute;top:-4px;width:4px;height:18px;background:#2b2420;border-radius:2px}
.xtab{display:flex;gap:6px;margin:0 0 12px}
.xsets{width:100%;border-collapse:collapse;font-size:14px}
.xsets td,.xsets th{padding:4px;text-align:center}.xsets th{color:var(--xmut);font-weight:400;font-size:12px}
.xsets input{width:100%;text-align:center;margin:0;padding:8px 4px}
.xsets tr.ok td{background:#eef6f0}
.xok{width:34px;height:34px;border-radius:50%;background:#efe6d8;color:#2b7a4b;font-weight:700}
tr.ok .xok{background:#2b9a5a;color:#fff}
.xgx{margin-bottom:12px}.xgx-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}.xgx-h b{flex:1}
.xgymbar{position:sticky;top:58px;z-index:3;display:flex;gap:10px;align-items:center;justify-content:space-between;background:#2b2420;color:#fff;border-radius:14px;padding:10px 14px;margin:0 0 12px}
.xrest{display:flex;gap:6px;align-items:center;color:#f3d48a}.xrest button{background:rgba(255,255,255,.15);border-radius:8px;padding:4px 8px;color:#fff}
.xheat{display:grid;grid-template-columns:repeat(15,1fr);gap:3px}
.xheat i{aspect-ratio:1;border-radius:3px;background:#efe6d8}
.xheat i.h1{background:#e3b9b3}.xheat i.h2{background:#c97a70}.xheat i.h3{background:#a1463e}
.xhist{list-style:none;padding:0;margin:0}
.xhist li{display:flex;gap:10px;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--xline);font-size:14px}
.xhist li span{color:var(--xmut);text-align:end}
.xnote{background:#f6efe2;border-radius:12px;padding:10px 12px;font-size:13px;color:#5d5146;line-height:1.55;margin:0 0 12px}
.xsw{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600}
.xsw input{width:44px;height:24px;accent-color:var(--xacc)}
.xach{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.xach>div{background:#fff;border:1px solid var(--xline);border-radius:16px;padding:12px;text-align:center;opacity:.6;filter:grayscale(1)}
.xach>div.on{opacity:1;filter:none;border-color:var(--xgold)}
.xach span{font-size:30px;display:block}.xach b{display:block;font-size:14px;margin:4px 0}.xach small{font-size:12px;color:var(--xmut)}
.xcoach{display:flex;gap:12px;align-items:center;text-align:start;width:100%;background:#fff;border:1px solid var(--xline);border-inline-start:5px solid var(--cc);border-radius:16px;padding:10px;margin:0 0 10px;color:#2b2420}
.xcoach img{width:72px;height:72px;border-radius:14px;object-fit:cover;flex:none;background:#f3ece1}
.xcoach b{display:block;font-size:16px;color:var(--cc)}.xcoach small{font-size:13px;color:var(--xmut);line-height:1.45}
.xchero{display:flex;gap:12px;align-items:center;background:color-mix(in srgb,var(--cc) 10%,#fff);border-radius:18px;padding:12px;margin:0 0 12px}
.xchero img{width:90px;height:90px;border-radius:16px;object-fit:cover;flex:none}
.xchero p{margin:0;font-size:14px;line-height:1.55}
.xhab{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.xhb{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:#faf7f2}
.xhb>button:first-child{width:32px;height:32px;border-radius:50%;border:2px solid #cdbfa9;flex:none;color:#fff;font-weight:700}
.xhb.on>button:first-child{background:#2b9a5a;border-color:#2b9a5a}
.xhb>span{flex:1;min-width:0;display:flex;flex-direction:column}
.xhb small{font-size:12px;color:var(--xgold)}
.xhb em{display:flex;gap:3px;margin-top:4px}.xhb em i{width:9px;height:9px;border-radius:2px;background:#e8e0d4}.xhb em i.on{background:#2b9a5a}
.xrng{display:flex;align-items:center;gap:10px;font-size:14px;margin:6px 0}.xrng span{width:110px;flex:none}.xrng input{flex:1;accent-color:var(--xacc)}
.xbr{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0}
.xbr-c{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#c97a70,#a1463e);transform:scale(.6);transition:transform 4s ease-in-out}
.xbr-c.in{transform:scale(1.15)}.xbr-c.hold{transform:scale(var(--hs,1.15))}.xbr-c.out{transform:scale(.6)}
.xbr b{font-size:20px}.xtm{font-size:52px!important;font-variant-numeric:tabular-nums}
.xav{display:inline-block;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#efe6d8;flex:none}
.xav img,.xav svg{width:100%;height:100%;object-fit:cover;display:block}
.xav.big{width:120px;height:120px;margin:4px auto 12px}
.xavg{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.xavg button{border-radius:50%;overflow:hidden;border:3px solid transparent;aspect-ratio:1}.xavg button.on{border-color:var(--xacc)}
.xavg img{width:100%;height:100%;object-fit:cover;display:block}
.xavo{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.xavo button{min-width:38px;height:38px;border-radius:12px;background:#efe6d8;padding:0 10px;border:2px solid transparent;font-size:13px}
.xavo button.on{border-color:var(--xacc)}.xavo i{display:block;width:22px;height:22px;border-radius:50%}
.xtoast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#2b2420;color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:99;max-width:90vw;box-shadow:0 6px 20px rgba(0,0,0,.25);animation:xt 2.6s forwards}
@keyframes xt{0%{opacity:0;transform:translate(-50%,10px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.xmood{display:flex;gap:6px}.xmood button{font-size:24px;padding:4px;border-radius:10px;opacity:.5}.xmood button.on{opacity:1;background:#efe6d8}
.xul{margin:0;padding-inline-start:18px;font-size:14px;line-height:1.7}
.xcred{font-size:11.5px;color:var(--xmut);line-height:1.5;margin:14px 2px}
.xexm{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.xtag{display:inline-block;background:#efe6d8;color:#5d5146;border-radius:999px;padding:3px 10px;font-size:12px;margin:2px}
.sh-card .xtag{background:rgba(255,255,255,.14);color:#fff}
.xsteps{font-size:13px}
/* home (dark) */
.xhome{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;padding:10px 12px;border-radius:18px;background:var(--card,rgba(24,20,18,.72));border:1px solid rgba(255,255,255,.12)}
.xhome-a{display:flex;align-items:center;gap:10px;text-align:start;min-width:0}
.xhome-a span:last-child{display:flex;flex-direction:column;min-width:0}.xhome-a small{color:rgba(255,255,255,.7);font-size:12px}
.xhome-a b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.xhome-r{display:flex;gap:10px}
.xhome-r button{display:flex;flex-direction:column;align-items:center;gap:3px}
.xhome-r i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:18px;background:radial-gradient(closest-side,#1b1714 76%,transparent 78% 100%),conic-gradient(var(--c) var(--p),rgba(255,255,255,.14) 0)}
.xhome-r small{font-size:11px;color:rgba(255,255,255,.75)}
.xall-b{display:flex;flex-direction:column;gap:4px;width:100%;text-align:start;margin:14px 0 4px;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(161,70,62,.92),rgba(168,137,74,.9));color:#fff}
.xall-b b{font-size:16px}.xall-b small{font-size:12.5px;opacity:.9;line-height:1.45}
.xscroll{display:flex;gap:10px;overflow-x:auto;padding:2px 0 8px;scroll-snap-type:x mandatory;scrollbar-width:none}.xscroll::-webkit-scrollbar{display:none}
.xch{flex:none;width:132px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;text-align:start;background:var(--card,rgba(24,20,18,.72));border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px}
.xch>span{display:block;height:92px;border-radius:10px;background:#f3ece1;overflow:hidden}.xch>span svg,.xch>span img{width:100%;height:100%}
.xch b{font-size:13.5px;line-height:1.3}.xch small{font-size:11.5px;color:rgba(255,255,255,.7)}
.xtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 8px}
.xtiles button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px;border-radius:14px;background:var(--card,rgba(24,20,18,.72));border:1px solid rgba(255,255,255,.12)}
.xtiles span{font-size:24px}.xtiles b{font-size:12px;font-weight:500;text-align:center;line-height:1.3}
.cd.cd-x{visibility:hidden}
.xgymgo{width:100%;margin:10px 0}
@media (min-width:700px){.xps{grid-template-columns:1fr 1fr}.xach{grid-template-columns:repeat(4,1fr)}.xtiles{grid-template-columns:repeat(6,1fr)}.xch{width:160px}.xexl.xlib2{display:grid;grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.xbr-c,.xr-fg{transition:none}.xtoast{animation:none}}
.xrow.xc-c{flex-direction:row;justify-content:center}
p.xc-c{display:block;text-align:center}
.xrow.xc-c .xbtn{padding:9px 11px;font-size:14px}
.xftab{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--xline);border-radius:14px;overflow:hidden;margin:0 0 12px;font-size:14px}
.xftab th{font-size:12px;color:var(--xmut);font-weight:500;padding:8px 10px;text-align:end;background:#f6efe2}
.xftab td{padding:9px 10px;border-top:1px solid var(--xline);text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.xftab td:first-child,.xftab th:first-child{text-align:start;white-space:normal}
.xgymbar{flex-wrap:wrap}.xgymbar>span:first-child{white-space:nowrap}
.xrest{white-space:nowrap;flex-wrap:nowrap}.xgymbar .xbtn{margin:0}