/* 佑贝本草 · 参考 Wizo 移动电商布局的样式改造（保留原金棕色彩） */
:root {
  --yb-ink: #17120c;
  --yb-muted: #8c8173;
  --yb-gold: hsl(39 45% 42%);
  --yb-gold-2: hsl(39 50% 52%);
  --yb-soft: #f7f2e8;
  --yb-card: #ffffff;
  --yb-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

html,
body {
  background: #f4f4f2 !important;
}

body {
  font-family: "DM Sans", "Noto Sans SC", system-ui, sans-serif;
}

#app-frame {
  width: min(100vw, 430px) !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  background: var(--yb-card) !important;
  box-shadow: 0 0 0 1px rgba(23, 18, 12, 0.04), 0 24px 70px rgba(23, 18, 12, 0.10);
  overflow-x: hidden !important;
}

.page-container {
  min-height: 100vh !important;
  padding: 0 22px 92px !important;
  background: #fff !important;
  overflow: visible !important;
}

.page-container > .absolute.inset-0,
.ybdjk-corner {
  display: none !important;
}

.page-container > .relative.z-10 {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
  text-align: left !important;
  gap: 24px !important;
}

.page-container.has-ybdjk-fixed-header {
  padding-top: 58px !important;
}

.ybdjk-shop-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 1001;
  width: min(100vw, 430px);
  box-sizing: border-box;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 22px 7px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(23,18,12,.06);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(23,18,12,.04);
}

.ybdjk-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
}

.ybdjk-brand-logo {
  display: grid;
  gap: 2px;
  line-height: 1;
}

.ybdjk-brand-logo span {
  color: #9a7438;
  font-family: var(--yb-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .14em;
}

.ybdjk-brand-logo em {
  color: #9e958d;
  font-family: "DM Sans", "Noto Sans SC", system-ui, sans-serif;
  font-size: 8px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .25em;
  padding-left: 3px;
}

.ybdjk-header-actions {
  display: flex;
  gap: 12px;
  color: #17120c;
  align-items: center;
}

.ybdjk-icon-button {
  position: relative;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.ybdjk-icon-button svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.ybdjk-dot {
  position: absolute;
  top: 2px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yb-gold-2);
  box-shadow: 0 0 0 2px #fff;
}

.ybdjk-search {
  margin-top: 12px;
  height: 60px;
  border-radius: 18px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  color: #a69f98;
  font-size: 16px;
  font-weight: 500;
}

.ybdjk-search svg {
  width: 25px;
  height: 25px;
  color: var(--yb-gold);
}

.ybdjk-home-slogan {
  margin-top: 18px;
  position: relative;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 18px 18px 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, hsl(39 50% 52% / .22), transparent 42%),
    linear-gradient(145deg, #fbf6ec 0%, #fff 72%);
  border: 1px solid hsl(39 45% 42% / .10);
  box-shadow: 0 14px 28px rgba(23,18,12,.07);
}

.ybdjk-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ybdjk-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  animation: ybdjkHeroSlide 9s ease-in-out infinite;
}

.ybdjk-hero-slide:nth-child(2) {
  animation-delay: 3s;
}

.ybdjk-hero-slide:nth-child(3) {
  animation-delay: 6s;
}

.ybdjk-hero-slide::before {
  content: "";
  position: absolute;
  inset: -26px -30px auto auto;
  width: 180px;
  height: 120px;
  border-radius: 999px;
  filter: blur(2px);
  opacity: .56;
}

.ybdjk-hero-slide i {
  position: absolute;
  right: 32px;
  top: 20px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  box-shadow:
    inset 10px 12px 18px rgba(255,255,255,.34),
    inset -14px -16px 24px rgba(80,74,62,.18),
    0 18px 36px rgba(23,18,12,.12);
}

.ybdjk-hero-slide i::before,
.ybdjk-hero-slide i::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
}

.ybdjk-hero-slide i::before {
  right: 17px;
  top: 13px;
  width: 15px;
  height: 15px;
}

.ybdjk-hero-slide i::after {
  right: 36px;
  top: 18px;
  width: 8px;
  height: 8px;
  opacity: .76;
}

.ybdjk-hero-slide b,
.ybdjk-hero-slide small {
  position: absolute;
  left: 20px;
  color: rgba(23,18,12,.18);
  font-family: var(--yb-serif);
  font-weight: 600;
  letter-spacing: .04em;
}

.ybdjk-hero-slide b {
  top: 20px;
  font-size: 18px;
}

.ybdjk-hero-slide small {
  top: 48px;
  font-size: 12px;
}

.slide-gold {
  background: linear-gradient(145deg, #fbf6ec 0%, #fff 72%);
}

.slide-gold::before {
  background: hsl(39 50% 52% / .32);
}

.slide-gold i {
  background: linear-gradient(145deg, #cfad66 0%, #b58a3f 48%, #efe0b9 100%);
}

.slide-red {
  background: linear-gradient(145deg, #fff4f0 0%, #fff 74%);
}

.slide-red::before {
  background: rgba(176,82,66,.24);
}

.slide-red i {
  background: linear-gradient(145deg, #c9877c 0%, #a55f57 54%, #f1c3b8 100%);
}

.slide-green {
  background: linear-gradient(145deg, #f1f7ef 0%, #fff 74%);
}

.slide-green::before {
  background: rgba(108,137,103,.25);
}

.slide-green i {
  background: linear-gradient(145deg, #9ab48e 0%, #728c6c 54%, #d5e2c8 100%);
}

.ybdjk-home-slogan-copy {
  position: relative;
  z-index: 1;
  padding-top: 78px;
}

.ybdjk-home-slogan span,
.ybdjk-home-slogan strong {
  display: block;
}

.ybdjk-home-slogan span {
  color: var(--yb-ink);
  font-family: var(--yb-serif);
  font-size: 19px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ybdjk-home-slogan strong {
  margin-top: 6px;
  color: var(--yb-muted);
  font-family: var(--yb-serif);
  font-size: 11px;
  line-height: 1.7;
  font-weight: 500;
}

@keyframes ybdjkHeroSlide {
  0%, 100% {
    opacity: 0;
    transform: scale(1.03);
  }
  8%, 30% {
    opacity: 1;
    transform: scale(1);
  }
  38% {
    opacity: 0;
    transform: scale(1.02);
  }
}

.ybdjk-home-bg-string {
  position: fixed;
  inset: 58px calc(50% - 215px) 74px calc(50% - 215px);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.ybdjk-home-bg-string i {
  position: absolute;
  left: calc(4% + var(--i) * 7.2%);
  top: calc(0% + var(--i) * 8.1%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  opacity: .32;
  transform: translate(-50%, -50%) rotate(-18deg);
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.9) 0 8%, transparent 18%),
    radial-gradient(circle at 68% 76%, rgba(70,63,52,.16), transparent 36%),
    linear-gradient(145deg, #e7b6c5 0%, #cc8298 46%, #f3d7df 100%);
  box-shadow:
    inset 10px 12px 18px rgba(255,255,255,.24),
    inset -14px -16px 22px rgba(80,74,62,.12),
    0 22px 44px rgba(23,18,12,.08);
  animation: ybdjkBgBeadColor 2s ease-in-out infinite, ybdjkBgBeadFloat 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .2s);
}

@keyframes ybdjkBgBeadColor {
  0%, 100% {
    background:
      radial-gradient(circle at 33% 27%, rgba(255,255,255,.9) 0 8%, transparent 18%),
      radial-gradient(circle at 68% 76%, rgba(70,63,52,.16), transparent 36%),
      linear-gradient(145deg, #e7b6c5 0%, #cc8298 46%, #f3d7df 100%);
  }
  50% {
    background:
      radial-gradient(circle at 33% 27%, rgba(255,255,255,.9) 0 8%, transparent 18%),
      radial-gradient(circle at 68% 76%, rgba(70,63,52,.16), transparent 36%),
      linear-gradient(145deg, #b9cbd2 0%, #7892a0 46%, #d6e1e4 100%);
  }
}

@keyframes ybdjkBgBeadFloat {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(-18deg) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-18deg) translateY(-34px);
  }
}

.ybdjk-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 14px;
  color: var(--yb-ink);
}

.ybdjk-section-title h3 {
  margin: 0;
  font-family: var(--yb-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ybdjk-section-title a {
  color: var(--yb-gold);
  text-decoration: none;
  font-family: var(--yb-serif);
  font-size: 14px;
  font-weight: 600;
}

.ybdjk-categories {
  font-family: var(--yb-serif);
}

.ybdjk-categories .ybdjk-section-title a {
  font-family: var(--yb-serif);
}

.ybdjk-categories .ybdjk-category {
  font-family: var(--yb-serif);
}

.ybdjk-categories {
  position: relative;
  z-index: 10;
  margin-top: 18px;
}

.ybdjk-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ybdjk-category {
  appearance: none;
  display: grid;
  grid-template-rows: 34px auto 1fr;
  align-items: start;
  gap: 9px;
  min-height: 122px;
  padding: 14px;
  border: 1px solid hsl(39 35% 42% / .08);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(255,255,255,.94) 0%, rgba(251,247,239,.84) 100%);
  box-shadow: 0 8px 18px rgba(23,18,12,.045);
  color: var(--yb-ink);
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}

.ybdjk-category:active {
  transform: scale(.98);
}

.ybdjk-category-icon {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.78) 0 9%, transparent 20%),
    radial-gradient(circle at 68% 74%, rgba(70,63,52,.14), transparent 36%),
    linear-gradient(145deg, var(--bead-a, #b8aa94) 0%, var(--bead-b, #9fb0a0) 46%, var(--bead-c, #c6b7a2) 100%) !important;
  box-shadow:
    inset 4px 5px 8px rgba(255,255,255,.26),
    inset -6px -7px 10px rgba(80,74,62,.15),
    0 6px 12px rgba(126,119,103,.15);
}

.ybdjk-category-icon svg {
  display: none;
}

.ybdjk-category-icon::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.70);
  filter: blur(.15px);
}

.ybdjk-category-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 15px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(74,77,68,.11);
  filter: blur(4px);
}

.ybdjk-play-name {
  display: block;
  margin-top: 0;
  color: var(--yb-ink);
  font-family: var(--yb-serif);
  font-size: 16px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ybdjk-play-copy {
  display: block;
}

.ybdjk-play-card small {
  display: block;
  color: var(--yb-muted);
  font-family: var(--yb-serif);
  font-size: 10.5px;
  line-height: 1.68;
  font-weight: 600;
}

.ybdjk-play-card.tone-gold .ybdjk-category-icon,
.ybdjk-play-card.tone-cream .ybdjk-category-icon {
  --bead-a: #d7c08c;
  --bead-b: #b8914b;
  --bead-c: #e2d2a9;
}

.ybdjk-play-card.tone-green .ybdjk-category-icon {
  --bead-a: #c6d4bd;
  --bead-b: #87a17b;
  --bead-c: #dce5d4;
}

.ybdjk-play-card.tone-brown .ybdjk-category-icon {
  --bead-a: #c4aa93;
  --bead-b: #8d6f5d;
  --bead-c: #d9c7b6;
}

.ybdjk-play-card.tone-red .ybdjk-category-icon {
  --bead-a: #d4a39a;
  --bead-b: #b96e62;
  --bead-c: #e3c0b8;
}

.ybdjk-play-card.tone-blue .ybdjk-category-icon {
  --bead-a: #b9cbd2;
  --bead-b: #7892a0;
  --bead-c: #d6e1e4;
}

.ybdjk-play-card.tone-orange .ybdjk-category-icon {
  --bead-a: #d8b58e;
  --bead-b: #bf8651;
  --bead-c: #ead4bb;
}

.ybdjk-play-card.tone-ink .ybdjk-category-icon {
  --bead-a: #b8b2a7;
  --bead-b: #77766d;
  --bead-c: #d5d0c5;
}

.ybdjk-home-gallery-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.ybdjk-home-gallery-tabs a {
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  border: 1px solid rgba(23,18,12,.06);
  background: rgba(255,255,255,.72);
  color: var(--yb-ink);
  text-decoration: none;
  font-family: var(--yb-serif);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(23,18,12,.04);
}

.ybdjk-home-image-wall,
.ybdjk-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.ybdjk-home-image-card,
.ybdjk-gallery-card {
  min-height: 128px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 13px;
  border-radius: 20px;
  border: 1px solid rgba(23,18,12,.06);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(251,247,239,.84));
  color: var(--yb-ink);
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(23,18,12,.045);
}

.ybdjk-home-image-card strong,
.ybdjk-gallery-card strong {
  position: relative;
  z-index: 1;
  font-family: var(--yb-serif);
  font-size: 15px;
  line-height: 1.35;
}

.ybdjk-home-image-card small,
.ybdjk-gallery-card small {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  color: var(--yb-muted);
  font-family: var(--yb-serif);
  font-size: 10.5px;
  line-height: 1.55;
}

.ybdjk-mini-art,
.ybdjk-gallery-art {
  position: absolute;
  inset: 0;
}

.ybdjk-mini-art i,
.ybdjk-gallery-art i {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.82) 0 9%, transparent 20%),
    linear-gradient(145deg, var(--art-a), var(--art-b));
  box-shadow: inset -8px -10px 15px rgba(80,74,62,.14), 0 12px 24px rgba(23,18,12,.08);
}

.ybdjk-mini-art i:nth-child(1),
.ybdjk-gallery-art i:nth-child(1) {
  right: 16px;
  top: 14px;
  width: 44px;
  height: 44px;
}

.ybdjk-mini-art i:nth-child(2),
.ybdjk-gallery-art i:nth-child(2) {
  right: 54px;
  top: 42px;
  width: 28px;
  height: 28px;
  opacity: .72;
}

.ybdjk-mini-art i:nth-child(3),
.ybdjk-gallery-art i:nth-child(3) {
  right: -15px;
  top: -18px;
  width: 88px;
  height: 88px;
  opacity: .14;
}

.tone-gold { --art-a: #d7c08c; --art-b: #b8914b; }
.tone-blue { --art-a: #b9cbd2; --art-b: #7892a0; }
.tone-green { --art-a: #c6d4bd; --art-b: #87a17b; }
.tone-red { --art-a: #d4a39a; --art-b: #b96e62; }

.bead-showcase {
  display: none !important;
}

.animate-fade-in {
  display: none !important;
}

.animate-fade-in-up.space-y-2 {
  display: none !important;
}

.w-full.max-w-\[340px\].animate-fade-in-up {
  max-width: none !important;
}

.w-full.max-w-\[340px\].animate-fade-in-up > .relative.w-full.rounded-2xl.overflow-hidden.group {
  display: none !important;
}

.relative.w-full.rounded-2xl.overflow-hidden.group {
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 35px hsl(39 45% 42% / 0.18) !important;
}

.relative.aspect-\[16\/9\].w-full {
  aspect-ratio: 16 / 6.3 !important;
}

.relative.w-full.rounded-2xl.overflow-hidden.group::before {
  content: "限时定制";
  position: absolute;
  left: 20px;
  top: 24px;
  z-index: 4;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-shadow: 0 3px 12px rgba(0,0,0,.25);
}

.relative.w-full.rounded-2xl.overflow-hidden.group::after {
  content: "天然合香 · 心意专属";
  position: absolute;
  left: 20px;
  top: 60px;
  z-index: 4;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 3px 12px rgba(0,0,0,.25);
}

.relative.w-full.rounded-2xl.overflow-hidden.group img {
  filter: saturate(1.04) contrast(1.03) brightness(.95);
}

.relative.w-full.rounded-2xl.overflow-hidden.group .absolute.bottom-3 {
  display: none !important;
}

.animate-fade-in-up.grid.grid-cols-2 {
  display: none !important;
}

.w-full.max-w-\[340px\].animate-fade-in-up.grid.grid-cols-3 {
  display: none !important;
}

.ybdjk-matcher {
  display: block;
  width: 100%;
  margin: -8px 0 4px;
}

.ybdjk-match-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, hsl(39 50% 52% / .22), transparent 40%),
    linear-gradient(145deg, #fbf6ec 0%, #fff 72%);
  border: 1px solid hsl(39 45% 42% / .11);
  box-shadow: 0 16px 34px rgba(23,18,12,.08);
}

.ybdjk-match-kicker {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--yb-gold);
  background: hsl(39 45% 42% / .10);
  font-family: var(--yb-serif);
  font-size: 11px;
  font-weight: 600;
}

.ybdjk-match-hero h3 {
  margin: 10px 0 8px;
  color: var(--yb-ink);
  font-family: var(--yb-serif);
  font-size: 22px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ybdjk-match-hero p {
  margin: 0;
  color: var(--yb-muted);
  font-family: var(--yb-serif);
  font-size: 12px;
  line-height: 1.65;
  font-weight: 500;
}

.ybdjk-match-cta {
  flex: 0 0 auto;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--yb-gold), var(--yb-gold-2));
  box-shadow: 0 12px 24px hsl(39 45% 42% / .24);
  font-family: var(--yb-serif);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.ybdjk-pref-group {
  margin-top: 18px;
}

.ybdjk-pref-title {
  margin-bottom: 10px;
  color: var(--yb-ink);
  font-size: 15px;
  font-weight: 900;
}

.ybdjk-pref-chips {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.ybdjk-pref-chips::-webkit-scrollbar {
  display: none;
}

.ybdjk-pref-chip {
  flex: 0 0 auto;
  border: 1px solid hsl(39 45% 42% / .13);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--yb-ink);
  background: #fff;
  box-shadow: 0 8px 18px rgba(23,18,12,.05);
  font-size: 13px;
  font-weight: 800;
}

.ybdjk-pref-chip.is-selected {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--yb-gold), var(--yb-gold-2));
  box-shadow: 0 10px 22px hsl(39 45% 42% / .22);
}

.ybdjk-match-title {
  margin-top: 24px !important;
}

.ybdjk-plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(142px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
}

.ybdjk-plan-list::-webkit-scrollbar {
  display: none;
}

.ybdjk-plan-card {
  font-family: var(--yb-serif);
  min-height: 162px;
  border: 0;
  border-radius: 20px;
  padding: 14px;
  text-align: left;
  background: linear-gradient(160deg, #fff 0%, #fbf6ed 100%);
  box-shadow: 0 14px 28px rgba(23,18,12,.09);
}

.ybdjk-plan-card strong,
.ybdjk-plan-card em,
.ybdjk-plan-card span {
  display: block;
}

.ybdjk-plan-score {
  width: fit-content;
  margin-bottom: 14px;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--yb-gold);
  background: hsl(39 45% 42% / .10);
  font-size: 11px;
  font-weight: 700;
}

.ybdjk-plan-card strong {
  color: var(--yb-ink);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}

.ybdjk-plan-card em {
  margin-top: 7px;
  color: var(--yb-gold);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
}

.ybdjk-plan-card span:last-child {
  margin-top: 9px;
  color: var(--yb-muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.mt-auto.pt-6.pb-4 {
  display: none !important;
}

.ybdjk-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 1000;
  width: min(100vw, 430px);
  transform: translateX(-50%);
  height: 74px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  border-top: 1px solid rgba(23,18,12,.07);
  box-shadow: 0 -10px 28px rgba(23,18,12,.08);
  backdrop-filter: blur(16px);
}

.ybdjk-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #17120c;
  text-decoration: none;
  font-family: var(--yb-serif);
  font-size: 11px;
  font-weight: 600;
}

.ybdjk-bottom-nav a svg {
  width: 25px;
  height: 25px;
  stroke-width: 2;
}

.ybdjk-bottom-nav a.is-active {
  color: #17120c;
}

.ybdjk-bottom-nav a.is-main {
  transform: translateY(-20px);
}

.ybdjk-bottom-nav a.is-main .ybdjk-nav-icon {
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.82) 0 8%, transparent 18%),
    radial-gradient(circle at 66% 74%, rgba(89,111,101,.20), transparent 34%),
    linear-gradient(145deg, #b8aa94 0%, #9fb0a0 42%, #c6b7a2 100%);
  box-shadow:
    inset 7px 8px 14px rgba(255,255,255,.28),
    inset -10px -12px 18px rgba(80,74,62,.20),
    0 16px 30px rgba(126,119,103,.32);
}

.ybdjk-bottom-nav a.is-main .ybdjk-nav-icon::before {
  content: "";
  position: absolute;
  inset: 9px 11px auto auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  filter: blur(.2px);
  display: block;
}

.ybdjk-bottom-nav a.is-main .ybdjk-nav-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 34px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(74,77,68,.12);
  filter: blur(5px);
  display: block;
}

.ybdjk-bottom-nav a.is-main .ybdjk-nav-icon svg {
  display: none;
}

.ybdjk-bottom-nav a.is-main span:last-child {
  margin-top: -4px;
  color: #8d806f;
  font-weight: 900;
}

.ybdjk-generate-page,
.ybdjk-gallery-page,
.ybdjk-history-page {
  padding-top: 74px !important;
}

.ybdjk-page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ybdjk-page-head .ybdjk-back {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 14px;
  color: var(--yb-ink);
  background: #f7f2e8;
  font-size: 28px;
  line-height: 1;
}

.ybdjk-page-head span,
.ybdjk-page-head strong {
  display: block;
  font-family: var(--yb-serif);
}

.ybdjk-page-head span {
  color: var(--yb-ink);
  font-size: 23px;
  line-height: 1.25;
  font-weight: 700;
}

.ybdjk-page-head strong {
  margin-top: 4px;
  color: var(--yb-muted);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 500;
}

.ybdjk-generate-card {
  display: grid;
  gap: 13px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(23,18,12,.06);
  background: linear-gradient(145deg, #fbf6ec, #fff);
  box-shadow: 0 14px 30px rgba(23,18,12,.06);
}

.ybdjk-generate-preview {
  min-height: 150px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff4f7, #eff6f8);
}

.ybdjk-generate-preview i {
  position: absolute;
  right: 26px;
  top: 26px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.9) 0 8%, transparent 18%),
    linear-gradient(145deg, #e7b6c5, #7892a0);
  box-shadow: inset -12px -14px 24px rgba(80,74,62,.14), 0 18px 34px rgba(23,18,12,.10);
}

.ybdjk-generate-preview b,
.ybdjk-generate-preview small,
.ybdjk-generate-card label {
  font-family: var(--yb-serif);
}

.ybdjk-generate-preview b {
  font-size: 20px;
}

.ybdjk-generate-preview small,
.ybdjk-generate-card label {
  color: var(--yb-muted);
  font-size: 12px;
}

.ybdjk-generate-card textarea {
  min-height: 112px;
  resize: vertical;
  border: 1px solid rgba(23,18,12,.08);
  border-radius: 18px;
  padding: 13px;
  outline: none;
  color: var(--yb-ink);
  background: rgba(255,255,255,.76);
  font-family: var(--yb-serif);
  font-size: 13px;
  line-height: 1.7;
}

.ybdjk-generate-chips,
.ybdjk-gallery-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.ybdjk-generate-chips button,
.ybdjk-gallery-tags button {
  flex: 0 0 auto;
  border: 1px solid rgba(23,18,12,.06);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--yb-ink);
  background: rgba(255,255,255,.78);
  font-family: var(--yb-serif);
  font-size: 12px;
}

.ybdjk-gallery-tags button.is-active {
  color: #fff;
  background: var(--yb-gold);
}

.ybdjk-history-head {
  margin-bottom: 12px;
}

.ybdjk-history-head .ybdjk-back {
  display: none !important;
}

.ybdjk-history-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
  margin-bottom: 10px;
}

.ybdjk-history-tabs button {
  flex: 0 0 auto;
  border: 1px solid rgba(23,18,12,.06);
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--yb-ink);
  background: rgba(255,255,255,.78);
  font-family: var(--yb-serif);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(23,18,12,.035);
}

.ybdjk-history-tabs button.is-active {
  color: #fff;
  background: linear-gradient(145deg, #b8914b, #c4a15e);
}

.ybdjk-history-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(23,18,12,.06);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(212,163,154,.18), transparent 38%),
    linear-gradient(145deg, rgba(251,246,236,.92), rgba(255,255,255,.84));
}

.ybdjk-history-stats span {
  color: var(--yb-ink);
  font-family: var(--yb-serif);
  font-size: 16px;
  font-weight: 800;
}

.ybdjk-history-stats small {
  color: var(--yb-muted);
  font-family: var(--yb-serif);
  font-size: 11px;
}

.ybdjk-history-grid {
  column-count: 2;
  column-gap: 10px;
}

.ybdjk-history-card {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  margin: 0 0 10px;
  border: 1px solid rgba(23,18,12,.06);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 26px rgba(23,18,12,.055);
}

.ybdjk-history-card a {
  display: block;
  overflow: hidden;
  background: linear-gradient(145deg, #fbf6ec, #eef5f6);
}

.ybdjk-history-card img {
  display: block;
  width: 100%;
  min-height: 132px;
  object-fit: cover;
}

.ybdjk-history-card div {
  padding: 11px 12px 13px;
}

.ybdjk-history-card span {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #8d6c35;
  background: rgba(184,145,75,.12);
  font-family: var(--yb-serif);
  font-size: 10px;
  font-weight: 700;
}

.ybdjk-history-card strong,
.ybdjk-history-card small {
  display: block;
  font-family: var(--yb-serif);
}

.ybdjk-history-card strong {
  color: var(--yb-ink);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 800;
}

.ybdjk-history-card small {
  margin-top: 4px;
  color: var(--yb-muted);
  font-size: 10.5px;
  line-height: 1.55;
}

.ybdjk-history-empty {
  column-span: all;
  padding: 48px 0;
  color: var(--yb-muted);
  text-align: center;
  font-family: var(--yb-serif);
}

.ybdjk-hide-original-back,
.ybdjk-hide-original-style {
  display: none !important;
}

body.ybdjk-original-generate .page-container > div:first-child button:first-child,
body.ybdjk-original-flow .page-container > div:first-child button:first-child {
  display: none !important;
}

body.ybdjk-original-generate button {
  color: inherit;
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif !important;
}

body.ybdjk-original-generate button:has(img),
body.ybdjk-original-generate button:has(svg) {
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 10px 24px rgba(23,18,12,.06) !important;
}

body.ybdjk-original-generate button img,
body.ybdjk-original-generate button svg {
  opacity: 1 !important;
  filter: brightness(1.35) contrast(1.22) saturate(1.25) !important;
}

body.ybdjk-original-generate .ybdjk-generate-type {
  position: relative !important;
  min-height: 86px !important;
  padding: 11px 8px 10px !important;
  border-color: rgba(184,145,75,.18) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(251,246,236,.9)) !important;
  box-shadow: 0 12px 26px rgba(23,18,12,.075) !important;
  color: #17120c !important;
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif !important;
  font-weight: 650 !important;
}

body.ybdjk-original-generate .ybdjk-generate-type::before {
  content: attr(data-ybdjk-icon);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 auto 7px;
  border-radius: 50%;
  color: #6f4f1f;
  font-family: var(--yb-serif);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.96) 0 12%, transparent 26%),
    radial-gradient(circle at 70% 78%, rgba(80,74,62,.13), transparent 36%),
    linear-gradient(145deg, #f3d7df 0%, #d6e1e4 52%, #ead9b5 100%);
  box-shadow:
    inset 5px 6px 10px rgba(255,255,255,.34),
    inset -7px -8px 12px rgba(80,74,62,.12),
    0 10px 20px rgba(184,145,75,.22);
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
  -webkit-text-stroke: .35px #6f4f1f;
}

body.ybdjk-original-generate .ybdjk-generate-type img,
body.ybdjk-original-generate .ybdjk-generate-type svg {
  display: none !important;
}

body.ybdjk-original-generate .ybdjk-generate-type * {
  font-family: "Noto Sans SC", "DM Sans", system-ui, sans-serif !important;
}

.ybdjk-avatar-fallback {
  position: relative;
  display: grid !important;
  place-items: center;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.86), transparent 26%),
    linear-gradient(145deg, #f3d7df 0%, #d6e1e4 100%) !important;
  border: 1px solid rgba(184,145,75,.10);
  box-shadow: inset -8px -10px 18px rgba(80,74,62,.10), 0 8px 18px rgba(23,18,12,.045);
}

.ybdjk-avatar-fallback::after {
  content: attr(data-ybdjk-label);
  color: #8d6c35;
  font-family: var(--yb-serif);
  font-size: 15px;
  font-weight: 800;
}

.ybdjk-avatar-fallback-img {
  display: none !important;
}

.ybdjk-random-page {
  padding-top: 74px !important;
}

.page-container.has-ybdjk-fixed-header.ybdjk-dream-page,
.page-container.has-ybdjk-fixed-header.ybdjk-play-page,
.page-container.has-ybdjk-fixed-header.ybdjk-scent-lab-page,
.page-container.has-ybdjk-fixed-header.ybdjk-color-lab-page,
.page-container.has-ybdjk-fixed-header.ybdjk-theme-card-page,
.page-container.has-ybdjk-fixed-header.ybdjk-wuxing-wheel-page {
  padding-top: 74px !important;
}

.ybdjk-random-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ybdjk-random-top .ybdjk-back {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 14px;
  color: var(--yb-ink);
  background: #f7f2e8;
  font-size: 28px;
  line-height: 1;
}

.ybdjk-random-top span,
.ybdjk-random-top strong {
  display: block;
}

.ybdjk-random-top span {
  color: var(--yb-ink);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.ybdjk-random-top strong {
  margin-top: 3px;
  color: var(--yb-muted);
  font-size: 12px;
  font-weight: 700;
}

.ybdjk-random-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px 16px 22px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 36%, hsl(39 50% 52% / .18), transparent 34%),
    linear-gradient(160deg, #fbf6ec 0%, #fff 72%);
  border: 1px solid hsl(39 45% 42% / .10);
  box-shadow: 0 18px 40px rgba(23,18,12,.08);
}

.ybdjk-random-bracelet {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 4px auto 18px;
  border-radius: 50%;
  animation: ybdjkBraceletFloat 4.2s ease-in-out infinite;
}

.ybdjk-random-bracelet::before {
  content: "";
  position: absolute;
  inset: 50px;
  border-radius: 50%;
  border: 1px dashed hsl(39 45% 42% / .18);
}

.ybdjk-random-bracelet i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ecd18a, #b98b3f 72%);
  box-shadow: inset 0 6px 12px rgba(255,255,255,.25), 0 12px 28px hsl(39 45% 42% / .22);
}

.ybdjk-random-bead {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.7), transparent 24%), var(--c);
  transform: rotate(var(--a)) translate(94px) rotate(calc(-1 * var(--a)));
  box-shadow: inset -4px -5px 8px rgba(0,0,0,.18), 0 8px 14px rgba(23,18,12,.16);
  animation: ybdjkBeadPop .38s both;
}

@keyframes ybdjkBeadPop {
  from {
    opacity: 0;
    scale: .35;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

.ybdjk-spin-btn {
  width: 168px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, var(--yb-gold), var(--yb-gold-2));
  box-shadow: 0 14px 26px hsl(39 45% 42% / .28);
  font-size: 17px;
  font-weight: 900;
}

.ybdjk-random-hint {
  max-width: 280px;
  margin: 14px auto 0;
  color: var(--yb-muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 650;
}

.ybdjk-random-result {
  margin-top: 18px;
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid hsl(39 45% 42% / .10);
  box-shadow: 0 14px 30px rgba(23,18,12,.07);
}

.ybdjk-random-name {
  color: var(--yb-ink);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.ybdjk-random-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.ybdjk-random-meta span {
  display: block;
  padding: 10px;
  border-radius: 14px;
  color: var(--yb-muted);
  background: #faf7ef;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.ybdjk-lock-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ybdjk-lock-row::-webkit-scrollbar {
  display: none;
}

.ybdjk-lock-row button {
  flex: 0 0 auto;
  border: 1px solid hsl(39 45% 42% / .14);
  border-radius: 999px;
  padding: 9px 12px;
  color: var(--yb-ink);
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

.ybdjk-lock-row button.is-locked {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--yb-gold), var(--yb-gold-2));
}

.ybdjk-random-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.ybdjk-soft-btn,
.ybdjk-primary-btn {
  height: 48px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 900;
}

.ybdjk-soft-btn {
  border: 1px solid hsl(39 45% 42% / .14);
  color: var(--yb-gold);
  background: #fff;
}

.ybdjk-primary-btn {
  border: 0;
  color: #fff;
  background: linear-gradient(145deg, var(--yb-gold), var(--yb-gold-2));
}

.ybdjk-dream-page {
  padding-top: 16px !important;
}

.ybdjk-dream-basket {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(127,155,99,.20), transparent 40%),
    linear-gradient(145deg, #f4f8ef 0%, #fff 76%);
  border: 1px solid rgba(127,155,99,.13);
  box-shadow: 0 14px 28px rgba(23,18,12,.06);
}

.ybdjk-dream-basket span,
.ybdjk-dream-basket strong {
  display: block;
}

.ybdjk-dream-basket span {
  color: var(--yb-ink);
  font-size: 18px;
  font-weight: 900;
}

.ybdjk-dream-basket strong {
  margin-top: 4px;
  color: var(--yb-muted);
  font-size: 12px;
  font-weight: 750;
}

.ybdjk-basket-list {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 210px;
}

.ybdjk-basket-list button,
.ybdjk-basket-list > span {
  border: 0;
  border-radius: 999px;
  padding: 8px 10px;
  color: #fff;
  background: linear-gradient(145deg, #6f8e5d, #91ad74);
  font-size: 12px;
  font-weight: 850;
}

.ybdjk-basket-list > span {
  color: var(--yb-muted);
  background: rgba(255,255,255,.65);
}

.ybdjk-bead-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.ybdjk-bead-card {
  min-height: 146px;
  border: 1px solid hsl(39 45% 42% / .10);
  border-radius: 22px;
  padding: 12px;
  text-align: left;
  background: linear-gradient(160deg, #fff 0%, #fbf7ef 100%);
  box-shadow: 0 12px 24px rgba(23,18,12,.065);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ybdjk-bead-card.is-picked {
  border-color: rgba(127,155,99,.55);
  box-shadow: 0 14px 28px rgba(127,155,99,.18);
  transform: translateY(-2px);
}

.ybdjk-bead-orb {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.75), transparent 25%), var(--c);
  box-shadow: inset -5px -6px 9px rgba(0,0,0,.15), 0 10px 18px rgba(23,18,12,.14);
}

.ybdjk-bead-card strong,
.ybdjk-bead-card em,
.ybdjk-bead-card small {
  display: block;
}

.ybdjk-bead-card strong {
  color: var(--yb-ink);
  font-size: 15px;
  font-weight: 900;
}

.ybdjk-bead-card em {
  margin-top: 5px;
  color: #6f8e5d;
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
}

.ybdjk-bead-card small {
  margin-top: 6px;
  color: var(--yb-muted);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
}

.ybdjk-dream-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
  margin: 16px 0;
}

.ybdjk-dream-plans {
  padding-bottom: 12px;
}

.ybdjk-dream-plan-list {
  display: grid;
  gap: 12px;
}

.ybdjk-dream-plan {
  border: 0;
  border-radius: 22px;
  padding: 16px;
  text-align: left;
  background: linear-gradient(145deg, #fff 0%, #f6faef 100%);
  box-shadow: 0 14px 28px rgba(23,18,12,.075);
}

.ybdjk-dream-plan span,
.ybdjk-dream-plan strong,
.ybdjk-dream-plan em,
.ybdjk-dream-plan small {
  display: block;
}

.ybdjk-dream-plan span {
  width: fit-content;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #6f8e5d;
  background: rgba(127,155,99,.12);
  font-size: 11px;
  font-weight: 900;
}

.ybdjk-dream-plan strong {
  color: var(--yb-ink);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}

.ybdjk-dream-plan em {
  margin-top: 7px;
  color: var(--yb-gold);
  font-style: normal;
  font-size: 12px;
  font-weight: 850;
}

.ybdjk-dream-plan small {
  margin-top: 8px;
  color: var(--yb-muted);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 650;
}

.ybdjk-play-page {
  padding-top: 16px !important;
}

.ybdjk-play-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 26px;
  background: linear-gradient(145deg, #fbf6ec 0%, #fff 74%);
  border: 1px solid hsl(39 45% 42% / .10);
  box-shadow: 0 14px 30px rgba(23,18,12,.07);
}

.ybdjk-play-hero.tone-brown {
  background: radial-gradient(circle at 100% 0%, rgba(138,104,70,.18), transparent 42%), linear-gradient(145deg, #f8f0e8 0%, #fff 74%);
}

.ybdjk-play-hero.tone-red {
  background: radial-gradient(circle at 100% 0%, rgba(181,106,88,.18), transparent 42%), linear-gradient(145deg, #f9eeee 0%, #fff 74%);
}

.ybdjk-play-hero.tone-blue {
  background: radial-gradient(circle at 100% 0%, rgba(88,122,146,.18), transparent 42%), linear-gradient(145deg, #edf5f8 0%, #fff 74%);
}

.ybdjk-play-hero.tone-ink {
  background: radial-gradient(circle at 100% 0%, rgba(77,74,67,.16), transparent 42%), linear-gradient(145deg, #f0eee9 0%, #fff 74%);
}

.ybdjk-play-symbol {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--yb-gold);
  background: rgba(255,255,255,.75);
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 8px 18px rgba(23,18,12,.08);
}

.ybdjk-play-symbol svg {
  width: 27px;
  height: 27px;
}

.ybdjk-play-hero span,
.ybdjk-play-hero strong {
  display: block;
}

.ybdjk-play-hero span {
  color: var(--yb-gold);
  font-size: 12px;
  font-weight: 900;
}

.ybdjk-play-hero strong {
  margin-top: 6px;
  color: var(--yb-ink);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.ybdjk-choice-groups {
  display: grid;
  gap: 16px;
}

.ybdjk-choice-group {
  padding: 16px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid hsl(39 45% 42% / .09);
  box-shadow: 0 12px 24px rgba(23,18,12,.055);
}

.ybdjk-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ybdjk-choice-chip {
  border: 1px solid hsl(39 45% 42% / .13);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--yb-ink);
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}

.ybdjk-choice-chip.is-selected {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--yb-gold), var(--yb-gold-2));
  box-shadow: 0 10px 20px hsl(39 45% 42% / .20);
}

.ybdjk-choice-plans {
  padding-bottom: 12px;
}

.ybdjk-color-lab-page {
  padding-top: 16px !important;
}

.ybdjk-color-stage {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  display: grid;
  place-items: center;
  padding: 22px 16px 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--color-a) 48%, transparent), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--color-c) 58%, #fff) 0%, #fff 78%);
  border: 1px solid rgba(23,18,12,.06);
  box-shadow: 0 18px 40px rgba(23,18,12,.08);
}

.ybdjk-color-glow {
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-b) 30%, transparent), transparent 62%);
  filter: blur(14px);
}

.ybdjk-color-bracelet {
  position: relative;
  width: 230px;
  height: 230px;
  margin-bottom: 12px;
  border-radius: 50%;
  animation: ybdjkBraceletFloat 4.2s ease-in-out infinite;
}

.ybdjk-color-bracelet::before {
  content: "";
  position: absolute;
  inset: 48px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-b) 28%, transparent);
}

.ybdjk-color-bracelet i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, rgba(255,255,255,.75), transparent 23%), linear-gradient(145deg, var(--color-a), var(--color-b));
  box-shadow: inset -7px -8px 13px rgba(0,0,0,.16), 0 12px 24px rgba(23,18,12,.18);
}

.ybdjk-color-bead {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.74), transparent 24%), var(--c);
  transform: rotate(var(--a)) translate(90px) rotate(calc(-1 * var(--a)));
  box-shadow: inset -4px -5px 8px rgba(0,0,0,.16), 0 8px 14px rgba(23,18,12,.13);
}

.ybdjk-color-caption {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}

.ybdjk-color-caption span,
.ybdjk-color-caption strong,
.ybdjk-color-caption em {
  display: block;
}

.ybdjk-color-caption span {
  color: var(--yb-gold);
  font-size: 11px;
  font-weight: 900;
}

.ybdjk-color-caption strong {
  margin-top: 4px;
  color: var(--yb-ink);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.ybdjk-color-caption em {
  margin-top: 5px;
  color: var(--yb-muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.ybdjk-color-strip {
  display: flex;
  gap: 12px;
  margin: 16px -22px 14px;
  padding: 0 22px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ybdjk-color-strip::-webkit-scrollbar {
  display: none;
}

.ybdjk-color-card {
  flex: 0 0 118px;
  min-height: 128px;
  border: 1px solid rgba(23,18,12,.07);
  border-radius: 22px;
  padding: 12px;
  text-align: left;
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-c) 72%, #fff), #fff);
  box-shadow: 0 12px 24px rgba(23,18,12,.06);
}

.ybdjk-color-card.is-selected {
  border-color: color-mix(in srgb, var(--color-b) 55%, transparent);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--color-b) 20%, transparent);
}

.ybdjk-color-card > span {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.76), transparent 24%), linear-gradient(145deg, var(--color-a), var(--color-b), var(--color-c));
  box-shadow: inset -6px -7px 11px rgba(0,0,0,.15), 0 9px 16px rgba(23,18,12,.13);
}

.ybdjk-color-card strong,
.ybdjk-color-card em {
  display: block;
}

.ybdjk-color-card strong {
  color: var(--yb-ink);
  font-size: 15px;
  font-weight: 900;
}

.ybdjk-color-card em {
  margin-top: 5px;
  color: var(--yb-muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.ybdjk-style-strip {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.ybdjk-style-strip::-webkit-scrollbar {
  display: none;
}

.ybdjk-scent-lab-page,
.ybdjk-theme-card-page,
.ybdjk-wuxing-wheel-page {
  padding-top: 16px !important;
}

.ybdjk-scent-stage {
  position: relative;
  min-height: 318px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 24px 16px 18px;
  border-radius: 30px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--scent-a) 34%, #fff), #fff 78%);
  box-shadow: 0 18px 40px rgba(23,18,12,.08);
}

.ybdjk-scent-mist {
  position: absolute;
  inset: 30px;
}

.ybdjk-scent-mist i {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--scent-b) 24%, transparent), transparent 62%);
  animation: ybdjkScentMist 3.8s ease-in-out infinite;
}

.ybdjk-scent-mist i:nth-child(2) {
  inset: 44px;
  animation-delay: .7s;
}

.ybdjk-scent-mist i:nth-child(3) {
  inset: 70px;
  animation-delay: 1.3s;
}

@keyframes ybdjkScentMist {
  0%, 100% { transform: scale(.9); opacity: .58; }
  50% { transform: scale(1.08); opacity: .95; }
}

.ybdjk-scent-core {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.78), transparent 22%), linear-gradient(145deg, var(--scent-a), var(--scent-b));
  box-shadow: inset -12px -14px 22px rgba(0,0,0,.14), 0 18px 34px color-mix(in srgb, var(--scent-b) 28%, transparent);
}

.ybdjk-scent-caption {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}

.ybdjk-scent-caption span,
.ybdjk-scent-caption strong,
.ybdjk-scent-caption em {
  display: block;
}

.ybdjk-scent-caption span {
  color: var(--yb-gold);
  font-size: 11px;
  font-weight: 900;
}

.ybdjk-scent-caption strong {
  margin-top: 4px;
  color: var(--yb-ink);
  font-size: 22px;
  font-weight: 900;
}

.ybdjk-scent-caption em {
  margin-top: 5px;
  color: var(--yb-muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.ybdjk-scent-wheel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 16px;
}

.ybdjk-scent-node {
  border: 1px solid rgba(23,18,12,.07);
  border-radius: 22px;
  padding: 12px;
  min-height: 126px;
  text-align: left;
  background: linear-gradient(145deg, color-mix(in srgb, var(--scent-a) 35%, #fff), #fff);
  box-shadow: 0 12px 24px rgba(23,18,12,.06);
}

.ybdjk-scent-node.is-selected {
  border-color: color-mix(in srgb, var(--scent-b) 50%, transparent);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--scent-b) 18%, transparent);
}

.ybdjk-scent-node span {
  display: block;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.76), transparent 24%), linear-gradient(145deg, var(--scent-a), var(--scent-b));
  box-shadow: inset -6px -7px 11px rgba(0,0,0,.15), 0 9px 16px rgba(23,18,12,.13);
}

.ybdjk-scent-node strong,
.ybdjk-scent-node em {
  display: block;
}

.ybdjk-scent-node strong {
  color: var(--yb-ink);
  font-size: 15px;
  font-weight: 900;
}

.ybdjk-scent-node em {
  margin-top: 5px;
  color: var(--yb-muted);
  font-style: normal;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
}

.ybdjk-gift-card {
  position: relative;
  overflow: hidden;
  min-height: 255px;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0%, rgba(120,146,160,.20), transparent 44%),
    linear-gradient(145deg, #eef6f8, #fff 74%);
  box-shadow: 0 18px 40px rgba(23,18,12,.08);
}

.ybdjk-gift-card span,
.ybdjk-gift-card strong,
.ybdjk-gift-card p {
  position: relative;
  z-index: 2;
  display: block;
}

.ybdjk-gift-card span {
  color: #7892a0;
  font-size: 12px;
  font-weight: 900;
}

.ybdjk-gift-card strong {
  margin-top: 8px;
  color: var(--yb-ink);
  font-size: 28px;
  line-height: 1.12;
  font-weight: 900;
}

.ybdjk-gift-card p {
  max-width: 230px;
  margin: 12px 0 0;
  color: var(--yb-muted);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 750;
}

.ybdjk-gift-beads {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 18px;
  height: 110px;
  transform: rotate(-3deg);
  animation: ybdjkGiftStringFloat 3.6s ease-in-out infinite;
  will-change: transform;
}

.ybdjk-gift-beads i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.76), transparent 24%), linear-gradient(145deg, #b9cbd2, #7892a0);
  box-shadow: inset -4px -5px 8px rgba(0,0,0,.15), 0 8px 14px rgba(23,18,12,.13);
  animation: ybdjkGiftBeadWave 1.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * .075s);
  transform: translateY(5px) scale(var(--s));
  transform-origin: center;
  will-change: transform;
}

.ybdjk-theme-river,
.ybdjk-wish-list {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.ybdjk-theme-river::-webkit-scrollbar,
.ybdjk-wish-list::-webkit-scrollbar {
  display: none;
}

.ybdjk-theme-river button,
.ybdjk-wish-list button {
  flex: 0 0 auto;
  border: 1px solid rgba(120,146,160,.18);
  border-radius: 18px;
  padding: 12px 14px;
  color: var(--yb-ink);
  background: #fff;
  box-shadow: 0 10px 20px rgba(23,18,12,.05);
  font-size: 13px;
  font-weight: 850;
}

.ybdjk-theme-river button.is-selected,
.ybdjk-wish-list button.is-selected {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #7892a0, #b9cbd2);
}

.ybdjk-wuxing-stage {
  position: relative;
  height: 330px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  background: linear-gradient(145deg, #f0eee9, #fff 75%);
  box-shadow: 0 18px 40px rgba(23,18,12,.08);
}

.ybdjk-wuxing-ring {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px dashed rgba(23,18,12,.12);
  animation: ybdjkBraceletFloat 4.6s ease-in-out infinite;
}

@keyframes ybdjkBraceletFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes ybdjkGiftStringFloat {
  0%, 100% {
    transform: translateY(5px) rotate(-3deg);
  }
  50% {
    transform: translateY(-12px) rotate(-3deg);
  }
}

@keyframes ybdjkGiftBeadWave {
  0%, 100% {
    transform: translateY(var(--from)) scale(var(--s));
  }
  50% {
    transform: translateY(var(--to)) scale(var(--s));
  }
}

.ybdjk-wuxing-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  margin: -39px;
  border: 0;
  border-radius: 50%;
  transform: rotate(calc(var(--i) * 72deg - 90deg)) translate(112px) rotate(calc(-1 * (var(--i) * 72deg - 90deg)));
  color: var(--yb-ink);
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.76), transparent 24%), linear-gradient(145deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c));
  box-shadow: inset -7px -8px 13px rgba(0,0,0,.13), 0 10px 18px rgba(23,18,12,.12);
}

.ybdjk-wuxing-node.is-selected {
  outline: 3px solid color-mix(in srgb, var(--c) 35%, transparent);
}

.ybdjk-wuxing-node span,
.ybdjk-wuxing-node em {
  display: block;
}

.ybdjk-wuxing-node span {
  font-size: 22px;
  font-weight: 900;
}

.ybdjk-wuxing-node em {
  margin-top: 2px;
  font-style: normal;
  font-size: 9px;
  font-weight: 750;
}

.ybdjk-wuxing-center {
  position: absolute;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.65), transparent 23%), linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  box-shadow: inset -10px -12px 18px rgba(0,0,0,.16), 0 16px 28px rgba(23,18,12,.18);
}

.ybdjk-wuxing-center strong,
.ybdjk-wuxing-center span {
  display: block;
  text-align: center;
}

.ybdjk-wuxing-center strong {
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.ybdjk-wuxing-center span {
  max-width: 82px;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 750;
}

@media (max-width: 360px) {
  .page-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .ybdjk-category-grid {
    gap: 8px;
  }
  .ybdjk-category-icon {
    width: 28px;
    height: 28px;
  }
  .ybdjk-category {
    min-height: 110px;
    padding: 12px;
  }
  .ybdjk-play-name {
    font-size: 15px;
  }
  .ybdjk-play-card small {
    font-size: 10px;
  }
  .ybdjk-match-hero {
    align-items: stretch;
    flex-direction: column;
  }
  .ybdjk-match-cta {
    width: 100%;
  }
}