.artist-detail[hidden] {
  display: none;
}

.artist-detail {
  position: fixed;
  z-index: 210;
  inset: 0;
  display: grid;
  place-items: end center;
  padding-top: max(14px, env(safe-area-inset-top));
  font-family: "BB Harmony SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  overscroll-behavior: contain;
}

.artist-detail__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 18, 10, 0.66);
  backdrop-filter: blur(12px) saturate(0.8);
  opacity: 0;
  transition: opacity 260ms ease;
}

.artist-detail__panel {
  position: relative;
  width: min(100%, 500px);
  max-height: calc(100dvh - max(14px, env(safe-area-inset-top)));
  overflow: auto;
  color: #082719;
  border: 1px solid rgba(223, 255, 121, 0.26);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  background: #eff1e9;
  box-shadow: 0 -24px 80px rgba(0, 14, 8, 0.52);
  overscroll-behavior: contain;
  transform: translate3d(0, 42px, 0) scale(0.985);
  opacity: 0;
  transition: transform 360ms cubic-bezier(0.2, 0.82, 0.2, 1), opacity 220ms ease;
  scrollbar-width: none;
}

.artist-detail__panel::-webkit-scrollbar {
  display: none;
}

.artist-detail.is-visible .artist-detail__backdrop {
  opacity: 1;
}

.artist-detail.is-visible .artist-detail__panel {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.artist-detail__close {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 350;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(2, 24, 14, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
}

.artist-detail__close:focus-visible,
.artist-detail__map-button:focus-visible,
.artist-detail__return:focus-visible {
  outline: 3px solid #dfff79;
  outline-offset: 3px;
}

.artist-detail__visual {
  position: relative;
  min-height: clamp(270px, 42dvh, 410px);
  overflow: hidden;
  border-radius: 31px 31px 0 0;
  background: #082719;
  isolation: isolate;
}

.artist-detail__visual::after {
  position: absolute;
  z-index: 2;
  right: -50px;
  bottom: -72px;
  width: 210px;
  height: 210px;
  content: "";
  border: 1px solid color-mix(in srgb, var(--detail-stage), transparent 42%);
  border-radius: 50%;
  box-shadow: 0 0 0 32px color-mix(in srgb, var(--detail-stage), transparent 90%);
  pointer-events: none;
}

.artist-detail__photos,
.artist-detail__fallback {
  position: absolute;
  inset: 0;
}

.artist-detail__photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--artist-position, 50% 50%);
  filter: saturate(0.86) contrast(1.08);
  transform: scale(1.015);
}

.artist-detail__photos.is-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.artist-detail__photos.is-duo img {
  min-width: 0;
}

.artist-detail__photos.is-duo > span {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #082719;
  font-weight: 950;
  border: 3px solid #082719;
  border-radius: 50%;
  background: #dfff79;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.artist-detail__fallback {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 22% 18%, var(--detail-art-accent) 0 7%, transparent 7.5%),
    linear-gradient(135deg, var(--detail-art-one), var(--detail-art-two) 58%, var(--detail-art-accent));
}

.artist-detail__fallback::before {
  position: absolute;
  inset: 13%;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  transform: rotate(-14deg);
}

.artist-detail__fallback span {
  color: #fff;
  font-family: "BB Harmony Latin", Arial, sans-serif;
  font-size: clamp(70px, 25vw, 128px);
  font-weight: 950;
  letter-spacing: -0.08em;
  text-shadow: 0 14px 40px rgba(0, 0, 0, 0.36);
}

.artist-detail__visual-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 31, 18, 0.02) 35%, rgba(3, 31, 18, 0.22) 60%, rgba(3, 31, 18, 0.92) 100%),
    linear-gradient(135deg, rgba(116, 245, 237, 0.12), transparent 42%);
  pointer-events: none;
}

.artist-detail__stage {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  padding: 8px 13px 7px;
  color: #082719;
  font-family: "BB Harmony Latin", Arial, sans-serif;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.07em;
  border-radius: 999px;
  background: var(--detail-stage);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--detail-stage), transparent 60%);
}

.artist-detail__body {
  position: relative;
  z-index: 3;
  margin-top: -2px;
  padding: 25px 22px calc(22px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 96% 8%, rgba(216, 255, 114, 0.22), transparent 28%),
    #eff1e9;
}

.artist-detail__eyebrow {
  margin: 0 0 8px;
  color: #326753;
  font-family: "BB Harmony Latin", Arial, sans-serif;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.artist-detail__body h2 {
  max-width: calc(100% - 16px);
  margin: 0;
  color: #082719;
  font-size: clamp(31px, 9vw, 48px);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.artist-detail__schedule {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  color: #315b49;
  font-size: 13px;
  font-weight: 780;
}

.artist-detail__schedule span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f04c83;
}

.artist-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.artist-detail__tags span {
  padding: 7px 11px;
  color: #184d39;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid rgba(8, 39, 25, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}

.artist-detail__match {
  display: grid;
  grid-template-columns: minmax(115px, 0.85fr) minmax(0, 1.35fr);
  gap: 15px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  color: #eff1e9;
  border-radius: 22px 9px 22px 9px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--detail-stage), #082719 72%), #082719 66%);
  box-shadow: 0 12px 34px rgba(8, 39, 25, 0.16);
}

.artist-detail__match div {
  min-width: 0;
}

.artist-detail__match span,
.artist-detail__match strong {
  display: block;
}

.artist-detail__match span {
  color: color-mix(in srgb, var(--detail-stage), #fff 25%);
  font-family: "BB Harmony Latin", Arial, sans-serif;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.15em;
}

.artist-detail__match strong {
  margin-top: 5px;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.15;
}

.artist-detail__match p {
  margin: 0;
  color: rgba(239, 241, 233, 0.76);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.6;
}

.artist-detail__notice {
  margin: 16px 2px 0;
  color: #708277;
  font-size: 10px;
  line-height: 1.6;
}

.artist-detail__intro {
  position: relative;
  margin-top: 18px;
  padding: 18px 18px 19px;
  overflow: hidden;
  border: 1px solid rgba(8, 39, 25, 0.12);
  border-radius: 10px 24px 10px 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(239, 241, 233, 0.7)),
    #f7f7f2;
  box-shadow: 0 12px 28px rgba(8, 39, 25, 0.07);
}

.artist-detail__intro::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
  background: linear-gradient(180deg, #f04c83, #74f5ed 72%, #d8ff72);
}

.artist-detail__intro-label {
  margin: 0 0 11px;
  color: #326753;
  font-family: "BB Harmony Latin", Arial, sans-serif;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.13em;
}

.artist-detail__intro > div {
  display: grid;
  gap: 9px;
}

.artist-detail__intro > div > p {
  margin: 0;
  color: #234638;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-ideograph;
}

.artist-detail__actions {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.artist-detail__map-button,
.artist-detail__return {
  width: 100%;
  border: 0;
}

.artist-detail__map-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 10px 12px 10px 20px;
  color: #082719;
  text-align: left;
  border-radius: 24px 10px 24px 10px;
  background: linear-gradient(100deg, #dfff79, #7cf3e5);
  box-shadow: 0 13px 28px rgba(84, 165, 128, 0.2);
}

.artist-detail__map-button span,
.artist-detail__map-button small {
  display: block;
}

.artist-detail__map-button span {
  font-size: 16px;
  font-weight: 950;
}

.artist-detail__map-button small {
  margin-bottom: 4px;
  color: #326753;
  font-family: "BB Harmony Latin", Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 0.16em;
}

.artist-detail__map-button b {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #fff;
  font-size: 21px;
  border-radius: 17px 8px 17px 8px;
  background: #082719;
}

.artist-detail__return {
  min-height: 42px;
  color: #315b49;
  font-size: 12px;
  font-weight: 850;
  background: transparent;
}

@media (min-width: 680px) {
  .artist-detail {
    place-items: center;
    padding: 28px;
  }

  .artist-detail__panel {
    max-height: min(850px, calc(100dvh - 56px));
    border-bottom: 1px solid rgba(223, 255, 121, 0.26);
    border-radius: 34px;
  }

  .artist-detail__visual {
    border-radius: 33px 33px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .artist-detail__backdrop,
  .artist-detail__panel {
    transition: none;
  }
}

/* 艺人简介正文改用系统常规字体。
   包里中文只带了 BB Harmony SC 一档 Black(900),所以 font-weight:560 无档可选,
   整段被渲染成黑体,和周围标签文字一比就显得"有的粗有的不粗"。
   正文不该用展示级黑体 —— 交给系统字体,才有真正的常规字重。
   (逐字像素比对确认过:中文/拉丁/数字此前都命中同一款字体,
    并非子集缺字导致的混排,所以只需换字族,不用补字体文件。) */
.artist-detail__intro > div > p {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}