.hm-mem{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.hm-m{
  background:#fff; border:1px solid #EAE2D4; border-radius:18px; padding:18px;
}
.hm-m-top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.hm-face{
  flex:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:#EAF1E4; font-weight:800; font-size:1rem;
  color:#5E7E57 !important; -webkit-text-fill-color:#5E7E57 !important;
}
.hm-m b{ display:block; font-size:1.02rem; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.hm-role{ font-size:.78rem; color:#78766c !important; -webkit-text-fill-color:#78766c !important; }
.hm-m-stats{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.hm-m-stats span{
  font-size:.74rem; font-weight:700; border-radius:999px; padding:4px 10px;
  background:#F4F1E8; color:#78766c !important; -webkit-text-fill-color:#78766c !important;
}
.hm-m-stats .p{ background:#FBF1DC; color:#8a6d2f !important; -webkit-text-fill-color:#8a6d2f !important; }
.hm-m-stats .s{ background:#F3E1E5; color:#9c5d70 !important; -webkit-text-fill-color:#9c5d70 !important; }
.hm-m-stats .paused{ background:#EAE2D4; }
.hm-set{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid #F4F1E8; min-height:52px;
}
.hm-set:last-child{ border-bottom:none; }
.hm-set-t b{ display:block; font-size:.95rem; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.hm-set-t span{ font-size:.82rem; color:#78766c !important; -webkit-text-fill-color:#78766c !important; }
/* 44px hit area with a 30px visual track inside it */
.hm-tog{
  flex:none; width:52px; height:44px; border:none; cursor:pointer;
  background:none; position:relative; padding:0;
}
.hm-tog::before{
  content:''; position:absolute; top:7px; left:0; width:52px; height:30px;
  border-radius:999px; background:#EAE2D4; transition:background .18s ease;
}
.hm-tog::after{
  content:''; position:absolute; top:10px; left:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; transition:transform .18s ease; box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.hm-tog.on::before{ background:#7d9e77; }
.hm-tog.on::after{ transform:translateX(22px); }
.hm-tog:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }

/* rewards */
.hm-rw{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.hm-r{
  background:#FBF6EC; border:1px solid #EAE2D4; border-radius:18px; padding:18px;
  display:flex; flex-direction:column;
}
.hm-r b{ display:block; font-size:1rem; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.hm-r .cost{
  display:inline-block; margin-top:6px; font-size:.76rem; font-weight:800; border-radius:999px;
  padding:4px 10px; background:#FBF1DC;
  color:#8a6d2f !important; -webkit-text-fill-color:#8a6d2f !important;
}
.hm-bar{ height:8px; border-radius:999px; background:#EAE2D4; overflow:hidden; margin:12px 0 6px; }
.hm-bar i{ display:block; height:100%; background:#7d9e77; border-radius:999px; }
.hm-r small{ font-size:.78rem; color:#78766c !important; -webkit-text-fill-color:#78766c !important; }
.hm-r .hm-btn{ margin-top:auto; }
.hm-goal{
  background:#EAF1E4; border:1px solid #C9DBC0; border-radius:18px; padding:18px; margin-bottom:16px;
}
.hm-goal b{ color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.hm-goal p{ margin:4px 0 0; font-size:.9rem; color:#4d6a47 !important; -webkit-text-fill-color:#4d6a47 !important; }
.hm-pend{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid #F4F1E8;
}
.hm-pend:last-child{ border-bottom:none; }