.level-badge{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.15rem .45rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-size: .75rem;
  font-weight:900;
  line-height: 1;
}
.level-badge .dot{width:8px; height:8px; border-radius:999px; background: rgba(74,144,226,.9)}
.streak-badge{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.15rem .45rem;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-size:.75rem;
  font-weight:900;
}