/* ---- stats trio ---- */
.stats{ display:flex; gap:10px; margin-bottom:14px; }
.stats.wrap-4{ flex-wrap:wrap; }
.stats.wrap-4 .stat{ min-width:calc(50% - 5px); flex:none; }
.stat{ flex:1; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px 8px; text-align:center; }
.stat:nth-child(3n+1){ background:var(--purple-light); }
.stat:nth-child(3n+2){ background:var(--mint-light); }
.stat:nth-child(3n+3){ background:var(--sun-light); }
.stat .num{ font-family:'Baloo 2'; font-size:21px; font-weight:700; color:var(--purple-dark); }
.stat .label{ font-size:10.5px; color:var(--muted); font-weight:700; margin-top:2px; }
.hearts{ font-size:15px; letter-spacing:1px; }
.tracker-lives-display{ text-align:right; }

/* ---- progress card (blue, with days-left ring) ---- */
.progress-card{
  background:var(--progress-blue); border-radius:24px; padding:22px; margin-bottom:14px;
  box-shadow:var(--shadow);
}
.progress-card-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.progress-check-icon{
  width:24px; height:24px; border-radius:50%; border:2px solid #fff; background:#fff; color:var(--progress-blue); display:inline-flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:800; margin-right:7px; vertical-align:middle;
}
.progress-card-label{ font-size:14px; font-weight:700; color:#fff; opacity:1; margin-bottom:6px; display:flex; align-items:center; }
.progress-card-pct{ font-family:'Baloo 2'; font-size:56px; font-weight:700; color:#fff; line-height:1; }
.progress-card-date{ font-size:14px; font-weight:700; color:#fff; opacity:1; margin-top:10px; cursor:pointer; }
.progress-card-brain-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  background:rgba(255,255,255,.22); color:#fff; border:none; border-radius:12px;
  padding:8px 12px; font-family:'Manrope'; font-size:12.5px; font-weight:700;
  cursor:pointer;
}
.progress-card-brain-btn:active{ background:rgba(255,255,255,.32); }
.progress-ring-wrap{ position:relative; width:144px; height:144px; flex-shrink:0; }
.progress-ring-svg{ width:100%; height:100%; transform:rotate(-90deg); }
.progress-ring-bg{ fill:none; stroke:rgba(255,255,255,.55); stroke-width:10; }
.progress-ring-fg{ fill:none; stroke:#fff; stroke-width:10; stroke-linecap:round; stroke-dasharray:264; stroke-dashoffset:0; transition:stroke-dashoffset .3s linear; }
.progress-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.progress-ring-num{ font-family:'Baloo 2'; font-size:28px; font-weight:800; color:#fff; }
.progress-ring-label{ font-size:11px; font-weight:700; color:#fff; opacity:.95; text-align:center; line-height:1.2; }
.progress-ring-badge{ position:absolute; top:-8px; right:-2px; font-size:20px; z-index:2; }

.sprint-badge{
  background:var(--ink); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.3px;
  padding:7px 12px; border-radius:20px; flex-shrink:0; white-space:nowrap;
}