:root{
  --mh-green:#22c55e;
  --mh-green-2:#16a34a;
  --mh-gray:#94a3b8;
  --mh-dark:#0f172a;
  --mh-pill-bg:#0b1224;
  --mh-pill-border:#1f2a44;
}

/* Pastille positionnable dans un conteneur avatar */
.mh-online-dot{
  display:inline-block;
  border-radius:9999px;
  background:var(--mh-gray);
  box-shadow:0 0 0 2px var(--mh-dark);
}
.mh-online-dot.is-online{ background:linear-gradient(180deg,var(--mh-green),var(--mh-green-2)); }

.mh-online-size-sm{ width:10px; height:10px; }
.mh-online-size-md{ width:12px; height:12px; }
.mh-online-size-lg{ width:14px; height:14px; }

/* Variante étiquette */
.mh-online-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; line-height:1; font-weight:700;
  padding:6px 10px; border-radius:9999px;
  border:1px solid var(--mh-pill-border);
  background:var(--mh-pill-bg); color:#cbd5e1;
}
.mh-online-tag.is-online{
  color:#eafff3; border-color:rgba(34,197,94,.35);
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.12);
}
.mh-online-tag.is-offline{ opacity:.75; }

/* Helper si tu veux positionner la dot sur l’avatar */
.mh-avatar-wrap{ position:relative; display:inline-block; }
.mh-avatar-wrap .mh-online-dot{
  position:absolute; right:0; bottom:0;
}