/* MY WORKOUTS as tile cards, and the Start button out of navy.
   They were already in a 3-column grid but read as plain bordered boxes — flat
   white, hairline border, no lift. These give them a tile's depth and a soft
   tinted head so each one reads as its own card. */
#dwRoot .dw-grid{ gap:18px !important; align-items:stretch; }
#dwRoot .dw-w{
  background:linear-gradient(180deg,#FBFDFA 0%,#FFFFFF 46%) !important;
  border:1px solid #E4EAE0 !important;
  border-radius:22px !important;
  padding:20px !important;
  box-shadow:0 6px 20px rgba(36,52,71,.07);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
#dwRoot .dw-w:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(36,52,71,.13);
  border-color:#CFE0C8 !important;
}
/* the emoji becomes a proper tile icon rather than loose text */
#dwRoot .dw-w .dw-w-top > :first-child{
  width:46px; height:46px; flex:none; border-radius:15px;
  display:grid; place-items:center; font-size:1.35rem;
  background:#EEF4EC;
}
#dwRoot .dw-w-foot{ padding-top:14px !important; border-top:1px solid #EFF2EC; margin-top:auto; }

/* the black/navy Start pill becomes sage, and reads as a pill rather than a chip */
/* PRIMARY only. Targeting `.dw-btn--sm` as well was too broad — "4 steps" / "1 step"
   is the same size class but the plain variant, and it turned into a second solid
   button of equal weight beside Start. */
#dwRoot .dw-w .dw-btn--primary{
  background:#5F7350 !important;
  border-color:#5F7350 !important;
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
  border-radius:999px !important;
  padding:11px 22px !important;
  min-height:44px !important;
  box-shadow:0 4px 12px rgba(95,115,80,.28);
}
#dwRoot .dw-w .dw-btn--primary:hover{
  background:#4E6640 !important; border-color:#4E6640 !important;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(95,115,80,.36);
}
@media (max-width:560px){
  #dwRoot .dw-w{ padding:17px !important; }
  #dwRoot .dw-w .dw-btn--primary{ flex:1 1 auto; }
}