:host {
  display: block;
  margin-bottom: 30rpx;
}
.identity {
  position: relative;
  overflow: hidden;
  border-radius: 28rpx;
  border: 1rpx solid #ead8ca;
  padding: 25rpx;
  background: linear-gradient(125deg, #fff3e5, #f0e9f8);
  box-shadow: 0 14rpx 35rpx #79543a0b;
  color: #604a40;
}
.id-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #dfcdbf;
}
.brand {
  display: flex;
  gap: 9rpx;
  align-items: center;
}
.brand image {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  border: 3rpx solid #fffaf4;
  box-shadow: 0 0 0 1rpx #dfcdbf;
}
.brand-name,
.brand-en {
  display: block;
}
.brand-name {
  font-size: 18rpx;
  font-weight: 600;
  color: #795a4b;
}
.brand-en {
  font-size: 11rpx;
  letter-spacing: 2rpx;
  color: #a48d7e;
}
.id-title {
  font-size: 23rpx;
  letter-spacing: 3rpx;
  font-weight: 600;
}
.id-body {
  display: flex;
  gap: 24rpx;
  padding: 24rpx 0;
}
.portrait {
  width: 166rpx;
  height: 180rpx;
  flex: none;
  border: 6rpx solid #fffaf4;
  border-radius: 18rpx;
  overflow: hidden;
  background: #fffaf4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait image {
  width: 100%;
  height: 100%;
}
.details {
  flex: 1;
  min-width: 0;
}
.pet-name {
  display: block;
  font-size: 34rpx;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breed {
  display: block;
  font-size: 21rpx;
  color: #886c5f;
  margin: 2rpx 0 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.facts {
  display: flex;
  gap: 22rpx;
}
.facts > view {
  flex: 1;
  min-width: 0;
}
.label {
  display: block;
  font-size: 17rpx;
  color: #a48d7e;
}
.value {
  display: block;
  font-size: 21rpx;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coat {
  margin-top: 9rpx;
}
.id-bottom {
  border-top: 1rpx solid #dfcdbf;
  padding-top: 15rpx;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10rpx;
}
.number {
  display: block;
  font-size: 18rpx;
  letter-spacing: 1rpx;
  color: #795a4b;
}
.motto {
  font-size: 16rpx;
  color: #886c5f;
  max-width: 200rpx;
  text-align: right;
}
.id-heading {
  display: flex;
  align-items: center;
  gap: 14rpx;
}
.more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rpx;
  margin: -10rpx -10rpx -10rpx 0;
  width: 60rpx;
  height: 60rpx;
  padding: 0;
  background: transparent;
  border-radius: 50%;
}
.more::after {
  border: 0;
}
.more view {
  width: 5rpx;
  height: 5rpx;
  border-radius: 50%;
  background: #9d8779;
}
.more[disabled] {
  opacity: 0.4;
  background: transparent;
}
.export-canvas {
  position: fixed;
  left: -2000px;
  top: 0;
  width: 600px;
  height: 380px;
  pointer-events: none;
}