/* ═══ EARN: time bank, exercise tiles, workout screen ═══ */

/* time bank card */
.bank{display:grid;grid-template-columns:1fr auto;gap:14px 12px;padding:20px;border-radius:26px;margin-top:14px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#ff7a3d 0%,#ff4f9a 45%,#c14dff 80%,#7b5cff 100%);box-shadow:0 18px 40px -18px rgba(255,79,154,.6)}
.bank::after{content:"";position:absolute;right:-60px;top:-70px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.13);pointer-events:none}
.bank>*{position:relative;z-index:1}
.bank-k{font-size:13px;font-weight:700;opacity:.9}
.bank-v{font-stretch:125%;font-weight:850;font-size:52px;line-height:1;letter-spacing:-.02em;margin-top:4px}
.bank-v small{font-size:18px;font-weight:700;letter-spacing:0;opacity:.9}
.bank-s{font-size:12.5px;opacity:.85;margin-top:4px}
.bank-ring{position:relative;width:78px;height:78px;align-self:center}
.bank-ring svg{width:78px;height:78px}
.bank-ring div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.bank-ring b{font-size:19px;font-weight:850}
.bank-ring small{font-size:10.5px;opacity:.85}
.bank-btns{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.bank .nbtn{flex:1;border:none;border-radius:13px;padding:12px 14px;font-size:14px;font-weight:780;cursor:pointer;background:#fff;color:#2a1240}
.bank .nbtn.ghost{background:rgba(255,255,255,.2);color:#fff}
.bank-run{flex:1.4;display:flex;flex-direction:column;font-size:12px;font-weight:650;opacity:.95}
.bank-run b{font-size:24px;font-weight:850;font-stretch:120%}
.bank-sm{padding:16px 18px;grid-template-columns:1fr auto}
.bank-sm .bank-v{font-size:40px}
.bank-sm .bank-ring,.bank-sm .bank-ring svg{width:64px;height:64px}

/* scroll-time bar under the header */
.sess-bar{position:sticky;top:0;z-index:49;display:flex;align-items:center;gap:10px;margin:0 20px;padding:10px 14px;border-radius:14px;background:linear-gradient(135deg,#c14dff,#7b5cff);color:#fff;font-size:13.5px;font-weight:650;box-shadow:0 10px 24px -10px rgba(123,92,255,.8)}
.sess-bar b{font-size:16px;font-weight:850;margin-left:auto}
.sess-bar button{border:none;border-radius:10px;padding:7px 11px;background:#fff;color:#2a1240;font-weight:750;font-size:12.5px;cursor:pointer}
.sess-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.6s ease infinite}

/* exercise tiles */
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ex-tile{position:relative;overflow:hidden;border:none;border-radius:22px;padding:16px;text-align:left;color:#fff;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:132px;box-shadow:0 14px 30px -18px rgba(0,0,0,.9);transition:transform .12s ease}
.ex-tile:active{transform:scale(.97)}
.ex-tile::after{content:"";position:absolute;right:-30px;bottom:-40px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.14)}
.ex-tile.wide{grid-column:1/-1;min-height:118px}
.ex-ic{font-size:30px;line-height:1;margin-bottom:6px}
.ex-n{font-stretch:118%;font-weight:820;font-size:19px;letter-spacing:-.01em}
.ex-e{font-size:12.5px;font-weight:650;opacity:.9}
.ex-b{margin-top:auto;padding-top:8px;font-size:11.5px;font-weight:700;opacity:.95;position:relative;z-index:1}

/* challenge, week, badges */
.chall{display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line);cursor:pointer}
.chall-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:25px;flex-shrink:0}
.week{padding:16px 14px 12px}
.week-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end}
.wb{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:var(--muted)}
.wb-col{height:96px;width:100%;max-width:30px;border-radius:9px;background:var(--ov07);display:flex;align-items:flex-end;overflow:hidden}
.wb-col i{display:block;width:100%;border-radius:9px;background:linear-gradient(180deg,#c14dff,#4d8bff)}
.wb b{font-size:11px;color:var(--text2);min-height:14px}
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.badge-t{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px;border-radius:18px;background:var(--surf);border:1px solid var(--line);opacity:.55}
.badge-t.on{opacity:1;background:linear-gradient(150deg,rgba(255,194,75,.18),rgba(193,77,255,.14));border-color:rgba(255,194,75,.35)}
.badge-ic{grid-row:1/3;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:21px;background:var(--ov07)}
.badge-t b{font-size:13.5px;font-weight:720;line-height:1.2}
.badge-t span{font-size:11.5px;color:var(--muted);line-height:1.25}
.perm-ok{color:var(--mint);font-weight:750;font-size:13.5px;white-space:nowrap}
.perm-no{color:var(--red);font-weight:750;font-size:13.5px;white-space:nowrap}

/* workout setup + results */
.wk-hero,.res-hero{border-radius:28px;padding:24px 22px;color:#fff;position:relative;overflow:hidden;margin-top:8px}
.wk-hero::after,.res-hero::after{content:"";position:absolute;right:-50px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.14)}
.wk-hero>*,.res-hero>*{position:relative;z-index:1}
.wk-hero-ic{font-size:46px;line-height:1}
.res-big{font-stretch:125%;font-weight:850;font-size:76px;line-height:1;letter-spacing:-.03em;margin:10px 0 6px}
.res-big small{font-size:26px;letter-spacing:0}
.res-pill{margin-top:10px;padding:12px 16px;border-radius:16px;background:var(--fire);color:#1d0d05;font-weight:750;font-size:14.5px;animation:fadeUp .4s ease both}

/* live workout */
.wk{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;color:#fff;overflow:hidden;max-width:440px;margin:0 auto}
.wk-cam{background:#000}
.wk video,.wk canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.wk-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.7) 100%);pointer-events:none;transition:box-shadow .3s}
.wk.bad .wk-shade{box-shadow:inset 0 0 0 4px rgba(255,90,110,.75)}
.wk-top{position:relative;z-index:2;width:100%;display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 16px 0}
.wk-x{width:40px;height:40px;border-radius:50%;border:none;background:rgba(0,0,0,.35);color:#fff;font-size:17px;cursor:pointer;backdrop-filter:blur(8px)}
.wk-title{flex:1;font-weight:780;font-size:16px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.wk-earn{padding:8px 13px;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);font-weight:800;font-size:14px}
.wk-plain .wk-x,.wk-plain .wk-earn{background:rgba(255,255,255,.2)}
.wk-hint{position:relative;z-index:2;margin-top:14px;padding:10px 16px;border-radius:14px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);font-weight:700;font-size:15px;max-width:calc(100% - 32px);text-align:center}
.wk-plain .wk-hint{background:rgba(255,255,255,.2)}
.wk-combo{position:relative;z-index:2;margin-top:10px;min-height:30px;font-stretch:118%;font-weight:850;font-size:20px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.wk-count{position:relative;z-index:2;margin-top:auto;width:200px;height:200px;display:grid;place-content:center;text-align:center}
.wk-count-sm{width:150px;height:150px;margin-top:10px}
.wk-ring{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 4px 16px rgba(0,0,0,.4))}
.wk-ring circle:last-of-type{transition:stroke-dashoffset .35s ease}
.wk-n{position:relative;font-stretch:125%;font-weight:850;font-size:76px;line-height:1;text-shadow:0 4px 18px rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
.wk-count-sm .wk-n{font-size:46px}
.wk-sub{position:relative;font-size:13.5px;font-weight:700;opacity:.9;margin-top:4px}
.wk-bottom{position:relative;z-index:2;width:100%;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.wk-cd{position:absolute;inset:0;z-index:5;place-items:center;font-stretch:125%;font-weight:900;font-size:120px;background:rgba(0,0,0,.35);text-shadow:0 6px 30px rgba(0,0,0,.5)}
.wk-load{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#140f1f;font-weight:700;font-size:16px;text-align:center;padding:24px}
.wk-load small{color:var(--muted);font-weight:500;font-size:13px}
.wk-spin{width:48px;height:48px;border-radius:50%;border:5px solid rgba(255,255,255,.15);border-top-color:#ff7a3d;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes repPop{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
.pop{animation:repPop .35s ease}
.wk-tap{position:relative;z-index:2;margin:18px 0 0;width:150px;height:150px;border-radius:50%;border:none;background:rgba(255,255,255,.95);color:#2a1240;font-stretch:125%;font-weight:900;font-size:30px;cursor:pointer;box-shadow:0 18px 40px -12px rgba(0,0,0,.5)}
.wk-tap:active{transform:scale(.94)}
.wk-walker{position:relative;z-index:2;font-size:54px;margin-top:16px;animation:float 1.1s ease-in-out infinite}
.wk-breath{position:relative;z-index:2;margin-top:auto;width:240px;height:240px;display:grid;place-items:center}
.wk-bcircle{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,255,255,.35) 60%,rgba(255,255,255,.12));transform:scale(.55);transition:transform 4s ease-in-out;box-shadow:0 0 60px rgba(255,255,255,.35)}
.wk-bword{position:relative;font-stretch:118%;font-weight:850;font-size:22px;color:#2a1240}

/* positioning step, camera switch, owner debug line */
.wk.good .wk-shade{box-shadow:inset 0 0 0 4px rgba(62,230,166,.85)}
.wk.rear video,.wk.rear canvas{transform:none}
.wk-now{position:relative;z-index:2;margin-top:12px;border:none;border-radius:999px;padding:10px 18px;background:rgba(255,255,255,.92);color:#2a1240;font-weight:780;font-size:14px;cursor:pointer}
.wk-dbg{position:absolute;left:8px;right:8px;bottom:92px;z-index:3;font:600 11px/1.3 ui-monospace,monospace;color:#fff;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:8px;text-align:center}
.wk-top .wk-x+.wk-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Earn locked (free users) */
.earn-teaser{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:20px;margin-top:14px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#ff7a3d,#ff4f9a 55%,#c14dff)}
.et-ic{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:20px;flex-shrink:0}
.et-go{background:#fff;color:#2a1240;font-weight:800;font-size:13px;padding:8px 12px;border-radius:11px}
.earn-lock{border-radius:26px;padding:22px;margin-top:14px;color:#fff;position:relative;overflow:hidden;background:linear-gradient(150deg,#ff7a3d 0%,#ff4f9a 45%,#c14dff 80%,#7b5cff 100%);box-shadow:0 18px 40px -18px rgba(255,79,154,.6)}
.earn-lock::after{content:"";position:absolute;right:-60px;top:-70px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.13)}
.earn-lock>*{position:relative;z-index:1}
.el-badge{display:inline-block;font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.2)}
.el-big{font-stretch:122%;font-weight:850;font-size:34px;line-height:1.05;letter-spacing:-.02em;margin-top:12px}
.earn-lock .nbtn{border:none;border-radius:13px;padding:13px 18px;font-size:15px;font-weight:800;cursor:pointer;background:#fff;color:#2a1240;width:100%}
.ex-tile.locked{filter:saturate(.75)}
.ex-lock{position:absolute;top:12px;right:12px;font-style:normal;font-size:16px;z-index:1}