/* Unified light storefront layer. Business selectors and agent pages stay untouched. */
:root {
  --front-design-canvas: #f3f5f7;
  --front-design-paper: #ffffff;
  --front-design-paper-soft: #f8fafb;
  --front-design-ink: #252a31;
  --front-design-muted: #7c858f;
  --front-design-line: #e5e9ed;
  --front-design-line-strong: #d7dde3;
  --front-design-accent: #3478d4;
  --front-design-success: #2d9b73;
  --front-design-danger: #e4586e;
  --front-design-radius: 14px;
  --front-design-radius-sm: 10px;
  --front-design-shadow: 0 5px 16px rgba(35, 43, 52, .045);
  --front-design-shadow-hover: 0 8px 20px rgba(35, 43, 52, .065);
  --front-design-frame-width: 430px;
}

@view-transition {
  navigation: auto;
}

body.front-frame-page {
  min-width: 0;
  overflow-x: hidden;
  background: #f5f6f7 !important;
  color: var(--front-design-ink);
  font-family: var(--front-font-family, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.front-frame-page > .front-app-frame {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh;
  margin-inline: auto;
  background: #f5f6f7 !important;
}

body.front-frame-page > .front-app-frame > .front-app-content {
  position: relative;
  min-height: 100vh;
  background: #f5f6f7 !important;
}

body.front-frame-page > .front-app-frame .front-page-layer {
  position: relative;
  z-index: 1;
  width: min(var(--front-design-frame-width), 100%);
  min-height: 100vh;
  margin-inline: auto;
  min-width: 0;
  background: transparent !important;
}

body.front-frame-page > .front-app-frame .fixed-bg-pattern {
  display: none !important;
  background: none !important;
}

body.front-frame-page > .front-app-frame:is(.home-page, .buyer-page, .user-subpage, .tool-page, .utility-page, .public-shop-page, .product-detail-page),
body.front-frame-page > .front-app-frame:is(.home-page, .buyer-page, .user-subpage, .tool-page, .utility-page, .public-shop-page, .product-detail-page) > .front-app-content {
  background: #f5f6f7 !important;
  background-image: none !important;
}

body.front-frame-page > .front-app-frame:is(.home-page, .buyer-page, .user-subpage, .tool-page, .utility-page, .public-shop-page, .product-detail-page) .fixed-bg-pattern {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

body.front-frame-page > .front-app-frame button,
body.front-frame-page > .front-app-frame a,
body.front-frame-page > .front-app-frame input,
body.front-frame-page > .front-app-frame select,
body.front-frame-page > .front-app-frame textarea {
  -webkit-tap-highlight-color: transparent;
}

body.front-frame-page > .front-app-frame button {
  font-family: inherit;
  letter-spacing: 0;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.front-frame-page > .front-app-frame .input,
body.front-frame-page > .front-app-frame .select,
body.front-frame-page > .front-app-frame .textarea,
body.front-frame-page > .front-app-frame input,
body.front-frame-page > .front-app-frame select,
body.front-frame-page > .front-app-frame textarea {
  border-color: var(--front-design-line);
  border-radius: var(--front-design-radius-sm);
  background: var(--front-design-paper);
  color: var(--front-design-ink);
  box-shadow: none;
}

body.front-frame-page > .front-app-frame .input:focus,
body.front-frame-page > .front-app-frame .select:focus,
body.front-frame-page > .front-app-frame .textarea:focus,
body.front-frame-page > .front-app-frame input:focus,
body.front-frame-page > .front-app-frame select:focus,
body.front-frame-page > .front-app-frame textarea:focus {
  border-color: #aebdcd;
  box-shadow: 0 0 0 3px rgba(52, 120, 212, .1);
  outline: none;
}

/* Keep all storefront cards on one restrained surface system. */
body.front-frame-page > .front-app-frame .product-card,
body.front-frame-page > .front-app-frame .guess-card,
body.front-frame-page > .front-app-frame .public-shop-grid > article,
body.front-frame-page > .front-app-frame .user-cart-item,
body.front-frame-page > .front-app-frame .user-follow-card,
body.front-frame-page > .front-app-frame .user-order-card,
body.front-frame-page > .front-app-frame .user-product-card,
body.front-frame-page > .front-app-frame .user-price-item,
body.front-frame-page > .front-app-frame .user-code-item,
body.front-frame-page > .front-app-frame .user-wallet-log,
body.front-frame-page > .front-app-frame .user-empty-state {
  border: 1px solid var(--front-design-line);
  border-radius: var(--front-design-radius);
  background: var(--front-design-paper);
  box-shadow: var(--front-design-shadow);
}

body.front-frame-page > .front-app-frame .product-card:hover,
body.front-frame-page > .front-app-frame .guess-card:hover,
body.front-frame-page > .front-app-frame .public-shop-grid > article:hover,
body.front-frame-page > .front-app-frame .user-product-card:hover {
  border-color: var(--front-design-line-strong);
  box-shadow: var(--front-design-shadow-hover);
}

/* Theme preview: two equal columns at every viewport, without changing data or card content. */
body.front-frame-page > .front-app-frame.home-page .product-home,
body.front-frame-page > .front-app-frame.home-entry-page .product-home {
  width: calc(100% - 20px);
  max-width: none;
  padding-top: 14px;
}

body.front-frame-page > .front-app-frame.home-page .products-grid,
body.front-frame-page > .front-app-frame.home-entry-page .products-grid,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-grid,
body.front-frame-page > .front-app-frame.product-detail-page .guess-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px;
}

body.front-frame-page > .front-app-frame.home-page .product-card,
body.front-frame-page > .front-app-frame.home-entry-page .product-card {
  min-width: 0;
  transform: none;
}

body.front-frame-page > .front-app-frame.home-page .product-media,
body.front-frame-page > .front-app-frame.home-entry-page .product-media,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-grid > article > img,
body.front-frame-page > .front-app-frame.product-detail-page .product-hero-image {
  background: var(--front-design-paper-soft);
}

body.front-frame-page > .front-app-frame.home-page .product-title,
body.front-frame-page > .front-app-frame.home-entry-page .product-title,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-grid strong,
body.front-frame-page > .front-app-frame.product-detail-page .guess-card strong {
  color: var(--front-design-ink);
  font-weight: 720;
  letter-spacing: 0;
}

body.front-frame-page > .front-app-frame.home-page .category-row,
body.front-frame-page > .front-app-frame.home-entry-page .category-row,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-sort-row {
  scrollbar-width: none;
}

body.front-frame-page > .front-app-frame.home-page .category-row::-webkit-scrollbar,
body.front-frame-page > .front-app-frame.home-entry-page .category-row::-webkit-scrollbar,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-sort-row::-webkit-scrollbar {
  display: none;
}

/* 店铺页筛选沿用首页的文字下划线切换，避免与首页出现两套交互样式。 */
body.public-shop-page .public-shop-primary-filters,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-primary-filters {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  align-items: stretch;
  justify-content: flex-start;
  gap: 26px;
  padding: 0 4px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  overscroll-behavior-inline: contain;
  border-bottom: 0;
  overscroll-behavior-y: none;
  scrollbar-gutter: stable;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.public-shop-page .public-shop-primary-filters::-webkit-scrollbar,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-primary-filters::-webkit-scrollbar {
  display: none;
}

body.public-shop-page .public-shop-primary-filters .home-primary-filter,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-primary-filters .home-primary-filter {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 1px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8e8f8c;
  font: inherit;
  cursor: pointer;
  transition: color .18s ease;
}

body.public-shop-page .public-shop-primary-filters .home-primary-filter img,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-primary-filters .home-primary-filter img {
  display: none;
}

body.public-shop-page .public-shop-primary-filters .home-primary-filter span,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-primary-filters .home-primary-filter span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.public-shop-page .public-shop-primary-filters .home-primary-filter.active,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-primary-filters .home-primary-filter.active {
  color: #25241f;
  font-weight: 760;
}

body.public-shop-page .public-shop-primary-filters .home-primary-filter.active span,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-primary-filters .home-primary-filter.active span {
  font-weight: 760;
}

body.public-shop-page .public-shop-primary-filters .home-primary-indicator,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-primary-filters .home-primary-indicator {
  position: absolute;
  z-index: 2;
  right: auto;
  bottom: 0;
  left: var(--home-primary-indicator-left, 4px);
  display: block;
  width: var(--home-primary-indicator-width, 28px);
  height: 3px;
  border-radius: 999px;
  background: #8a5cf6;
  pointer-events: none;
  transform: translateZ(0);
  transition: left .28s cubic-bezier(.22, .7, .2, 1), width .2s ease;
}

body.public-shop-page .public-shop-primary-filters .home-primary-filter:focus-visible,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-primary-filters .home-primary-filter:focus-visible {
  outline: 2px solid rgba(242, 87, 130, .3);
  outline-offset: -2px;
}

body.front-frame-page > .front-app-frame.home-page .pill,
body.front-frame-page > .front-app-frame.home-entry-page .pill,
body.front-frame-page > .front-app-frame.public-shop-page .pill {
  border-color: var(--front-design-line);
  border-radius: 999px;
  background: var(--front-design-paper);
  color: var(--front-design-muted);
}

body.front-frame-page > .front-app-frame.home-page .pill.active,
body.front-frame-page > .front-app-frame.home-entry-page .pill.active,
body.front-frame-page > .front-app-frame.public-shop-page .pill.active {
  border-color: var(--front-design-ink);
  background: var(--front-design-ink);
  color: #fff;
}

body.front-frame-page > .front-app-frame.home-page .catalog-filter-chips button,
body.front-frame-page > .front-app-frame.public-shop-page .catalog-filter-chips button {
  border-color: var(--front-design-line);
  background: var(--front-design-paper);
  color: var(--front-design-muted);
}

body.front-frame-page > .front-app-frame.home-page .catalog-filter-chips button.active,
body.front-frame-page > .front-app-frame.public-shop-page .catalog-filter-chips button.active {
  border-color: var(--front-design-ink);
  background: var(--front-design-ink);
  color: #fff;
}

/* 店铺页标签与首页标签使用同一套字号、字重和胶囊间距。 */
body.public-shop-page #shopTagFilterSection {
  margin-top: 6px;
}

body.public-shop-page #shopTagFilters,
body.front-frame-page > .front-app-frame.public-shop-page #shopTagFilters {
  gap: 8px;
  padding: 1px 2px 1px;
}

body.public-shop-page #shopTagFilters button,
body.front-frame-page > .front-app-frame.public-shop-page #shopTagFilters button {
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid rgba(79, 75, 66, .06);
  border-radius: 10px;
  background: #fff;
  color: #92928f;
  font-size: 12px;
  font-weight: 700;
  line-height: 25px;
  box-shadow: 0 1px 4px rgba(57, 54, 47, .025);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

body.public-shop-page #shopParentCategories .pill,
body.public-shop-page #shopChildCategories .pill,
body.front-frame-page > .front-app-frame.public-shop-page #shopParentCategories .pill,
body.front-frame-page > .front-app-frame.public-shop-page #shopChildCategories .pill {
  font-weight: 700;
}

body.public-shop-page #shopTagFilters button.active,
body.front-frame-page > .front-app-frame.public-shop-page #shopTagFilters button.active {
  border-color: #8a5cf6;
  background: #8a5cf6;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(138, 92, 246, .16);
}

@media (max-width: 360px) {
  body.public-shop-page #shopTagFilters {
    gap: 7px;
  }

  body.public-shop-page #shopTagFilters button {
    padding-inline: 9px;
    font-size: 11px;
  }
}

/* Product detail: preserve the existing capsules and make the media rule explicit. */
body.front-frame-page > .front-app-frame.product-detail-page .product-detail-shell {
  width: calc(100% - 16px);
  max-width: none;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-hero-image,
body.front-frame-page > .front-app-frame.product-detail-page .product-hero-trigger,
body.front-frame-page > .front-app-frame.product-detail-page .product-image-track {
  aspect-ratio: 1 / 1;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-main-image,
body.front-frame-page > .front-app-frame.product-detail-page .product-hero-trigger img {
  object-fit: contain !important;
  object-position: center;
  background: var(--front-design-paper-soft);
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar,
body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-bar {
  border: 1px solid var(--front-design-line);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--front-design-shadow-hover);
  backdrop-filter: blur(16px);
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar {
  height: 53px;
  min-height: 53px;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-bar {
  min-height: 53px;
  border-radius: 999px;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-summary,
body.front-frame-page > .front-app-frame.product-detail-page .detail-section,
body.front-frame-page > .front-app-frame.product-detail-page .shop-section {
  border-color: var(--front-design-line);
  border-radius: var(--front-design-radius);
  background: var(--front-design-paper);
  box-shadow: var(--front-design-shadow);
}

body.front-frame-page > .front-app-frame.product-detail-page .product-tag,
body.front-frame-page > .front-app-frame.product-detail-page .product-category-chip,
body.front-frame-page > .front-app-frame.product-detail-page .review-tag-row span {
  border-radius: 999px;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-price {
  color: var(--front-design-danger);
}

/* The original product card overlaps the promotion ribbon, matching the storefront hierarchy. */
body.front-frame-page > .front-app-frame.product-detail-page .product-offer-panel {
  position: relative;
  z-index: 0;
  min-height: 66px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(108deg, #ffae3d 0%, #ff7655 47%, #f23869 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(240, 82, 96, .16);
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-main {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 15px 6px;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-main > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-main strong {
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  white-space: nowrap;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-main del {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, .76);
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-main del::after {
  position: absolute;
  left: -2px;
  top: 50%;
  width: calc(100% + 4px);
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  content: "";
  transform: rotate(11deg);
  transform-origin: center;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-side {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  margin-left: auto;
  text-align: right;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-side > span {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-side > small {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  color: rgba(255,255,255,.9);
  font-size: 9px;
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-side > small:empty {
  display: none;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-lightning {
  position: absolute;
  top: -8px;
  left: 60%;
  width: 45px;
  height: 64px;
  fill: rgba(255, 255, 255, .22);
  filter: drop-shadow(0 2px 1px rgba(196, 43, 79, .08));
  transform: translateX(-50%) rotate(2deg);
}

body.front-frame-page > .front-app-frame.product-detail-page .product-offer-panel.is-upcoming {
  background: linear-gradient(108deg,#ffb14a 0%,#ff805e 52%,#ef536c 100%);
}
body.front-frame-page > .front-app-frame.product-detail-page .product-offer-panel.is-upcoming .product-offer-main del { display:none; }

body.front-frame-page > .front-app-frame.product-detail-page .product-summary-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-summary-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: -13px;
  padding: 12px 15px 16px;
  border: 1px solid rgba(31, 38, 47, .055);
  border-radius: 12px 12px 10px 10px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(31, 38, 47, .025);
}

body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-price-line {
  min-height: 18px;
  justify-content: flex-end;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-price-line .product-price {
  display: none;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-heat {
  margin-left: auto;
  color: #858b94;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-tags {
  margin-top: -2px;
}

/* Zibll-style product chips use one restrained red outline instead of mixed pastel tones. */
body.front-frame-page > .front-app-frame.product-detail-page .product-summary .product-tag,
body.front-frame-page > .front-app-frame.product-detail-page .product-summary .product-tag[class*="tag-tone-"],
body.front-frame-page > .front-app-frame.product-detail-page .product-summary .product-tag.tag-status-active,
body.front-frame-page > .front-app-frame.product-detail-page .product-summary .product-tag.tag-status-soldout {
  border-color: rgba(239, 72, 83, .72) !important;
  background: rgba(239, 72, 83, .055) !important;
  color: #e84652 !important;
}

/* Reserve 40% for the three tools and 60% for the joined purchase actions. */
body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-bar {
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) !important;
  gap: 3px !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-tools {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  box-shadow: none !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-purchase {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 !important;
  padding-right: 0;
  overflow: hidden;
  border-radius: 999px;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-primary,
body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-buy {
  font-size: 11px !important;
  font-weight: 800;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-primary {
  background: #f6a43b;
  border-radius: 999px 0 0 999px !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-buy {
  background: #f54c6d;
  border-radius: 0 999px 999px 0 !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-purchase:has(.product-bottom-buy.hidden) .product-bottom-primary {
  border-radius: 999px !important;
}

@media (max-width: 360px) {
  body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-bar {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) !important;
  }
  body.front-frame-page > .front-app-frame.product-detail-page .product-offer-main {
    padding-inline: 13px;
  }
  body.front-frame-page > .front-app-frame.product-detail-page .product-offer-main strong {
    font-size: 17px;
  }
  body.front-frame-page > .front-app-frame.product-detail-page .product-offer-side > span {
    font-size: 12px;
  }
  body.front-frame-page > .front-app-frame.product-detail-page .product-offer-lightning {
    left: 60%;
    width: 41px;
  }
}

/* The global redemption switch removes one tool, leaving 30% for tools and 70% for buying. */
body.internal-redeem-disabled.front-frame-page > .front-app-frame.product-detail-page .product-bottom-bar,
body.front-frame-page > .front-app-frame.product-detail-page.internal-redeem-disabled .product-bottom-bar,
body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-bar.internal-redeem-disabled {
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) !important;
}

body.internal-redeem-disabled.front-frame-page > .front-app-frame.product-detail-page .product-bottom-tools,
body.front-frame-page > .front-app-frame.product-detail-page.internal-redeem-disabled .product-bottom-tools,
body.front-frame-page > .front-app-frame.product-detail-page .product-bottom-bar.internal-redeem-disabled .product-bottom-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* User center and its subpages share the same page surface and topbar. */
body.front-frame-page > .front-app-frame.buyer-page .buyer-app,
body.front-frame-page > .front-app-frame.user-subpage .user-page-shell,
body.front-frame-page > .front-app-frame.public-shop-page .public-shop-shell {
  width: calc(100% - 20px);
  max-width: none;
  margin-inline: auto;
}

body.front-frame-page > .front-app-frame.buyer-page .user-profile-band,
body.front-frame-page > .front-app-frame.buyer-page .user-commerce-grid,
body.front-frame-page > .front-app-frame.buyer-page .user-section-band {
  border-color: var(--front-design-line);
  border-radius: var(--front-design-radius);
  background: var(--front-design-paper);
  box-shadow: var(--front-design-shadow);
}

body.front-frame-page > .front-app-frame.buyer-page .user-commerce-grid a,
body.front-frame-page > .front-app-frame.buyer-page .user-order-grid a,
body.front-frame-page > .front-app-frame.buyer-page .user-service-grid > a,
body.front-frame-page > .front-app-frame.buyer-page .user-service-grid > button {
  border-radius: var(--front-design-radius-sm);
}

body.front-frame-page > .front-app-frame.user-subpage .user-page-topbar {
  border-color: var(--front-design-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--front-design-shadow);
}

body.front-frame-page > .front-app-frame.user-subpage .user-cart-item,
body.front-frame-page > .front-app-frame.user-subpage .user-follow-card,
body.front-frame-page > .front-app-frame.user-subpage .user-order-card,
body.front-frame-page > .front-app-frame.user-subpage .user-product-card,
body.front-frame-page > .front-app-frame.user-subpage .user-price-item,
body.front-frame-page > .front-app-frame.user-subpage .user-code-item,
body.front-frame-page > .front-app-frame.user-subpage .user-wallet-log,
body.front-frame-page > .front-app-frame.user-subpage .user-empty-state {
  border-color: var(--front-design-line);
  border-radius: var(--front-design-radius);
  background: var(--front-design-paper);
  box-shadow: var(--front-design-shadow);
}

body.front-frame-page > .front-app-frame .public-bottom-nav {
  border-color: var(--front-design-line);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--front-design-shadow-hover);
}

body.front-frame-page > .front-app-frame .public-bottom-nav a {
  border-radius: 999px;
}

/* PC 页面背景铺满，只有内容层保持手机宽度和两列布局。 */
@media (min-width: 700px) {
  body.front-frame-page > .front-app-frame {
    box-shadow: none;
  }

  body.front-frame-page > .front-app-frame.home-page .random-theme-float {
    right: calc(50% - (var(--front-design-frame-width) / 2)) !important;
  }

  body.front-frame-page > .front-app-frame.home-page .products-grid,
  body.front-frame-page > .front-app-frame.home-entry-page .products-grid,
  body.front-frame-page > .front-app-frame.public-shop-page .public-shop-grid,
  body.front-frame-page > .front-app-frame.product-detail-page .guess-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 商品详情页顶部恢复原始胶囊导航与四个操作元素。 */
body.front-frame-page > .front-app-frame.product-detail-page .product-detail-shell {
  padding-top: 78px !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar {
  position: fixed !important;
  top: max(10px, calc(8px + env(safe-area-inset-top))) !important;
  left: 50% !important;
  z-index: 1200 !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(410px, calc(100vw - 20px)) !important;
  height: 57px !important;
  min-height: 57px !important;
  margin: 0 !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(32, 32, 32, .08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 10px 26px rgba(32, 32, 32, .11) !important;
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  pointer-events: auto;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn,
body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions,
body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon {
  pointer-events: auto;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn,
body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon {
  width: 47px !important;
  height: 47px !important;
  border: 1px solid rgba(32, 38, 45, .1) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: 0 4px 14px rgba(31, 38, 47, .1) !important;
  backdrop-filter: blur(12px);
}

body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 0;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon {
  position: relative;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-gallery {
  margin-top: 0 !important;
}

/* 商品介绍后的支持区保持单层结构，操作按钮不再套胶囊。 */
body.front-frame-page > .front-app-frame.product-detail-page .product-support-section {
  display: grid;
  gap: 13px;
  margin: 4px 0 0;
  padding: 14px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-support-heading {
  color: #4b535c;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-support-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(270px, 100%);
  gap: 10px;
  margin-inline: auto;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-support-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 52px;
  padding: 3px 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #737c86;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .18s ease;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-support-action .product-support-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-support-action:hover,
body.front-frame-page > .front-app-frame.product-detail-page .product-support-action:active,
body.front-frame-page > .front-app-frame.product-detail-page .product-support-action:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* 有优惠价时，支持区与上方商品信息合并为一张连续卡片。 */
body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-summary-content {
  border-radius: 12px 12px 0 0;
  border-bottom-color: transparent;
  box-shadow: 0 5px 15px rgba(31, 38, 47, .025);
}

body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-support-section {
  margin-top: -1px;
  padding: 14px 15px 14px;
  border: 1px solid rgba(31, 38, 47, .055);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(31, 38, 47, .025);
}

@media (max-width: 699px) {
  body.front-frame-page > .front-app-frame.product-detail-page .product-detail-shell {
    padding-top: 66px !important;
  }

  body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar {
    width: min(410px, calc(100vw - 16px)) !important;
    height: 53px !important;
    min-height: 53px !important;
  }

  body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn,
  body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon {
    width: 43px !important;
    height: 43px !important;
  }

  body.front-frame-page > .front-app-frame.product-detail-page .product-support-section {
    padding: 14px 0 0;
  }

  body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-support-section {
    padding: 14px 13px 13px;
  }
}

@media (max-width: 699px) {
  body.front-frame-page > .front-app-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    box-shadow: none;
  }

  body.front-frame-page > .front-app-frame .front-page-layer {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.front-frame-page > .front-app-frame *,
  body.front-frame-page > .front-app-frame *::before,
  body.front-frame-page > .front-app-frame *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* Product redeem sheet */
.product-redeem-modal{z-index:7100}
.product-redeem-sheet{width:min(520px,100%);overflow:hidden;border-radius:16px 16px 0 0;background:#fff}
.product-redeem-sheet form{display:grid;gap:14px;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
.product-redeem-sheet header{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;min-height:36px}
.product-redeem-sheet header::before{content:""}
.product-redeem-sheet header strong{font-size:16px;text-align:center}
.product-redeem-sheet header button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#f2f3f1;color:#202020;font-size:21px;cursor:pointer}
.product-redeem-field{display:grid;gap:7px}
.product-redeem-field>span,.product-redeem-fields .field>span{color:#686d68;font-size:12px;font-weight:700}
.product-redeem-field .input,.product-redeem-fields .input{min-height:44px;border-color:#e5e8e4;border-radius:8px;background:#f8f9f7}
.product-redeem-fields{display:grid;gap:11px}
.product-redeem-fields .field{display:grid;gap:7px}
.product-redeem-submit{min-height:44px;border-radius:999px;background:#202020;color:#fff}

/* 首屏与加载完成后保持同一画布，避免旧手机外框和装饰背景闪现。 */
html.front-frame-root,
body.front-frame-page,
body.front-frame-page > .front-app-frame,
body.front-frame-page > .front-app-frame > .front-app-content {
  width: 100%;
  max-width: none;
  background: #f5f6f7 !important;
  background-image: none !important;
}

body.front-frame-page > .front-app-frame {
  min-height: 100vh;
  min-height: 100svh;
  border-radius: 0;
  box-shadow: none;
}

body.front-frame-page {
  display: block;
  padding: 0 !important;
}

body.front-frame-page > .front-app-frame > .front-app-content > .front-page-layer {
  width: min(var(--front-design-frame-width, 430px), 100%);
  margin-inline: auto;
  background: transparent !important;
}

body.front-frame-page .fixed-bg-pattern {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* 主脚本尚未执行时也先按手机内容宽度排版，消除慢网速下的先宽后窄。 */
body:not(.front-frame-page):is(.home-page, .tool-page, .utility-page, .buyer-page, .product-detail-page, .public-shop-page) > :is(.shell, .tool-shell, .download-shell, .narrow-page, .product-home, .buyer-shell, .product-detail-shell, .public-shop-shell, .incentive-shell, .community-shell, .preview-maker-shell, .tutorial-shell) {
  width: min(var(--front-design-frame-width, 430px), 100%) !important;
  max-width: 100%;
  margin-inline: auto;
}

body:not(.front-frame-page).user-subpage > .user-page-shell {
  width: min(410px, calc(100% - 20px)) !important;
  max-width: 410px;
  margin-inline: auto;
  border-right: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.front-frame-page > .front-app-frame.user-subpage .user-page-shell {
  border-right: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 所有前台页面统一使用格陵兰白画布，首屏和框架挂载后保持同色。 */
:root {
  --front-design-canvas: #f5f6f1;
  --front-page-bg: #f5f6f1;
  --front-bg: #f5f6f1;
  --store-canvas: #f5f6f1;
}

html.front-frame-root,
body:is(.home-page, .tool-page, .utility-page, .buyer-page, .user-subpage, .public-shop-page, .product-detail-page),
body.front-frame-page,
body.front-frame-page > .front-app-frame,
body.front-frame-page > .front-app-frame > .front-app-content,
body.front-frame-page > .front-app-frame > .front-app-content > .front-page-layer {
  background-color: #f5f6f1 !important;
  background-image: none !important;
}

/* 正式站 PC 外层铺满画布，页面内容保留手机宽度，不再显示居中圆角外框。 */
body.front-frame-page > .front-app-frame {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.front-frame-page > .front-app-frame > .front-app-content {
  width: 100% !important;
  min-height: 100vh;
  min-height: 100svh;
  border-radius: 0 !important;
  background: transparent !important;
}

body.front-frame-page > .front-app-frame > .front-app-content > .front-page-layer {
  width: min(var(--front-device-width, 430px), 100%) !important;
  max-width: 100% !important;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* 恢复统一的粉色圆圈背景，背景属于框架外层，不再形成额外内容容器。 */
:root {
  --front-design-frame-background:
    radial-gradient(circle at -1% 16%, rgba(255, 220, 228, .68) 0 148px, transparent 149px),
    radial-gradient(circle at 103% 58%, rgba(229, 218, 250, .62) 0 166px, transparent 167px),
    radial-gradient(circle at 78% 46%, rgba(255, 236, 205, .62) 0 36px, transparent 37px),
    radial-gradient(circle at 14% 79%, rgba(210, 235, 236, .56) 0 48px, transparent 49px),
    #f7f1f3;
}

html.front-frame-root,
body.front-frame-page,
body:is(.home-page, .tool-page, .utility-page, .buyer-page, .user-subpage, .public-shop-page, .product-detail-page):not(.front-frame-page),
body.buyer-auth-active {
  background: var(--front-design-frame-background) !important;
  background-attachment: fixed !important;
}

body.front-frame-page > .front-app-frame,
body.front-frame-page > .front-app-frame.home-page,
body.front-frame-page > .front-app-frame.buyer-page,
body.front-frame-page > .front-app-frame.user-subpage,
body.front-frame-page > .front-app-frame.tool-page,
body.front-frame-page > .front-app-frame.utility-page,
body.front-frame-page > .front-app-frame.public-shop-page,
body.front-frame-page > .front-app-frame.product-detail-page,
body.front-frame-page > .front-app-frame.user-home-page.buyer-page:not(.buyer-auth-active) {
  background: var(--front-design-frame-background) !important;
  background-attachment: fixed !important;
}

body.front-frame-page > .front-app-frame > .front-app-content,
body.front-frame-page > .front-app-frame.home-page > .front-app-content,
body.front-frame-page > .front-app-frame.buyer-page > .front-app-content,
body.front-frame-page > .front-app-frame.user-subpage > .front-app-content,
body.front-frame-page > .front-app-frame.tool-page > .front-app-content,
body.front-frame-page > .front-app-frame.utility-page > .front-app-content,
body.front-frame-page > .front-app-frame.public-shop-page > .front-app-content,
body.front-frame-page > .front-app-frame.product-detail-page > .front-app-content {
  background: transparent !important;
}

/* 小屏幕保持与旧版一致的圆圈位置和大小。 */
@media (max-width: 699px) {
  :root {
    --front-design-frame-background:
      radial-gradient(circle at -34px 18%, rgba(255, 220, 228, .72) 0 132px, transparent 133px),
      radial-gradient(circle at 94% 60%, rgba(229, 218, 250, .72) 0 142px, transparent 143px),
      radial-gradient(circle at 78% 46%, rgba(255, 236, 205, .68) 0 30px, transparent 31px),
      radial-gradient(circle at 16% 81%, rgba(210, 235, 236, .66) 0 39px, transparent 40px),
      #f7f1f3;
  }
}

/* 最终框架背景层：粉色圆圈只绘制在最外层，页面内容层全部透出。 */
html.front-frame-root,
body.front-frame-page,
body.front-frame-page > .front-app-frame,
body:is(.home-page, .tool-page, .utility-page, .buyer-page, .user-subpage, .public-shop-page, .product-detail-page),
body.buyer-auth-active,
body.buyer-session-pending {
  background: var(--front-design-frame-background) !important;
  background-attachment: fixed !important;
}

/* 这些是页面布局层，不应再盖住框架背景；白色卡片仍由各自组件规则提供。 */
body.front-frame-page > .front-app-frame > .front-app-content,
body.front-frame-page > .front-app-frame > .front-app-content > .front-page-layer,
body.front-frame-page > .front-app-frame .buyer-shell,
body.front-frame-page > .front-app-frame .buyer-auth-shell,
body.front-frame-page > .front-app-frame .user-page-shell,
body.front-frame-page > .front-app-frame .public-shop-shell {
  background: transparent !important;
  box-shadow: none;
}

/* 登录/注册页取消旧版蓝色装饰圆，避免认证状态切换时闪出另一层背景。 */
body.front-frame-page > .front-app-frame .buyer-auth-shell::before,
body.buyer-auth-active .buyer-auth-shell::before,
body.buyer-session-pending .buyer-auth-shell::before {
  display: none !important;
}

/* 使用根节点的单一视口固定层承载背景，避免移动端 body 伪元素随内容滚动。 */
html.front-frame-root,
html:has(body.tutorial-page) {
  position: relative;
  background: #f7f1f3 !important;
}

html.front-frame-root::before,
html:has(body.tutorial-page)::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  pointer-events: none;
  background: var(--front-design-frame-background);
  content: "";
}

body.front-frame-page {
  position: relative;
  z-index: 1;
  background: transparent !important;
  background-image: none !important;
}

/* 关闭旧的 body 背景伪元素，避免出现第二层圆圈。 */
body.front-frame-page::before {
  display: none !important;
  content: none !important;
}

body.front-frame-page > .front-app-frame {
  z-index: 1;
  background: transparent !important;
  background-image: none !important;
}

/* 教程页自身的透明规则不能移除固定背景层。 */
body.front-frame-page > .front-app-frame.tutorial-page,
body.front-frame-page > .front-app-frame.tutorial-page > .front-app-content,
body.front-frame-page > .front-app-frame.tutorial-page > .front-app-content > .front-page-layer {
  background: transparent !important;
  background-image: none !important;
}

/* 桌面端只铺满最外层背景，所有前台页面共用手机内容轨道。 */
@media (min-width: 700px) {
  html.front-frame-root,
  body.front-frame-page,
  body.front-frame-page > .front-app-frame,
  body.front-frame-page > .front-app-frame > .front-app-content {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  body.front-frame-page > .front-app-frame > .front-app-content > .front-page-layer {
    width: min(var(--front-device-width, 430px), 100%) !important;
    max-width: var(--front-device-width, 430px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  /* 页面主容器仅占手机轨道，避免某个页面的桌面宽度规则向外溢出。 */
  body.front-frame-page > .front-app-frame > .front-app-content > .front-page-layer >
  :is(.shell, .tool-shell, .download-shell, .narrow-page, .product-home,
      .buyer-shell, .product-detail-shell, .public-shop-shell, .incentive-shell,
      .community-shell, .preview-maker-shell, .tutorial-shell, .user-page-shell) {
    max-width: 100% !important;
  }

  /* 遮罩仍覆盖桌面视口，弹窗内容按手机端宽度显示。 */
  body.front-frame-page .community-sheet-panel,
  body.front-frame-page .community-membership-panel {
    width: min(var(--front-device-width, 430px), calc(100vw - 32px)) !important;
    max-width: min(var(--front-device-width, 430px), calc(100vw - 32px)) !important;
  }
}

/* 商品详情页顶部恢复最初的单层胶囊：标题居中，三项操作只保留图标。 */
body.product-detail-page .product-detail-shell {
  padding-top: 78px !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar,
body.product-detail-page .product-detail-topbar {
  position: fixed !important;
  top: max(10px, calc(8px + env(safe-area-inset-top))) !important;
  left: 50% !important;
  z-index: 1200 !important;
  display: grid !important;
  grid-template-columns: 47px minmax(0, 1fr) 94px !important;
  align-items: center !important;
  width: min(410px, calc(100vw - 20px)) !important;
  height: 57px !important;
  min-height: 57px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(34, 40, 47, .08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 10px 26px rgba(36, 42, 49, .11) !important;
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  pointer-events: auto;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn,
body.product-detail-page .product-detail-topbar > #productBackBtn,
body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon,
body.product-detail-page .product-top-actions .product-top-icon {
  display: grid !important;
  position: relative !important;
  place-items: center !important;
  width: 47px !important;
  height: 47px !important;
  min-width: 47px !important;
  min-height: 47px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #3b424b !important;
  transform: none !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > strong,
body.product-detail-page .product-detail-topbar > strong {
  position: static !important;
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  color: #252a30 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: none !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions,
body.product-detail-page .product-top-actions {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  width: 94px !important;
  margin: 0 !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon:hover,
body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon:focus-visible,
body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn:hover,
body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn:focus-visible,
body.product-detail-page .product-top-actions .product-top-icon:hover,
body.product-detail-page .product-top-actions .product-top-icon:focus-visible,
body.product-detail-page .product-detail-topbar > #productBackBtn:hover,
body.product-detail-page .product-detail-topbar > #productBackBtn:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn svg,
body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon svg,
body.product-detail-page .product-detail-topbar > #productBackBtn svg,
body.product-detail-page .product-top-actions .product-top-icon svg {
  width: 20px !important;
  height: 20px !important;
}

@media (max-width: 699px) {
  body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar,
  body.product-detail-page .product-detail-topbar {
    grid-template-columns: 43px minmax(0, 1fr) 86px !important;
    width: min(410px, calc(100vw - 16px)) !important;
    height: 53px !important;
    min-height: 53px !important;
  }

  body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn,
  body.product-detail-page .product-detail-topbar > #productBackBtn,
  body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon,
  body.product-detail-page .product-top-actions .product-top-icon {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
    min-height: 43px !important;
  }

  body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions,
  body.product-detail-page .product-top-actions {
    width: 86px !important;
  }
}

/* 自定义商品标签使用 # 前缀，保持紫色描边和透明底。 */
body.front-frame-page > .front-app-frame.product-detail-page .product-summary .product-tag[class*="tag-tone-"],
body.product-detail-page .product-summary .product-tag[class*="tag-tone-"] {
  border: 1px solid rgba(138, 92, 246, .62) !important;
  background: transparent !important;
  color: #8054dc !important;
  box-shadow: none !important;
}

/* 商品详情顶部胶囊与内测站保持一致：只保留一层白色胶囊，按钮本身透明。 */
body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar,
body.product-detail-page .product-detail-topbar {
  position: fixed !important;
  top: max(10px, calc(8px + env(safe-area-inset-top))) !important;
  left: 50% !important;
  right: auto !important;
  z-index: 1200 !important;
  box-sizing: border-box !important;
  display: block !important;
  width: min(410px, calc(100vw - 20px)) !important;
  max-width: none !important;
  height: 57px !important;
  min-height: 57px !important;
  margin: 0 !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(32, 32, 32, .08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 10px 26px rgba(32, 32, 32, .11) !important;
  backdrop-filter: blur(14px);
  transform: translateX(-50%) !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > strong,
body.product-detail-page .product-detail-topbar > strong {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 0 !important;
  max-width: calc(100% - 150px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #232523 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: translate(-50%, -50%) !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn,
body.product-detail-page .product-detail-topbar > #productBackBtn {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  display: grid !important;
  place-items: center !important;
  width: 47px !important;
  height: 47px !important;
  min-width: 47px !important;
  min-height: 47px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #3b424b !important;
  transform: none !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions,
body.product-detail-page .product-top-actions {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  margin: 0 !important;
  gap: 2px !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon,
body.product-detail-page .product-top-actions .product-top-icon {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 47px !important;
  height: 47px !important;
  min-width: 47px !important;
  min-height: 47px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #3b424b !important;
  transform: none !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon:hover,
body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon:focus-visible,
body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn:hover,
body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn:focus-visible,
body.product-detail-page .product-top-actions .product-top-icon:hover,
body.product-detail-page .product-top-actions .product-top-icon:focus-visible,
body.product-detail-page .product-detail-topbar > #productBackBtn:hover,
body.product-detail-page .product-detail-topbar > #productBackBtn:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon svg,
body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn svg,
body.product-detail-page .product-top-actions .product-top-icon svg,
body.product-detail-page .product-detail-topbar > #productBackBtn svg {
  width: 19px !important;
  height: 19px !important;
}

@media (max-width: 699px) {
  body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar,
  body.product-detail-page .product-detail-topbar {
    width: min(410px, calc(100vw - 20px)) !important;
    height: 53px !important;
    min-height: 53px !important;
  }

  body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > #productBackBtn,
  body.product-detail-page .product-detail-topbar > #productBackBtn,
  body.front-frame-page > .front-app-frame.product-detail-page .product-top-actions .product-top-icon,
  body.product-detail-page .product-top-actions .product-top-icon {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
    min-height: 43px !important;
  }

  body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar > strong,
  body.product-detail-page .product-detail-topbar > strong {
    max-width: calc(100% - 136px) !important;
    font-size: 14px !important;
  }
}

/* 首页标签未选中保持白色，选中显示紫色；详情页自定义标签恢复红色，# 前缀由脚本保留。 */
body.front-frame-page > .front-app-frame.home-page.home-step-header-only .home-tag-filters button,
body.home-step-header-only .home-tag-filters button {
  border-color: rgba(79, 75, 66, .06) !important;
  background: #fff !important;
  color: #92928f !important;
  box-shadow: 0 1px 4px rgba(57, 54, 47, .025) !important;
}

body.front-frame-page > .front-app-frame.home-page.home-step-header-only .home-tag-filters button.active,
body.home-step-header-only .home-tag-filters button.active {
  border-color: #8a5cf6 !important;
  background: #8a5cf6 !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(138, 92, 246, .16) !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-summary .product-tag[class*="tag-tone-"],
body.product-detail-page .product-summary .product-tag[class*="tag-tone-"] {
  border: 1px solid rgba(239, 72, 83, .72) !important;
  background: rgba(239, 72, 83, .055) !important;
  color: #e84652 !important;
  box-shadow: none !important;
}

/* 免费、活动、代理商品的支持区与上方商品信息区使用同一块纯白底色，避免出现色差。 */
body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-summary-content,
body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-support-section,
body.product-detail-page .product-summary.has-product-offer .product-summary-content,
body.product-detail-page .product-summary.has-product-offer .product-support-section {
  background: #fff !important;
  background-image: none !important;
  color-scheme: light;
}

/* 商品详情页白色区域使用同一个纯白表面，避免内容卡与支持区出现细微色差。 */
body.front-frame-page > .front-app-frame.product-detail-page .product-summary,
body.front-frame-page > .front-app-frame.product-detail-page .product-summary-content,
body.front-frame-page > .front-app-frame.product-detail-page .product-support-section,
body.front-frame-page > .front-app-frame.product-detail-page .detail-section,
body.front-frame-page > .front-app-frame.product-detail-page .shop-section,
body.product-detail-page .product-summary,
body.product-detail-page .product-summary-content,
body.product-detail-page .product-support-section,
body.product-detail-page .detail-section,
body.product-detail-page .shop-section {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

/* 优惠商品的外层只负责布局，白色由上下两块内容卡统一提供。 */
body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer,
body.product-detail-page .product-summary.has-product-offer {
  background: transparent !important;
}

body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-summary-content,
body.front-frame-page > .front-app-frame.product-detail-page .product-summary.has-product-offer .product-support-section,
body.product-detail-page .product-summary.has-product-offer .product-summary-content,
body.product-detail-page .product-summary.has-product-offer .product-support-section {
  box-shadow: none !important;
}

/* 顶部胶囊保持原有布局，但不再投射阴影。 */
body.front-frame-page > .front-app-frame.product-detail-page .product-detail-topbar,
body.product-detail-page .product-detail-topbar {
  box-shadow: none !important;
}

/* 正式站用户相关页面：外层只使用根节点固定背景，避免旧样式叠加白色或灰色大面板。
   登录/注册卡片、用户中心功能卡片等内部表面保持原有设计。 */
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.buyer-page,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.buyer-page > .front-app-content,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.buyer-page > .front-app-content > .front-page-layer,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.buyer-page .buyer-shell,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.buyer-page .buyer-app,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.user-subpage,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.user-subpage > .front-app-content,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.user-subpage > .front-app-content > .front-page-layer,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.user-subpage .user-page-shell,
html.front-fixed-background-root > body.front-frame-page.buyer-auth-active > .front-app-frame.buyer-page .buyer-auth-shell,
html.front-fixed-background-root > body.front-frame-page.buyer-auth-active > .front-app-frame.buyer-page .buyer-auth-stage {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 框架挂载前的首屏兜底，挂载完成后由根节点固定背景接管。 */
html.front-fixed-background-root > body.buyer-page,
html.front-fixed-background-root > body.user-subpage,
html.front-fixed-background-root > body.buyer-auth-active,
html.front-fixed-background-root > body.buyer-session-pending {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 认证页旧版圆形装饰属于第二层背景，统一关闭。 */
html.front-fixed-background-root > body.buyer-auth-active .buyer-auth-shell::before,
html.front-fixed-background-root > body.buyer-session-pending .buyer-auth-shell::before {
  display: none !important;
  content: none !important;
}

/* 登录态脚本在框架挂载前也会把 buyer-shell 设为实色；这里覆盖未挂载与挂载两种状态。 */
html.front-fixed-background-root > body.buyer-page > .buyer-shell,
html.front-fixed-background-root > body.user-subpage > .user-page-shell,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.buyer-page .buyer-shell,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.user-subpage .user-page-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 认证页最终样式覆盖，必须位于全部历史兼容规则之后。 */
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-card,
body.buyer-auth-active .buyer-auth-shell .buyer-auth-card,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-field input,
body.buyer-auth-active .buyer-auth-shell .buyer-auth-field input,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-field input {
  background: #fff !important;
  border: 1px solid #dfe3e9 !important;
  color: #172033 !important;
  box-shadow: none !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-field input:focus,
body.buyer-auth-active .buyer-auth-shell .buyer-auth-field input:focus,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-field input:focus {
  background: #fff !important;
  border-color: #c5ccd7 !important;
  box-shadow: 0 0 0 3px rgba(32, 34, 40, .08) !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-submit,
body.buyer-auth-active .buyer-auth-shell .buyer-auth-submit,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-submit {
  background: #202328 !important;
  border-color: #202328 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(32, 35, 40, .16) !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-submit:hover:not(:disabled),
body.buyer-auth-active .buyer-auth-shell .buyer-auth-submit:hover:not(:disabled) {
  background: #17191d !important;
  border-color: #17191d !important;
  box-shadow: 0 12px 26px rgba(32, 35, 40, .2) !important;
}

/* 认证页面只有 body 滚动，壳层不再截断注册表单的上下滑动。 */
html:has(body.buyer-auth-active),
html:has(body.buyer-session-pending) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

body.buyer-auth-active,
body.buyer-session-pending {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell,
body.buyer-auth-active .buyer-auth-shell,
body.buyer-session-pending .buyer-auth-shell {
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  touch-action: pan-y !important;
}

/* 最终认证页覆盖：登录与注册直接铺在框架背景上，白色输入框配黑色实心主按钮。 */
body.buyer-auth-active .buyer-auth-shell .buyer-auth-card,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-card,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.buyer-auth-active .buyer-auth-shell .buyer-auth-field input,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-field input,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-field input {
  background: #fff !important;
  border: 1px solid #dfe3e9 !important;
  color: #172033 !important;
  box-shadow: none !important;
}

body.buyer-auth-active .buyer-auth-shell .buyer-auth-field input:focus,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-field input:focus,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-field input:focus {
  background: #fff !important;
  border-color: #c5ccd7 !important;
  box-shadow: 0 0 0 3px rgba(32, 34, 40, .08) !important;
}

body.buyer-auth-active .buyer-auth-shell .buyer-auth-submit,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-submit,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-submit {
  background: #202328 !important;
  border-color: #202328 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(32, 35, 40, .16) !important;
}

body.buyer-auth-active .buyer-auth-shell .buyer-auth-submit:hover:not(:disabled),
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-submit:hover:not(:disabled) {
  background: #17191d !important;
  border-color: #17191d !important;
  box-shadow: 0 12px 26px rgba(32, 35, 40, .2) !important;
}

/* 认证页仅保留 body 这一层滚动，避免壳层与页面同时抢占触摸手势。 */
html:has(body.buyer-auth-active),
html:has(body.buyer-session-pending) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

body.buyer-auth-active,
body.buyer-session-pending {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

body.buyer-auth-active .buyer-auth-shell,
body.buyer-session-pending .buyer-auth-shell {
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  touch-action: pan-y !important;
}

/* 登录/注册页按原始页面恢复：没有额外白色容器，输入框为白色，主按钮为黑色实心。 */
body.buyer-auth-active .buyer-auth-shell .buyer-auth-card,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-card,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.buyer-auth-active .buyer-auth-shell .buyer-auth-field input,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-field input,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-field input {
  background: #fff !important;
  border: 1px solid #dfe3e9 !important;
  color: #172033 !important;
  box-shadow: none !important;
}

body.buyer-auth-active .buyer-auth-shell .buyer-auth-field input:focus,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-field input:focus,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-field input:focus {
  background: #fff !important;
  border-color: #c5ccd7 !important;
  box-shadow: 0 0 0 3px rgba(32, 34, 40, .08) !important;
}

body.buyer-auth-active .buyer-auth-shell .buyer-auth-submit,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-submit,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-submit {
  background: #202328 !important;
  border-color: #202328 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(32, 35, 40, .16) !important;
}

body.buyer-auth-active .buyer-auth-shell .buyer-auth-submit:hover:not(:disabled),
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-submit:hover:not(:disabled) {
  background: #17191d !important;
  border-color: #17191d !important;
  box-shadow: 0 12px 26px rgba(32, 35, 40, .2) !important;
}

/* 认证内容超出小屏时由认证壳层独立滚动，避免 body 与壳层抢占手势。 */
body.buyer-auth-active .buyer-auth-shell,
body.buyer-session-pending .buyer-auth-shell {
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
}

/* 认证页：输入框保持透明，按钮恢复清晰的浅边框和深色文字。找回密码弹层单独恢复白色表面。 */
body.buyer-auth-active .buyer-auth-shell,
body.buyer-session-pending .buyer-auth-shell,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.buyer-auth-active .buyer-auth-field input,
body.buyer-session-pending .buyer-auth-field input,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-field input {
  background: transparent !important;
  border-color: #dce4f1 !important;
  color: #252a31 !important;
  box-shadow: none !important;
}

body.buyer-auth-active .buyer-auth-field input:focus,
body.buyer-session-pending .buyer-auth-field input:focus,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-field input:focus {
  background: rgba(255, 255, 255, .16) !important;
  border-color: #b8c9e3 !important;
  box-shadow: 0 0 0 3px rgba(130, 153, 190, .12) !important;
}

body.buyer-auth-active .buyer-auth-submit,
body.buyer-auth-active .buyer-auth-secondary,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-submit,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-secondary {
  background: transparent !important;
  border-color: #d9dee5 !important;
  color: #252a31 !important;
  box-shadow: none !important;
}

body.buyer-auth-active .buyer-auth-submit:hover:not(:disabled),
body.buyer-auth-active .buyer-auth-secondary:hover,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-submit:hover:not(:disabled),
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-secondary:hover {
  background: rgba(255, 255, 255, .42) !important;
  box-shadow: none !important;
}

body.buyer-auth-active .buyer-auth-links button,
body.buyer-auth-active .buyer-auth-switch button,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-links button,
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-switch button {
  color: #ef4f6d !important;
}

/* 找回密码是独立的操作面板，不继承登录页的透明按钮和输入框。 */
body.buyer-auth-active .buyer-forgot-panel,
body.front-frame-page > .front-app-frame.buyer-page .buyer-forgot-panel {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid #e6e9ee !important;
  box-shadow: 0 -16px 44px rgba(17, 30, 56, .16) !important;
  color: #122241 !important;
}

body.buyer-auth-active .buyer-forgot-panel .buyer-auth-field input,
body.front-frame-page > .front-app-frame.buyer-page .buyer-forgot-panel .buyer-auth-field input {
  background: #f8fafc !important;
  border-color: #dce4f1 !important;
  color: #122241 !important;
  box-shadow: none !important;
}

body.buyer-auth-active .buyer-forgot-panel .buyer-auth-field input:focus,
body.front-frame-page > .front-app-frame.buyer-page .buyer-forgot-panel .buyer-auth-field input:focus {
  background: #fff !important;
  border-color: #3d70ed !important;
  box-shadow: 0 0 0 4px rgba(45, 97, 230, .1) !important;
}

body.buyer-auth-active .buyer-forgot-panel .buyer-auth-submit,
body.front-frame-page > .front-app-frame.buyer-page .buyer-forgot-panel .buyer-auth-submit {
  background: linear-gradient(135deg, #2865ed, #244ed5) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(38, 83, 215, .18) !important;
}

body.buyer-auth-active .buyer-forgot-panel .buyer-auth-secondary,
body.front-frame-page > .front-app-frame.buyer-page .buyer-forgot-panel .buyer-auth-secondary {
  background: #fff !important;
  border-color: #dce4f1 !important;
  color: #5174cb !important;
  box-shadow: none !important;
}

/* 认证页只有内部壳层滚动，使用稳定视口高度避免地址栏变化造成快速下滑抖动。 */
html:has(body.buyer-auth-active),
html:has(body.buyer-session-pending),
body.buyer-auth-active,
body.buyer-session-pending {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.buyer-auth-active .buyer-auth-shell,
body.buyer-session-pending .buyer-auth-shell {
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* 用户中心外层透出固定粉色背景，顶部、余额和购物功能区保持目标页面的纯白表面。 */
body.user-home-page.buyer-page:not(.buyer-auth-active) .buyer-preview-app,
body.front-frame-page > .front-app-frame.user-home-page.buyer-page:not(.buyer-auth-active) .buyer-preview-app {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.user-home-page.buyer-page:not(.buyer-auth-active) .buyer-preview-app .topbar,
body.user-home-page.buyer-page:not(.buyer-auth-active) .buyer-preview-app .balance-band,
body.user-home-page.buyer-page:not(.buyer-auth-active) .buyer-preview-app .commerce-band,
body.front-frame-page > .front-app-frame.user-home-page.buyer-page:not(.buyer-auth-active) .buyer-preview-app .topbar,
body.front-frame-page > .front-app-frame.user-home-page.buyer-page:not(.buyer-auth-active) .buyer-preview-app .balance-band,
body.front-frame-page > .front-app-frame.user-home-page.buyer-page:not(.buyer-auth-active) .buyer-preview-app .commerce-band {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

body.user-home-page.buyer-page:not(.buyer-auth-active) .buyer-preview-app .identity,
body.front-frame-page > .front-app-frame.user-home-page.buyer-page:not(.buyer-auth-active) .buyer-preview-app .identity {
  background: #292e36 !important;
  background-image: none !important;
}

/* 首屏尚未挂载 front frame 时，也不要让用户页壳层先闪出一整块白底。 */
body.buyer-page .buyer-shell,
body.buyer-page .buyer-auth-shell,
body.user-subpage .user-page-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 固定背景挂载脚本会同步设置这些壳层为透明，确保旧版实色不会重新出现。 */
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.buyer-page .buyer-shell,
html.front-fixed-background-root > body.front-frame-page > .front-app-frame.user-subpage .user-page-shell {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 认证页最终覆盖，确保前面的历史兼容样式不会再次改回透明控件。 */
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-card,
body.buyer-auth-active .buyer-auth-shell .buyer-auth-card,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-field input,
body.buyer-auth-active .buyer-auth-shell .buyer-auth-field input,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-field input {
  background: #fff !important;
  border: 1px solid #dfe3e9 !important;
  color: #172033 !important;
  box-shadow: none !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-field input:focus,
body.buyer-auth-active .buyer-auth-shell .buyer-auth-field input:focus,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-field input:focus {
  background: #fff !important;
  border-color: #c5ccd7 !important;
  box-shadow: 0 0 0 3px rgba(32, 34, 40, .08) !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-submit,
body.buyer-auth-active .buyer-auth-shell .buyer-auth-submit,
body.buyer-session-pending .buyer-auth-shell .buyer-auth-submit {
  background: #202328 !important;
  border-color: #202328 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(32, 35, 40, .16) !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell .buyer-auth-submit:hover:not(:disabled),
body.buyer-auth-active .buyer-auth-shell .buyer-auth-submit:hover:not(:disabled) {
  background: #17191d !important;
  border-color: #17191d !important;
  box-shadow: 0 12px 26px rgba(32, 35, 40, .2) !important;
}

/* 认证页只使用 body 滚动，注册表单超出屏幕时可正常上下滑动。 */
html:has(body.buyer-auth-active),
html:has(body.buyer-session-pending) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

body.buyer-auth-active,
body.buyer-session-pending {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell,
body.buyer-auth-active .buyer-auth-shell,
body.buyer-session-pending .buyer-auth-shell {
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  touch-action: pan-y !important;
}

/* 认证页只保留页面这一层滚动，内容区自然展开以兼容矮屏注册表单。 */
body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-shell,
body.buyer-auth-active .buyer-auth-shell,
body.buyer-session-pending .buyer-auth-shell {
  grid-template-rows: auto auto !important;
}

body.front-frame-page > .front-app-frame.buyer-page .buyer-auth-stage,
body.buyer-auth-active .buyer-auth-stage,
body.buyer-session-pending .buyer-auth-stage {
  height: auto !important;
  min-height: calc(100svh - 76px) !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}
/* 前台公告沿用代理后台的底部弹层：白色圆角面板、顶部标题和文字关闭按钮。 */
.front-announcement-modal{z-index:9000 !important;align-items:flex-end;padding:12vh 0 0;background:rgba(15,18,28,.45)}
.front-announcement-sheet-card{width:min(100%,480px);max-height:88vh;margin:0 auto;background:#fff;border-radius:28px 28px 0 0;padding:16px 16px calc(22px + env(safe-area-inset-bottom));overflow:auto;box-shadow:0 -18px 56px rgba(0,0,0,.16);animation:frontAnnouncementSheetUp .24s ease-out both}
.front-announcement-sheet-head{position:sticky;top:0;z-index:2;margin:-16px -16px 14px;padding:16px;background:#fff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f2f6}
.front-announcement-sheet-head strong{font-size:18px;font-weight:900;color:#222}
.front-announcement-sheet-head .front-announcement-close{border:0;background:#f3f5fa;border-radius:999px;height:34px;padding:0 13px;font-size:12px;font-weight:900;color:#555d70;cursor:pointer}
.front-announcement-sheet-body{font-size:14px;line-height:1.85;color:#343947;word-break:break-word}
.front-announcement-content{white-space:pre-wrap;min-height:46px}
@keyframes frontAnnouncementSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (max-width:520px){.front-announcement-sheet-card{width:100%;border-radius:24px 24px 0 0;padding:14px 14px calc(18px + env(safe-area-inset-bottom))}.front-announcement-sheet-head{margin:-14px -14px 12px;padding:14px}.front-announcement-sheet-head strong{font-size:15px}.front-announcement-sheet-head .front-announcement-close{height:32px;font-size:10px}}