:root {
  color-scheme: light;
  --ink: #214b38;
  --ink-soft: #38624b;
  --muted: #958673;
  --line: #e9dec9;
  --paper: #fffaf1;
  --paper-deep: #f2e5d1;
  --green: #315f46;
  --green-dark: #244f39;
  --gold: #c79651;
  --shadow: 0 16px 34px rgba(82, 58, 31, .11);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: #f3efe8;
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "Microsoft YaHei", serif;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  display: grid;
  justify-items: center;
  font-synthesis-weight: none;
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  touch-action: manipulation;
}

.h5-shell {
  position: relative;
  width: min(100%, 430px);
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 4% 6%, rgba(216, 207, 181, .58), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(255, 255, 255, .78), transparent 24%),
    linear-gradient(180deg, #fffaf1 0%, #fbf4e8 54%, #f2e5d1 100%);
}

.h5-shell > section {
  display: none;
}

.h5-shell > .home-screen {
  display: flex;
}

.h5-shell:has(#picks:target) > .home-screen,
.h5-shell:has(#design:target) > .home-screen,
.h5-shell:has(#finish:target) > .home-screen,
.h5-shell:has(#mine:target) > .home-screen {
  display: none;
}

.h5-shell:has(#picks:target) > #picks,
.h5-shell:has(#design:target) > #design,
.h5-shell:has(#finish:target) > #finish {
  display: block;
}

.h5-shell:has(#mine:target) > #mine {
  display: grid;
}

.h5-shell:has(#design:target) .tabbar,
.h5-shell:has(#finish:target) .tabbar {
  display: none;
}

.home-screen {
  position: relative;
  min-height: 100dvh;
  padding: max(7px, env(safe-area-inset-top)) 10px calc(54px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mini-program-capsule {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: 10px;
  z-index: 10;
  width: 68px;
  height: 30px;
  display: grid;
  grid-template-columns: 39px 29px;
  align-items: center;
  border: 1px solid rgba(232, 226, 216, .94);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 5px 13px rgba(74, 55, 34, .075), inset 0 1px 0 rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}

.mini-program-capsule::before {
  position: absolute;
  left: 39px;
  top: 7px;
  width: 1px;
  height: 16px;
  border-radius: 999px;
  background: rgba(224, 216, 204, .92);
  content: "";
}

.capsule-more {
  position: relative;
  justify-self: center;
  width: 22px;
  height: 8px;
}

.capsule-more::before,
.capsule-more::after {
  position: absolute;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #171717;
  content: "";
}

.capsule-more::before {
  left: 2px;
  box-shadow: 8px 0 0 #171717;
}

.capsule-more::after {
  right: 0;
}

.capsule-target {
  position: relative;
  justify-self: center;
  width: 14px;
  height: 14px;
  border: 1.6px solid #171717;
  border-radius: 50%;
}

.capsule-target::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #171717;
  transform: translate(-50%, -50%);
  content: "";
}

.brand-block {
  width: 100%;
  min-height: 119px;
  padding-top: 2px;
  text-align: center;
}

.brand-name {
  display: inline-grid;
  min-width: 58px;
  min-height: 26px;
  margin: 0 auto 15px;
  place-items: center;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .92);
}

.brand-name::after {
  display: block;
  width: 42px;
  height: 1px;
  margin-top: 4px;
  background: linear-gradient(90deg, transparent, rgba(196, 154, 91, .55), transparent);
  content: "";
}

.brand-block h1 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .84);
}

.brand-subtitle {
  position: relative;
  width: fit-content;
  max-width: 280px;
  margin: 11px auto 0;
  padding: 0 38px;
  color: #9a8a75;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.brand-subtitle::before,
.brand-subtitle::after {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 157, 96, .58));
  transform: translateY(-50%);
  content: "";
}

.brand-subtitle::before {
  left: 0;
}

.brand-subtitle::after {
  right: 0;
  transform: translateY(-50%) scaleX(-1);
}

.hero-plate {
  position: relative;
  width: 100%;
  height: 268px;
  min-height: 268px;
  margin: 0;
  display: grid;
  place-items: center;
}

.hero-plate::before {
  position: absolute;
  inset: 18px 18px 12px;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 82%, rgba(112, 84, 53, .16), rgba(112, 84, 53, .05) 34%, transparent 62%);
  filter: blur(10px);
  content: "";
}

.hero-plate img {
  position: relative;
  z-index: 1;
  width: min(278px, 87vw);
  height: auto;
  display: block;
  border-radius: 26px;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 13px 18px rgba(68, 50, 30, .10));
  -webkit-mask-image: radial-gradient(ellipse at 50% 52%, #000 56%, rgba(0, 0, 0, .92) 70%, rgba(0, 0, 0, .34) 87%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 52%, #000 56%, rgba(0, 0, 0, .92) 70%, rgba(0, 0, 0, .34) 87%, transparent 100%);
}

.trust-row {
  width: 100%;
  max-width: 306px;
  min-height: 25px;
  margin: 1px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  list-style: none;
}

.trust-row li {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #8b8071;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.trust-row li::before {
  width: 13px;
  height: 13px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(151, 135, 111, .62);
  border-radius: 50%;
  color: #8f806c;
  font-size: 7px;
  line-height: 1;
  content: "✓";
}

.home-actions {
  width: min(100% - 24px, 292px);
  display: grid;
  gap: 7px;
  margin-top: 6px;
}

.primary-action,
.secondary-action {
  min-height: 43px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-family: "Microsoft YaHei", sans-serif;
  font-weight: 700;
  line-height: 1;
}

.primary-action {
  background: linear-gradient(180deg, #3d6f53, #28583f);
  color: #fffaf1;
  font-size: 15.5px;
  box-shadow: 0 13px 20px rgba(43, 85, 62, .18), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -10px 20px rgba(22, 64, 44, .16);
}

.primary-action::before {
  margin-right: 8px;
  content: "✦";
}

.secondary-action {
  min-height: 36px;
  border: 1px solid rgba(232, 221, 204, .8);
  background: rgba(255, 251, 243, .92);
  color: #7c6344;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(84, 61, 36, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.gift-card {
  position: relative;
  width: min(100% - 24px, 296px);
  height: 76px;
  min-height: 76px;
  margin: 8px 0 0;
  overflow: hidden;
  border-radius: 8px;
  background: #f3dfc5;
  box-shadow: 0 10px 22px rgba(112, 80, 42, .09), inset 0 1px 0 rgba(255, 255, 255, .86);
}

.gift-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gift-copy {
  position: relative;
  z-index: 2;
  width: 126px;
}

.gift-copy strong,
.gift-copy span {
  display: block;
}

.gift-copy strong {
  color: #8a6d48;
  font-size: 13px;
  line-height: 1.2;
}

.gift-copy span {
  margin-top: 5px;
  color: #ac9b86;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.gift-copy button {
  height: 22px;
  margin-top: 7px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #c6924d;
  color: #fffaf1;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
  line-height: 22px;
}

.gift-card i {
  position: absolute;
  right: 18px;
  bottom: 10px;
  width: 72px;
  height: 50px;
  border-radius: 7px 7px 10px 10px;
  background:
    linear-gradient(90deg, transparent 42%, rgba(255, 245, 219, .94) 42% 57%, transparent 57%),
    linear-gradient(135deg, rgba(255, 255, 255, .32), transparent 32%),
    linear-gradient(180deg, #f0c372 0%, #e4aa54 48%, #c98331 100%);
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, .24), inset -10px 0 18px rgba(147, 85, 28, .12), 0 8px 15px rgba(137, 86, 31, .13);
}

.gift-card i::before {
  position: absolute;
  left: 14px;
  right: 14px;
  top: -12px;
  height: 23px;
  border: 7px solid #e2a14a;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  content: "";
}

.gift-card i::after {
  position: absolute;
  left: -42px;
  bottom: 12px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ead2aa 56%, #c69b62 100%);
  box-shadow: 0 5px 10px rgba(133, 89, 41, .14);
  content: "";
}

.tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 30;
  width: min(100%, 430px);
  height: calc(52px + env(safe-area-inset-bottom));
  padding: 5px 10px max(5px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(229, 221, 208, .86);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 253, 249, .99) 56%, rgba(250, 243, 232, .99));
  box-shadow: 0 -8px 22px rgba(80, 57, 36, .06), inset 0 1px 0 rgba(255, 255, 255, .92);
  transform: translateX(-50%);
}

.tabbar a {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-rows: 22px 12px;
  justify-items: center;
  align-items: center;
  gap: 1px;
  color: #8f8678;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.tabbar a.active {
  color: var(--green);
}

.tabbar a.active i {
  border-radius: 50%;
  background: rgba(49, 95, 70, .08);
  box-shadow: 0 4px 8px rgba(49, 95, 70, .08);
}

.h5-shell:has(#picks:target) .tabbar a,
.h5-shell:has(#design:target) .tabbar a,
.h5-shell:has(#mine:target) .tabbar a {
  color: rgba(63, 58, 49, .72);
}

.h5-shell:has(#picks:target) .tabbar a[href="#picks"],
.h5-shell:has(#design:target) .tabbar a[href="#design"],
.h5-shell:has(#mine:target) .tabbar a[href="#mine"] {
  color: var(--green);
}

.tabbar i {
  position: relative;
  width: 20px;
  height: 20px;
}

.tabbar i::before,
.tabbar i::after {
  position: absolute;
  box-sizing: border-box;
  content: "";
}

.tab-home::before {
  left: 4px;
  top: 8px;
  width: 12px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-top: 0;
  border-radius: 2px;
}

.tab-home::after {
  left: 5px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-left: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.tab-picks::before {
  left: 5px;
  top: 4px;
  width: 10px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 50% 50% 48% 48% / 58% 58% 42% 42%;
}

.tab-picks::after {
  left: 8px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .66;
}

.tab-design::before {
  left: 4px;
  top: 5px;
  width: 12px;
  height: 12px;
  border: 1.45px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}

.tab-design::after {
  left: 9px;
  top: 2px;
  width: 3px;
  height: 18px;
  border-top: 1.45px solid currentColor;
  border-bottom: 1.45px solid currentColor;
  box-shadow: -5px 6px 0 -1px currentColor, 5px 6px 0 -1px currentColor;
  opacity: .82;
}

.tab-mine::before {
  left: 6px;
  top: 4px;
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.tab-mine::after {
  left: 3px;
  top: 14px;
  width: 14px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}

.picks-screen {
  min-height: 100dvh;
  padding: 20px 12px calc(72px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 13% 3%, rgba(220, 212, 185, .35), transparent 22%),
    linear-gradient(180deg, #fffbf4 0%, #f8efe2 54%, #fffaf2 100%);
}

/* 2026-07 home visual refinement */
.home-screen.is-concept-home {
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: #f3ecdf;
}

.home-screen.is-concept-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 只收住最亮的白场，保留青瓷、木纹与晶体的清透层次。 */
  background: linear-gradient(180deg, rgba(74, 51, 21, .032), rgba(44, 54, 37, .016));
}

.home-screen.is-concept-home > :not(.home-concept-art, .home-concept-hotspot, .home-video-retry) {
  display: none;
}

.home-concept-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

.home-concept-video {
  left: -10.6%;
  right: auto;
  width: 121.2%;
  background: #e9dfcc;
  /* 压低雾白中间调，让玉盘更清透、木纹更有深浅、水晶更有色彩。 */
  filter: saturate(1.46) contrast(1.18) brightness(.9) sepia(.018);
  object-fit: fill;
  /* 影像仅作展示，不截走微信 WebView 的触摸事件。 */
  pointer-events: none;
}

.home-video-retry {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 67.4%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255, 250, 239, .78);
  border-radius: 999px;
  background: rgba(38, 70, 54, .86);
  box-shadow: 0 8px 18px rgba(42, 59, 45, .22);
  color: #fffaf0;
  font: 600 11px/1 "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.home-video-retry[hidden] {
  display: none;
}

.home-video-retry-icon {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  font-size: 9px;
  line-height: 1;
  color: #f6d99d;
}

.home-concept-hotspot {
  position: absolute;
  left: 17%;
  right: 17%;
  z-index: 2;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.home-concept-start {
  top: 70.5%;
  height: 12%;
}

.home-concept-picks {
  top: 82.8%;
  height: 7.2%;
}

.home-screen {
  padding: max(18px, env(safe-area-inset-top)) 20px 24px;
  background:
    radial-gradient(circle at 12% 12%, rgba(213, 204, 174, .25), transparent 28%),
    radial-gradient(circle at 90% 4%, rgba(255, 255, 255, .96), transparent 24%),
    linear-gradient(180deg, #fffdf8 0%, #fbf5ea 72%, #f7eddf 100%);
}

.home-screen::before {
  position: absolute;
  left: 50%;
  top: 142px;
  width: 346px;
  height: 468px;
  border: 1px solid rgba(185, 146, 80, .28);
  border-bottom-color: transparent;
  border-radius: 184px 184px 34px 34px;
  transform: translateX(-50%);
  pointer-events: none;
  content: "";
}

.brand-block {
  position: relative;
  z-index: 2;
  min-height: 136px;
  padding-top: 7px;
}

.brand-name {
  min-width: 92px;
  margin-bottom: 22px;
  color: #1f4937;
  font-size: 19px;
  letter-spacing: .3em;
  text-indent: .3em;
}

.brand-name::after {
  width: 62px;
  margin-top: 8px;
}

.brand-block h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .075em;
}

.brand-subtitle {
  margin-top: 13px;
  padding: 0 48px;
  color: rgba(126, 103, 72, .74);
  font-size: 10.5px;
  letter-spacing: .12em;
}

.hero-plate {
  width: calc(100% + 40px);
  height: 316px;
  min-height: 316px;
  margin: -4px -20px 0;
}

.hero-plate::before {
  inset: 12px 21px 0;
  background:
    radial-gradient(ellipse at 50% 73%, rgba(78, 56, 31, .2), rgba(112, 84, 53, .06) 38%, transparent 65%);
  filter: blur(14px);
}

.hero-plate::after {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 2;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(255, 252, 244, .88);
  color: rgba(88, 75, 58, .7);
  box-shadow: 0 7px 18px rgba(73, 51, 27, .08);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9px;
  letter-spacing: .2em;
  white-space: nowrap;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  content: "一串一念 · 守护当下";
}

.hero-plate img {
  width: min(340px, 92vw);
  border-radius: 40px;
  filter: drop-shadow(0 21px 27px rgba(68, 50, 30, .16));
  -webkit-mask-image: radial-gradient(ellipse at 50% 51%, #000 62%, rgba(0, 0, 0, .96) 74%, rgba(0, 0, 0, .35) 91%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 51%, #000 62%, rgba(0, 0, 0, .96) 74%, rgba(0, 0, 0, .35) 91%, transparent 100%);
}

.trust-row {
  max-width: 338px;
  min-height: 35px;
  margin-top: 2px;
  padding: 0 7px;
  border-top: 1px solid rgba(189, 159, 111, .25);
  border-bottom: 1px solid rgba(189, 159, 111, .25);
}

.trust-row li {
  gap: 4px;
  color: #776c5d;
  font-size: 9.5px;
  font-weight: 500;
}

.trust-row li::before {
  width: 12px;
  height: 12px;
  border-color: rgba(55, 101, 74, .45);
  color: var(--green);
}

.home-actions {
  width: min(100%, 338px);
  gap: 7px;
  margin-top: 14px;
}

.primary-action {
  min-height: 50px;
  border: 1px solid rgba(207, 174, 110, .62);
  font-size: 17px;
  letter-spacing: .16em;
  box-shadow: 0 15px 26px rgba(35, 76, 53, .22), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 3px rgba(255, 243, 212, .08);
}

.secondary-action {
  min-height: 36px;
  border-color: transparent;
  background: transparent;
  color: #705a3e;
  box-shadow: none;
  font-size: 14px;
  letter-spacing: .12em;
}

.gift-card {
  width: min(100%, 338px);
  height: 68px;
  min-height: 68px;
  margin-top: 8px;
  border: 1px solid rgba(187, 160, 108, .3);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(102, 72, 36, .07), inset 0 1px 0 rgba(255, 255, 255, .84);
}

.home-signature {
  width: min(100%, 300px);
  margin: 11px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: rgba(111, 93, 70, .56);
  font-size: 9.5px;
  letter-spacing: .16em;
  white-space: nowrap;
}

.home-signature::before,
.home-signature::after {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 145, 88, .42));
  content: "";
}

.home-signature::after {
  transform: scaleX(-1);
}

.home-signature span {
  color: rgba(47, 95, 69, .68);
  font-size: 11px;
  letter-spacing: 0;
}

.h5-shell:not(:has(#picks:target, #design:target, #finish:target, #mine:target)) .tabbar {
  display: none;
}

@media (max-height: 760px) {
  .brand-block {
    min-height: 112px;
  }

  .hero-plate {
    height: 265px;
    min-height: 265px;
  }

  .hero-plate img {
    width: min(292px, 84vw);
  }

  .gift-card {
    height: 66px;
    min-height: 66px;
  }

  .home-signature {
    display: none;
  }
}

.section-title {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0 0 12px;
  text-align: center;
}

.section-title h2 {
  position: relative;
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}

.section-title h2::before,
.section-title h2::after {
  position: absolute;
  top: 51%;
  width: 34px;
  height: 9px;
  border-top: 1px solid rgba(194, 158, 92, .55);
  content: "";
}

.section-title h2::before {
  right: calc(100% + 14px);
  border-radius: 999px 0 0;
}

.section-title h2::after {
  left: calc(100% + 14px);
  border-radius: 0 999px 0 0;
}

.section-title p {
  margin: 0;
  color: rgba(111, 96, 78, .72);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
  line-height: 1.45;
}

.filter-row {
  margin: 0 -12px 10px;
  padding: 0 12px 4px;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

.filter-row button {
  flex: 0 0 auto;
  height: 29px;
  min-height: 29px;
  min-width: 46px;
  padding: 0 13px;
  border: 1px solid rgba(227, 216, 199, .72);
  border-radius: 999px;
  background: rgba(255, 253, 248, .92);
  color: #85745d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 6px 12px rgba(96, 71, 41, .045);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: start;
}

.filter-row button.active {
  border-color: rgba(42, 83, 61, .9);
  background: linear-gradient(180deg, #55795f, #2f674b);
  color: #fffaf0;
  box-shadow: 0 8px 14px rgba(45, 87, 63, .15), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  scroll-margin-bottom: calc(68px + env(safe-area-inset-bottom));
}

.pick-card {
  position: relative;
  min-width: 0;
  height: 236px;
  padding: 6px 6px 8px;
  overflow: hidden;
  border: 1px solid rgba(219, 187, 130, .62);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 254, 250, .99), rgba(253, 248, 239, .99));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 8px 17px rgba(107, 78, 38, .068);
}
.pick-card[hidden] { display: none !important; }

.pick-card::after {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(218, 190, 141, .34);
  border-radius: 6px;
  pointer-events: none;
  content: "";
}

.pick-photo {
  position: relative;
  height: 112px;
  margin-bottom: 7px;
  overflow: hidden;
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(78, 58, 34, .18), transparent 35%),
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, .96), transparent 25%),
    linear-gradient(145deg, rgba(247, 239, 225, .96), rgba(255, 253, 248, .98) 52%, rgba(236, 224, 203, .88));
}

.pick-fresh .pick-photo {
  background:
    radial-gradient(ellipse at 50% 77%, rgba(78, 58, 34, .18), transparent 34%),
    linear-gradient(145deg, rgba(237, 245, 235, .94), rgba(255, 253, 248, .98) 52%, rgba(232, 224, 204, .88));
}

.pick-pink .pick-photo {
  background:
    radial-gradient(ellipse at 50% 77%, rgba(78, 58, 34, .16), transparent 34%),
    linear-gradient(145deg, rgba(251, 232, 229, .94), rgba(255, 253, 248, .98) 52%, rgba(236, 224, 204, .88));
}

.pick-purple .pick-photo {
  background:
    radial-gradient(ellipse at 50% 77%, rgba(78, 58, 34, .16), transparent 34%),
    linear-gradient(145deg, rgba(238, 232, 247, .94), rgba(255, 253, 248, .98) 52%, rgba(236, 224, 204, .88));
}

.pick-gold .pick-photo {
  background:
    radial-gradient(ellipse at 50% 77%, rgba(78, 58, 34, .18), transparent 34%),
    linear-gradient(145deg, rgba(252, 239, 210, .94), rgba(255, 253, 248, .98) 52%, rgba(236, 224, 204, .88));
}

.pick-photo::before {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 43px;
  height: 38px;
  border: 1px solid rgba(164, 137, 94, .3);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  content: "";
}

.pick-photo::after {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 11px;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(66, 45, 25, .2), transparent 70%);
  filter: blur(2px);
  content: "";
}

.bracelet-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 134px;
  height: 96px;
  transform: translate(-50%, -48%);
  filter: drop-shadow(0 12px 10px rgba(72, 51, 27, .18)) drop-shadow(0 1px 1px rgba(255, 255, 255, .7));
}

.bracelet-line::before {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 20px;
  height: 52px;
  border: 1px solid rgba(190, 151, 83, .26);
  border-radius: 50%;
  content: "";
}

.bracelet-line img {
  position: absolute;
  z-index: 1;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset -6px -7px 10px rgba(58, 45, 28, .13), inset 5px 5px 9px rgba(255, 255, 255, .82), 0 9px 13px rgba(65, 47, 24, .18);
  filter: saturate(1.12) contrast(1.04);
}

.bracelet-line img:nth-child(1) { left: 4px; top: 43px; }
.bracelet-line img:nth-child(2) { left: 13px; top: 23px; }
.bracelet-line img:nth-child(3) { left: 35px; top: 9px; }
.bracelet-line img:nth-child(4) { left: 62px; top: 7px; }
.bracelet-line img:nth-child(5) { left: 88px; top: 18px; }
.bracelet-line img:nth-child(6) { left: 102px; top: 40px; }
.bracelet-line img:nth-child(7) { left: 87px; top: 62px; }
.bracelet-line img:nth-child(8) { left: 58px; top: 71px; }
.bracelet-line img:nth-child(9) { left: 29px; top: 67px; }
.bracelet-line img:nth-child(10) { left: 8px; top: 61px; }

.pick-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.pick-copy h3 {
  max-width: 100%;
  margin: 0;
  color: #28573d;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .86);
}

.pick-copy p {
  min-height: 28px;
  margin: 0;
  color: rgba(99, 84, 67, .86);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10.5px;
  line-height: 1.48;
}

.pick-copy button {
  width: 100%;
  height: 31px;
  min-height: 36px;
  margin-top: 7px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #4c765a, #2c6046);
  color: #fffaf1;
  box-shadow: 0 9px 16px rgba(49, 86, 64, .15), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -8px 16px rgba(22, 64, 44, .12);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.design-screen,
.finish-screen {
  min-height: 100dvh;
  padding: 16px 13px calc(70px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 17%, rgba(233, 221, 197, .42), transparent 30%),
    linear-gradient(180deg, #fffbf4 0%, #f7efe2 58%, #fffaf2 100%);
}

.design-screen {
  padding-inline: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #fffefa 0%, #fffdfa 38%, #f8f4ed 100%);
}

.design-top {
  padding-inline: 13px;
  min-height: 56px;
  display: grid;
  grid-template-columns: 38px 1fr 42px;
  align-items: start;
  gap: 6px;
  text-align: center;
}

.design-top a,
.design-top button {
  width: 36px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 248, .74);
  color: #3d3429;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(92, 68, 38, .08);
  font-size: 22px;
  line-height: 30px;
}

.design-top button {
  color: #8b7b67;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.design-top .design-guide-trigger {
  width: auto;
  min-width: 58px;
  padding: 0 9px;
  border: 1px solid rgba(91, 119, 92, .28);
  background: rgba(244, 248, 242, .9);
  color: #426650;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.design-top button:disabled {
  opacity: .44;
}

.design-top h2 {
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.12;
}

.design-top p {
  margin: 5px 0 0;
  color: rgba(111, 96, 78, .72);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.design-fitline {
  min-height: 28px;
  margin: 1px 18px 3px;
  padding: 0 2px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid rgba(216, 208, 191, .62);
  color: #817768;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.design-fitline > span {
  color: #8b7b67;
  font-size: 9px;
  letter-spacing: 1.4px;
}

.design-fitline strong {
  color: #54675b;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.design-fitline button {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #426650;
  font-family: inherit;
  font-size: 10px;
}

.design-summary {
  min-height: 26px;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  color: #8f7661;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
}

.design-summary strong {
  color: #b76b5b;
  font-size: 16px;
  line-height: 1;
}

.design-summary strong span {
  font-variant-numeric: tabular-nums;
}

.design-summary > span {
  color: #8d9390;
}

.design-summary b {
  color: #707c76;
  font-size: 13px;
}

.design-summary em {
  margin-left: 0;
  color: #ab8c78;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}
.fit-progress {
  min-height: 34px;
  margin: 1px 16px 3px;
  padding: 4px 8px 5px;
  border: 1px solid rgba(217, 208, 194, .58);
  border-radius: 8px;
  background: rgba(255, 253, 248, .62);
  font-family: "Microsoft YaHei", sans-serif;
}
.fit-progress > div {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  line-height: 1.2;
}
.fit-progress span {
  color: #9b8970;
  font-size: 7.5px;
  letter-spacing: 1.2px;
}
.fit-progress span b {
  color: #566b5e;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.fit-progress strong { color: #52655a; font-size: 10px; }
.fit-progress em {
  justify-self: end;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9b8c79;
  font-size: 9px;
  font-style: normal;
}
.fit-progress > i {
  height: 3px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(181, 175, 164, .25);
}
.fit-progress > i b {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #a58b67;
  transition: width .24s ease, background .2s ease;
}
.fit-progress.is-ready strong { color: #315f46; }
.fit-progress.is-ready > i b { background: #3e7455; }
.fit-progress.is-near > i b { background: #b08a51; }
.fit-progress.is-overwarn strong { color: #a97424; }
.fit-progress.is-overwarn > i b { background: #c6953f; }
.fit-progress.is-overwarn em { color: #a97424; }
.fit-progress.is-over strong { color: #ad5348; }
.fit-progress.is-over > i b { background: #bf6559; }
.fit-progress.is-over em { color: #ad5348; }
.tray-switch-trigger {
  min-width: 42px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(96, 120, 97, .34);
  border-radius: 999px;
  background: rgba(250, 250, 245, .82);
  color: #3f694f;
  font: 700 9px/1 "Microsoft YaHei", sans-serif;
  white-space: nowrap;
}
.tray-switch-trigger:active { transform: scale(.96); }

.tray-switch-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}
.tray-switch-options button {
  min-width: 0;
  padding: 4px 4px 7px;
  border: 1px solid rgba(210, 195, 169, .7);
  border-radius: 14px;
  background: #fffdfa;
  color: #395544;
  overflow: hidden;
}
.tray-switch-options button.active {
  border-color: #47775a;
  box-shadow: 0 0 0 2px rgba(71, 119, 90, .12);
}
.tray-switch-options img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  background: #f4efe5;
}
.tray-switch-options span { display: block; padding-top: 5px; }
.tray-switch-options b,
.tray-switch-options small { display: block; }
.tray-switch-options b { font-size: 11px; }
.tray-switch-options small { margin-top: 2px; color: #9a8973; font-size: 8px; }

.studio-lightbar {
  min-height: 40px;
  margin: 3px 16px 0;
  padding: 3px 3px 3px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(218, 208, 193, .68);
  border-radius: 8px;
  background: rgba(255, 253, 248, .74);
  box-shadow: 0 8px 18px rgba(87, 67, 42, .045), inset 0 1px 0 rgba(255, 255, 255, .88);
}

.studio-lightbar > div:first-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.studio-lightbar span,
.finish-hero figcaption span {
  color: #9b8970;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 8px;
  letter-spacing: 1.45px;
}

.studio-lightbar strong {
  color: #3d5848;
  font-size: 12px;
  font-weight: 600;
}

.studio-light-segment {
  padding: 2px;
  display: grid;
  grid-template-columns: repeat(3, 46px);
  gap: 2px;
  border: 1px solid rgba(216, 207, 193, .72);
  border-radius: 7px;
  background: #f3eee5;
}

.studio-light-segment button {
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #867b6c;
  box-shadow: none;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.studio-light-segment button.active {
  background: #fffdf8;
  color: #315f46;
  box-shadow: 0 3px 8px rgba(77, 60, 39, .09), inset 0 1px 0 #fff;
  font-weight: 700;
}

.studio-light-segment button:focus-visible {
  outline: 1px solid rgba(180, 143, 75, .88);
  outline-offset: 1px;
}

.design-stage {
  --studio-key: rgba(255, 255, 255, .64);
  --studio-rim: rgba(224, 205, 171, .22);
  --studio-shadow: rgba(75, 57, 35, .22);
  --studio-plate-filter: brightness(1.025) contrast(1.018) saturate(.96);
  --studio-bead-brightness: 1.055;
  --studio-bead-saturation: 1.08;
  --studio-bead-shadow: rgba(58, 41, 24, .23);
  --studio-bead-shadow-x: 3px;
  --studio-bead-shadow-y: 8px;
  --studio-bead-contact: rgba(62, 43, 22, .30);
  position: relative;
  min-height: 380px;
  padding-top: 2px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.design-stage[data-studio-light="warm"],
.finish-hero[data-studio-light="warm"] {
  --studio-key: rgba(255, 242, 213, .72);
  --studio-rim: rgba(205, 153, 82, .2);
  --studio-shadow: rgba(94, 61, 29, .24);
  --studio-plate-filter: brightness(1.035) contrast(1.02) sepia(.07) saturate(1.02);
  --studio-bead-brightness: 1.07;
  --studio-bead-saturation: 1.13;
  --studio-bead-shadow: rgba(83, 49, 20, .25);
  --studio-bead-shadow-x: -3px;
  --studio-bead-shadow-y: 9px;
  --studio-bead-contact: rgba(88, 51, 19, .33);
}

.design-stage[data-studio-light="cool"],
.finish-hero[data-studio-light="cool"] {
  --studio-key: rgba(230, 246, 250, .68);
  --studio-rim: rgba(151, 190, 199, .2);
  --studio-shadow: rgba(48, 72, 78, .2);
  --studio-plate-filter: brightness(1.045) contrast(1.025) saturate(.92) hue-rotate(-5deg);
  --studio-bead-brightness: 1.07;
  --studio-bead-saturation: 1.02;
  --studio-bead-shadow: rgba(35, 62, 68, .22);
  --studio-bead-shadow-x: 3px;
  --studio-bead-shadow-y: 7px;
  --studio-bead-contact: rgba(38, 63, 67, .27);
}

.design-stage::before {
  position: absolute;
  z-index: 0;
  inset: 7% 5% 2%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 62%, var(--studio-shadow) 0%, transparent 67%);
  filter: blur(17px);
  opacity: .72;
  pointer-events: none;
  content: "";
}

.design-stage::after {
  position: absolute;
  z-index: 2;
  inset: 10% 7% 8%;
  border-radius: 50%;
  background: linear-gradient(137deg, var(--studio-key) 0%, transparent 31%, transparent 68%, var(--studio-rim) 100%);
  mix-blend-mode: soft-light;
  opacity: .9;
  pointer-events: none;
  content: "";
}

.design-plate,
.finish-hero {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 18px 22px rgba(92, 72, 46, .17));
}

.design-plate {
  z-index: 1;
  width: min(378px, calc(100vw - 12px));
  filter: drop-shadow(0 21px 24px var(--studio-shadow));
}

.finish-hero {
  --studio-key: rgba(255, 255, 255, .64);
  --studio-rim: rgba(224, 205, 171, .22);
  --studio-shadow: rgba(75, 57, 35, .22);
  --studio-plate-filter: brightness(1.025) contrast(1.018) saturate(.96);
  --studio-bead-brightness: 1.055;
  --studio-bead-saturation: 1.08;
  --studio-bead-shadow: rgba(58, 41, 24, .23);
  --studio-bead-shadow-x: 3px;
  --studio-bead-shadow-y: 8px;
  --studio-bead-contact: rgba(62, 43, 22, .30);
  width: min(352px, calc(100vw - 32px));
}

.design-plate::before,
.finish-hero::before {
  position: absolute;
  inset: 12% 10% 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(87, 65, 36, .18), transparent 62%);
  filter: blur(10px);
  content: "";
}

.design-plate img,
.finish-hero img {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  filter: var(--studio-plate-filter);
  mix-blend-mode: normal;
  transition: filter 260ms ease;
}

.preview-beads {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 4;
  width: min(222px, 62vw);
  height: min(170px, 47vw);
  transform: translate(-50%, -50%);
  opacity: .94;
  pointer-events: none;
  filter: drop-shadow(0 14px 12px rgba(73, 54, 30, .18));
}

.tray-mark {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 3;
  display: grid;
  gap: 1px;
  transform: translate(-50%, -50%);
  color: rgba(134, 122, 105, .22);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(126, 108, 87, .08);
  pointer-events: none;
}

.tray-mark strong {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
}

.tray-mark span {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.preview-beads img {
  position: absolute;
  left: calc(50% + var(--x) * 1px);
  top: calc(50% + var(--y) * 1px);
  width: var(--size);
  height: var(--size);
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  box-shadow: inset -5px -6px 9px rgba(58, 45, 28, .12), inset 5px 5px 8px rgba(255, 255, 255, .76), 0 8px 11px rgba(65, 47, 24, .14);
}
.preview-beads img.static-fallback-bead.is-accessory {
  border-color: transparent;
  border-radius: 14%;
  object-fit: cover;
  box-shadow: none;
  filter: saturate(1.08) drop-shadow(0 7px 5px rgba(102, 67, 18, .24));
}
.design-stage[data-physics-fallback="true"] .tray-mark::after {
  margin-top: 3px;
  color: rgba(120, 108, 92, .38);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 6px;
  letter-spacing: .8px;
  content: "PREVIEW";
}

.design-tools {
  margin: 0 13px 10px;
  display: grid;
  grid-template-columns: 1.38fr repeat(3, 48px) 1.52fr;
  gap: 8px;
  align-items: center;
}

.design-tools button,
.design-tools a {
  height: 42px;
  min-width: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(219, 211, 199, .88);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #2d312f;
  box-shadow: 0 6px 14px rgba(68, 51, 31, .055), inset 0 1px 0 rgba(255, 255, 255, .9);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.tool-icon-button {
  position: relative;
}

/* 保留清空入口：珠径切换不会替代清除当前设计。 */
.design-tools .tool-delete {
  display: grid;
}

.tool-bead-size {
  padding: 4px 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  border-color: rgba(188, 148, 91, .38) !important;
  background: linear-gradient(180deg, #fffdf9, #f8f1e5) !important;
  color: #81633c !important;
  line-height: 1;
}

.tool-bead-size b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  line-height: .92;
  letter-spacing: -.4px;
}

.tool-bead-size small {
  margin: 1px 0 0;
  color: #a48a66;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 6.5px;
  line-height: 1;
  font-weight: 700;
}

.tool-bead-size.is-mixed b {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9px;
  letter-spacing: 0;
}

.tool-icon-button i,
.tool-icon-button i::before,
.tool-icon-button i::after {
  position: absolute;
  box-sizing: border-box;
  display: block;
  content: "";
}

.tool-link i,
.tool-link i::before {
  width: 13px;
  height: 7px;
  border: 2px solid #343a35;
  border-radius: 999px;
  transform: rotate(-42deg);
}

.tool-link i {
  left: 16px;
  top: 17px;
}

.tool-link i::before {
  left: 6px;
  top: -6px;
}

.tool-delete i {
  left: 17px;
  top: 15px;
  width: 14px;
  height: 15px;
  border: 2px solid #343a35;
  border-top: 0;
  border-radius: 1px 1px 3px 3px;
}

.tool-delete i::before {
  left: -3px;
  top: -4px;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: #343a35;
}

.tool-delete i::after {
  left: 4px;
  top: -7px;
  width: 6px;
  height: 3px;
  border: 2px solid #343a35;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.tool-save i {
  left: 16px;
  top: 14px;
  width: 16px;
  height: 17px;
  border: 2px solid #343a35;
  border-radius: 2px;
}

.tool-save i::before {
  left: 3px;
  top: -2px;
  width: 6px;
  height: 6px;
  border: 2px solid #343a35;
  border-top: 0;
}

.tool-save i::after {
  left: 3px;
  bottom: 2px;
  width: 6px;
  height: 4px;
  border: 2px solid #343a35;
}

.design-tools a {
  border-color: rgba(45, 89, 66, .92);
  background: linear-gradient(180deg, #4a765a, #2d5942);
  color: #fff;
  box-shadow: 0 10px 18px rgba(45, 89, 66, .16), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.design-tools a[aria-disabled="true"],
.design-tools button:disabled {
  cursor: default;
  opacity: .42;
  box-shadow: none;
}
.tool-save.is-saved {
  border-color: rgba(49, 95, 70, .58);
  background: #e9f0e8;
  box-shadow: 0 7px 15px rgba(49, 95, 70, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.tool-save.is-ai-cooldown {
  border-color: rgba(154, 112, 59, .62);
  color: #916730;
  background: #f6efe3;
}
.tool-save .tool-cooldown {
  position: absolute;
  z-index: 2;
  top: -8px;
  right: -13px;
  min-width: 30px;
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: #a8783d;
  color: #fffdf8;
  box-shadow: 0 3px 8px rgba(99, 68, 26, .18);
  font: 700 8px/1 "Microsoft YaHei", sans-serif;
  letter-spacing: -.2px;
  opacity: 0;
  transform: translateY(2px) scale(.9);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.tool-save.is-ai-cooldown .tool-cooldown {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.tool-save.is-saved i::after {
  left: 3px;
  bottom: 4px;
  width: 8px;
  height: 5px;
  border: 0;
  border-left: 2px solid #315f46;
  border-bottom: 2px solid #315f46;
  transform: rotate(-45deg);
}
.save-status {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 30px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid rgba(207, 197, 181, .74);
  border-radius: 999px;
  background: rgba(255, 252, 246, .94);
  color: #466250;
  box-shadow: 0 12px 28px rgba(58, 47, 33, .16);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  white-space: nowrap;
}
.save-status.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.saved-design-strip {
  min-height: 104px;
  margin: 7px 14px 11px;
  padding: 8px;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(199, 174, 129, .35);
  border-radius: 14px;
  background: linear-gradient(115deg, rgba(255, 252, 244, .95), rgba(249, 244, 232, .9));
  box-shadow: 0 8px 18px rgba(91, 67, 33, .08);
}
.saved-design-strip[hidden] { display: none; }
.saved-design-preview {
  position: relative;
  width: 136px;
  min-height: 104px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 10px;
  background: #d9c39e url("./assets/plate/save-card-warm-table-v1.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(119, 85, 42, .08), 0 4px 10px rgba(75, 49, 20, .14);
}
.saved-design-preview::before {
  position: absolute;
  z-index: 0;
  inset: 4px;
  border: 1px solid rgba(255, 250, 235, .62);
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 54%, rgba(255, 255, 255, .09) 0 37%, transparent 69%);
  content: "";
}
.saved-design-preview img {
  position: absolute;
  z-index: 1;
  left: var(--saved-x, 50%);
  top: var(--saved-y, 50%);
  width: var(--saved-bead-size, 16px);
  height: var(--saved-bead-size, 16px);
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  filter: brightness(1.07) contrast(1.1) saturate(1.1) drop-shadow(0 2px 2px rgba(52, 36, 17, .38));
  box-shadow: 0 1px 1px rgba(255, 255, 255, .72), 0 3px 4px rgba(63, 42, 18, .12);
}
.saved-design-preview img.is-accessory {
  border-color: transparent;
  border-radius: 7px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(75, 43, 8, .42));
}
.saved-design-preview img.is-charm {
  z-index: 2;
  border-radius: 4px;
}
.saved-design-preview.is-composited::before {
  display: none;
}
.saved-design-preview.is-ai-render::after {
  position: absolute;
  z-index: 3;
  right: 7px;
  bottom: 7px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 244, 215, .58);
  border-radius: 999px;
  background: rgba(45, 63, 49, .76);
  color: #fff8e9;
  content: "AI 成片";
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .45px;
}
.saved-design-preview.is-composited > .saved-composite {
  position: absolute;
  z-index: 2;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  object-fit: cover;
  transform: none;
  filter: none;
  box-shadow: none;
}
.saved-design-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}
.saved-design-copy span {
  color: #9a7d55;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 1.05px;
}
.saved-design-copy strong { color: #365644; font-size: 12px; line-height: 1.35; }
.saved-design-copy small {
  overflow: hidden;
  color: #7f725f;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-design-actions {
  align-self: center;
  display: grid;
  gap: 5px;
}
.saved-design-actions button {
  min-height: 27px;
  padding: 0 7px;
  border: 1px solid rgba(67, 101, 79, .18);
  border-radius: 999px;
  background: rgba(239, 244, 237, .82);
  color: #41604d;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9px;
}
.saved-design-actions button:last-child {
  border-color: rgba(167, 112, 91, .16);
  background: rgba(249, 242, 237, .8);
  color: #9a6e5d;
}

.material-section-head {
  margin: 0 16px 8px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.material-section-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.material-section-head span,
.finish-structure-title span,
.guide-sheet header span {
  color: #9a8972;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
}

.material-section-head strong {
  color: #344e3e;
  font-size: 16px;
  line-height: 1;
}

.material-section-head button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(203, 191, 173, .76);
  border-radius: 999px;
  background: rgba(255, 253, 248, .72);
  color: #5f725f;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.material-search {
  height: 42px;
  margin: 0 13px 6px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(225, 218, 208, .82);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: rgba(128, 135, 132, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  font-family: "Microsoft YaHei", sans-serif;
}

.material-search span {
  font-size: 19px;
  line-height: 1;
}

.material-search input {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #69726d;
  margin: 0;
  overflow: hidden;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-search input::placeholder {
  color: rgba(128, 135, 132, .62);
  opacity: 1;
}

.material-search input::-webkit-search-cancel-button {
  appearance: none;
}

.material-browser-hint {
  margin: 0 13px 7px;
  color: #928777;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .02em;
}

.material-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0;
  padding: 0 13px;
  border-bottom: 1px solid rgba(228, 222, 214, .82);
  background: rgba(255, 255, 255, .82);
}

.material-tabs button {
  position: relative;
  height: 43px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #7f8582;
  box-shadow: none;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.material-tabs button.active {
  background: transparent;
  color: #202820;
}

.material-tabs button.active::after {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: #b86a59;
  transform: translateX(-50%);
  content: "";
}

.material-tabs button[aria-disabled="true"] {
  cursor: default;
  opacity: .34;
}

.material-tabs .fate-tab {
  color: #8b6d3f;
  font-size: 13px;
}

.material-tabs .fate-tab::before {
  content: "✦";
  margin-right: 2px;
  color: #b08b50;
  font-size: 9px;
}

.material-browser {
  height: min(360px, calc(100dvh - 484px));
  min-height: 274px;
  display: grid;
  grid-template-columns: 86px 1fr;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #fdfcf9;
  box-shadow: 0 -10px 26px rgba(74, 55, 34, .065), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.material-browser.is-wide-library {
  grid-template-columns: 1fr;
}

.material-browser.is-wide-library .material-side {
  display: none;
}

.material-side {
  padding: 9px 0 18px;
  display: grid;
  align-content: start;
  gap: 2px;
  overflow-y: auto;
  background: #faf9f5;
  scrollbar-width: none;
}

.material-side::-webkit-scrollbar {
  display: none;
}

.material-side button {
  position: relative;
  min-height: 48px;
  padding: 0 7px 0 14px;
  border: 0;
  background: transparent;
  color: #8a918e;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.material-side button.active {
  background: rgba(255, 255, 255, .92);
  color: #252c27;
}

.material-side button.active::before {
  position: absolute;
  left: 0;
  top: 14px;
  width: 4px;
  height: 20px;
  border-radius: 0 999px 999px 0;
  background: #b86a59;
  content: "";
}

.bead-shelf {
  display: grid;
  grid-template-columns: repeat(6, 56px);
  gap: 7px;
  margin: 0 -13px 12px;
  padding: 0 13px 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bead-shelf.material-grid {
  margin: 0;
  padding: 12px 11px 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: none;
  background: rgba(255, 255, 255, .8);
}

.bead-shelf.material-grid .material-card {
  min-height: 148px;
  padding: 9px 5px 0;
  display: grid;
  grid-template-rows: 64px auto auto 29px;
  justify-items: center;
  gap: 4px;
  overflow: hidden;
  border: 1px solid rgba(231, 225, 216, .92);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #fffdf9 100%);
  color: #222;
  box-shadow: 0 7px 16px rgba(74, 55, 34, .055), inset 0 1px 0 rgba(255, 255, 255, .95);
  font-family: "Microsoft YaHei", sans-serif;
  scroll-snap-align: none;
}

.bead-shelf.material-grid .material-card[hidden] {
  display: none;
}

.bead-shelf.material-grid .material-card img {
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset -8px -9px 14px rgba(60, 45, 28, .13), inset 5px 5px 10px rgba(255, 255, 255, .82), 0 10px 16px rgba(72, 54, 32, .14);
}

.bead-shelf.material-grid .material-card.is-accessory img {
  border-radius: 12px;
  object-fit: contain;
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 9px 7px rgba(120, 82, 24, .22));
  box-shadow: none;
}

.material-card strong {
  max-width: 100%;
  overflow: hidden;
  color: #252824;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-card span {
  color: #929793;
  font-size: 10px;
  font-style: normal;
  line-height: 1.1;
}

.material-card i {
  width: calc(100% + 10px);
  height: 29px;
  display: grid;
  align-items: center;
  justify-items: stretch;
  align-self: end;
  border-top: 1px solid rgba(224, 217, 207, .96);
  color: #315f46;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.material-card i::before,
.material-card i::after {
  content: none;
}

.material-card.is-selected i {
  border-top-color: rgba(69, 111, 83, .24);
  background: rgba(238, 246, 239, .74);
}

.material-card .material-size-picker {
  grid-template-columns: 1fr 1.24fr 1fr;
}

.material-size-picker [data-bead-size-step] {
  min-width: 0;
  display: grid;
  place-content: center;
  color: #597060;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.material-size-picker [data-bead-size-step="-1"] {
  border-right: 1px solid rgba(232, 226, 217, .82);
}

.material-size-picker [data-bead-size-step="1"] {
  border-left: 1px solid rgba(232, 226, 217, .82);
}

.material-size-picker [data-bead-size-step].is-disabled {
  color: #c7cac6;
}

.material-size-picker > b {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 1px;
  color: #4d514b;
  background: linear-gradient(180deg, rgba(247, 243, 235, .96), rgba(239, 234, 224, .9));
  box-shadow: inset 0 2px 0 rgba(190, 177, 151, .52);
  font-style: normal;
  line-height: 1;
}

.material-size-picker > b strong {
  max-width: none;
  overflow: visible;
  color: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.04em;
  white-space: normal;
}

.material-size-picker > b small {
  align-self: end;
  margin-bottom: 1px;
  font-size: 7px;
  font-weight: 800;
}

.material-card .material-add {
  place-items: center;
  color: #315f46;
  font-size: 11px;
}

.bead-shelf::-webkit-scrollbar {
  display: none;
}

.bead-shelf button {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 58px;
  border: 0;
  background: transparent;
  color: #4f4438;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10.5px;
  scroll-snap-align: start;
}

.bead-shelf:not(.material-grid) img,
.selected-list img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset -6px -7px 10px rgba(58, 45, 28, .13), inset 5px 5px 9px rgba(255, 255, 255, .8), 0 8px 12px rgba(65, 47, 24, .16);
}

.selected-list img.is-accessory {
  border-radius: 10px;
  object-fit: contain;
  filter: saturate(1.04) drop-shadow(0 5px 4px rgba(114, 76, 20, .2));
  box-shadow: none;
}

.bead-shelf button:active,
.selected-list button:active {
  transform: translateY(1px) scale(.97);
}

.selected-panel,
.detail-card {
  border: 1px solid rgba(226, 213, 192, .7);
  border-radius: 8px;
  background: rgba(255, 253, 248, .8);
  box-shadow: 0 10px 20px rgba(91, 67, 39, .062), inset 0 1px 0 rgba(255, 255, 255, .84);
}

.selected-panel {
  padding: 11px 12px;
}

.selected-panel > div:first-child {
  display: flex;
  justify-content: space-between;
  color: #6e5d49;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.selected-list {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.selected-list::-webkit-scrollbar {
  display: none;
}

.selected-list button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px dashed rgba(151, 121, 77, .54);
  border-radius: 50%;
  background: rgba(255, 252, 246, .6);
  color: #9b7c4b;
  transition: transform .16s ease, opacity .16s ease;
}

.selected-list button[data-selected-name] {
  position: relative;
  border: 0;
  background: transparent;
}

.selected-list button[data-selected-name].is-selected {
  transform: translateY(-2px) scale(1.04);
}

.selected-list button[data-selected-name].is-selected img {
  outline: 2px solid rgba(49, 95, 70, .72);
  outline-offset: 2px;
  box-shadow: inset -6px -7px 10px rgba(58, 45, 28, .13), inset 5px 5px 9px rgba(255, 255, 255, .8), 0 10px 16px rgba(49, 95, 70, .22);
}

.selected-list button[data-selected-name]::after {
  position: absolute;
  right: -1px;
  top: -1px;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 252, 246, .9);
  color: #8b6b42;
  box-shadow: 0 2px 5px rgba(82, 58, 31, .14);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1;
  content: "×";
}

.selected-list button[data-selected-name]:not(.is-selected)::after {
  opacity: .62;
}

.selected-list button:disabled {
  opacity: .42;
}

.complete-action {
  display: grid;
  place-items: center;
  height: 44px;
  min-height: 44px;
  margin-top: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4b7659, #2c6046);
  color: #fffaf1;
  text-decoration: none;
  box-shadow: 0 12px 22px rgba(48, 91, 66, .17), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -9px 18px rgba(22, 64, 44, .13);
  font-size: 15px;
  font-weight: 800;
  scroll-margin-bottom: calc(68px + env(safe-area-inset-bottom));
}

.finish-hero {
  width: min(352px, calc(100vw - 32px));
  margin: 0 auto 12px;
  filter: drop-shadow(0 21px 24px var(--studio-shadow));
  isolation: isolate;
}

.finish-hero::after {
  position: absolute;
  z-index: 2;
  inset: 8% 7% 9%;
  border-radius: 50%;
  background: linear-gradient(137deg, var(--studio-key) 0%, transparent 31%, transparent 68%, var(--studio-rim) 100%);
  mix-blend-mode: soft-light;
  opacity: .88;
  pointer-events: none;
  content: "";
}

.finish-hero figcaption {
  position: absolute;
  right: 6%;
  bottom: 6%;
  z-index: 4;
  min-width: 90px;
  padding: 7px 9px;
  display: grid;
  gap: 1px;
  border: 1px solid rgba(221, 211, 195, .78);
  border-radius: 8px;
  background: rgba(255, 253, 248, .8);
  color: #43594d;
  box-shadow: 0 8px 18px rgba(64, 47, 29, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  text-align: left;
}

.finish-hero figcaption strong {
  font-size: 11px;
  font-weight: 600;
}

.finish-preview-beads {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 3;
  width: min(244px, 68vw);
  height: min(184px, 51vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 14px 12px rgba(73, 54, 30, .18));
}

.finish-preview-beads img {
  position: absolute;
  left: calc(50% + var(--x) * 1px);
  top: calc(50% + var(--y) * 1px);
  width: var(--size);
  height: var(--size);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  filter:
    brightness(var(--studio-bead-brightness, 1.02))
    saturate(var(--studio-bead-saturation, 1.04))
    contrast(1.055)
    drop-shadow(0 9px 7px var(--studio-bead-shadow, rgba(65, 47, 24, .18)));
  box-shadow: inset -6px -7px 10px rgba(58, 45, 28, .13), inset 5px 5px 9px rgba(255, 255, 255, .8);
}

.finish-preview-beads img.is-accessory {
  border-color: transparent;
  border-radius: 16%;
  object-fit: contain;
  filter:
    brightness(var(--studio-bead-brightness, 1.02))
    saturate(calc(var(--studio-bead-saturation, 1.04) + .08))
    drop-shadow(0 9px 7px rgba(116, 76, 18, .24));
  box-shadow: none;
}

.detail-card {
  padding: 14px 15px;
}

.detail-card h3 {
  margin: 0 0 7px;
  color: #3a2f24;
  font-size: 16px;
}

.detail-card dl,
.detail-card div {
  margin: 0;
}

.detail-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(224, 211, 190, .72);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 12px;
}

.detail-card dt {
  color: #9b8b76;
}

.detail-card dd {
  margin: 0;
  color: #5b4a39;
  text-align: right;
}

.finish-structure-card {
  margin-top: 10px;
  padding: 14px 15px;
  border: 1px solid rgba(226, 213, 192, .7);
  border-radius: 8px;
  background: rgba(255, 253, 248, .8);
  box-shadow: 0 10px 20px rgba(91, 67, 39, .062), inset 0 1px 0 rgba(255, 255, 255, .84);
}

.finish-structure-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.finish-structure-title h3 {
  margin: 2px 0 0;
  color: #3a2f24;
  font-size: 16px;
}

.finish-structure-title small {
  color: #9b8b76;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.finish-structure-list {
  margin-top: 10px;
  display: grid;
  gap: 4px;
}

.finish-structure-item {
  min-height: 46px;
  padding: 5px 3px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid rgba(224, 211, 190, .62);
  font-family: "Microsoft YaHei", sans-serif;
}

.finish-structure-item img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 4px 3px rgba(60, 42, 23, .15));
}

.finish-structure-item img.is-accessory {
  border-radius: 8px;
  object-fit: contain;
  filter: saturate(1.05) drop-shadow(0 4px 3px rgba(116, 76, 18, .2));
}

.finish-structure-item strong {
  color: #405247;
  font-size: 12px;
}

.finish-structure-item span {
  color: #9a8972;
  font-size: 10px;
  white-space: nowrap;
}

.guide-sheet {
  width: min(430px, calc(100vw - 20px));
  max-height: calc(100dvh - 24px);
  margin: auto auto 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: transparent;
  color: #39473e;
}

.guide-sheet::backdrop {
  background: rgba(39, 45, 40, .24);
  backdrop-filter: blur(2px);
}
.guide-sheet.is-fallback-open {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  display: flex;
  align-items: end;
  border-radius: 0;
  background: rgba(39, 45, 40, .24);
  backdrop-filter: blur(2px);
}
.guide-sheet.is-fallback-open .guide-sheet-card {
  width: min(430px, 100%);
  margin-inline: auto;
}

.guide-sheet-card {
  max-height: calc(100dvh - 24px);
  padding: 8px 16px max(18px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  background: #faf7f1;
  box-shadow: 0 -18px 48px rgba(67, 57, 44, .18);
}

.guide-sheet-handle {
  width: 34px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #d7cdbd;
}

.guide-sheet header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.guide-sheet h3 {
  margin: 2px 0 0;
  color: #304a3b;
  font-size: 19px;
}

.guide-sheet header > button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(203, 191, 173, .72);
  border-radius: 50%;
  background: #fffdf8;
  color: #6f685a;
  font-size: 21px;
  line-height: 1;
}

.guide-sheet-lead {
  margin: 12px 0;
  color: #726b5f;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1.75;
}

.fate-sheet .guide-sheet-card {
  background: linear-gradient(180deg, #fcfaf5 0%, #f7f2e8 100%);
}

.fate-picker {
  margin: 10px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fate-picker > section {
  padding: 9px;
  border: 1px solid rgba(210, 196, 169, .68);
  border-radius: 12px;
  background: rgba(255, 253, 247, .72);
}

.fate-picker > section > span {
  display: block;
  margin-bottom: 7px;
  color: #95836a;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.fate-question {
  margin: 12px 0;
}

.fate-question > span {
  display: block;
  margin: 0 0 7px 2px;
  color: #877660;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

.fate-preferences {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fate-preferences button {
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid rgba(198, 181, 149, .58);
  border-radius: 999px;
  background: rgba(255, 253, 248, .76);
  color: #746957;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
  line-height: 1;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.fate-preferences button.active {
  border-color: #607b65;
  background: #54745d;
  box-shadow: 0 3px 7px rgba(55, 81, 59, .16);
  color: #fffdf7;
}

.fate-stepper {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  border: 1px solid rgba(81, 112, 83, .18);
  border-radius: 9px;
  background: rgba(239, 245, 237, .68);
  overflow: hidden;
}

.fate-stepper button {
  height: 32px;
  border: 0;
  background: transparent;
  color: #4d6a55;
  font-size: 22px;
  line-height: 1;
}

.fate-stepper strong {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 2px;
  color: #314e3b;
  font-family: Georgia, "Songti SC", serif;
  font-size: 17px;
  line-height: 1;
}

.fate-stepper strong small {
  align-self: end;
  margin-bottom: 1px;
  color: #92836d;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9px;
}

.fate-result {
  padding: 13px;
  border: 1px solid rgba(194, 169, 116, .56);
  border-radius: 14px;
  background: radial-gradient(circle at 87% 12%, rgba(224, 201, 142, .27), transparent 32%), rgba(255, 253, 247, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.fate-result > span {
  color: #a27b42;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  letter-spacing: .05em;
}

.fate-result h4 {
  margin: 6px 0 4px;
  color: #354e3c;
  font-size: 18px;
}

.fate-result p {
  margin: 0;
  color: #716553;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
  line-height: 1.7;
}

.fate-stylist-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(118, 145, 128, .28);
  border-radius: 10px;
  background: rgba(255, 253, 248, .92);
}

.fate-signature {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.fate-scheme-options--compact {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
}

.fate-scheme-options--compact button {
  min-width: 38px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(190, 166, 120, .52);
  border-radius: 999px;
  background: #fffdfa;
  color: #6f6252;
  box-shadow: 0 3px 7px rgba(101, 78, 47, .045);
  font-family: "Microsoft YaHei", sans-serif;
  text-align: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.fate-scheme-options--compact button b { display: block; font-size: 10px; line-height: 1.25; white-space: nowrap; }

.fate-scheme-options--compact button.is-selected {
  border-color: #356d52;
  background: #356d52;
  color: #fffdf7;
  box-shadow: 0 4px 9px rgba(42, 87, 62, .18);
}

.fate-scheme-options--compact button:active { transform: scale(.975); }

.fate-signature b {
  color: #416b53;
  font-size: 12px;
}

.fate-signature span {
  color: #746b5d;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.55;
}

.fate-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.fate-choice-label {
  display: block;
  margin-top: 10px;
  color: #8f7143;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  letter-spacing: .04em;
}

.fate-pills button {
  appearance: none;
  padding: 4px 8px;
  border: 1px solid rgba(179, 151, 98, .34);
  border-radius: 999px;
  background: rgba(255, 252, 245, .82);
  color: #5d695c;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.25;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.fate-pills button.is-selected {
  border-color: #3a7051;
  background: #3a7051;
  color: #fffdf8;
  box-shadow: 0 4px 10px rgba(43, 83, 60, .18);
}

.fate-pills button:active {
  transform: scale(.96);
}

.fate-avoid {
  margin-top: 9px !important;
  padding-top: 8px;
  border-top: 1px dashed rgba(179, 151, 98, .3);
  color: #9b6657 !important;
  font-size: 10px !important;
}

/* 命盘器以图形承载五行、星座和材质，保留必要文字但不再堆成说明卡。 */
.fate-sheet .guide-sheet-lead {
  margin: 8px 0 10px;
  font-size: 11px;
  line-height: 1.45;
}

.fate-result {
  position: relative;
}

.fate-result-icons {
  position: absolute;
  top: 10px;
  right: 11px;
  display: flex;
  gap: 5px;
}

.fate-element-badge,
.fate-zodiac-badge,
.fate-horoscope-badge {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(187, 161, 111, .42);
  border-radius: 50%;
  background: rgba(255, 253, 247, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 9px rgba(77, 58, 34, .07);
}

.fate-element-badge::before {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--fate-element-color, #739163);
  box-shadow: -5px -4px 0 -4px #fff, 5px -4px 0 -4px #fff, -5px 4px 0 -4px #fff, 5px 4px 0 -4px #fff, 0 2px 5px color-mix(in srgb, var(--fate-element-color, #739163) 50%, transparent);
  content: "";
}

.fate-element-badge[data-element="木"] { --fate-element-color: #679664; }
.fate-element-badge[data-element="火"] { --fate-element-color: #c97859; }
.fate-element-badge[data-element="土"] { --fate-element-color: #b38d55; }
.fate-element-badge[data-element="金"] { --fate-element-color: #9ca8a6; }
.fate-element-badge[data-element="水"] { --fate-element-color: #6fa4b5; }

.fate-zodiac-badge {
  color: #556d59;
  font-family: "Songti SC", "STSong", serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .02em;
}

.fate-zodiac-badge[data-element="木"] { color: #527f52; }
.fate-zodiac-badge[data-element="火"] { color: #ad654b; }
.fate-zodiac-badge[data-element="土"] { color: #916d3e; }
.fate-zodiac-badge[data-element="金"] { color: #687a79; }
.fate-zodiac-badge[data-element="水"] { color: #47798c; }

.fate-horoscope-badge {
  color: #a67536;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1;
}

.fate-result > [data-fate-kicker] {
  display: block;
  padding-right: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fate-result h4 {
  padding-right: 52px;
  font-size: 16px;
}

.fate-result [data-fate-copy],
.fate-signature span,
.fate-avoid {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.fate-result [data-fate-copy] {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.fate-signature span { display: none; }
.fate-avoid {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
}

.fate-signature {
  min-height: 0;
  margin-top: 7px;
  padding: 7px 9px;
}

.fate-ai-note,
.fate-sheet .guide-note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.fate-scheme-options button {
  min-height: 56px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 6px;
  align-items: center;
  padding: 7px 9px;
  text-align: left;
}

/* 命盘结果只保留串珠师信息旁的两个轻量方向按钮，覆盖旧卡片布局。 */
.fate-stylist-bar .fate-signature {
  min-height: 0;
  margin-top: 0;
  padding: 0;
}

.fate-scheme-options.fate-scheme-options--compact button {
  min-width: 38px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border: 1px solid rgba(190, 166, 120, .52);
  border-radius: 999px;
  background: #fffdfa;
  color: #6f6252;
  box-shadow: 0 3px 7px rgba(101, 78, 47, .045);
  font-family: "Microsoft YaHei", sans-serif;
  text-align: center;
}

.fate-scheme-options.fate-scheme-options--compact button.is-selected {
  border-color: #356d52;
  background: #356d52;
  color: #fffdf7;
  box-shadow: 0 4px 9px rgba(42, 87, 62, .18);
}

.fate-scheme-options .fate-scheme-icon {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.fate-scheme-icon--element {
  background: conic-gradient(#6c9968 0 20%, #d18362 20% 40%, #b9945c 40% 60%, #9ba9aa 60% 80%, #70a5b6 80% 100%);
  box-shadow: inset 0 0 0 4px #fffdf9, 0 2px 5px rgba(69, 88, 67, .14);
}

.fate-scheme-icon--horoscope {
  border: 1px solid rgba(181, 137, 71, .48);
  background: rgba(255, 251, 243, .84);
  color: #a67536;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}

.fate-scheme-options button.is-selected .fate-scheme-icon--element {
  box-shadow: inset 0 0 0 4px #356d52, 0 2px 6px rgba(255, 255, 255, .22);
}

.fate-scheme-options button.is-selected .fate-scheme-icon--horoscope {
  border-color: rgba(255, 250, 239, .64);
  background: rgba(255, 255, 255, .14);
  color: #fffdf7;
}

.fate-pills {
  min-height: 50px;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
}

.fate-pills button.fate-bead-option {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 3px;
  overflow: visible;
  border: 1px solid rgba(179, 151, 98, .38);
  border-radius: 50%;
  background: rgba(255, 253, 247, .96);
  box-shadow: 0 5px 10px rgba(69, 50, 28, .10), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.fate-pills button.fate-bead-option img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.05) drop-shadow(1px 3px 2px rgba(62, 42, 20, .24));
  pointer-events: none;
}

.fate-pills button.fate-bead-option::after {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border: 2px solid #fffdf7;
  border-radius: 50%;
  background: #d3ad63;
  box-shadow: 0 0 0 0 rgba(214, 178, 105, .56);
  opacity: 0;
  transform: scale(.5);
  content: "";
}

.fate-pills button.fate-bead-option.is-selected {
  border-color: #3a7051;
  background: #f7fbf5;
  box-shadow: 0 0 0 3px rgba(73, 126, 87, .12), 0 8px 16px rgba(43, 83, 60, .22), inset 0 1px 0 #fff;
  animation: fate-bead-select .46s cubic-bezier(.2, .9, .28, 1.22) both;
}

.fate-pills button.fate-bead-option.is-selected::after {
  opacity: 1;
  transform: scale(1);
  animation: fate-bead-glint 1.25s ease-in-out infinite;
}

.fate-pills button.fate-bead-option:active { transform: scale(.92); }

@keyframes fate-bead-select {
  0% { transform: scale(.76); filter: brightness(1.15); }
  65% { transform: scale(1.09); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes fate-bead-glint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 178, 105, .52); }
  52% { box-shadow: 0 0 0 6px rgba(214, 178, 105, 0); }
}

.fate-ai-note {
  margin: 9px 2px 0;
  color: #95836a;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.55;
}

.fate-ai-trigger {
  width: 100%;
  min-height: 35px;
  margin-top: 10px;
  border: 1px solid rgba(72, 106, 79, .48);
  border-radius: 10px;
  background: rgba(247, 250, 244, .84);
  color: #3c6348;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.fate-ai-trigger:disabled {
  opacity: .64;
}

/* AI 建议与确认生成是两个层级动作，留出明确的触摸与视觉间距。 */
.fate-sheet .fate-ai-trigger + .guide-primary {
  margin-top: 14px;
}

.guide-steps {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  list-style: none;
}

.guide-steps li {
  min-height: 56px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 28px 36px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(216, 208, 191, .72);
  border-radius: 8px;
  background: rgba(255, 253, 248, .72);
}

.guide-steps li > b {
  color: #a7865a;
  font-family: Georgia, serif;
  font-size: 14px;
}

.guide-step-sketch {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.guide-step-sketch svg {
  width: 32px;
  height: 32px;
  overflow: visible;
  fill: none;
  stroke: #171b19;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-step-sketch path {
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
  animation: guide-sketch-draw 1.25s cubic-bezier(.24,.74,.28,1) forwards;
}

.guide-steps li:nth-child(2) .guide-step-sketch path { animation-delay: .22s; }
.guide-steps li:nth-child(3) .guide-step-sketch path { animation-delay: .44s; }

@keyframes guide-sketch-draw {
  0% { stroke-dashoffset: 72; opacity: .15; }
  100% { stroke-dashoffset: 0; opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-step-sketch path { animation: none; stroke-dashoffset: 0; }
}

.guide-steps li div {
  display: grid;
  gap: 2px;
  font-family: "Microsoft YaHei", sans-serif;
}

.guide-steps strong,
.material-meaning-grid strong {
  color: #405247;
  font-size: 12px;
}

.guide-steps span,
.material-meaning-grid span {
  color: #8d8476;
  font-size: 10px;
}

.wrist-size-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.wrist-stepper {
  margin-top: 10px;
  padding: 7px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(216, 208, 191, .72);
  border-radius: 12px;
  background: rgba(255, 253, 248, .72);
}
.wrist-stepper > button {
  width: 44px;
  height: 40px;
  border: 1px solid rgba(67, 101, 79, .2);
  border-radius: 10px;
  background: #f0f4ee;
  color: #315f46;
  font-size: 21px;
  line-height: 1;
}
.wrist-stepper > div {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-family: "Microsoft YaHei", sans-serif;
}
.wrist-stepper strong { color: #304d3c; font-size: 17px; }
.wrist-stepper small { color: #9a8c7a; font-size: 9px; }

.wrist-size-row span,
.wrist-size-row button {
  min-height: 48px;
  padding: 7px 4px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 208, 191, .68);
  border-radius: 8px;
  background: rgba(255, 253, 248, .72);
  color: #8d8476;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  text-align: center;
}

.wrist-size-row b,
.wrist-size-row button b {
  display: block;
  color: #4e6256;
  font-size: 12px;
}
.wrist-size-row button.active {
  border-color: rgba(49, 95, 70, .58);
  background: rgba(235, 242, 233, .92);
  color: #365d46;
  box-shadow: inset 0 0 0 1px rgba(49, 95, 70, .08);
}
.design-summary em b {
  color: #8e6655;
  font-weight: 700;
}

.material-meaning-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.material-meaning-grid article {
  min-height: 64px;
  padding: 8px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(216, 208, 191, .72);
  border-radius: 8px;
  background: rgba(255, 253, 248, .72);
}

.material-meaning-grid img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 5px 4px rgba(60, 42, 23, .14));
}

.material-meaning-grid article > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  font-family: "Microsoft YaHei", sans-serif;
}

.guide-note {
  margin: 10px 0;
  color: #9a8972;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.6;
}

.guide-primary {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #4b7659, #2c6046);
  color: #fffaf1;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.region-sheet .region-field {
  display: block;
  margin-top: 14px;
  color: #6d6254;
  font-size: 13px;
  font-weight: 700;
}

.region-sheet select,
.region-sheet input {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 7px;
  border: 1px solid #e4d8c5;
  border-radius: 12px;
  padding: 0 13px;
  color: #2f493b;
  background: #fffdf9;
  font: inherit;
}

.region-actions {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 10px;
  margin-top: 20px;
}

.region-actions > button:first-child {
  border: 1px solid #dfd4c1;
  border-radius: 999px;
  color: #75695c;
  background: #fffdf9;
  font: inherit;
}

.region-actions .guide-primary { margin-top: 0; }

/* 首次设计先建立可复用的客户昵称，不在提交页重复占用空间。 */
.nickname-sheet .guide-sheet-card {
  padding: 18px 18px max(22px, env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #fffdf9 0%, #f7f2e8 100%);
}

.nickname-sheet .guide-sheet-handle { margin-bottom: 19px; }

.nickname-field {
  display: grid;
  gap: 8px;
  margin-top: 17px;
  color: #405447;
  font-size: 14px;
  font-weight: 700;
}

.nickname-field b {
  margin-left: 4px;
  color: #bd765e;
  font-size: 10px;
}

.nickname-field input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(199, 176, 139, .56);
  border-radius: 13px;
  outline: none;
  background: rgba(255, 255, 255, .8);
  color: #314a3d;
  font: 16px "Microsoft YaHei", sans-serif;
}

.nickname-field input:focus {
  border-color: rgba(49, 95, 70, .6);
  box-shadow: 0 0 0 3px rgba(49, 95, 70, .08);
}

.nickname-status {
  min-height: 18px;
  margin: 7px 0 0;
  color: #ad6551;
  font: 11px "Microsoft YaHei", sans-serif;
}

.nickname-actions {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 10px;
  margin-top: 9px;
}

.nickname-actions > button:first-child {
  border: 1px solid rgba(203, 190, 170, .76);
  border-radius: 999px;
  background: rgba(255, 253, 248, .88);
  color: #75695b;
  font: 13px "Microsoft YaHei", sans-serif;
}

.nickname-actions .guide-primary { margin-top: 0; }

.finish-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
  margin-top: 14px;
  scroll-margin-bottom: calc(68px + env(safe-area-inset-bottom));
}

.finish-actions a,
.finish-actions button {
  display: grid;
  place-items: center;
  height: 42px;
  min-height: 42px;
  border: 1px solid rgba(224, 211, 190, .72);
  border-radius: 999px;
  background: rgba(255, 253, 248, .72);
  color: #7f6c55;
  text-decoration: none;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 13px;
}

.finish-actions button {
  border: 0;
  background: linear-gradient(180deg, #4b7659, #2c6046);
  color: #fffaf1;
}

.placeholder-section {
  min-height: 100dvh;
  padding: 64px 24px calc(72px + env(safe-area-inset-bottom));
  display: grid;
  align-content: start;
  gap: 10px;
  background: #fffaf1;
}

.placeholder-section h2 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.2;
}

.placeholder-section p {
  margin: 0;
  color: var(--muted);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 13px;
}

.mine-screen {
  min-height: 100dvh;
  padding: 54px 16px calc(88px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 92% 5%, rgba(222, 207, 178, .38), transparent 24%),
    linear-gradient(180deg, #fffdf9 0%, #f7f1e7 100%);
}
.mine-header { margin: 0 6px 24px; }
.mine-header > span,
.mine-works header span {
  color: #a47b48;
  font: 700 9px/1 "Microsoft YaHei", sans-serif;
  letter-spacing: .14em;
}
.mine-header h2 { margin: 7px 0 5px; color: #2f513d; font-size: 28px; }
.mine-header p { margin: 0; color: #8d7f6c; font: 12px/1.6 "Microsoft YaHei", sans-serif; }
.mine-works {
  padding: 15px;
  border: 1px solid rgba(214, 197, 166, .56);
  border-radius: 18px;
  background: rgba(255, 254, 251, .82);
  box-shadow: 0 14px 30px rgba(78, 57, 33, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.mine-works > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mine-works h3 { margin: 5px 0 0; color: #344d3e; font-size: 17px; }
.mine-works > header a {
  min-height: 30px;
  padding: 0 11px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(62, 102, 76, .2);
  border-radius: 999px;
  background: rgba(240, 246, 239, .78);
  color: #41664d;
  font: 700 10px/1 "Microsoft YaHei", sans-serif;
}
.mine-work-list { margin-top: 14px; display: grid; gap: 10px; }
.mine-work-card {
  min-height: 112px;
  padding: 8px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(221, 209, 187, .68);
  border-radius: 14px;
  background: rgba(255, 253, 248, .84);
}
.mine-work-preview {
  position: relative;
  min-height: 96px;
  overflow: hidden;
  border-radius: 10px;
  background: #dbc79f url("./assets/plate/save-card-warm-table-v1.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.62);
}
.mine-work-preview::after {
  position: absolute;
  inset: 13px 15px 10px;
  border: 1px solid rgba(255, 251, 238, .75);
  border-radius: 50%;
  content: "";
}
.mine-work-preview img {
  position: absolute;
  z-index: 1;
  left: var(--mine-x);
  top: var(--mine-y);
  width: var(--mine-size);
  height: var(--mine-size);
  border-radius: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  filter: saturate(1.06) drop-shadow(0 2px 2px rgba(56, 38, 18, .24));
}
.mine-work-preview img.is-accessory { border-radius: 20%; object-fit: contain; }
.mine-work-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.mine-work-status {
  padding: 3px 6px;
  border-radius: 999px;
  font: 700 9px/1 "Microsoft YaHei", sans-serif;
}
.mine-work-status.is-saved { background: #edf3ea; color: #477157; }
.mine-work-status.is-submitted { background: #f8edda; color: #a36d35; }
.mine-work-copy h3 { margin: 6px 0 3px; font: 700 14px/1.2 "Microsoft YaHei", sans-serif; color: #314b3d; }
.mine-work-copy p { margin: 0; color: #8f8372; font: 9.5px/1.5 "Microsoft YaHei", sans-serif; }
.mine-work-copy button {
  min-height: 26px;
  margin-top: 8px;
  padding: 0 9px;
  border: 1px solid rgba(60, 102, 76, .22);
  border-radius: 999px;
  background: #fffdf8;
  color: #456a51;
  font: 700 9.5px/1 "Microsoft YaHei", sans-serif;
}
.mine-work-empty { margin: 18px 2px 4px; color: #9a8d7c; font: 11px/1.7 "Microsoft YaHei", sans-serif; }
.mine-work-empty[hidden] { display: none; }

/* Design-stage bead physics and restrained material motion. */
.preview-beads.physics-active {
  top: 50%;
  width: min(288px, calc((100vw - 22px) * .78));
  height: min(288px, calc((100vw - 22px) * .78));
  overflow: visible;
  isolation: isolate;
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
  filter: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.preview-beads.physics-active .physics-bead,
.bead-flight {
  left: 50%;
  top: 50%;
  width: var(--size, 25px);
  height: var(--size, 25px);
  max-width: none;
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  transform:
    translate3d(
      calc(var(--px, var(--x, 0)) * 1px),
      calc(var(--py, var(--y, 0)) * 1px),
      0
    )
    translate(-50%, -50%)
    rotate(calc(var(--rotation, 0) * 1deg))
    scale(var(--presentation-scale, 1));
  transform-origin: center;
  filter:
    brightness(var(--studio-bead-brightness, 1.01))
    saturate(var(--studio-bead-saturation, 1.03))
    contrast(1.09)
    drop-shadow(var(--studio-bead-shadow-x, 3px) var(--studio-bead-shadow-y, 8px) 6px var(--studio-bead-shadow, rgba(55, 39, 22, .22)))
    drop-shadow(0 2px 1px var(--studio-bead-contact, rgba(62, 43, 22, .30)))
    drop-shadow(-1px -1px 1px rgba(255, 255, 255, .58));
  will-change: transform, opacity, filter;
  -webkit-user-drag: none;
}

/* 珠子保留自身高光与阴影，不再额外叠加白色描边。 */
.preview-beads.physics-active .physics-bead,
.bead-flight {
  border: 0;
}

.preview-beads.physics-active .physics-bead.is-accessory,
.bead-flight.is-accessory {
  border-color: transparent;
  border-radius: 16%;
  object-fit: contain;
  box-shadow: none;
  filter:
    brightness(var(--studio-bead-brightness, 1.01))
    saturate(calc(var(--studio-bead-saturation, 1.03) + .08))
    drop-shadow(var(--studio-bead-shadow-x, 3px) var(--studio-bead-shadow-y, 8px) 6px rgba(116, 76, 18, .34))
    drop-shadow(0 2px 1px rgba(102, 67, 18, .30));
}

/* 实拍文玩珠子已含高光与接触阴影。混合进盘面，移除原图白底与通用白色描边。 */
.preview-beads.physics-active .physics-bead.is-wenwan,
.bead-flight.is-wenwan,
.ai-arrange-ghost.is-wenwan {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  mix-blend-mode: multiply;
  filter:
    brightness(1.035)
    saturate(1.1)
    contrast(1.06)
    drop-shadow(var(--studio-bead-shadow-x, 3px) var(--studio-bead-shadow-y, 8px) 6px rgba(55, 39, 22, .28))
    drop-shadow(0 2px 1px rgba(55, 39, 22, .24));
}

.preview-beads.physics-active .physics-bead.is-dragging {
  z-index: 20;
  cursor: grabbing;
  transform:
    translate3d(
      calc(var(--px, var(--x, 0)) * 1px),
      calc(var(--py, var(--y, 0)) * 1px),
      0
    )
    translate(-50%, -50%)
    rotate(calc(var(--rotation, 0) * 1deg))
    scale(calc(var(--presentation-scale, 1) * 1.055));
  filter:
    brightness(calc(var(--studio-bead-brightness, 1.01) + .025))
    saturate(calc(var(--studio-bead-saturation, 1.03) + .025))
    drop-shadow(0 14px 10px var(--studio-bead-shadow, rgba(55, 39, 22, .29)))
    drop-shadow(0 2px 2px rgba(255, 255, 255, .76));
}

.bead-flight {
  position: fixed;
  z-index: 999;
  margin: 0;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  box-shadow: inset -6px -7px 10px rgba(58, 45, 28, .12), inset 5px 5px 9px rgba(255, 255, 255, .82), 0 12px 18px rgba(65, 47, 24, .2);
}

.bead-flight.is-accessory {
  border-color: transparent;
  border-radius: 16%;
  object-fit: contain;
  filter: saturate(1.08) drop-shadow(0 10px 8px rgba(116, 76, 18, .25));
  box-shadow: none;
}

.design-tools a[data-string-toggle][aria-pressed="true"] {
  border-color: rgba(119, 90, 50, .82);
  background: linear-gradient(180deg, #8a6b43, #684d2f);
}

.preview-beads.physics-active .physics-bead.is-exiting {
  z-index: 18;
  pointer-events: none;
  animation: bead-flight-out 360ms cubic-bezier(.34, .02, .72, .22) forwards;
}

.design-stage.is-string-mode .preview-beads.physics-active .physics-bead.is-stringed {
  z-index: 3;
  opacity: 1;
  filter:
    brightness(var(--studio-bead-brightness, 1.015))
    saturate(var(--studio-bead-saturation, 1.025))
    contrast(1.09)
    drop-shadow(var(--studio-bead-shadow-x, 3px) var(--studio-bead-shadow-y, 8px) 6px var(--studio-bead-shadow, rgba(55, 39, 22, .22)))
    drop-shadow(0 2px 1px var(--studio-bead-contact, rgba(62, 43, 22, .30)))
    drop-shadow(-1px -1px 1px rgba(255, 255, 255, .58));
}

.design-stage.is-string-mode .preview-beads.physics-active .physics-bead.is-stringed.is-dragging {
  z-index: 20;
  filter:
    brightness(calc(var(--studio-bead-brightness, 1.015) + .025))
    saturate(calc(var(--studio-bead-saturation, 1.025) + .025))
    drop-shadow(0 14px 10px var(--studio-bead-shadow, rgba(55, 39, 22, .29)))
    drop-shadow(0 2px 2px rgba(255, 255, 255, .76));
}

@keyframes bead-flight-in {
  from {
    opacity: 0;
    transform:
      translate3d(
        calc(var(--px, var(--x, 0)) * 1px),
        calc(var(--py, var(--y, 0)) * 1px + 22px),
        0
      )
      translate(-50%, -50%)
      rotate(calc(var(--rotation, 0) * 1deg))
      scale(.88);
    filter:
      brightness(1.06)
      saturate(.96)
      drop-shadow(0 16px 13px rgba(55, 39, 22, .1));
  }

  58% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--px, var(--x, 0)) * 1px),
        calc(var(--py, var(--y, 0)) * 1px),
        0
      )
      translate(-50%, -50%)
      rotate(calc(var(--rotation, 0) * 1deg))
      scale(1);
    filter:
      brightness(1.01)
      saturate(1.03)
      drop-shadow(0 7px 5px rgba(55, 39, 22, .22))
      drop-shadow(0 1px 1px rgba(255, 255, 255, .72));
  }
}

@keyframes bead-flight-out {
  0% {
    opacity: 1;
    transform:
      translate3d(
        calc(var(--px, var(--x, 0)) * 1px),
        calc(var(--py, var(--y, 0)) * 1px),
        0
      )
      translate(-50%, -50%)
      rotate(calc(var(--rotation, 0) * 1deg))
      scale(1);
    filter:
      brightness(1.01)
      saturate(1.03)
      drop-shadow(0 7px 5px rgba(55, 39, 22, .22));
  }

  28% {
    opacity: .94;
    transform:
      translate3d(
        calc(var(--px, var(--x, 0)) * 1px),
        calc(var(--py, var(--y, 0)) * 1px),
        0
      )
      translate(-50%, -50%)
      translate3d(4px, -9px, 0)
      rotate(calc((var(--rotation, 0) + 5) * 1deg))
      scale(.975);
    filter:
      brightness(1.015)
      saturate(1)
      drop-shadow(0 12px 9px rgba(55, 39, 22, .17));
  }

  to {
    opacity: 0;
    transform:
      translate3d(
        calc(var(--px, var(--x, 0)) * 1px),
        calc(var(--py, var(--y, 0)) * 1px),
        0
      )
      translate(-50%, -50%)
      translate3d(18px, 74px, 0)
      rotate(calc((var(--rotation, 0) + 24) * 1deg))
      scale(.82);
    filter:
      brightness(.92)
      saturate(.88)
      drop-shadow(0 22px 15px rgba(55, 39, 22, .06));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bead-flight,
  .preview-beads.physics-active .physics-bead.is-exiting {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-height: 700px) {
  .brand-block {
    min-height: 104px;
  }

  .brand-name {
    margin-bottom: 12px;
  }

  .brand-subtitle {
    margin-top: 9px;
  }

  .hero-plate {
    height: 252px;
    min-height: 252px;
  }

  .hero-plate img {
    width: min(260px, 83vw);
  }

  .gift-card {
    height: 70px;
    min-height: 70px;
    margin-top: 6px;
  }
}

/* Phase 2: material merchandising and commercial finish. */
.material-section-head { margin-bottom: 10px; }
.material-section-head strong { font-size: 18px; letter-spacing: .04em; }
.material-section-head button {
  border-color: rgba(56, 93, 70, .18);
  background: rgba(239, 244, 237, .76);
  color: #41604d;
}
.material-tabs {
  position: relative;
  padding-inline: 16px;
  border-bottom-color: rgba(212, 205, 193, .68);
  background: rgba(255, 254, 250, .92);
}
.material-tabs button {
  height: 46px;
  color: #8b8a83;
  font-size: 13px;
  letter-spacing: .04em;
}
.material-tabs button.active { color: #274b37; }
.material-tabs button.active::after {
  bottom: 4px;
  width: 24px;
  height: 2px;
  background: #9d5e4d;
}
.material-browser {
  position: relative;
  padding-top: 31px;
  border-radius: 0;
  background: #f7f4ed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.material-library-note {
  position: absolute;
  z-index: 4;
  grid-column: 1 / -1;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  height: 31px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(218, 211, 200, .62);
  background: rgba(250, 248, 243, .95);
  color: #7b776d;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9.5px;
  letter-spacing: .04em;
}
.material-library-note em { color: #9a7d69; font-style: normal; }
.material-side {
  border-right: 1px solid rgba(224, 217, 207, .72);
  background: #f6f3ed;
}
.bead-shelf.material-grid {
  padding: 11px 10px 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 8px;
  background: #fbfaf6;
}
.material-browser.is-wide-library .bead-shelf.material-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-inline: 13px;
}
.bead-shelf.material-grid .material-card {
  position: relative;
  min-height: 145px;
  padding: 8px 5px 0;
  grid-template-rows: 70px auto auto 27px;
  gap: 3px;
  border-color: rgba(220, 213, 202, .72);
  border-radius: 12px;
  background: linear-gradient(180deg, #f3f0e9 0 78px, #fffdf8 78px 100%);
  box-shadow: 0 6px 14px rgba(69, 52, 31, .055), inset 0 1px 0 rgba(255, 255, 255, .92);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bead-shelf.material-grid .material-card::before {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 55px;
  height: 12px;
  border-radius: 50%;
  background: rgba(76, 58, 36, .14);
  filter: blur(6px);
  opacity: .52;
  content: "";
}
.bead-shelf.material-grid .material-card img {
  z-index: 1;
  width: 66px;
  height: 66px;
  filter: saturate(1.05) contrast(1.025);
}
.bead-shelf.material-grid .material-card[data-library-item="wenwan"] img {
  /* 文玩原图的透明留白各不相同；仅校正素材卡的视觉尺寸，实际串珠规格仍由 data-bead-size 决定。 */
  background: transparent;
  box-shadow: none;
  transform: scale(1.04);
  transform-origin: center;
  filter: saturate(1.08) contrast(1.045);
}
.bead-shelf.material-grid .material-card[data-library-item="wenwan"]::before {
  /* 文玩素材自身已有接触阴影，不再额外叠加透明圆形底托。 */
  display: none;
}
.bead-shelf.material-grid .material-card[data-bead-name="水草纹绿松"] img { transform: scale(1.22); }
.bead-shelf.material-grid .material-card[data-bead-name="飘绿翡翠"] img { transform: scale(1.42); }
.bead-shelf.material-grid .material-card[data-bead-name="冰白翡翠"] img { transform: scale(1.60); }
.bead-shelf.material-grid .material-card[data-bead-name="深绿翡翠"] img { transform: scale(1.49); }
.bead-shelf.material-grid .material-card.is-accessory {
  background: linear-gradient(180deg, #f2efe8 0 78px, #fffdf8 78px 100%);
}
.bead-shelf.material-grid .material-card.is-accessory img {
  width: 70px;
  height: 68px;
  padding: 2px;
  filter: saturate(1.06) contrast(1.04) drop-shadow(0 9px 7px rgba(92, 62, 20, .25));
}
.material-card strong {
  z-index: 1;
  color: #2e3e34;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.material-card span { color: #9a8572; font-size: 9.5px; }
.material-card > span {
  font-size: 0 !important;
}
.material-card > span::before {
  content: attr(data-bead-size) "mm";
  font-size: 9.5px !important;
}
.material-card i { height: 27px; border-top-color: rgba(219, 212, 202, .72); }
.material-card i::before,
.material-card i::after { content: none !important; display: none !important; }
.material-card.is-selected {
  border-color: rgba(47, 94, 68, .56) !important;
  box-shadow: 0 8px 17px rgba(45, 86, 62, .12), inset 0 0 0 1px rgba(47, 94, 68, .14) !important;
}
.material-card:focus-visible {
  outline: 2px solid rgba(49, 95, 70, .72);
  outline-offset: -2px;
}
.material-card.is-selected::after {
  position: absolute;
  z-index: 3;
  right: 6px;
  top: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid #fffdf8;
  border-radius: 999px;
  background: #315f46;
  color: white;
  box-shadow: 0 4px 9px rgba(36, 76, 52, .24);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9px;
  content: attr(data-used-count);
}
.finish-screen {
  padding-inline: 14px;
  background:
    radial-gradient(circle at 50% 15%, rgba(226, 214, 188, .48), transparent 28%),
    linear-gradient(180deg, #fffdf8 0%, #f5eee3 64%, #fffaf2 100%);
}
.finish-intro {
  margin: 2px 4px 10px;
  padding-right: 72px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.finish-intro span {
  color: #9b846b;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 8px;
  letter-spacing: 1.8px;
}
.finish-intro strong {
  margin-top: 3px;
  color: #304c3c;
  font-size: 17px;
  letter-spacing: .06em;
}
.finish-intro em {
  justify-self: end;
  margin-top: 0;
  color: #9a8c7b;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9.5px;
  font-style: normal;
}
.pick-card {
  border-color: rgba(215, 204, 187, .76);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(82, 61, 36, .075), inset 0 1px 0 rgba(255, 255, 255, .92);
}
.pick-card::after { display: none; }
.pick-photo { border-radius: 10px; }
.pick-copy h3 { color: #304d3c; letter-spacing: .04em; }
.pick-copy button { min-height: 34px; margin-top: 4px; }

/* 店主精选：保留预设交互，改用统一棚拍产品图，避免伪珠子拼贴感。 */
.picks-screen .section-title {
  gap: 4px;
  margin-bottom: 13px;
}
.picks-brand {
  color: rgba(48, 77, 60, .82);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
}
.pick-card {
  height: 284px;
  padding: 6px 6px 9px;
  border-color: rgba(220, 210, 192, .86);
  background: linear-gradient(180deg, #fffefb, #fbf6ed);
}
.pick-photo {
  height: 158px;
  margin-bottom: 8px;
  background: #f4eee3;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.76);
}
.pick-photo::before,
.pick-photo::after,
.pick-photo .bracelet-line {
  display: none;
}
.pick-product-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.96) contrast(.99);
}
.pick-quad-photo {
  background-image: var(--pick-image) !important;
  background-position: var(--pick-position) !important;
  background-repeat: no-repeat !important;
  background-size: 200% 200% !important;
}
.pick-copy { gap: 4px; }
.pick-copy h3 { font-size: 17px; }
.pick-copy p {
  min-height: 26px;
  color: rgba(89, 76, 61, .88);
  font-size: 10.5px;
}

/* 选材指南：八种珠子以完整大图呈现，不裁切内容。 */
.material-guide-board {
  margin: 10px 0 8px;
}

.material-guide-board a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(205, 187, 151, .62);
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 10px 22px rgba(72, 54, 33, .1);
}

.material-guide-board img {
  width: 100%;
  height: auto;
  display: block;
}

.material-guide-board figcaption {
  margin-top: 7px;
  color: #8d806d;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

/* 设计页信息减法：中文状态优先，去掉重复的卡片边界。 */
.design-top {
  min-height: 52px;
  align-items: center;
}
.design-top h2 { font-size: 23px; }
.design-top p { margin-top: 3px; font-size: 10px; }
.design-fitline {
  min-height: 26px;
  margin: 0 18px 2px;
  gap: 7px;
}
.design-fitline > span {
  color: #8a7a67;
  font-size: 10px;
  letter-spacing: .08em;
}
.design-summary {
  min-height: 24px;
  padding: 0 19px;
  gap: 7px;
}
.design-summary strong { font-size: 15px; }
.fit-progress {
  min-height: 28px;
  margin: 0 18px 2px;
  padding: 2px 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.fit-progress > div { gap: 6px; }
.fit-progress span {
  color: #8a7a67;
  font-size: 10px;
  letter-spacing: .08em;
}
.fit-progress strong { font-size: 10.5px; }
.fit-progress em { color: #8c8173; font-size: 9.5px; }
.fit-progress > i { height: 2px; margin-top: 3px; }
.studio-lightbar {
  min-height: 35px;
  margin: 0 16px 2px;
  padding: 2px 2px 2px 4px;
  border-color: transparent;
  border-radius: 9px;
  background: rgba(248, 244, 236, .78);
  box-shadow: none;
}
.studio-lightbar > div:first-child { display: flex; align-items: center; gap: 5px; }
.studio-lightbar span { color: #897965; font-size: 10px; letter-spacing: .08em; }
.studio-lightbar strong { font-size: 11px; }
.studio-light-segment button { min-height: 29px; }
.material-section-head { margin-top: 4px; }
.material-section-head span { font-size: 10px; letter-spacing: .08em; }
.tray-mark span { letter-spacing: .16em; }

/* 盘面工具行降级为紧凑辅助操作，不与“收拢成串”争夺高度。 */
.design-tools {
  margin: 0 16px 8px;
  /* 手围、四个图标工具、收拢成串：390px 也保持单行且不挤压。 */
  grid-template-columns: minmax(94px, 1.16fr) repeat(4, 36px) minmax(100px, 1.34fr);
  gap: 4px;
}
.design-tools button,
.design-tools a {
  height: 36px;
  font-size: 11.5px;
}
.design-tools > button:first-child {
  white-space: nowrap;
  font-size: 10.5px;
}
.design-tools .tool-icon-button i { scale: 1; }
.design-tools .tool-link i { left: 13px; top: 14px; }
.design-tools .tool-delete i { left: 13px; top: 14px; }
.design-tools .tool-save i { left: 12px; top: 10px; }
.design-tools .tool-icon {
  width: 18px;
  height: 18px;
  display: block;
  color: #343a35;
}

/* 成品空状态：先引导选材，避免展示 0 颗的“伪完成订单”。 */
.finish-empty-state { display: none; }
.finish-screen:has(.finish-preview-beads:empty) .finish-intro,
.finish-screen:has(.finish-preview-beads:empty) .detail-card,
.finish-screen:has(.finish-preview-beads:empty) .finish-structure-card,
.finish-screen:has(.finish-preview-beads:empty) .finish-actions {
  display: none;
}
.finish-screen:has(.finish-preview-beads:empty) .finish-hero {
  width: min(268px, calc(100vw - 104px));
  margin: 10px auto 2px;
  border-color: rgba(218, 207, 188, .52);
  box-shadow: 0 14px 28px rgba(73, 54, 31, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.finish-screen:has(.finish-preview-beads:empty) .finish-hero figcaption { display: none; }
.finish-screen:has(.finish-preview-beads:empty) .finish-empty-state {
  width: min(294px, calc(100vw - 64px));
  margin: 4px auto 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.finish-empty-state > span {
  color: #8c7c67;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
}
.finish-empty-state h3 {
  margin: 0;
  color: #304d3c;
  font-size: 21px;
  line-height: 1.25;
}
.finish-empty-state p {
  max-width: 250px;
  margin: 0;
  color: #7c7062;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
  line-height: 1.7;
}
.finish-empty-state a {
  width: 174px;
  height: 40px;
  margin-top: 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #4b7659, #2c6046);
  color: #fffaf1;
  box-shadow: 0 10px 18px rgba(45, 89, 66, .16), inset 0 1px 0 rgba(255,255,255,.14);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* 成品页：让重点落在预览、结构和价格，不呈现模板化英文标签。 */
.finish-intro > span,
.finish-structure-title span,
.finish-hero figcaption span {
  letter-spacing: .12em;
}
.finish-intro > span { font-size: 10px; }
.finish-hero figcaption { font-family: "Microsoft YaHei", sans-serif; }
.detail-card dl > div:last-child dd {
  color: #a46150;
  font-size: 17px;
  font-weight: 800;
}
.detail-card dl > div:last-child dd span { font-variant-numeric: tabular-nums; }

/* 设计页统一 16px 内容基线，避免信息条与工具行左右错位。 */
.design-top {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding-inline: 14px;
}
.design-top > div { grid-column: 2; }
.design-top .design-guide-trigger { grid-column: 3; justify-self: end; }
.design-top .design-back-link {
  width: auto;
  min-width: 82px;
  height: 32px;
  padding: 0 9px 0 7px;
  display: inline-flex;
  grid-column: 1;
  align-items: center;
  justify-self: start;
  gap: 1px;
  color: #5e564a;
  font: 600 10px/1 "Microsoft YaHei", sans-serif;
  letter-spacing: .01em;
}
.design-top .design-back-link i {
  margin-top: -1px;
  font: 400 21px/1 Georgia, serif;
}
.selected-panel[hidden] { display: none !important; }
.design-fitline {
  margin-inline: 16px;
  padding-inline: 0;
}
.design-summary { padding-inline: 16px; }
.fit-progress { margin-inline: 16px; }

/* Lucide 线性图标：四个入口共用同一笔触与点击尺寸。 */
.tabbar a {
  grid-template-rows: 23px 13px;
  gap: 2px;
}
.tabbar .tab-icon {
  box-sizing: border-box;
  width: 21px;
  height: 21px;
  padding: 1px;
  border-radius: 50%;
  color: currentColor;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.tabbar a.active .tab-icon,
.h5-shell:has(#picks:target) .tabbar a[href="#picks"] .tab-icon,
.h5-shell:has(#mine:target) .tabbar a[href="#mine"] .tab-icon {
  padding: 2px;
  background: rgba(47, 103, 75, .1);
  stroke-width: 2.15;
  transform: translateY(-1px);
}
.finish-hero {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid rgba(218, 207, 188, .74);
  border-radius: 14px;
  background: rgba(255, 253, 248, .72);
  box-shadow: 0 20px 34px rgba(73, 54, 31, .13), inset 0 1px 0 rgba(255, 255, 255, .9);
  filter: none;
}
.finish-hero > img { display: block; border-radius: inherit; }
.finish-hero.is-composited {
  background: #e2d5be;
}
.finish-hero.is-composited::before,
.finish-hero.is-composited::after {
  display: none;
}
.finish-hero.is-composited > img:not(.finish-composite),
.finish-hero.is-composited > .finish-preview-beads {
  opacity: 0;
  pointer-events: none;
}
.finish-hero.is-composited > .finish-composite {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  object-fit: cover;
  filter: none;
  box-shadow: none;
}
.finish-hero figcaption {
  z-index: 4;
  right: 12px;
  bottom: 12px;
  border-radius: 999px;
  min-width: 0;
  padding: 6px 10px;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
}
.detail-card,
.finish-structure-card {
  border: 1px solid rgba(220, 210, 194, .72);
  border-radius: 12px;
  background: rgba(255, 253, 248, .88);
  box-shadow: 0 10px 24px rgba(80, 59, 34, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.detail-card h3,
.finish-structure-title h3 { color: #304b3b; letter-spacing: .04em; }
.detail-card dl div { border-top-color: rgba(222, 213, 199, .58); }
.detail-card dl div:last-child dd {
  color: #a65f50;
  font-size: 16px;
  font-weight: 700;
}
.finish-actions {
  position: relative;
  z-index: 2;
  margin: -4px 16px 16px;
  padding: 7px;
  border: 1px solid rgba(218, 208, 192, .76);
  border-radius: 999px;
  background: rgba(255, 252, 246, .94);
  box-shadow: 0 12px 24px rgba(65, 49, 30, .10);
}
.finish-actions a,
.finish-actions button { height: 40px; min-height: 40px; }
.selected-panel {
  position: relative;
  margin-top: 10px;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.selected-empty-note {
  display: none;
  margin: 8px 0 0;
  color: #9a8d7d;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  line-height: 1.45;
}
.selected-panel.is-empty .selected-empty-note { display: block; }
.selected-panel.is-empty .selected-list { margin-top: 7px; }
.selected-panel:not(.is-empty) {
  border-color: rgba(71, 107, 83, .28);
  box-shadow: 0 12px 24px rgba(52, 88, 65, .075), inset 0 1px 0 rgba(255, 255, 255, .88);
}
.complete-action {
  position: sticky;
  z-index: 6;
  bottom: max(7px, env(safe-area-inset-bottom));
  height: 36px;
  min-height: 36px;
  margin-top: 8px;
  margin-inline: 0;
  box-shadow: 0 8px 16px rgba(48, 91, 66, .14), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -6px 12px rgba(22, 64, 44, .11);
  font-size: 13px;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.complete-hint {
  min-height: 16px;
  margin: 8px 10px -7px;
  color: #9a8d7d;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9.5px;
  line-height: 1.45;
  text-align: center;
}
.complete-hint[data-fit-state="ready"] { color: #456b53; }
.complete-hint[data-fit-state="loose"] { color: #a36b5d; }
.complete-action[aria-disabled="true"] {
  background: linear-gradient(180deg, #ddd9d0, #cbc6bb);
  color: rgba(86, 82, 73, .65);
  box-shadow: 0 8px 16px rgba(78, 68, 54, .08), inset 0 1px 0 rgba(255, 255, 255, .48);
}
.complete-action.is-fit-ready {
  background: linear-gradient(180deg, #4e7d5d, #245b3f);
  box-shadow: 0 14px 28px rgba(42, 89, 61, .23), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -10px 20px rgba(20, 62, 41, .14);
}
.complete-action.is-fit-ready::after {
  width: 7px;
  height: 7px;
  margin-left: 9px;
  display: inline-block;
  border-radius: 50%;
  background: rgba(224, 240, 226, .82);
  box-shadow: 0 0 0 4px rgba(224, 240, 226, .12);
  content: "";
}
.complete-action.is-fit-loose {
  background: linear-gradient(180deg, #8d7461, #6f5848);
  box-shadow: 0 12px 22px rgba(93, 66, 49, .17), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.confirm-sheet {
  width: min(430px, calc(100vw - 20px));
  max-height: calc(100dvh - 18px);
  margin: auto auto 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: transparent;
  color: #39473e;
}
.confirm-sheet::backdrop {
  background: rgba(35, 42, 37, .3);
  backdrop-filter: blur(3px);
}
.confirm-sheet.is-fallback-open {
  position: fixed;
  z-index: 80;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  display: grid;
  align-items: end;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(35, 42, 37, .3);
  backdrop-filter: blur(3px);
}
.confirm-sheet.is-fallback-open .confirm-sheet-card {
  width: 100%;
}
.confirm-sheet-card {
  max-height: calc(100dvh - 18px);
  padding: 8px 16px max(18px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  background:
    radial-gradient(circle at 92% 0, rgba(230, 218, 192, .48), transparent 24%),
    #faf7f1;
  box-shadow: 0 -20px 50px rgba(55, 46, 35, .22);
}
.confirm-sheet header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}
.confirm-sheet header span {
  color: #9a8972;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 8px;
  letter-spacing: 1.5px;
}
.confirm-sheet h3 {
  margin: 2px 0 0;
  color: #304a3b;
  font-size: 20px;
}
.confirm-sheet header > button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid rgba(203, 191, 173, .72);
  border-radius: 50%;
  background: #fffdf8;
  color: #6f685a;
  font-size: 21px;
}
.confirm-preview {
  position: relative;
  height: 128px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(214, 204, 188, .72);
  border-radius: 12px;
  background: #f5f0e7;
  box-shadow: 0 10px 22px rgba(72, 54, 32, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.confirm-preview > img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 142px;
  height: 142px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: brightness(1.02) saturate(.96);
}
.confirm-preview > span {
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #9a8972;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 7px;
  letter-spacing: 1.4px;
}
.confirm-preview-beads {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 126px;
  height: 92px;
  transform: translate(-50%, -50%);
}
.confirm-preview-beads img {
  position: absolute;
  left: calc(50% + var(--x) * 1px);
  top: calc(50% + var(--y) * 1px);
  width: var(--size);
  height: var(--size);
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  filter: saturate(1.05) drop-shadow(0 4px 3px rgba(68, 48, 26, .2));
}
.confirm-preview-beads img.is-accessory {
  border-color: transparent;
  border-radius: 14%;
  object-fit: contain;
  filter: saturate(1.08) drop-shadow(0 4px 3px rgba(102, 67, 18, .24));
}
.confirm-ticket {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(212, 201, 184, .78);
  border-radius: 12px;
  background: rgba(255, 253, 248, .86);
  box-shadow: 0 10px 24px rgba(77, 58, 34, .07), inset 0 1px 0 rgba(255, 255, 255, .92);
}
.confirm-ticket-code {
  padding-bottom: 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-bottom: 1px solid rgba(220, 211, 197, .68);
  font-family: "Microsoft YaHei", sans-serif;
}
.confirm-ticket-code span { color: #978773; font-size: 10px; }
.confirm-ticket-code strong { color: #315f46; font-size: 16px; letter-spacing: .08em; }
.confirm-ticket dl { margin: 4px 0 0; }
.confirm-ticket dl div {
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(225, 217, 205, .52);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
}
.confirm-ticket dl div:last-child { border-bottom: 0; }
.confirm-ticket dt { color: #998b7a; }
.confirm-ticket dd { margin: 0; color: #405247; text-align: right; }
.confirm-ticket dl div:last-child dd { color: #a65f50; font-size: 14px; font-weight: 700; }

.confirm-client {
  margin-top: 10px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px 10px;
  border: 1px solid rgba(208, 187, 151, .56);
  border-radius: 14px;
  background: rgba(255, 253, 248, .74);
  box-shadow: inset 3px 0 0 rgba(194, 147, 80, .48), 0 6px 16px rgba(77, 58, 34, .035);
  font-family: "Microsoft YaHei", sans-serif;
}

.confirm-client label {
  color: #536451;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.confirm-client label b {
  margin-left: 3px;
  color: #bd765e;
  font-size: 9px;
  font-weight: 700;
}

.confirm-client input {
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(188, 169, 139, .55);
  border-radius: 10px;
  outline: 0;
  background: rgba(255, 255, 255, .68);
  color: #405247;
  font: 12px "Microsoft YaHei", sans-serif;
}

.confirm-client input::placeholder { color: #b1a493; }
.confirm-client input:focus { border-color: rgba(49, 95, 70, .52); box-shadow: 0 0 0 3px rgba(49, 95, 70, .07); }

.confirm-client small {
  grid-column: 1 / -1;
  color: #9e907e;
  font-size: 9px;
}

.confirm-note {
  margin-top: 12px;
  display: grid;
  gap: 6px;
  color: #58685e;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
}
.confirm-note textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 11px;
  resize: none;
  border: 1px solid rgba(212, 202, 187, .78);
  border-radius: 10px;
  outline: 0;
  background: rgba(255, 253, 248, .88);
  color: #46534b;
  font: 12px/1.65 "Microsoft YaHei", sans-serif;
}
.confirm-note textarea:focus {
  border-color: rgba(49, 95, 70, .52);
  box-shadow: 0 0 0 3px rgba(49, 95, 70, .07);
}
.confirm-note-static {
  min-height: 0;
  padding: 10px 11px;
  border: 1px solid rgba(212, 202, 187, .62);
  border-radius: 12px;
  background: rgba(255, 253, 248, .7);
}
.confirm-note-static p {
  margin: 4px 0 0;
  color: #807667;
  font: 11px/1.65 "Microsoft YaHei", sans-serif;
}
.confirm-note small { color: #a19586; font-size: 9px; }
.confirm-sheet-tip {
  margin: 10px 2px;
  color: #978a79;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9.5px;
  line-height: 1.6;
}
.confirm-sheet-primary {
  min-height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4b7659, #2c6046);
  color: #fffaf1;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.confirm-sheet-actions {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 8px;
}
.confirm-sheet-actions > button {
  min-height: 44px;
  border: 1px solid rgba(68, 101, 79, .2);
  border-radius: 999px;
  background: rgba(240, 244, 238, .86);
  color: #41604d;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 700;
}
.confirm-sheet-actions > .confirm-sheet-primary {
  border: 0;
  background: linear-gradient(180deg, #4b7659, #2c6046);
  color: #fffaf1;
}
.confirm-copy-status {
  min-height: 14px;
  margin: 5px 0 0;
  color: #4f715b;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9px;
  text-align: center;
}

/* 分享方案：让确认单像一张可直接转发的品牌方案卡。 */
.confirm-sheet {
  width: min(430px, 100vw);
  border-radius: 26px 26px 0 0;
}

.confirm-sheet-card {
  padding: 16px 20px max(22px, env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background:
    radial-gradient(circle at 88% 2%, rgba(224, 194, 144, .28), transparent 25%),
    linear-gradient(180deg, #fffdf9 0%, #f8f3e9 100%);
}

.confirm-sheet .guide-sheet-handle {
  width: 44px;
  height: 5px;
  margin-bottom: 15px;
  background: #e4d7c3;
}

.confirm-sheet header span {
  color: #bc8548;
  font-size: 10px;
  letter-spacing: .13em;
}

.confirm-sheet h3 {
  margin-top: 5px;
  color: #2e3d32;
  font-size: 25px;
  line-height: 1.16;
}

.confirm-sheet header > button {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-color: rgba(206, 167, 107, .45);
  background: rgba(255, 253, 248, .9);
  color: #967e62;
  font-size: 27px;
}

.confirm-preview {
  height: 148px;
  margin-top: 15px;
  border-color: rgba(202, 177, 137, .56);
  border-radius: 17px;
  background: #d9c39e url("./assets/plate/save-card-warm-table-v1.png") center 52% / cover no-repeat;
  box-shadow: 0 13px 25px rgba(77, 54, 29, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.confirm-preview::before {
  position: absolute;
  z-index: 0;
  inset: 7px;
  border: 1px solid rgba(255, 250, 236, .72);
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, .12) 0 37%, transparent 65%);
  content: "";
}

.confirm-preview > img {
  display: none;
}

.confirm-preview-copy {
  position: absolute;
  z-index: 4;
  left: 16px;
  bottom: 12px;
  display: grid;
  gap: 2px;
  text-shadow: 0 1px 0 rgba(255, 252, 244, .78), 0 2px 8px rgba(67, 45, 22, .12);
}

.confirm-preview-copy span {
  color: #b47f43;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 8px;
  letter-spacing: .14em;
}

.confirm-preview-copy strong {
  color: #294837;
  font-size: 12px;
  font-weight: 700;
}

.confirm-ai-gallery {
  margin-top: 10px;
}

.confirm-ai-gallery figure {
  height: 88px;
  border-radius: 12px;
}

.confirm-ticket {
  margin-top: 12px;
  padding: 14px;
  overflow: hidden;
  border-color: rgba(208, 187, 151, .66);
  border-radius: 16px;
  background: rgba(255, 254, 251, .88);
  box-shadow: 0 12px 24px rgba(77, 58, 34, .075), inset 3px 0 0 rgba(194, 147, 80, .68), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.confirm-ticket-code {
  padding-bottom: 11px;
}

.confirm-ticket-code span {
  color: #a1815a;
  font-size: 9px;
  letter-spacing: .08em;
}

.confirm-ticket-code strong {
  color: #315f46;
  font-size: 18px;
}

.confirm-ticket dl div {
  padding: 7px 0;
}

.confirm-note-static {
  margin-top: 10px;
  padding: 10px 12px;
  border-color: rgba(215, 197, 169, .52);
  border-radius: 14px;
  background: rgba(253, 250, 244, .78);
}

.confirm-note-static > span {
  color: #b68148;
  font-size: 10px;
  letter-spacing: .08em;
}

.confirm-sheet-tip {
  margin: 9px 2px;
  color: #967f64;
  text-align: center;
}

.confirm-sheet-actions {
  gap: 10px;
}

.confirm-sheet-actions > button {
  min-height: 48px;
  border-color: rgba(182, 139, 80, .33);
  background: rgba(255, 253, 248, .86);
  color: #6e634f;
  font-size: 12px;
}

.confirm-sheet-actions > .confirm-sheet-primary {
  background: linear-gradient(180deg, #477659, #285b41);
  box-shadow: 0 10px 18px rgba(42, 90, 64, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* 恢复手围引导版：步骤解释 + 0.5cm 微调，比尺寸九宫格更适合首次测量。 */
.wrist-picker-sheet {
  width: min(430px, calc(100vw - 20px));
  max-height: calc(100dvh - 24px);
  border-radius: 18px 18px 0 0;
}

.wrist-picker-sheet .guide-sheet-card {
  max-height: calc(100dvh - 24px);
  padding: 8px 16px max(18px, env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: #faf7f1;
}

.wrist-picker-sheet .guide-sheet-handle {
  width: 34px;
  height: 4px;
  margin: 0 auto 10px;
  background: #d7cdbd;
}

.wrist-picker-sheet header > div > span {
  color: #9a8972;
  font-size: 9px;
  letter-spacing: 1.5px;
}

.wrist-picker-sheet h3 {
  margin: 2px 0 0;
  color: #304a3b;
  font-size: 19px;
  line-height: normal;
}

.wrist-picker-sheet header > button {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-color: rgba(203, 191, 173, .72);
  background: #fffdf8;
  color: #6f685a;
  font-size: 21px;
}

.wrist-picker-sheet .guide-primary {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4c765a, #2c6046);
  color: #fffaf1;
  box-shadow: 0 9px 16px rgba(49, 86, 64, .15), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.bead-size-sheet .guide-sheet-card {
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.bulk-bead-size-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 16px 0 10px;
}

.bulk-bead-size-options button {
  min-height: 82px;
  display: grid;
  place-content: center;
  gap: 1px;
  border: 1px solid rgba(207, 189, 160, .64);
  border-radius: 15px;
  background: rgba(255, 254, 250, .84);
  color: #716553;
  box-shadow: 0 7px 14px rgba(82, 59, 29, .055);
}

.bulk-bead-size-options button b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1;
}

.bulk-bead-size-options button span {
  color: #a2917a;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
}

/* AI 成片只作为当前方案的视觉延展，保持成品页轻盈的双图陈列。 */
.finish-ai-looks {
  margin: 0 16px 14px;
  padding: 12px;
  border: 1px solid rgba(209, 187, 146, .58);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 253, 248, .94), rgba(244, 238, 225, .88));
  box-shadow: 0 12px 25px rgba(79, 58, 34, .06), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.finish-ai-looks > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.finish-ai-looks header span {
  display: block;
  color: #ad8250;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .14em;
}

.finish-ai-looks h3 {
  margin: 4px 0 0;
  color: #304a3b;
  font-size: 16px;
}

.finish-ai-looks header small {
  color: #958879;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9px;
}

.finish-ai-looks-grid,
.confirm-ai-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.finish-ai-looks figure,
.confirm-ai-gallery figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(218, 202, 176, .7);
  border-radius: 11px;
  background: #ece3d2;
}

.finish-ai-looks figure {
  aspect-ratio: 1 / 1.12;
}

.finish-ai-looks img,
.confirm-ai-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.finish-ai-looks img {
  object-position: center 54%;
}

.finish-ai-looks figcaption,
.confirm-ai-gallery figcaption {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 252, 245, .88);
  color: #405b4b;
  box-shadow: 0 2px 8px rgba(52, 39, 24, .13);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 9px;
}

.finish-ai-wear-prompt {
  margin-top: 9px;
  min-height: 54px;
  padding: 8px 8px 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px dashed rgba(117, 101, 73, .3);
  border-radius: 12px;
  background: rgba(255, 253, 248, .7);
}

.finish-ai-wear-prompt > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.finish-ai-wear-prompt > div > span {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2ea;
  color: #3e6a50;
  font-size: 13px;
}

.finish-ai-wear-prompt p {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 2px;
  font-family: "Microsoft YaHei", sans-serif;
}

.finish-ai-wear-prompt strong {
  color: #304a3b;
  font-size: 11px;
}

.finish-ai-wear-prompt small {
  color: #918370;
  font-size: 9px;
  line-height: 1.35;
}

.finish-ai-wear-prompt button {
  min-width: 72px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #4d765a, #2f6247);
  color: #fffdf8;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 5px 11px rgba(46, 88, 62, .16);
}

.finish-ai-wear-prompt button:disabled {
  background: #d6ddd3;
  color: #718176;
  box-shadow: none;
}

.bulk-bead-size-options button.active {
  border-color: rgba(47, 104, 74, .72);
  background: linear-gradient(160deg, #4b795c, #2f6549);
  color: #fffdf7;
  box-shadow: 0 9px 18px rgba(40, 89, 62, .18), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.bulk-bead-size-options button.active span {
  color: rgba(255, 253, 247, .76);
}

.bulk-bead-size-note {
  min-height: 20px;
  margin: 0;
  color: #817462;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 11px;
  line-height: 1.6;
}

/* 盘面下方留出完整盘沿，不让工具栏覆盖阴影。 */
.design-plate.design-plate--jade {
  width: min(372px, calc(100vw - 18px));
}

.design-screen .design-stage {
  min-height: 376px;
}

/* 工具栏：AI 调整排列与“收拢成串”职责分开。 */
.design-tools .tool-ai {
  border-color: rgba(190, 145, 77, .38);
  background: linear-gradient(180deg, #fffdfa, #fbf4e8);
}

.design-tools .tool-ai .tool-icon {
  color: #a8773d;
}

.design-tools .tool-ai.is-arranging {
  animation: ai-arrange-pulse .62s ease both;
}

.preview-beads .ai-arrange-motion {
  position: absolute;
  inset: 0;
  z-index: 16;
  overflow: hidden;
  border-radius: 50%;
  -webkit-clip-path: circle(48% at 50% 50%);
  clip-path: circle(48% at 50% 50%);
  pointer-events: none;
}

.ai-arrange-motion svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ai-arrange-trail {
  fill: none !important;
  stroke: rgba(181, 126, 56, .58);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-dasharray: 3 6;
  filter: drop-shadow(0 0 2px rgba(255, 236, 192, .92));
  animation: ai-arrange-trail .72s ease-out both;
}

.ai-arrange-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 28px);
  height: var(--size, 28px);
  max-width: none;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  filter: brightness(1.04) saturate(1.07) drop-shadow(0 8px 6px rgba(55, 39, 22, .24));
  will-change: transform;
}

.ai-arrange-ghost.is-accessory {
  border-radius: 16%;
  object-fit: contain;
}

.preview-beads.physics-active .physics-bead.is-ai-moving {
  opacity: 0 !important;
}

/* 新盘面是竖版原图；在设计工作台中保持完整圆形构图。 */
.design-plate--jade {
  width: min(372px, calc(100vw - 18px));
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
}

.design-plate--jade img {
  width: 106%;
  height: 106%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* 玉盘素材保留完整下沿；仅柔化画面外缘，不再将原图硬裁成一枚圆。 */
.design-screen .design-stage--jade {
  min-height: 406px;
  padding: 0 0 10px;
}

.design-stage--jade::before {
  inset: 12% 12% 6%;
  background: radial-gradient(ellipse at 50% 58%, rgba(88, 67, 42, .12) 0%, transparent 66%);
  filter: blur(18px);
  opacity: .34;
}

.design-stage--jade::after {
  inset: 11% 10% 8%;
  opacity: .35;
}

.design-plate.design-plate--jade {
  width: min(372px, calc(100vw - 18px));
  overflow: visible;
  border-radius: 0;
  filter: none;
}

.design-plate--jade::before {
  display: none;
}

.design-plate--jade img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 61%, rgba(0, 0, 0, .94) 68%, transparent 81%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 61%, rgba(0, 0, 0, .94) 68%, transparent 81%);
}

/* 使用原有极淡的盘心标识，避免空盘中出现额外图形。 */
.design-stage--jade .tray-mark::before {
  display: none;
  content: none;
}

/* 设计首屏：把已保存方案收进圆盘上端，手机一屏优先看清圆盘和两排素材。 */
@media (max-width: 430px) and (max-height: 900px) {
  .design-screen .saved-design-strip {
    min-height: 46px;
    margin: 0 16px 2px;
    padding: 4px 5px;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 7px;
    border-radius: 12px;
  }

  .design-screen .saved-design-preview {
    width: 58px;
    min-height: 38px;
    border-radius: 8px;
  }

  .design-screen .saved-design-copy { gap: 1px; }
  .design-screen .saved-design-copy span { font-size: 6px; }
  .design-screen .saved-design-copy strong { font-size: 11px; }
  .design-screen .saved-design-copy small { font-size: 7.5px; }
  .design-screen .saved-design-actions { gap: 3px; }
  .design-screen .saved-design-actions button {
    min-height: 20px;
    padding: 0 6px;
    font-size: 8px;
  }

  .design-screen .design-stage--jade {
    min-height: 296px;
    padding-bottom: 2px;
  }

  .design-screen .design-plate.design-plate--jade {
    width: min(296px, calc(100vw - 78px));
  }

  .design-screen .design-tools {
    margin: 0 16px 6px;
  }

  .design-screen .material-tabs button { height: 36px; }
  .design-screen .material-tabs button.active::after { bottom: 2px; }

  .design-screen .material-browser {
    height: 234px;
    min-height: 234px;
    padding-top: 0;
  }

  .design-screen .material-library-note { display: none; }
  .design-screen .bead-shelf.material-grid {
    padding: 6px 8px 10px;
    gap: 6px;
  }

  .design-screen .bead-shelf.material-grid .material-card {
    min-height: 104px;
    padding: 5px 3px 0;
    grid-template-rows: 47px auto auto 19px;
    gap: 2px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f3f0e9 0 57px, #fffdf8 57px 100%);
  }

  .design-screen .bead-shelf.material-grid .material-card img {
    width: 46px;
    height: 46px;
  }

  .design-screen .material-card strong { font-size: 10px; }
  .design-screen .material-card span { font-size: 8px; }
  .design-screen .material-card i { height: 19px; font-size: 8px; }
}

@keyframes ai-arrange-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(181, 126, 56, 0); }
  45% { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(181, 126, 56, .13); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(181, 126, 56, 0); }
}

@keyframes ai-arrange-trail {
  0% { opacity: 0; stroke-dashoffset: 24; }
  24% { opacity: 1; }
  82% { opacity: .76; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -16; }
}
.complete-action.needs-selection {
  animation: selection-nudge .34s ease;
}
.finish-structure-empty {
  min-height: 72px;
  display: grid;
  place-content: center;
  gap: 4px;
  border-top: 1px solid rgba(224, 211, 190, .62);
  color: #9b8b76;
  text-align: center;
  font-family: "Microsoft YaHei", sans-serif;
}
.finish-structure-empty strong {
  color: #607065;
  font-size: 12px;
}
.finish-structure-empty span { font-size: 10px; }
.finish-actions button:disabled {
  background: #d4d0c7;
  color: rgba(84, 80, 72, .6);
}
.design-screen:target,
.finish-screen:target,
.picks-screen:target {
  animation: screen-reveal .28s ease both;
}
@keyframes selection-nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  65% { transform: translateX(4px); }
}
@keyframes screen-reveal {
  from { opacity: .72; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .design-screen:target,
  .finish-screen:target,
  .picks-screen:target,
  .complete-action.needs-selection { animation: none; }
}
@media (max-width: 360px) {
  .material-browser.is-wide-library .bead-shelf.material-grid,
  .bead-shelf.material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 设计入口：先确定净手围，再进入画布；比例参照移动端圆盘工作台。 */
.design-screen {
  padding-top: 10px;
}

.design-top {
  min-height: 47px;
  align-items: center;
}

.design-top h2 {
  font-size: 21px;
}

.design-top p {
  margin-top: 2px;
}

.design-fitline {
  min-height: 24px;
  margin-bottom: 1px;
}

.design-summary {
  min-height: 23px;
}

.fit-progress {
  margin-bottom: 0;
}

.design-stage {
  min-height: 364px;
  padding-top: 0;
}

.design-plate {
  width: min(364px, calc(100vw - 26px));
}

.design-tools {
  margin-top: -2px;
}

.wrist-picker-sheet {
  width: min(430px, 100vw);
  max-height: calc(100dvh - 10px);
  border-radius: 28px 28px 0 0;
}

.wrist-picker-sheet .guide-sheet-card {
  max-height: calc(100dvh - 10px);
  padding: 18px 20px max(22px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: #fcfbf8;
}

.wrist-picker-sheet .guide-sheet-handle {
  width: 44px;
  height: 5px;
  margin-bottom: 30px;
  background: #eadfcd;
}

.wrist-picker-sheet header > div > span {
  color: #ca9151;
  font-size: 12px;
  letter-spacing: .12em;
}

.wrist-picker-sheet h3 {
  margin-top: 6px;
  color: #302a25;
  font-size: 30px;
  line-height: 1.12;
}

.wrist-picker-sheet header > button {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
  border-color: rgba(209, 174, 126, .3);
  background: #fdfaf5;
  color: #aa9987;
  font-size: 32px;
  font-weight: 200;
}

.wrist-picker-lead { display: none; }

.wrist-choice-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wrist-choice-grid button {
  min-height: 62px;
  padding: 8px 3px;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 1px solid rgba(225, 210, 190, .65);
  border-radius: 16px;
  background: #fffefd;
  box-shadow: 0 7px 15px rgba(89, 65, 40, .055);
  color: #7d6f60;
  font-family: "Microsoft YaHei", sans-serif;
}

.wrist-choice-grid button b {
  font-size: 25px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.wrist-choice-grid button small {
  color: #b7a697;
  font-size: 12px;
}

.wrist-choice-grid button.active {
  border-color: rgba(190, 139, 75, .72);
  background: #fffaf2;
  color: #9d6b35;
  box-shadow: inset 0 0 0 1px rgba(207, 161, 94, .18), 0 8px 18px rgba(138, 99, 51, .1);
}

.wrist-choice-grid button.active small {
  color: #be8b57;
}

.wrist-measure-card {
  min-height: 92px;
  margin-top: 18px;
  padding: 12px;
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(226, 211, 192, .68);
  border-radius: 18px;
  background: rgba(255, 254, 252, .82);
}

.wrist-measure-card > div {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #f4eadb;
  color: #c58f50;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}

.wrist-measure-card p {
  margin: 0;
  display: grid;
  gap: 7px;
  font-family: "Microsoft YaHei", sans-serif;
}

.wrist-measure-card strong {
  color: #463a30;
  font-size: 16px;
}

.wrist-measure-card span {
  color: #8f8273;
  font-size: 10px;
  line-height: 1.7;
}

.wrist-picker-actions {
  margin-top: 16px;
  display: grid;
  grid-template-columns: .74fr 1.26fr;
  gap: 10px;
}

.wrist-picker-actions button {
  min-height: 52px;
  border-radius: 999px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.wrist-defer {
  border: 1px solid rgba(213, 195, 171, .72);
  background: #fffdf9;
  color: #887b6b;
}

.wrist-picker-sheet .guide-primary {
  margin: 0;
  border: 0;
  background: linear-gradient(180deg, #d5aa70, #c78d4d);
  color: #fffdf8;
  box-shadow: 0 12px 20px rgba(170, 116, 52, .17);
}

@media (max-height: 760px) {
  .wrist-picker-sheet .guide-sheet-card { padding-top: 10px; }
  .wrist-picker-sheet .guide-sheet-handle { margin-bottom: 13px; }
  .wrist-picker-sheet h3 { font-size: 26px; }
  .wrist-picker-lead { margin: 7px 0 12px; }
  .wrist-choice-grid button { min-height: 56px; }
  .wrist-choice-grid button b { font-size: 24px; }
  .wrist-measure-card { min-height: 88px; margin-top: 16px; padding: 11px; }
  .wrist-measure-card > div { width: 58px; height: 58px; font-size: 12px; }
  .wrist-measure-card strong { font-size: 15px; }
  .wrist-measure-card span { font-size: 10px; }
  .wrist-picker-actions { margin-top: 15px; }
  .wrist-picker-actions button { min-height: 46px; }
}

/* 最终采用步骤式手围引导视觉。 */
.wrist-picker-sheet {
  width: min(430px, calc(100vw - 20px));
  max-height: calc(100dvh - 24px);
  border-radius: 18px 18px 0 0;
}
.wrist-picker-sheet .guide-sheet-card {
  max-height: calc(100dvh - 24px);
  padding: 8px 16px max(18px, env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: #faf7f1;
}
.wrist-picker-sheet .guide-sheet-handle {
  width: 34px;
  height: 4px;
  margin: 0 auto 10px;
  background: #d7cdbd;
}
.wrist-picker-sheet header > div > span {
  color: #9a8972;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.wrist-picker-sheet h3 {
  margin: 2px 0 0;
  color: #304a3b;
  font-size: 19px;
  line-height: normal;
}
.wrist-picker-sheet header > button {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-color: rgba(203, 191, 173, .72);
  background: #fffdf8;
  color: #6f685a;
  font-size: 21px;
}
.wrist-picker-sheet .guide-primary {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4c765a, #2c6046);
  color: #fffaf1;
  box-shadow: 0 9px 16px rgba(49, 86, 64, .15), inset 0 1px 0 rgba(255, 255, 255, .18);
}