/* Progress: My Stats (StatsView), the streak sheet (StreakInfoSheet). */
.pzx { background: var(--a-canvas); }
.pz { position: absolute; inset: 0; }
.pz-body { position: absolute; left: 0; top: 0; width: 393px; height: 1300px; transform-origin: 50% 0; }
.pz-sb { position: absolute; left: 0; top: 0; width: 393px; z-index: 3; background: linear-gradient(var(--a-canvas) 70%, rgba(254, 250, 245, 0)); }
.pz-title { position: absolute; left: 24px; top: 62px; font-size: 28px; font-weight: 900; letter-spacing: -0.4px; }
.pz-sub { position: absolute; left: 24px; top: 99px; font-size: 13px; color: var(--a-muted); }
.pz-pill { position: absolute; right: 24px; top: 72px; padding: 6px 12px; border-radius: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--a-accent); background: var(--a-surface); box-shadow: inset 0 0 0 1px var(--a-borderS); }
.pz-hero { position: absolute; left: 24px; top: 128px; width: 345px; height: 296px; border-radius: 28px; background: linear-gradient(135deg, var(--a-surface), var(--a-herowash)); box-shadow: inset 0 0 0 1px var(--a-accent), 0 4px 14px rgba(217, 79, 10, 0.1); }
.pz-ring { position: absolute; left: 92.5px; top: 30px; width: 160px; height: 160px; }
.pz-ring circle { fill: none; stroke-width: 14; }
.pz-rt { stroke: var(--a-track); }
.pz-rf { stroke: var(--a-accent); stroke-linecap: round; }
.pz-rc { position: absolute; left: 0; right: 0; top: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pz-rc i { font-style: normal; font-size: 20px; line-height: 1; }
.pz-rc b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pz-rc small { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--a-muted); }
.pz-days { position: absolute; left: 20px; top: 222px; width: 305px; display: flex; }
.pz-days span { --on: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pz-days i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: #fff; background: color-mix(in srgb, #d94f0a calc(var(--on) * 100%), #f3ece6); }
.pz-days i .sy { opacity: var(--on); transform: scale(calc(0.4 + var(--on) * 0.6)); }
.pz-days small { font-size: 10px; font-weight: 500; color: var(--a-muted); }
.pz-how { position: absolute; left: 136px; top: 438px; width: 121px; height: 26px; border-radius: 13px; text-align: center; line-height: 26px; font-size: 13px; font-weight: 600; color: var(--a-accent); }
.pz-metrics { position: absolute; left: 24px; top: 476px; width: 345px; display: flex; gap: 8px; }
.pz-metrics span { flex: 1; height: 86px; border-radius: 16px; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.pz-metrics p { display: flex; justify-content: space-between; color: var(--a-muted); font-size: 11px; }
.pz-metrics small { font-size: 10px; font-weight: 600; }
.pz-metrics b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pz-metrics em { font-style: normal; font-size: 11px; color: var(--a-muted); }
.pz-h { position: absolute; left: 28px; width: 341px; display: flex; justify-content: space-between; align-items: baseline; }
.pz-h b { font-size: 15px; font-weight: 700; }
.pz-h em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--a-accent); }
.pz-h em.pz-mm { color: var(--a-muted); }
.pz-card { position: absolute; left: 24px; width: 345px; border-radius: 18px; background: var(--a-surface); box-shadow: 0 0 0 1px var(--a-borderS); }
.pz-row { height: 66px; display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.pz-row i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; color: var(--a-accent); background: var(--a-wash); flex: none; }
.pz-row span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pz-row b { font-size: 14px; font-weight: 700; }
.pz-row small { font-size: 12px; color: var(--a-muted); }
.pz-ok { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: #fff; background: var(--a-accent); font-style: normal; }
.pz-tag { padding: 4px 8px; border-radius: 99px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--a-accent); background: var(--a-wash); }
.pz-pr { font-style: normal; font-size: 15px; font-weight: 700; color: var(--a-accent); font-variant-numeric: tabular-nums; }
.pz-pr b { font-size: 15px; }
.pz-div { display: block; height: 1px; background: var(--a-borderS); }
.pz-div2 { margin: 0 14px; }
.pz-week { height: 152px; padding: 14px; }
.pz-bars { height: 104px; display: flex; align-items: flex-end; }
.pz-bars span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pz-bars i { width: 10px; height: var(--h); border-radius: 4px; background: var(--a-accent); transform-origin: 50% 100%; transform: scaleY(0); }
.pz-bars small { font-size: 10px; font-weight: 500; color: var(--a-muted); }
.pz-wf { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--a-muted); }
.pz-wf b { font-size: 12px; font-weight: 700; color: var(--a-accent); }
.pz-month { height: 96px; padding: 16px; }
.pz-month .pz-wf b { font-size: 13px; color: var(--a-ink); }
.pz-spark { height: 24px; display: flex; align-items: flex-end; gap: 3px; }
.pz-spark i { flex: 1; height: var(--h); border-radius: 2px; background: color-mix(in srgb, var(--a-accent) 80%, transparent); transform-origin: 50% 100%; transform: scaleY(0); }
.pz-tabs { left: 16px; top: 806px; z-index: 3; }
.pz-dim { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; }
.pz-sheet { position: absolute; left: 0; top: 66px; width: 393px; height: 820px; z-index: 5; visibility: hidden; border-radius: 34px 34px 0 0; padding: 0 20px; background: var(--a-canvas); box-shadow: 0 -10px 30px rgba(28, 17, 8, 0.16); }
.pz-grab { position: absolute; left: 178.5px; top: 8px; width: 36px; height: 5px; border-radius: 3px; background: rgba(60, 60, 67, 0.3); }
.pz-st { margin-top: 30px; text-align: center; font-size: 17px; font-weight: 600; }
.pz-sline { margin-top: 34px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--a-muted); }
.pz-sline .sy { color: var(--a-accent); font-size: 18px; }
.pz-sr { --a: 0; margin-top: 22px; display: flex; gap: 12px; opacity: var(--a); transform: translateY(calc((1 - var(--a)) * 14px)); }
.pz-sr i { width: 28px; flex: none; font-size: 20px; color: var(--a-accent); padding-top: 1px; }
.pz-sr i.dim { opacity: 0.75; }
.pz-sr p { display: flex; flex-direction: column; gap: 6px; }
.pz-sr b { font-size: 16px; font-weight: 600; }
.pz-sr span { font-size: 14px; line-height: 1.36; color: var(--a-muted); }
.pz-got { position: absolute; left: 20px; top: 690px; width: 353px; height: 54px; border-radius: 27px; display: grid; place-items: center; font-size: 17px; font-weight: 600; color: #fff; background: var(--a-accent); }