/* Earn it: the Earn tab, Get Ready, the camera counting your reps, Session Complete. */
.fx { position: absolute; left: 0; top: 0; width: 393px; height: 886px; }
.ec-skel { position: absolute; left: 0; top: 0; width: 393px; height: 886px; overflow: visible; }
.ec-skel line { stroke-linecap: round; }
.ec-skel .sk-halo { stroke: rgba(0, 0, 0, 0.5); stroke-width: 10.5; }
.ec-skel .sk-glow { stroke: rgba(232, 101, 31, 0.88); stroke-width: 7.5; }
.ec-skel .sk-bone { stroke: rgba(255, 255, 255, 0.96); stroke-width: 4.2; }
.ec-skel .sk-jh { fill: rgba(0, 0, 0, 0.55); }
.ec-skel .sk-jg { fill: rgba(232, 101, 31, 0.75); }
.ec-skel .sk-j { fill: rgba(255, 255, 255, 0.96); }

/* ——— the Earn tab ("Session"), EarnView.swift ——— */
.ex { background: var(--a-canvas); }
.ex-earn, .ex-home { position: absolute; inset: 0; }
.ee { position: absolute; inset: 0; background: var(--a-canvas); }
.ee-sb { position: absolute; left: 0; top: 0; width: 393px; }
.ee-title { position: absolute; left: 24px; top: 64px; font-size: 28px; font-weight: 900; letter-spacing: -0.8px; }
.ee-meter { position: absolute; left: 24px; top: 112px; width: 345px; height: 128px; border-radius: 24px; padding: 20px; }
.ee-meter p { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--a-muted); }
.ee-meter p b { font-weight: 700; color: var(--a-accent); font-variant-numeric: tabular-nums; }
.ee-bar { position: relative; display: block; margin-top: 16px; height: 16px; border-radius: 8px; background: var(--a-track); overflow: hidden; }
.ee-bar i { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(90deg, #e8651f, #d94f0a); transform-origin: 0 50%; transform: scaleX(0); }
.ee-meter small { display: block; margin-top: 16px; font-size: 12px; color: var(--a-muted); }
.ee-meter small b { color: var(--a-ink); }
.ee-stats { position: absolute; left: 24px; top: 264px; width: 345px; display: flex; gap: 12px; }
.ee-stats span { position: relative; flex: 1; height: 88px; border-radius: 20px; padding: 16px; background: var(--a-chip); box-shadow: 0 0 0 1px var(--a-border); }
.ee-stats small { display: block; font-size: 11px; font-weight: 600; color: var(--a-muted); }
.ee-stats i { position: absolute; right: 16px; top: 13px; font-style: normal; font-size: 14px; }
.ee-stats b { display: inline-block; margin-top: 10px; font-size: 28px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ee-stats em { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--a-muted); }
.ee-h { position: absolute; left: 24px; top: 376px; font-size: 18px; font-weight: 800; }
.ee-ex { position: absolute; top: 410px; width: 167.5px; height: 108px; border-radius: 18px; background: var(--a-surface); box-shadow: 0 0 0 1px var(--a-border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; --on: 0; }
.ee-pu { left: 24px; }
.ee-sq { left: 201.5px; }
.ee-ex i { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, rgba(217, 79, 10, 0.08) calc(var(--on) * 100%), #f5efea); color: color-mix(in srgb, #d94f0a calc(var(--on) * 100%), #a07858); }
.ee-ex b { font-size: 13px; font-weight: calc(500 + var(--on) * 200); color: color-mix(in srgb, #1c1108 calc(var(--on) * 100%), #a07858); }
.ee-exsel { position: absolute; left: 24px; top: 410px; width: 167.5px; height: 108px; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--a-accent), 0 4px 6px rgba(217, 79, 10, 0.12); pointer-events: none; }
.ee-mul { position: absolute; left: 24px; top: 542px; width: 345px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--a-muted); }
.ee-mul b { font-weight: 700; color: var(--a-accent); }
.ee-track { position: absolute; left: 24px; top: 566px; width: 345px; height: 40px; border-radius: 12px; background: var(--a-track); display: flex; padding: 4px; }
.ee-pill { position: absolute; left: 0; top: 4px; width: 112.33px; height: 32px; border-radius: 8px; background: var(--a-surface); box-shadow: 0 2px 2px rgba(28, 17, 8, 0.03); }
.ee-track span { position: relative; flex: 1; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.ee-cap { position: absolute; left: 24px; top: 614px; width: 345px; text-align: center; font-size: 11px; color: var(--a-muted); }
.ee-cap b { color: var(--a-accent); }
.ee-start { position: absolute; left: 24px; top: 644px; width: 345px; height: 52px; font-size: 16px; }
.ee-how { position: absolute; left: 24px; top: 720px; width: 345px; height: 48px; border-radius: 16px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--a-muted); }
.ee-how span { flex: 1; color: var(--a-ink); }
.ee-how .sy { font-size: 17px; }
.ex-tabs { left: 16px; top: 806px; z-index: 5; }
.ex-tabs .pp-tabsel { left: 5px; }

/* the full-screen cover: Get Ready, the camera, Session Complete */
.ex-cover { position: absolute; inset: 0; z-index: 10; background: #000; visibility: hidden; }
.ex-cin { position: absolute; left: 0; top: 0; width: 393px; height: 886px; transform-origin: 0 0; }
.er, .ec, .ed { position: absolute; inset: 0; color: #fff; }
.er { background: #000; }
.er-x { position: absolute; left: 20px; top: 62px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.28); font-size: 14px; }
.er-title { position: absolute; left: 0; right: 0; top: 112px; text-align: center; font-size: 28px; font-weight: 700; }
.er-n { position: absolute; left: 0; right: 0; top: 152px; height: 90px; text-align: center; font-size: 72px; font-weight: 700; color: #d94f0a; }
.er-n span { position: absolute; left: 0; right: 0; top: 0; font-variant-numeric: tabular-nums; }
.er-demo { position: absolute; left: 104px; top: 262px; width: 185px; height: 400px; }
.er-hint { position: absolute; left: 0; right: 0; top: 694px; text-align: center; font-size: 16px; font-weight: 600; }
.er-hint b { color: #d94f0a; }
.er-skip { position: absolute; left: 28px; top: 790px; width: 337px; height: 52px; border-radius: 26px; display: grid; place-items: center; font-size: 16px; font-weight: 600; background: rgba(60, 60, 64, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }

/* the live camera (PerPushCameraWorkoutView) */
.ec { background: #000; }
.ec-feed { position: absolute; inset: 0; }
.ec-vig { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0, rgba(0, 0, 0, 0.22) 110px, rgba(0, 0, 0, 0) 220px), linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0, rgba(28, 17, 8, 0.18) 150px, rgba(0, 0, 0, 0) 300px); }
.ec-top { position: absolute; left: 20px; top: 56px; width: 353px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.ec-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: rgba(255, 255, 255, 0.92); background: rgba(0, 0, 0, 0.38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.ec-time { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums; }
.ec-arc { position: absolute; inset: 0; }
.ec-arc svg { position: absolute; left: 0; top: 0; width: 393px; height: 886px; overflow: visible; }
.ec-arc path { fill: none; stroke-linecap: round; }
.ec-trk { stroke: rgba(237, 216, 200, 0.42); stroke-width: 10; }
.ec-hair { stroke: rgba(217, 79, 10, 0.5); stroke-width: 1.5; }
.ec-mo { stroke: url(#ec-og); stroke-width: 10; }
.ec-glo { stroke: url(#ec-og); stroke-width: 22; opacity: 0.22; }
.ec-gold { stroke: url(#ec-gg); stroke-width: 10; opacity: 0; }
.ec-shock { fill: none; stroke: #f0c86e; stroke-width: 3; opacity: 0; transform-origin: 196.5px 231px; transform-box: view-box; }
.ec-ember { fill: #f0c86e; opacity: 0; }
.ec-n { position: absolute; left: 196.5px; top: 237px; font-size: 68px; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, 0.94); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); font-variant-numeric: tabular-nums; transform: translate(-50%, -50%); }
.ec-plus { position: absolute; left: 196.5px; top: 150px; font-size: 28px; font-weight: 900; color: #d4a84b; text-shadow: 0 0 8px rgba(212, 168, 75, 0.65); opacity: 0; }
.ec-meter { position: absolute; left: 14px; top: 364px; width: 11px; height: 158px; border-radius: 6px; padding: 5px 3px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ec-mt { position: relative; display: block; width: 5px; height: 148px; border-radius: 3px; background: rgba(237, 216, 200, 0.4); overflow: hidden; --flash: 0; }
.ec-mt i { position: absolute; inset: 0; border-radius: 3px; transform-origin: 50% 100%; background: linear-gradient(0deg, #e8651f, #d94f0a 50%, #d4a84b); }
.ec-hint { position: absolute; left: 24px; top: 706px; width: 345px; padding: 12px 18px; border-radius: 14px; text-align: center; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.94); background: rgba(0, 0, 0, 0.52); box-shadow: inset 0 0 0 1.5px rgba(245, 161, 32, 0.85); opacity: 0; }
.ec-finish { position: absolute; left: 28px; top: 792px; width: 337px; height: 50px; font-size: 16px; font-weight: 600; background: linear-gradient(110deg, #e8651f, #d94f0a); box-shadow: 0 4px 10px rgba(217, 79, 10, 0.45); }

/* Session Complete */
.ed { background: #000; visibility: hidden; }
.ed-panel { position: absolute; left: 12px; top: 506px; width: 369px; height: 352px; border-radius: 24px; padding-top: 22px; display: flex; flex-direction: column; align-items: center; background: rgba(120, 120, 128, 0.16); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.ed-ok { font-size: 36px; color: #d94f0a; }
.ed-title { margin-top: 14px; font-size: 28px; font-weight: 700; }
.ed-plus { margin-top: 10px; font-size: 34px; font-weight: 700; color: #d94f0a; font-family: ui-rounded, -apple-system, system-ui, sans-serif; line-height: 1.1; }
.ed-min { margin-top: 8px; font-size: 17px; color: rgba(255, 255, 255, 0.8); }
.ed-what { margin-top: 8px; font-size: 17px; color: rgba(255, 255, 255, 0.7); }
.ed-calc { margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.ed-claim { margin-top: 18px; width: 321px; height: 52px; border-radius: 26px; display: grid; place-items: center; background: #d94f0a; color: #000; font-size: 17px; font-weight: 600; }

/* ——— in the air beside the phone: the set's tally, and the gold that lands in it ——— */
.tally {
  position: absolute; left: 0; top: 0; width: 230px; height: 120px; transform-origin: 0 0; visibility: hidden; border-radius: 26px; padding: 18px 22px;
  background: rgba(20, 14, 26, 0.72); box-shadow: inset 0 0 0 1px rgba(240, 200, 110, 0.22), 0 18px 40px -16px rgba(0, 0, 0, 0.6); color: #fff; font-family: var(--font);
}
.tally > div { position: absolute; left: 22px; top: 16px; right: 22px; }
.tally small { display: block; font-size: 13px; font-weight: 640; color: rgba(255, 255, 255, 0.66); }
.tally b { display: block; margin-top: 2px; font-size: 32px; line-height: 1.05; font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tl-earn b { color: #f0c86e; }
.tl-dots { display: flex; gap: 6px; margin-top: 8px; }
.tl-dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.tl-dots i.on { background: #f5a120; box-shadow: none; }
.tl-calc { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: rgba(240, 200, 110, 0.85); font-variant-numeric: tabular-nums; }
.token {
  position: absolute; left: 0; top: 0; padding: 7px 12px; border-radius: 999px; visibility: hidden; white-space: nowrap;
  font-family: var(--font); font-size: 16px; font-weight: 760; color: #1c1108; background: #f0c86e; box-shadow: 0 6px 18px -4px rgba(240, 200, 110, 0.7);
}