/* ==========================================================================
   custom-shop.css — Ayirun Shop 定制皮肤
   覆盖 Cartoon 主题的「照片背景 + 玻璃拟态」，换成干净的数字商品店风格。
   亮/暗双主题跟随 html[data-theme]。
   ========================================================================== */

:root,
html[data-theme="light"] {
  --sh-bg: #f4f5f7;
  --sh-bg-accent: radial-gradient(1200px 600px at 12% -8%, #e8e9ff 0%, transparent 60%),
                  radial-gradient(900px 500px at 92% 4%, #dff4f7 0%, transparent 55%);
  --sh-surface: #ffffff;
  --sh-surface-2: #fafbfc;
  --sh-border: rgba(15, 23, 42, .08);
  --sh-border-strong: rgba(15, 23, 42, .14);
  --sh-text: #0f172a;
  --sh-muted: #64748b;
  --sh-accent: #4f46e5;
  --sh-accent-soft: rgba(79, 70, 229, .10);
  --sh-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
  --sh-shadow-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 18px 40px -18px rgba(15, 23, 42, .22);
}

html[data-theme="dark"] {
  --sh-bg: #0a0b0f;
  --sh-bg-accent: radial-gradient(1200px 600px at 12% -8%, rgba(79, 70, 229, .16) 0%, transparent 60%),
                  radial-gradient(900px 500px at 92% 4%, rgba(14, 165, 233, .10) 0%, transparent 55%);
  --sh-surface: #12141a;
  --sh-surface-2: #171a21;
  --sh-border: rgba(255, 255, 255, .07);
  --sh-border-strong: rgba(255, 255, 255, .14);
  --sh-text: #e8eaf0;
  --sh-muted: #8b93a7;
  --sh-accent: #7c7cf8;
  --sh-accent-soft: rgba(124, 124, 248, .14);
  --sh-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --sh-shadow-hover: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px -18px rgba(0, 0, 0, .75);
}

/* ---------- 背景：干掉照片，换成柔和渐变 ---------- */
body.uc-body,
body {
  background-image: none !important;
  background-color: var(--sh-bg) !important;
  background-image: var(--sh-bg-accent) !important;
  background-attachment: fixed !important;
  color: var(--sh-text);
  font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 顶部导航 ---------- */
.uc-topbar {
  padding-top: 18px;
}
.uc-topbar__inner .shop-nav,
.shop-nav {
  background: color-mix(in srgb, var(--sh-surface) 86%, transparent) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--sh-shadow) !important;
  backdrop-filter: blur(18px) saturate(160%);
  padding: 8px 14px !important;
}
.shop-brand__name {
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-text) !important;
}
.shop-nav__item {
  border-radius: 10px !important;
  color: var(--sh-muted) !important;
  font-weight: 500;
  transition: background .18s ease, color .18s ease;
}
.shop-nav__item:hover {
  background: var(--sh-accent-soft) !important;
  color: var(--sh-accent) !important;
}
.shop-nav__item.is-active,
.shop-nav__item.active {
  background: var(--sh-accent-soft) !important;
  color: var(--sh-accent) !important;
}
.shop-search__box {
  background: var(--sh-surface-2) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 12px !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.shop-search__box:focus-within {
  border-color: var(--sh-accent) !important;
  box-shadow: 0 0 0 3px var(--sh-accent-soft) !important;
}
.item-search-input {
  background: transparent !important;
  color: var(--sh-text) !important;
}
.shop-icon-btn {
  border-radius: 10px !important;
  color: var(--sh-muted) !important;
}
.shop-icon-btn:hover {
  background: var(--sh-accent-soft) !important;
  color: var(--sh-accent) !important;
}
.shop-btn {
  border-radius: 11px !important;
  font-weight: 600 !important;
}
.shop-btn--primary {
  background: var(--sh-accent) !important;
  border-color: var(--sh-accent) !important;
  box-shadow: 0 6px 18px -8px var(--sh-accent) !important;
}
.shop-btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ---------- 面板卡片 ---------- */
.panel {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--sh-shadow) !important;
  backdrop-filter: none !important;
  overflow: hidden;
  margin-bottom: 18px;
}
.panel-header {
  background: transparent !important;
  border-bottom: 1px solid var(--sh-border) !important;
  padding: 16px 20px !important;
}
.panel-title {
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em;
  color: var(--sh-text) !important;
}
.panel-header .icon {
  background: var(--sh-accent-soft) !important;
  color: var(--sh-accent) !important;
  border-radius: 10px !important;
}
.panel-body {
  padding: 18px 20px 20px !important;
  color: var(--sh-text) !important;
}
.panel-body .notice-line,
.panel-body p {
  color: var(--sh-muted);
  line-height: 1.75;
}

/* ---------- 分类 chip ---------- */
.chip {
  background: var(--sh-surface-2) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 999px !important;
  color: var(--sh-muted) !important;
  font-weight: 500 !important;
  padding: 7px 15px !important;
  transition: all .18s ease;
}
.chip:hover {
  border-color: var(--sh-border-strong) !important;
  color: var(--sh-text) !important;
}
.chip.is-primary {
  background: var(--sh-accent) !important;
  border-color: var(--sh-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -8px var(--sh-accent);
}
.chip.is-primary:hover {
  color: #fff !important;
}

/* ---------- 商品卡片 ---------- */
.item-list {
  --bs-gutter-x: 18px;
  --bs-gutter-y: 18px;
}
.item-card-cell {
  text-decoration: none !important;
}
.acg-card {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--sh-shadow) !important;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1),
              box-shadow .22s ease, border-color .22s ease;
}
.item-card-cell:hover .acg-card {
  transform: translateY(-3px);
  box-shadow: var(--sh-shadow-hover) !important;
  border-color: var(--sh-border-strong) !important;
}
.acg-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--sh-border);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
}
.acg-body {
  padding: 13px 14px 14px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.acg-body .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 2px;
}
.badge-soft {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.badge-soft-success {
  background: rgba(16, 185, 129, .12) !important;
  color: #059669 !important;
  border-color: rgba(16, 185, 129, .22) !important;
}
html[data-theme="dark"] .badge-soft-success {
  background: rgba(16, 185, 129, .16) !important;
  color: #34d399 !important;
}
.badge-soft-primary {
  background: var(--sh-accent-soft) !important;
  color: var(--sh-accent) !important;
  border-color: color-mix(in srgb, var(--sh-accent) 30%, transparent) !important;
}
.goods-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: var(--sh-text) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}
.acg-card .price {
  color: var(--sh-accent) !important;
  font-size: 19px !important;
  font-weight: 750 !important;
  letter-spacing: -.02em;
}
.acg-card .price .unit {
  font-size: 13px !important;
  font-weight: 600;
  margin-right: 1px;
}
.stat-bottom {
  display: flex !important;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px !important;
  color: var(--sh-muted) !important;
  padding-top: 8px;
  border-top: 1px dashed var(--sh-border);
  margin-top: auto;
}
.soldout-ribbon {
  border-radius: 8px !important;
  font-weight: 600;
  letter-spacing: .02em;
}
.acg-card.soldout {
  opacity: .58;
  filter: saturate(.5);
}

/* 空状态 / 加载态 */
.item-message {
  color: var(--sh-muted) !important;
  font-size: 13.5px;
  padding: 26px 0 !important;
}

/* ---------- 页脚 ---------- */
.uc-footer,
.footer {
  color: var(--sh-muted) !important;
  font-size: 12.5px;
  border-top: 1px solid var(--sh-border) !important;
  background: transparent !important;
}

/* ---------- 登录 / 注册页 ---------- */
.uc-auth-card,
.auth-card,
.auth-panel {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--sh-shadow-hover) !important;
  backdrop-filter: none !important;
}
.auth-form input,
.auth-form select,
.form-control {
  background: var(--sh-surface-2) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 11px !important;
  color: var(--sh-text) !important;
}
.auth-form input:focus,
.form-control:focus {
  border-color: var(--sh-accent) !important;
  box-shadow: 0 0 0 3px var(--sh-accent-soft) !important;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sh-muted) 32%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--sh-muted) 55%, transparent);
  background-clip: padding-box;
}

/* ---------- 网格：卡片更宽、响应式 ---------- */
.item-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 0 !important;
}
.item-list > * {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}
.item-list .item-message {
  grid-column: 1 / -1;
}

/* ---------- 空公告面板自动隐藏 ---------- */
.panel:has(.panel-body:empty) { display: none !important; }

/* ---------- 卡片细节 ---------- */
.acg-thumb { min-height: 150px; }
.acg-body { padding: 14px 15px 15px !important; }
.goods-title { font-size: 14.5px !important; }

/* ---------- 窄屏 ---------- */
@media (max-width: 720px) {
  .item-list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
  .acg-thumb { min-height: 110px; }
}

/* ==========================================================================
   v2 精修：层次、光感、微交互
   ========================================================================== */

/* 顶部环境光 */
body::before {
  content: ;
  position: fixed;
  inset: 0 0 auto 0;
  height: 420px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--sh-accent) 12%, transparent) 0%, transparent 70%);
}
body > * { position: relative; z-index: 1; }

/* 顶栏：更强的浮起感 */
.uc-topbar__inner .shop-nav,
.shop-nav {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    var(--sh-shadow) !important;
}
html[data-theme=dark] .uc-topbar__inner .shop-nav,
html[data-theme=dark] .shop-nav {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    var(--sh-shadow) !important;
}

/* 面板：内高光 + 更柔的边界 */
.panel {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset,
    var(--sh-shadow) !important;
}
html[data-theme=dark] .panel {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    var(--sh-shadow) !important;
}

/* 面板标题：左侧强调条 */
.panel-header {
  position: relative;
}
.panel-header::before {
  content: ;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--sh-accent), color-mix(in srgb, var(--sh-accent) 40%, #fff));
}

/* 商品图：压暗过渡 + hover 微缩放 */
.acg-thumb {
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.acg-thumb::after {
  content: ;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .18) 100%);
  pointer-events: none;
}
.item-card-cell:hover .acg-thumb {
  transform: scale(1.045);
}
.item-card-cell:hover .acg-card {
  border-color: color-mix(in srgb, var(--sh-accent) 35%, var(--sh-border)) !important;
}

/* 价格：更醒目 */
.acg-card .price {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  letter-spacing: -.03em;
}
.acg-card .price .unit {
  opacity: .8;
}

/* 推荐徽标 */
.badge-soft-primary {
  box-shadow: 0 2px 8px -3px var(--sh-accent);
}

/* 按钮：渐变 + 光晕 */
.shop-btn--primary {
  background: linear-gradient(135deg, var(--sh-accent), color-mix(in srgb, var(--sh-accent) 70%, #a855f7)) !important;
  border: none !important;
  box-shadow: 0 8px 22px -10px var(--sh-accent) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.shop-btn--primary:active {
  transform: translateY(0) scale(.985);
}

/* 分类 chip：更细腻 */
.chip {
  backdrop-filter: blur(8px);
}
.chip.is-primary {
  background: linear-gradient(135deg, var(--sh-accent), color-mix(in srgb, var(--sh-accent) 72%, #a855f7)) !important;
  box-shadow: 0 8px 20px -10px var(--sh-accent) !important;
}

/* 卡片入场动画 */
@keyframes shFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.item-list > .item-card-cell {
  animation: shFadeUp .42s cubic-bezier(.2, .7, .3, 1) both;
}
.item-list > .item-card-cell:nth-child(1) { animation-delay: .02s; }
.item-list > .item-card-cell:nth-child(2) { animation-delay: .06s; }
.item-list > .item-card-cell:nth-child(3) { animation-delay: .10s; }
.item-list > .item-card-cell:nth-child(4) { animation-delay: .14s; }
.item-list > .item-card-cell:nth-child(5) { animation-delay: .18s; }
.item-list > .item-card-cell:nth-child(6) { animation-delay: .22s; }

/* 公告正文排版 */
.panel-body p { margin: 0 0 6px; }
.panel-body p:last-child { margin-bottom: 0; }
.panel-body b { color: var(--sh-text); font-weight: 650; }
.panel-body a {
  color: var(--sh-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--sh-accent) 40%, transparent);
  transition: .18s;
}
.panel-body a:hover {
  border-bottom-color: var(--sh-accent);
}

/* 搜索框图标色 */
.shop-search__box i { color: var(--sh-muted); }

/* ==========================================================================
   v3 主视觉（Hero）：动态光球 + 渐变标题 + 数据条
   ========================================================================== */

.sh-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 4px 0 18px;
  padding: 46px 44px 42px;
  border-radius: 24px;
  border: 1px solid var(--sh-border);
  background:
    radial-gradient(120% 140% at 8% 0%, color-mix(in srgb, var(--sh-accent) 14%, transparent) 0%, transparent 58%),
    radial-gradient(90% 120% at 96% 8%, rgba(14, 165, 233, .14) 0%, transparent 60%),
    var(--sh-surface);
  box-shadow: var(--sh-shadow);
  animation: shHeroIn .7s cubic-bezier(.2, .7, .3, 1) both;
}
html[data-theme="dark"] .sh-hero {
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(124, 124, 248, .20) 0%, transparent 58%),
    radial-gradient(90% 120% at 96% 8%, rgba(14, 165, 233, .12) 0%, transparent 60%),
    var(--sh-surface);
}

/* 顶部一条细渐变高光 */
.sh-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sh-accent) 60%, transparent), transparent);
}

@keyframes shHeroIn {
  from { opacity: 0; transform: translateY(14px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 漂浮光球 ---------- */
.sh-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
.sh-hero__orb--1 {
  width: 260px; height: 260px;
  top: -90px; right: -40px;
  background: color-mix(in srgb, var(--sh-accent) 42%, transparent);
  opacity: .55;
  animation: shFloat1 13s ease-in-out infinite;
}
.sh-hero__orb--2 {
  width: 200px; height: 200px;
  bottom: -110px; left: 12%;
  background: rgba(14, 165, 233, .45);
  opacity: .38;
  animation: shFloat2 17s ease-in-out infinite;
}
.sh-hero__orb--3 {
  width: 150px; height: 150px;
  top: 30%; right: 26%;
  background: rgba(168, 85, 247, .40);
  opacity: .28;
  animation: shFloat3 21s ease-in-out infinite;
}

@keyframes shFloat1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-26px, 22px, 0) scale(1.08); }
}
@keyframes shFloat2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(34px, -18px, 0) scale(1.12); }
}
@keyframes shFloat3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-18px, -26px, 0) scale(1.15); }
}

/* ---------- 内容 ---------- */
.sh-hero__inner {
  position: relative;
  max-width: 720px;
}

.sh-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--sh-border-strong);
  background: color-mix(in srgb, var(--sh-surface) 70%, transparent);
  backdrop-filter: blur(10px);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--sh-muted);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
}
html[data-theme="dark"] .sh-hero__pill {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
}
.sh-hero__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
  animation: shPulse 2.2s ease-out infinite;
}
@keyframes shPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.sh-hero__title {
  margin: 18px 0 10px;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
  background: linear-gradient(100deg,
      var(--sh-text) 8%,
      var(--sh-accent) 46%,
      #0ea5e9 72%,
      var(--sh-text) 96%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shSheen 9s ease-in-out infinite;
}
@keyframes shSheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.sh-hero__sub {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--sh-muted);
  max-width: 560px;
}

/* ---------- 数据条 ---------- */
.sh-hero__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  border-radius: 16px;
  border: 1px solid var(--sh-border);
  background: color-mix(in srgb, var(--sh-surface-2) 78%, transparent);
  backdrop-filter: blur(8px);
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
}
.sh-hero__stat {
  padding: 14px 26px;
  min-width: 118px;
  border-right: 1px solid var(--sh-border);
  transition: background .2s ease;
}
.sh-hero__stat:last-child { border-right: 0; }
.sh-hero__stat:hover {
  background: color-mix(in srgb, var(--sh-accent) 6%, transparent);
}
.sh-hero__stat b {
  display: block;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--sh-text);
  line-height: 1.2;
}
.sh-hero__stat b i {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  margin-left: 2px;
  color: var(--sh-muted);
}
.sh-hero__stat small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sh-muted);
}

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
  .sh-hero { padding: 32px 22px 28px; border-radius: 18px; }
  .sh-hero__sub { font-size: 14px; margin-bottom: 20px; }
  .sh-hero__stats { width: 100%; }
  .sh-hero__stat { flex: 1 1 0; padding: 12px 14px; min-width: 0; text-align: center; }
  .sh-hero__stat b { font-size: 17px; }
  .sh-hero__orb--1 { width: 180px; height: 180px; }
  .sh-hero__orb--2, .sh-hero__orb--3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-hero, .sh-hero__orb, .sh-hero__title, .sh-hero__dot { animation: none !important; }
}

/* ---------- Hero 右侧光环视觉 ---------- */
.sh-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: none !important;
}
.sh-hero__copy {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
}

.sh-hero__art {
  position: relative;
  flex: 0 0 auto;
  width: 252px;
  height: 252px;
  margin-right: 14px;
}

.sh-hero__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      transparent 0deg 170deg,
      color-mix(in srgb, var(--sh-accent) 90%, transparent) 300deg,
      #0ea5e9 342deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: shSpin 14s linear infinite;
}
.sh-hero__ring--2 {
  inset: 30px;
  animation-duration: 9s;
  animation-direction: reverse;
  opacity: .5;
}
@keyframes shSpin {
  to { transform: rotate(360deg); }
}

.sh-hero__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 30% 18%, color-mix(in srgb, var(--sh-accent) 24%, var(--sh-surface)), var(--sh-surface));
  border: 1px solid var(--sh-border-strong);
  box-shadow:
    0 20px 44px -20px color-mix(in srgb, var(--sh-accent) 75%, transparent),
    0 0 0 12px color-mix(in srgb, var(--sh-accent) 5%, transparent);
  animation: shBreath 5.5s ease-in-out infinite;
}
@keyframes shBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.035); }
}
.sh-hero__core b {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(120deg, var(--sh-accent), #0ea5e9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sh-hero__core small {
  margin-top: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--sh-muted);
}

.sh-hero__float {
  position: absolute;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--sh-text);
  background: color-mix(in srgb, var(--sh-surface) 86%, transparent);
  border: 1px solid var(--sh-border-strong);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-shadow);
}
.sh-hero__float--a {
  top: 16px;
  left: -14px;
  animation: shDrift 7s ease-in-out infinite;
}
.sh-hero__float--b {
  bottom: 26px;
  right: -20px;
  animation: shDrift 7s ease-in-out infinite;
  animation-delay: -2.4s;
}
@keyframes shDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

@media (max-width: 980px) {
  .sh-hero__art { display: none; }
  .sh-hero__inner { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-hero__ring, .sh-hero__core, .sh-hero__float { animation: none !important; }
}

/* ---------- 商品详情页封面 ---------- */
.acg-cover {
  display: grid !important;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: var(--sh-surface-2);
}
.acg-cover .item-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- 品牌标记：替换默认卡通图标 ---------- */
img.uc-brand__logo,
img[src="/favicon.ico"],
img[src$="favicon.ico"],
img[src*="favicon"] {
  content: url("/assets/logo.svg") !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px;
  object-fit: contain;
  background: none !important;
  box-shadow: 0 6px 16px -8px rgba(99, 102, 241, .9);
}

/* ---------- 主按钮统一靛紫渐变 ---------- */
.btn-gradient {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(105deg, #6366f1, #8b5cf6 55%, #22d3ee 115%) !important;
  background-size: 160% 100% !important;
  box-shadow: 0 12px 30px -14px rgba(99, 102, 241, .95) !important;
  transition: transform .18s, box-shadow .18s, background-position .5s !important;
}
.btn-gradient:hover {
  background-position: 100% 50% !important;
  transform: translateY(-1px);
}
.btn-passkey {
  border-color: var(--sh-border-strong) !important;
  color: var(--sh-text) !important;
  background: var(--sh-surface) !important;
}

/* ---------- 详情页封面填满 + 详情正文排版 ---------- */
.acg-cover {
  display: block !important;
  align-items: stretch !important;
}
.acg-cover .item-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 宝贝详情正文 */
.panel-body {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--sh-text);
}
.panel-body b, .panel-body strong {
  color: var(--sh-text);
  font-weight: 700;
}

/* ---------- 详情页封面：绝对定位填满，绕过主题的 max-height ---------- */
.acg-cover {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  min-height: 320px;
}
.acg-cover .item-cover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px;
}

/* ==========================================================================
   购买须知弹窗（仿 jzai1688 的规则弹窗）
   ========================================================================== */
.sh-notice-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: shFadeIn .22s ease both;
}
.sh-notice-mask[hidden] { display: none; }
@keyframes shFadeIn { from { opacity: 0; } }

.sh-notice {
  width: min(560px, 100%);
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--sh-border);
  background: var(--sh-surface);
  box-shadow: 0 30px 90px -30px rgba(15, 23, 42, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  animation: shNoticeIn .3s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes shNoticeIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.sh-notice__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--sh-border);
}
.sh-notice__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 6px 16px -8px rgba(99, 102, 241, .95);
}
.sh-notice__head h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 750;
  letter-spacing: -.01em;
  color: var(--sh-text);
}
.sh-notice__x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sh-border);
  border-radius: 10px;
  background: var(--sh-surface-2);
  color: var(--sh-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: .18s;
}
.sh-notice__x:hover {
  color: var(--sh-text);
  border-color: var(--sh-border-strong);
  background: color-mix(in srgb, var(--sh-accent) 8%, var(--sh-surface-2));
}

.sh-notice__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 24px 22px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--sh-muted);
  overscroll-behavior: contain;
}
.sh-notice__body::-webkit-scrollbar { width: 8px; }
.sh-notice__body::-webkit-scrollbar-thumb {
  background: var(--sh-border-strong);
  border-radius: 99px;
}
.sh-notice__lead {
  margin: 0 0 16px;
  color: var(--sh-text);
  font-weight: 600;
}
.sh-notice__body h4 {
  margin: 18px 0 8px;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--sh-text);
  letter-spacing: -.005em;
}
.sh-notice__body h4:first-of-type { margin-top: 0; }
.sh-notice__body ul {
  margin: 0;
  padding-left: 18px;
  list-style: none;
}
.sh-notice__body li {
  position: relative;
  margin-bottom: 3px;
}
.sh-notice__body a {
  color: var(--sh-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--sh-accent) 40%, transparent);
  transition: .18s;
}
.sh-notice__body a:hover {
  border-bottom-color: var(--sh-accent);
}
.sh-notice__body li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: .72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sh-accent) 55%, var(--sh-muted));
}
.sh-notice__body b { color: var(--sh-text); font-weight: 700; }
.sh-notice__dim { margin: 0 0 6px; }

.sh-notice__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--sh-border);
  background: var(--sh-surface-2);
}
.sh-notice__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--sh-muted);
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.sh-notice__check input {
  width: 15px;
  height: 15px;
  accent-color: var(--sh-accent);
  cursor: pointer;
}
.sh-notice__ok {
  min-height: 38px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(105deg, #6366f1, #8b5cf6 60%, #22d3ee 120%);
  box-shadow: 0 10px 24px -12px rgba(99, 102, 241, .95);
  transition: transform .16s, box-shadow .16s;
}
.sh-notice__ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(99, 102, 241, 1);
}

/* ==========================================================================
   商品卡片：hover 出「立即购买」，价格更突出（仿 jzai 的行内 CTA）
   ========================================================================== */
.acg-card { position: relative; }
.acg-thumb { position: relative; }

.acg-card .acg-thumb::after {
  content: "立即购买 →";
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 10px);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(105deg, #6366f1, #8b5cf6 70%);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.item-card-cell:hover .acg-thumb::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 价格：更醒目 */
.acg-card .price {
  font-size: 22px !important;
  font-weight: 800;
  color: var(--sh-accent) !important;
  letter-spacing: -.03em;
}
html[data-theme="dark"] .acg-card .price { color: #a5a5ff !important; }
.acg-card .price .unit {
  font-size: 13px !important;
  font-weight: 700;
  margin-right: 1px;
}

/* 库存 / 已售 行：淡一点，别抢价格 */
.acg-card .stat-bottom {
  font-size: 11.5px;
  color: var(--sh-muted);
}

/* 徽章：更细腻 */
.acg-card .badge-soft {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

@media (max-width: 720px) {
  .sh-notice { max-height: 84vh; border-radius: 16px; }
  .sh-notice__head { padding: 18px 18px 13px; }
  .sh-notice__body { padding: 15px 18px 18px; font-size: 12.5px; }
  .sh-notice__foot { padding: 12px 18px; }
  .acg-card .acg-thumb::after { display: none; }
}

/* ---------- 修正：渐变遮罩改到 ::before，购买按钮用 ::after 正确定位 ---------- */
.acg-thumb { position: relative; }
.acg-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .22) 100%);
  pointer-events: none;
  z-index: 1;
}
.acg-card .acg-thumb::after {
  content: "立即购买 →";
  position: absolute;
  top: auto !important;
  right: auto !important;
  bottom: 14px !important;
  left: 50% !important;
  width: max-content !important;
  height: auto !important;
  transform: translate(-50%, 10px);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(105deg, #6366f1, #8b5cf6 70%);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .65);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity .22s, transform .22s;
}
.item-card-cell:hover .acg-card .acg-thumb::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Hero 中心：OpenAI 标志 ---------- */
.sh-hero__core img {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 2px;
}
.sh-hero__core small {
  margin-top: 5px;
  letter-spacing: .28em;
}

/* ==========================================================================
   站点页脚 + 悬浮客服 + 查询页说明卡片
   ========================================================================== */

.sh-footer {
  margin-top: 34px;
  border-top: 1px solid var(--sh-border);
  background: color-mix(in srgb, var(--sh-surface) 62%, transparent);
  backdrop-filter: blur(8px);
}
.sh-footer__inner {
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 34px;
}
.sh-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sh-footer__brand img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow: 0 8px 20px -10px rgba(99, 102, 241, .95);
}
.sh-footer__meta b {
  display: block;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--sh-text);
  letter-spacing: -.01em;
}
.sh-footer__meta small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--sh-muted);
}
.sh-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
}
.sh-footer__links a {
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--sh-muted);
  text-decoration: none;
  transition: color .18s, background .18s;
}
.sh-footer__links a:hover {
  color: var(--sh-text);
  background: color-mix(in srgb, var(--sh-accent) 8%, transparent);
}
.sh-footer__contact {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--sh-border);
  border-radius: 11px;
  background: var(--sh-surface);
  font-size: 12.5px;
  color: var(--sh-muted);
}
.sh-footer__contact b {
  color: var(--sh-accent);
  font-weight: 750;
  letter-spacing: .01em;
}
html[data-theme="dark"] .sh-footer__contact b { color: #a5a5ff; }

.sh-footer__bottom {
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto;
  padding: 14px 0 22px;
  border-top: 1px solid var(--sh-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--sh-muted);
  opacity: .85;
}

/* ---------- 悬浮客服 ---------- */
.sh-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.sh-fab__btn {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(140deg, #6366f1, #8b5cf6 65%, #22d3ee 130%);
  box-shadow: 0 14px 32px -12px rgba(99, 102, 241, .95), 0 1px 0 rgba(255, 255, 255, .3) inset;
  transition: transform .2s, box-shadow .2s;
}
.sh-fab__btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 40px -12px rgba(99, 102, 241, 1), 0 1px 0 rgba(255, 255, 255, .34) inset;
}
.sh-fab__btn:active { transform: scale(.97); }

.sh-fab__panel {
  width: 236px;
  padding: 16px;
  border: 1px solid var(--sh-border);
  border-radius: 16px;
  background: var(--sh-surface);
  box-shadow: 0 24px 60px -24px rgba(15, 23, 42, .45);
  animation: shFabIn .22s cubic-bezier(.2, .7, .3, 1) both;
}
.sh-fab__panel[hidden] { display: none; }
@keyframes shFabIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.sh-fab__title {
  font-size: 13px;
  font-weight: 750;
  color: var(--sh-text);
  margin-bottom: 10px;
}
.sh-fab__wx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px dashed color-mix(in srgb, var(--sh-accent) 40%, var(--sh-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sh-accent) 6%, transparent);
  font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--sh-text);
  letter-spacing: .02em;
}
.sh-fab__copy {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--sh-border-strong);
  border-radius: 7px;
  background: var(--sh-surface);
  color: var(--sh-muted);
  font-size: 11.5px;
  cursor: pointer;
  transition: .18s;
}
.sh-fab__copy:hover {
  color: var(--sh-accent);
  border-color: color-mix(in srgb, var(--sh-accent) 50%, var(--sh-border));
}
.sh-fab__hint {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--sh-muted);
}
.sh-fab__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--sh-border);
  border-radius: 10px;
  background: var(--sh-surface);
  color: var(--sh-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: .18s;
}
.sh-fab__link:hover {
  border-color: color-mix(in srgb, var(--sh-accent) 50%, var(--sh-border));
  background: color-mix(in srgb, var(--sh-accent) 6%, transparent);
  color: var(--sh-accent);
}
.sh-fab__link-name {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sh-fab__link-name::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sh-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-accent) 18%, transparent);
}
.sh-fab__link-arrow {
  font-size: 15px;
  color: var(--sh-muted);
  transition: transform .18s;
}
.sh-fab__link:hover .sh-fab__link-arrow {
  transform: translateX(3px);
  color: var(--sh-accent);
}

/* ---------- 订单查询页：说明卡片 ---------- */
.sh-help {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.sh-help__item {
  padding: 18px 18px 16px;
  border: 1px solid var(--sh-border);
  border-radius: 16px;
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sh-help__item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sh-accent) 30%, var(--sh-border));
  box-shadow: var(--sh-shadow-hover);
}
.sh-help__ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 11px;
  border-radius: 10px;
  color: var(--sh-accent);
  background: color-mix(in srgb, var(--sh-accent) 10%, transparent);
}
html[data-theme="dark"] .sh-help__ico { color: #a5a5ff; }
.sh-help__item b {
  display: block;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--sh-text);
}
.sh-help__item p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--sh-muted);
}

/* 查询页表单：居中留白更自然 */
.order-query-form .btn-search-query {
  background: linear-gradient(105deg, #6366f1, #8b5cf6 60%, #22d3ee 120%) !important;
  border: 0 !important;
  box-shadow: 0 10px 24px -12px rgba(99, 102, 241, .95) !important;
  transition: transform .16s, box-shadow .16s;
}
.order-query-form .btn-search-query:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(99, 102, 241, 1) !important;
}

@media (max-width: 720px) {
  .sh-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sh-footer__bottom { flex-direction: column; }
  .sh-fab { right: 14px; bottom: 14px; }
  .sh-fab__btn { width: 48px; height: 48px; }
  .sh-fab__panel { width: min(236px, calc(100vw - 28px)); }
}

/* ---------- 背景：改成低对比长渐变，消除短页面上的色带断层 ---------- */
:root,
html[data-theme="light"] {
  --sh-bg-accent:
    radial-gradient(1400px 900px at 10% -14%, rgba(99, 102, 241, .10) 0%, transparent 72%),
    radial-gradient(1100px 800px at 94% 0%, rgba(14, 165, 233, .08) 0%, transparent 68%);
}
html[data-theme="dark"] {
  --sh-bg-accent:
    radial-gradient(1400px 900px at 10% -14%, rgba(124, 124, 248, .17) 0%, transparent 72%),
    radial-gradient(1100px 800px at 94% 0%, rgba(34, 211, 238, .09) 0%, transparent 68%);
}
body.uc-body,
body {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* ---------- 顶部环境光：加 mask 保证底边完全透明，消除短页面色带 ---------- */
body::before {
  display: block !important;
  height: 640px !important;
  background:
    radial-gradient(58% 58% at 50% 0%,
      color-mix(in srgb, var(--sh-accent) 9%, transparent) 0%,
      transparent 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 52%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 52%, transparent 88%);
}


/* ---------- v3：商品封面统一 1:1 方形（封面 SVG 为 800x800 居中构图） ---------- */
.acg-thumb {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  background-size: cover !important;
  background-position: center center !important;
}
.acg-card .acg-thumb {
  min-height: 0 !important;
}
@media (max-width: 720px) {
  .acg-thumb { aspect-ratio: 1 / 1 !important; min-height: 0 !important; }
}
/* 网格：方形封面下卡片略宽一点，视觉不挤 */
.item-list > [class*="col-"] { }
/* ==========================================================================
   v4 全站统一：深色编辑风（Dark Editorial）
   设计语言（与 _shop/preview-dark-editorial.html 同源）：
     · 深底 #0b0b12 + 靛蓝 #6366f1 / 青 #22d3ee 品牌色
     · 衬线大标题（Songti/STSong/Noto Serif SC）作为主视觉
     · 细边框 + 1px 内高光，而非重投影
     · 卡片 1:1 封面、悬停微浮、靛蓝光晕
   落地方式：纯覆盖，不动模板结构；Index/Header.html 已把默认主题锁到 dark。
   ========================================================================== */

/* ---------- 1. 色彩令牌：暗色为主，亮色保留但不鼓励 ---------- */
:root,
html[data-theme="dark"] {
  --sh-bg: #0b0b12;
  --sh-bg-accent:
    radial-gradient(1100px 620px at 50% -12%, rgba(99, 102, 241, .18) 0%, transparent 68%),
    radial-gradient(760px 520px at 88% 8%, rgba(34, 211, 238, .10) 0%, transparent 62%),
    linear-gradient(180deg, #0d0d16 0%, #0b0b12 42%, #08080e 100%);
  --sh-surface: #12121d;
  --sh-surface-2: #161624;
  --sh-border: rgba(255, 255, 255, .09);
  --sh-border-strong: rgba(255, 255, 255, .16);
  --sh-text: #eef0f6;
  --sh-muted: rgba(238, 240, 246, .62);
  --sh-muted-2: rgba(238, 240, 246, .40);
  --sh-accent: #6366f1;
  --sh-accent-2: #7c7cf8;
  --sh-cyan: #22d3ee;
  --sh-accent-soft: rgba(99, 102, 241, .14);
  --sh-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -18px rgba(0, 0, 0, .9);
  --sh-shadow-hover: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 54px -30px rgba(99, 102, 241, .75);
  --sh-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", Georgia, "Times New Roman", serif;
}

/* ---------- 2. 背景：固定深底 + 极淡网格 ---------- */
body.uc-body,
body {
  background-image: var(--sh-bg-accent) !important;
  background-color: var(--sh-bg) !important;
  background-attachment: fixed !important;
  color: var(--sh-text);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .016) 1px, transparent 1px);
  background-size: 92px 92px;
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 74%);
}

/* ---------- 3. 顶栏：细边框胶囊，无重投影 ---------- */
.uc-topbar { padding-top: 20px; }
.uc-topbar__inner .shop-nav,
.shop-nav {
  background: rgba(18, 18, 29, .72) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset !important;
}
.shop-brand__name { letter-spacing: .01em; font-weight: 600; }
.shop-nav__item { color: var(--sh-muted) !important; transition: color .18s; }
.shop-nav__item:hover,
.shop-nav__item.active { color: var(--sh-text) !important; }

/* 顶栏：登录/注册胶囊化 */
.shop-auth .shop-btn--ghost {
  border: 1px solid var(--sh-border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--sh-text) !important;
}
.shop-auth .shop-btn--ghost:hover {
  background: rgba(255, 255, 255, .06) !important;
  border-color: var(--sh-border-strong) !important;
}
.shop-auth .shop-btn--primary {
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--sh-accent), var(--sh-accent-2)) !important;
  box-shadow: 0 8px 24px -12px rgba(99, 102, 241, .95) !important;
}

/* ---------- 4. 主视觉：居中编辑式，衬线大标题 ---------- */
.sh-hero {
  margin: 18px 0 26px;
  padding: 74px 40px 66px;
  border-radius: 26px;
  border: 1px solid var(--sh-border) !important;
  text-align: center;
  background:
    radial-gradient(120% 150% at 50% -30%, rgba(99, 102, 241, .22) 0%, transparent 62%),
    radial-gradient(80% 120% at 92% -6%, rgba(34, 211, 238, .10) 0%, transparent 58%),
    rgba(14, 14, 22, .55) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset !important;
}
.sh-hero__inner {
  max-width: 760px !important;
  margin: 0 auto;
  text-align: center;
}

/* 顶部小胶囊：改等宽大写，克制 */
.sh-hero__pill {
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: transparent !important;
  color: var(--sh-muted-2) !important;
  box-shadow: none !important;
  margin-bottom: 30px;
}
.sh-hero__dot {
  background: var(--sh-cyan) !important;
  box-shadow: 0 0 10px var(--sh-cyan) !important;
  width: 5px !important;
  height: 5px !important;
  animation: none !important;
}

/* 主标题：衬线 + 白到灰青渐变，去掉七彩流光动画 */
.sh-hero__title {
  font-family: var(--sh-serif) !important;
  font-size: clamp(42px, 7.4vw, 92px) !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 20px !important;
  background: linear-gradient(180deg, #ffffff 10%, #b9c0d8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-size: auto !important;
  animation: none !important;
}

/* 副标题：居中、收窄、拉开行距 */
.sh-hero__sub {
  max-width: 520px !important;
  margin: 0 auto 34px !important;
  font-size: 13.5px !important;
  line-height: 1.95 !important;
  color: var(--sh-muted) !important;
  text-align: center;
}

/* 数据条：从卡片改成裸分隔线，编辑风 */
.sh-hero__stats {
  width: auto !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  justify-content: center;
  gap: 0 !important;
  display: inline-flex !important;
}
.sh-hero__stat {
  padding: 0 30px !important;
  min-width: 0 !important;
  border-right: 1px solid var(--sh-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center;
}
.sh-hero__stat:last-child { border-right: 0 !important; }
.sh-hero__stat:hover { background: transparent !important; }
.sh-hero__stat b {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: var(--sh-text) !important;
}
.sh-hero__stat b i {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--sh-muted-2) !important;
  margin-left: 3px !important;
}
.sh-hero__stat small {
  margin-top: 6px !important;
  font-size: 10.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--sh-muted-2) !important;
}

/* 隐藏右侧光环装饰（编辑风不需要） */
.sh-hero__art { display: none !important; }

/* ---------- 5. 面板：去掉卡片感，改成细线分区 ---------- */
.panel {
  background: transparent !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset !important;
  overflow: hidden;
}
.panel-header {
  background: rgba(255, 255, 255, .018) !important;
  border-bottom: 1px solid var(--sh-border) !important;
}
.panel-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}
.panel-header::before {
  background: linear-gradient(180deg, var(--sh-accent), var(--sh-cyan)) !important;
}

/* ---------- 6. 分类 chip：编辑风胶囊 ---------- */
.chip {
  background: transparent !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 999px !important;
  color: var(--sh-muted) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 8px 17px !important;
  backdrop-filter: none !important;
}
.chip:hover {
  color: var(--sh-text) !important;
  border-color: var(--sh-border-strong) !important;
  background: transparent !important;
}
.chip.is-primary {
  background: var(--sh-accent-soft) !important;
  border-color: rgba(99, 102, 241, .45) !important;
  color: #c7c9ff !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

/* ---------- 7. 商品卡：细边框 + 靛蓝悬停光晕 ---------- */
.acg-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
.item-card-cell:hover .acg-card {
  border-color: rgba(99, 102, 241, .42) !important;
  box-shadow: 0 22px 50px -28px rgba(99, 102, 241, .75) !important;
  transform: translateY(-3px);
}
.acg-thumb {
  border-bottom: 1px solid var(--sh-border) !important;
  background-color: #0a0a12 !important;
}
.acg-body { padding: 19px 20px 20px !important; gap: 8px !important; }
.goods-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: -.005em;
}
.acg-card .price {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--sh-text) !important;
}
html[data-theme="dark"] .acg-card .price { color: var(--sh-text) !important; }
.acg-card .price .unit {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--sh-muted) !important;
  opacity: 1 !important;
}
.acg-card .stat-bottom {
  border-top: 1px solid var(--sh-border) !important;
  border-style: solid !important;
  color: var(--sh-muted-2) !important;
  font-size: 11.5px !important;
}

/* 徽章：半透明玻璃 + 靛蓝实心 */
.acg-card .badge-soft {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 3.5px 10px !important;
  border-radius: 6px !important;
  letter-spacing: .03em;
  backdrop-filter: blur(10px);
}
.acg-card .badge-soft-success {
  background: rgba(10, 10, 18, .62) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: rgba(238, 240, 246, .9) !important;
}
.acg-card .badge-soft-primary {
  background: linear-gradient(135deg, var(--sh-accent), var(--sh-accent-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* 悬停出「立即购买」按钮 */
.acg-card .acg-thumb::after {
  background: rgba(99, 102, 241, .95) !important;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7) !important;
}

/* ---------- 8. 按钮：靛蓝渐变胶囊 ---------- */
.btn-primary,
.shop-btn--primary {
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--sh-accent), var(--sh-accent-2)) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 26px -10px rgba(99, 102, 241, .85) !important;
  font-weight: 500 !important;
  transition: transform .18s, box-shadow .18s !important;
}
.btn-primary:hover,
.shop-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -10px rgba(99, 102, 241, 1) !important;
}
.btn-search-query { border-radius: 999px !important; }

/* ---------- 9. 订单查询页：编辑风说明卡 ---------- */
.order-query-form .form-control {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 11px !important;
  color: var(--sh-text) !important;
  padding: 11px 15px !important;
}
.order-query-form .form-control:focus {
  border-color: rgba(99, 102, 241, .55) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
  background: rgba(255, 255, 255, .045) !important;
}
.sh-help { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.sh-help__item {
  padding: 22px 20px;
  border: 1px solid var(--sh-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .018);
  transition: border-color .2s;
}
.sh-help__item:hover { border-color: var(--sh-border-strong); }
.sh-help__item b {
  display: block;
  margin: 12px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sh-text);
}
.sh-help__item p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--sh-muted-2);
}
.sh-help__ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--sh-border);
  background: rgba(99, 102, 241, .10);
  color: #a5a5ff;
}

/* ---------- 10. 页脚：细线 + 低存在感 ---------- */
footer,
.shop-footer {
  margin-top: 84px !important;
  border-top: 1px solid var(--sh-border) !important;
  color: var(--sh-muted-2) !important;
  font-size: 12px !important;
}

/* ---------- 11. 登录 / 注册 / 会员中心：同源卡片 ---------- */
.auth-wrap, .auth-card, .login-card, .register-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 22px 50px -34px rgba(0, 0, 0, .9) !important;
}
.auth-card .form-control, .login-card .form-control, .register-card .form-control,
.uc-body .form-control, .uc-body .form-select {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 11px !important;
  color: var(--sh-text) !important;
}
.uc-body .form-control:focus, .uc-body .form-select:focus {
  border-color: rgba(99, 102, 241, .55) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
}
.uc-body .form-control::placeholder { color: var(--sh-muted-2) !important; }

/* 会员中心侧栏 */
.uc-side, .user-side, .member-side {
  background: rgba(18, 18, 29, .6) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 16px !important;
}

/* ---------- 12. 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a12; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  border: 2px solid #0a0a12;
}
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, .55); }

/* ---------- 13. 窄屏 ---------- */
@media (max-width: 720px) {
  .sh-hero { padding: 48px 22px 44px; border-radius: 20px; }
  .sh-hero__title { font-size: clamp(34px, 10.5vw, 52px) !important; }
  .sh-hero__sub { font-size: 12.5px !important; margin-bottom: 26px !important; }
  .sh-hero__stats { display: flex !important; width: 100% !important; }
  .sh-hero__stat { flex: 1 1 0; padding: 0 10px !important; }
  .sh-hero__stat b { font-size: 14px !important; }
  .sh-hero__stat small { font-size: 9.5px !important; letter-spacing: .10em !important; }
  .sh-help { grid-template-columns: 1fr; }
  .acg-body { padding: 16px 16px 17px !important; }
  .acg-card .price { font-size: 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-hero, .sh-hero__orb, .item-list > .item-card-cell { animation: none !important; }
  .item-card-cell:hover .acg-card,
  .item-card-cell:hover .acg-thumb { transform: none !important; }
}
/* ==========================================================================
   v4.1 修正（针对 v4 上线的三个问题）
   ========================================================================== */

/* ---------- 1) 库存/已售行：v4 的 border-style 把右/下/左也变成了 3px 实线，
              渲染出来像一个输入框。这里显式清零后只留顶部细线。 ---------- */
.acg-card .stat-bottom {
  border: 0 !important;
  border-top: 1px solid var(--sh-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 9px 0 0 !important;
  margin-top: 12px !important;
  color: var(--sh-muted-2) !important;
  font-size: 11.5px !important;
  line-height: 1.6;
}

/* ---------- 2) Hero 主标题：中英混排时 92px 会把「充」挤到第二行，
              收到 58px 以内保证单行；同时用 balance 兜底窄屏的换行质量。 ---------- */
.sh-hero__title {
  font-size: clamp(28px, 4.4vw, 58px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 16px !important;
  text-wrap: balance;
}

/* 副标题跟着收一点，避免标题变小后比例失衡 */
.sh-hero__sub {
  font-size: 13px !important;
  margin-bottom: 30px !important;
}

/* Hero 上下留白随标题缩小同步收敛 */
.sh-hero {
  padding: 56px 40px 50px !important;
}

/* ---------- 3) 商品封面：1:1 在 380px 宽的卡片里过于抢眼，
              改 4:3。封面 SVG 是 800×800、内容集中在 y=352~540，
              4:3 裁切（可见 y=100~700）不会切到任何文字。 ---------- */
.acg-thumb {
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* 卡片内文间距随封面变矮同步收紧 */
.acg-body {
  padding: 16px 18px 17px !important;
  gap: 7px !important;
}
.goods-title {
  font-size: 15px !important;
  line-height: 1.45 !important;
}
.acg-card .price {
  font-size: 23px !important;
}
.acg-card .price .unit {
  font-size: 13px !important;
}

/* ---------- 4) 窄屏 ---------- */
@media (max-width: 720px) {
  .sh-hero { padding: 40px 20px 36px !important; }
  .sh-hero__title { font-size: clamp(24px, 7.2vw, 34px) !important; }
  .acg-thumb { aspect-ratio: 4 / 3 !important; }
  .acg-body { padding: 14px 14px 15px !important; }
  .goods-title { font-size: 14px !important; }
  .acg-card .price { font-size: 20px !important; }
}
/* ==========================================================================
   v4.2 页脚重构（对齐 GPTSHOP / allclaw 的极简语言）
   问题：基础主题给 footer 挂了 text-align:center，导致
        logo 贴左、品牌名和标语却在各自盒子里居中 —— 视觉撕裂。
   做法：整块改成「居中堆叠」，三组内容依次居中，天然对称。
   ========================================================================== */

/* 先把继承来的居中/字号复位，避免污染内部布局 */
.sh-footer {
  text-align: center !important;
  margin-top: 72px !important;
  padding: 0 !important;
  border-top: 1px solid var(--sh-border) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  color: var(--sh-muted-2) !important;
  font-size: 12px !important;
}

/* 主体：从「左右两端对齐」改为「居中堆叠」 */
.sh-footer__inner {
  width: min(1140px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 52px 0 34px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-align: center !important;
}

/* 品牌：logo + 名称同一行，整体居中 */
.sh-footer__brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  margin: 0 0 12px !important;
}
.sh-footer__brand img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px -10px rgba(99, 102, 241, .9) !important;
  flex: 0 0 auto;
}
.sh-footer__meta {
  text-align: left !important;
  display: block !important;
}
.sh-footer__meta b {
  display: block !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
  color: var(--sh-text) !important;
  line-height: 1.3 !important;
}
/* 标语移到品牌下方、单独一行居中 */
.sh-footer__meta small {
  display: block !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--sh-muted-2) !important;
  letter-spacing: .02em !important;
  line-height: 1.6 !important;
}

/* 导航链接：居中一排，胶囊 hover */
.sh-footer__links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px 2px !important;
  margin: 22px 0 0 !important;
}
.sh-footer__links a {
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  color: var(--sh-muted-2) !important;
  text-decoration: none !important;
  transition: color .18s, background .18s !important;
}
.sh-footer__links a:hover {
  color: var(--sh-text) !important;
  background: rgba(255, 255, 255, .05) !important;
}

.sh-footer__contact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  color: var(--sh-muted-2) !important;
}
.sh-footer__contact b {
  color: var(--sh-muted) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}
html[data-theme="dark"] .sh-footer__contact b { color: var(--sh-muted) !important; }

/* 版权条：居中堆叠，细分隔线 */
.sh-footer__bottom {
  width: min(1140px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: 20px 0 30px !important;
  border-top: 1px solid var(--sh-border) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-align: center !important;
  font-size: 11.5px !important;
  color: var(--sh-muted-2) !important;
  opacity: 1 !important;
  line-height: 1.7 !important;
}
.sh-footer__bottom span { display: block !important; }

/* ---------- 顺带：库存/已售去掉那条线，对齐参考站的纯文字做法 ---------- */
.acg-card .stat-bottom {
  border: 0 !important;
  padding: 8px 0 0 !important;
  margin-top: 10px !important;
  color: var(--sh-muted-2) !important;
  font-size: 11px !important;
  letter-spacing: .01em;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 720px) {
  .sh-footer { margin-top: 52px !important; }
  .sh-footer__inner { padding: 40px 0 28px !important; }
  .sh-footer__meta b { font-size: 15px !important; }
  .sh-footer__links { margin-top: 18px !important; gap: 2px 0 !important; }
  .sh-footer__links a { padding: 6px 11px !important; font-size: 12px !important; }
  .sh-footer__bottom { padding: 18px 0 26px !important; font-size: 11px !important; }
}
/* ==========================================================================
   v4.3 修正：v4.2 的 `span{display:block}` 命中了版权行里的内层
   `<span id="sh-year">2026</span>`，把「© 2026 Ayi 小店…」拆成了四行。
   列向 flex 本身就会让每个直接子元素各占一行，不需要再强制 block。
   ========================================================================== */

.sh-footer__bottom > span {
  display: block !important;
}
/* 内层（年份）必须保持行内 */
.sh-footer__bottom span span,
.sh-footer__bottom > span > span {
  display: inline !important;
}
/* 版权行与标语之间拉开一点呼吸 */
.sh-footer__bottom > span + span {
  margin-top: 3px !important;
  opacity: .78;
}

/* 页脚整体纵向节奏收一点，避免上半部太空 */
.sh-footer__inner {
  padding: 44px 0 30px !important;
}
.sh-footer__links {
  margin: 18px 0 0 !important;
}
.sh-footer__contact {
  margin: 14px 0 0 !important;
}
/* ==========================================================================
   v5 细腻化 + 认证页重做
   一、调色：把过深的纯黑底整体抬亮一档，边框压柔，减少生硬对比
   二、认证页：原来 .auth-wrapper 挂了一层 60% 白底，浅灰字压在白上完全读不出，
       这里整页重做成与前台一致的深色卡片
   ========================================================================== */

/* ==========================================================================
   一、色彩细腻化
   ========================================================================== */
:root,
html[data-theme="dark"] {
  /* 底色从 #0b0b12 抬到 #0f1017：不再是死黑，暗部保留层次 */
  --sh-bg: #0f1017;
  --sh-surface: #15161f;
  --sh-surface-2: #191a24;
  --sh-border: rgba(255, 255, 255, .075);
  --sh-border-strong: rgba(255, 255, 255, .145);
  --sh-text: #edeef4;
  --sh-muted: rgba(237, 238, 244, .60);
  --sh-muted-2: rgba(237, 238, 244, .36);
  --sh-shadow: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 10px 30px -20px rgba(0, 0, 0, .8);
  --sh-shadow-hover: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 54px -32px rgba(99, 102, 241, .6);
}

/* 背景：三层柔和光晕 + 抬亮的纵向渐变，避免大面积死黑 */
body.uc-body,
body {
  background-color: var(--sh-bg) !important;
  background-image:
    radial-gradient(1000px 560px at 50% -10%, rgba(99, 102, 241, .13) 0%, transparent 70%),
    radial-gradient(720px 460px at 88% 4%, rgba(34, 211, 238, .065) 0%, transparent 62%),
    linear-gradient(180deg, #12131c 0%, #0f1017 46%, #0c0d13 100%) !important;
  background-attachment: fixed !important;
}

/* 网格纹理再淡一档，只在中心隐约可见 */
body::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px) !important;
  background-size: 96px 96px !important;
}

/* 面板：边框更柔，内高光更淡 */
.panel {
  border-color: var(--sh-border) !important;
  background: rgba(255, 255, 255, .014) !important;
  box-shadow: none !important;
}
.panel-header {
  background: rgba(255, 255, 255, .014) !important;
  border-bottom: 1px solid var(--sh-border) !important;
}

/* 卡片：轻描边，悬停才给光晕 */
.acg-card {
  border-color: var(--sh-border) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .008)) !important;
}

/* 顶栏：玻璃更薄一点 */
.uc-topbar__inner .shop-nav,
.shop-nav {
  background: rgba(21, 22, 31, .66) !important;
  border-color: var(--sh-border) !important;
}

/* Hero：光晕收敛，避免整块发紫 */
.sh-hero {
  background:
    radial-gradient(120% 150% at 50% -30%, rgba(99, 102, 241, .16) 0%, transparent 62%),
    radial-gradient(80% 120% at 92% -6%, rgba(34, 211, 238, .07) 0%, transparent 58%),
    rgba(17, 18, 26, .5) !important;
  border-color: var(--sh-border) !important;
}

/* ==========================================================================
   二、认证页（登录 / 注册 / 找回密码）
   ========================================================================== */

/* 1) 干掉那层 60% 白底遮罩 —— 这是「完全看不见」的根因 */
.auth-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 56px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.auth-wrapper::before,
.auth-wrapper::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* 2) 卡片本体 */
.auth-card {
  width: min(420px, 100%) !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 40px 34px 34px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 40px 90px -50px rgba(0, 0, 0, .95) !important;
  color: var(--sh-text) !important;
  backdrop-filter: blur(10px);
}

/* 3) 顶部 Logo */
.auth-card .brand-header {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
}
.auth-card .brand-logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.auth-card .brand-logo img,
.auth-card .brand-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  box-shadow: 0 10px 26px -12px rgba(99, 102, 241, .85) !important;
}

/* 4) 副标题 */
.auth-card .auth-subtitle {
  text-align: center !important;
  color: var(--sh-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}
.auth-card .auth-subtitle .text-link {
  margin: 0 2px;
}

/* 5) 输入框（含浮动标签） */
.auth-card .form-control:-webkit-autofill,
.auth-card .form-control:-webkit-autofill:hover,
.auth-card .form-control:-webkit-autofill:focus,
.auth-card .form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .032) inset !important;
  -webkit-text-fill-color: var(--sh-text) !important;
  caret-color: var(--sh-text) !important;
  background-clip: content-box !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.auth-card .form-control {
  background: rgba(255, 255, 255, .032) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 12px !important;
  color: var(--sh-text) !important;
  transition: border-color .18s, background .18s, box-shadow .18s !important;
}
.auth-card .form-control::placeholder {
  color: transparent !important;
}
.auth-card .form-control:focus {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(99, 102, 241, .58) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .13) !important;
  color: var(--sh-text) !important;
}
.auth-card .form-floating > label {
  color: var(--sh-muted-2) !important;
  font-size: 13px !important;
}
.auth-card .form-floating > .form-control:focus ~ label,
.auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--sh-muted) !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* 6) 链接 */
.auth-card .text-link,
.auth-card a.text-link {
  color: #a5a5ff !important;
  text-decoration: none !important;
  transition: color .18s;
}
.auth-card .text-link:hover {
  color: #c7c9ff !important;
  text-decoration: underline !important;
}

/* 7) 复选框（保持会话 / 同意条款） */
.auth-card .form-check {
  padding-left: 1.6em;
}
.auth-card .form-check label {
  color: var(--sh-muted) !important;
  font-size: 12.5px !important;
}
.auth-card .form-check-input {
  background-color: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--sh-border-strong) !important;
  border-radius: 5px !important;
  width: 15px !important;
  height: 15px !important;
  margin-top: .2em;
}
.auth-card .form-check-input:checked {
  background-color: var(--sh-accent) !important;
  border-color: var(--sh-accent) !important;
}
.auth-card .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18) !important;
  border-color: rgba(99, 102, 241, .6) !important;
}

/* 8) 主按钮 */
.auth-card .btn-gradient {
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--sh-accent), var(--sh-accent-2)) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .02em;
  box-shadow: 0 12px 30px -16px rgba(99, 102, 241, .95) !important;
  transition: transform .16s, box-shadow .16s !important;
}
.auth-card .btn-gradient:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -16px rgba(99, 102, 241, 1) !important;
}

/* 9) 通行密钥按钮 */
.auth-card .btn-passkey {
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 12px !important;
  color: var(--sh-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.auth-card .btn-passkey:hover {
  background: rgba(255, 255, 255, .06) !important;
  border-color: var(--sh-border-strong) !important;
}

/* 10) 次要按钮（发送验证码等） */
.auth-card .btn-outline-primary {
  border: 1px solid var(--sh-border-strong) !important;
  border-radius: 12px !important;
  color: var(--sh-text) !important;
  background: rgba(255, 255, 255, .03) !important;
  font-size: 12.5px !important;
}
.auth-card .btn-outline-primary:hover {
  background: rgba(99, 102, 241, .14) !important;
  border-color: rgba(99, 102, 241, .45) !important;
  color: #c7c9ff !important;
}

/* 11) 图形验证码 */
.auth-card .image-code {
  border-radius: 10px !important;
  border: 1px solid var(--sh-border) !important;
  cursor: pointer;
  height: 46px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  background: #fff !important;
  padding: 3px 6px !important;
}

/* 12) OR 分割线 */
.auth-card .divider {
  color: var(--sh-muted-2) !important;
  font-size: 11px !important;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* 13) 底部提示文字 */
.auth-card > p,
.auth-card p.small,
.auth-card .small {
  color: var(--sh-muted) !important;
  font-size: 12.5px !important;
}
.auth-card > p.text-center {
  margin-top: 22px !important;
}

/* 14) 表单错误 / 提示 */
.auth-card .invalid-feedback,
.auth-card .form-text {
  color: #fca5a5 !important;
  font-size: 11.5px !important;
}

/* 15) 认证页背景：不再用配置里的照片 */
body.uc-auth-body {
  background-image:
    radial-gradient(900px 520px at 50% -8%, rgba(99, 102, 241, .16) 0%, transparent 68%),
    radial-gradient(680px 440px at 86% 8%, rgba(34, 211, 238, .07) 0%, transparent 60%),
    linear-gradient(180deg, #12131c 0%, #0f1017 48%, #0c0d13 100%) !important;
  background-size: auto !important;
}

/* 16) 认证页窄屏 */
@media (max-width: 520px) {
  .auth-wrapper { padding: 34px 16px !important; }
  .auth-card { padding: 30px 22px 26px !important; border-radius: 18px !important; }
  .auth-card .brand-logo img,
  .auth-card .brand-icon { width: 42px !important; height: 42px !important; }
}
/* ==========================================================================
   v5.1 细腻化二次调整
   问题：v5 抬亮了底色，但面板/卡片仍用 1.4% 白叠加，与背景几乎同色，
        整页糊成一块，缺少层次 —— 这正是「感觉颜色很深」的来源：
        不是底太黑，而是没有明度差，眼睛找不到结构。
   做法：底色再抬一档 + 面板/卡片/顶栏拉开 3 级明度台阶。
   ========================================================================== */

:root,
html[data-theme="dark"] {
  --sh-bg: #111219;          /* 页面底：rgb(17,18,25) */
  --sh-surface: #171821;     /* 一级面：面板 */
  --sh-surface-2: #1c1d27;   /* 二级面：卡内块 */
  --sh-border: rgba(255, 255, 255, .085);
  --sh-border-strong: rgba(255, 255, 255, .16);
}

/* 背景：顶部更亮的光晕 + 纵向渐变，底部收暗但不死黑 */
body.uc-body,
body {
  background-color: var(--sh-bg) !important;
  background-image:
    radial-gradient(1200px 640px at 50% -12%, rgba(110, 113, 255, .17) 0%, transparent 68%),
    radial-gradient(820px 520px at 90% 2%, rgba(34, 211, 238, .075) 0%, transparent 60%),
    linear-gradient(180deg, #14151e 0%, #111219 48%, #0e0f15 100%) !important;
}

/* 面板：从「几乎透明」抬到肉眼可辨的一级面 */
.panel {
  background: rgba(255, 255, 255, .028) !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset !important;
}
.panel-header {
  background: rgba(255, 255, 255, .022) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
.panel-body {
  color: var(--sh-muted) !important;
}

/* 商品卡：比面板再亮一点，悬停才有光晕 */
.acg-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .048), rgba(255, 255, 255, .018)) !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset !important;
}
.item-card-cell:hover .acg-card {
  border-color: rgba(110, 113, 255, .42) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 24px 54px -30px rgba(99, 102, 241, .55) !important;
}

/* 顶栏：稍亮，和页面拉开 */
.uc-topbar__inner .shop-nav,
.shop-nav {
  background: rgba(23, 24, 33, .72) !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset !important;
}

/* Hero：底色跟着抬一档，光晕更柔 */
.sh-hero {
  background:
    radial-gradient(120% 150% at 50% -30%, rgba(110, 113, 255, .19) 0%, transparent 62%),
    radial-gradient(80% 120% at 92% -6%, rgba(34, 211, 238, .085) 0%, transparent 58%),
    rgba(23, 24, 33, .62) !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
}

/* 分类 chip：未选中态给一点点底，避免飘在黑上 */
.chip {
  background: rgba(255, 255, 255, .022) !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
}
.chip:hover {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

/* 表单控件跟着抬 */
.order-query-form .form-control,
.uc-body .form-control,
.uc-body .form-select {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
}

/* 查询说明卡：和面板同层级 */
.sh-help__item {
  background: rgba(255, 255, 255, .026) !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
}

/* 页脚：轻微抬亮，收尾不突兀 */
.sh-footer {
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
}

/* 认证页卡片：同样拉开层级 */
.auth-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
}
.auth-card .form-control {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
}
body.uc-auth-body {
  background-image:
    radial-gradient(900px 520px at 50% -8%, rgba(110, 113, 255, .18) 0%, transparent 68%),
    radial-gradient(680px 440px at 86% 8%, rgba(34, 211, 238, .075) 0%, transparent 60%),
    linear-gradient(180deg, #14151e 0%, #111219 48%, #0e0f15 100%) !important;
}

/* 图形验证码：压一下刺眼的纯白 */
.auth-card .image-code {
  filter: brightness(.94) contrast(1.02);
  opacity: .95;
}

/* 认证页副标题里中英混排的空隙收紧 */
.auth-card .auth-subtitle .text-link {
  margin: 0 1px;
}
/* ==========================================================================
   v5.2 细节打磨
   ========================================================================== */

/* 1) 认证页副标题：「登入 Ayi 小店 ，获取更多折扣！」
      <a> 默认是 inline-block，盒模型带出左右空隙，中文逗号前就多了一个空格。
      强制 inline + 清边距，让整句读起来是连贯的一句话。 */
.auth-card .auth-subtitle {
  word-spacing: 0 !important;
  letter-spacing: 0 !important;
}
.auth-card .auth-subtitle .text-link {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 2) 认证卡片纵向节奏：logo 与副标题之间收一点 */
.auth-card .brand-header { margin-bottom: 14px !important; }
.auth-card .auth-subtitle { margin-bottom: 22px !important; }

/* 3) 公告正文：正文字号与行距提一点，长文更好读 */
.panel-body {
  font-size: 13px !important;
  line-height: 1.85 !important;
}
.panel-body b { color: #f4f5fa !important; }

/* 4) 商品卡标题与价格之间的层级再拉开一点 */
.acg-card .goods-title { color: #f2f3f8 !important; }
.acg-card .stat-bottom { opacity: .85; }

/* 5) Hero 数据条：分隔线更淡，数字更实 */
.sh-hero__stat { border-right-color: rgba(255, 255, 255, .07) !important; }
.sh-hero__stat b { color: #f2f3f8 !important; }

/* 6) 页脚版权行：再弱一点，不抢主体 */
.sh-footer__bottom { color: rgba(237, 238, 244, .30) !important; }
/* ==========================================================================
   v6 组件级打磨（商品详情页 / 查询页 / 徽章）
   这些地方用的是主题自带的硬编码色，没走我们的调色变量：
     · .cash-pay / .pay / .qty-group  → 灰蓝 rgba(46,51,62) / rgba(42,47,57)
     · .captcha-img                   → 纯白 #fff，在深底上刺眼
     · .price                         → 粉红 rgb(255,128,149)
   统一收进 v4/v5 的调色体系。
   ========================================================================== */

/* ---------- 1. 付款区：去掉灰蓝实心块，压成和面板同层的软底 ---------- */
.cash-pay {
  background: rgba(255, 255, 255, .022) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 14px !important;
  padding: 13px 14px !important;
}
.cash-pay .form-label {
  color: var(--sh-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
  margin-bottom: 9px !important;
}

/* ---------- 2. 支付方式项：统一胶囊，选中/悬停走靛蓝 ---------- */
.pay-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}
.pay-list .pay {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 11px !important;
  color: var(--sh-text) !important;
  font-size: 12.5px !important;
  padding: 8px 12px !important;
  transition: background .18s, border-color .18s, transform .18s !important;
}
.pay-list .pay:hover {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .15) !important;
}
.pay-list .pay.active,
.pay-list .pay.is-active,
.pay-list .pay.selected {
  background: rgba(99, 102, 241, .16) !important;
  border-color: rgba(99, 102, 241, .5) !important;
  color: #c7c9ff !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, .18) inset !important;
}
.pay-list .pay img {
  border-radius: 6px !important;
  width: 22px !important;
  height: 22px !important;
}

/* ---------- 3. 数量步进器：合并成一个整体，别像三个独立输入框 ---------- */
.input-group.qty-group {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 11px !important;
  overflow: hidden;
  display: inline-flex !important;
  align-items: stretch;
  width: auto !important;
  max-width: 150px;
}
.qty-group .change-num-sub,
.qty-group .change-num-add {
  width: 40px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  color: var(--sh-muted) !important;
  font-size: 15px !important;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background .16s, color .16s !important;
}
.qty-group .change-num-sub:hover,
.qty-group .change-num-add:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--sh-text) !important;
}
.qty-group .change-num-sub:active,
.qty-group .change-num-add:active {
  background: rgba(99, 102, 241, .18) !important;
}
/* 中间的数字输入：去掉自己的边框，融进整体 */
.qty-group .form-control {
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .07) !important;
  border-right: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--sh-text) !important;
  font-size: 13.5px !important;
  font-weight: 600;
  width: 56px !important;
  padding: 8px 4px !important;
  text-align: center;
}
.qty-group .form-control:focus {
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: none !important;
}

/* ---------- 4. 图形验证码：去掉纯白底，压成柔和的浅灰 ---------- */
img.captcha-img,
.captcha-img,
.input-group-text.captcha-img {
  background: #e9eaf0 !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 9px !important;
  filter: brightness(.93) contrast(1.05);
  opacity: .94;
  cursor: pointer;
  padding: 0 !important;
  object-fit: cover;
}
.auth-card .image-code {
  background: #e9eaf0 !important;
}

/* ---------- 5. 价格：粉红收成和商品卡一致的浅色 ---------- */
.price {
  color: var(--sh-text) !important;
  letter-spacing: -.02em;
}
.price .unit {
  color: var(--sh-muted) !important;
  font-weight: 500 !important;
  font-size: .58em !important;
  margin-right: 2px;
  vertical-align: .12em;
}

/* ---------- 6. 徽章：统一到调色体系 ---------- */
.badge-soft-primary {
  background: rgba(99, 102, 241, .16) !important;
  border-color: rgba(99, 102, 241, .28) !important;
  color: #a5a5ff !important;
}
.badge-soft-info {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: var(--sh-muted) !important;
}

/* ---------- 7. 详情页正文：段落与标题的呼吸 ---------- */
.panel-body h1, .panel-body h2, .panel-body h3,
.panel-body h4, .panel-body h5, .panel-body h6 {
  color: #f2f3f8 !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  letter-spacing: .01em;
  margin: 18px 0 8px !important;
}
.panel-body h1:first-child, .panel-body h2:first-child,
.panel-body h3:first-child, .panel-body h4:first-child {
  margin-top: 0 !important;
}
.panel-body p {
  margin: 0 0 9px !important;
  color: var(--sh-muted) !important;
}
.panel-body ul, .panel-body ol {
  margin: 0 0 10px !important;
  padding-left: 18px;
}
.panel-body li {
  margin-bottom: 4px;
  color: var(--sh-muted) !important;
}

/* ---------- 8. 查询页：结果区/空态与说明卡同层级 ---------- */
.order-results .panel,
.no-results .panel,
.loading-state .panel {
  background: rgba(255, 255, 255, .028) !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 18px !important;
}

/* ---------- 9. 窄屏 ---------- */
@media (max-width: 720px) {
  .pay-list .pay { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .input-group.qty-group { max-width: 130px; }
  .panel-body h1, .panel-body h2, .panel-body h3,
  .panel-body h4, .panel-body h5, .panel-body h6 { font-size: 13px !important; }
}
/* ==========================================================================
   v6.1 修正 v6 引入的两个问题
   1) v6 的「panel-body 标题统一 13.5px」把商品详情页的商品名（h4）也压小了
      → 把正文标题规则收窄到「宝贝详情」面板，商品名恢复大字号
   2) v6 给 .pay-list 加了 flex 但没管子项宽度，.pay 仍是 width:100%
      → 三个支付方式竖着堆成三行
   ========================================================================== */

/* ---------- 1. 商品名（详情面板之外的那个 h4）恢复大字号 ---------- */
.panel-body h4 {
  font-size: 20px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em !important;
  color: #f4f5fa !important;
  margin: 0 0 12px !important;
}

/* 正文标题规则收窄到「宝贝详情」面板内部 */
.item-detail .panel-body h1,
.item-detail .panel-body h2,
.item-detail .panel-body h3,
.item-detail .panel-body h4,
.item-detail .panel-body h5,
.item-detail .panel-body h6 {
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.6 !important;
  letter-spacing: .01em !important;
  color: #f2f3f8 !important;
  margin: 18px 0 8px !important;
}
.item-detail .panel-body > h1:first-child,
.item-detail .panel-body > h2:first-child,
.item-detail .panel-body > h3:first-child,
.item-detail .panel-body > h4:first-child,
.item-detail .panel-body > p:first-child {
  margin-top: 0 !important;
}

/* ---------- 2. 支付方式：恢复三列等宽 ---------- */
.pay-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.pay-list .pay {
  flex: 1 1 calc(33.333% - 6px) !important;
  width: auto !important;
  min-width: 0 !important;
  justify-content: center !important;
  box-sizing: border-box;
}

/* 支付方式图标与文字对齐 */
.pay-list .pay img {
  flex: 0 0 auto;
  margin-right: 7px;
}
.pay-list .pay span,
.pay-list .pay .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 3. 验证码输入组：和数量步进器同一套观感 ---------- */
.input-group.captcha-group {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 11px !important;
  overflow: hidden;
  width: 240px !important;
  max-width: 100%;
}
.captcha-group .captcha-input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--sh-text) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}
.captcha-group .captcha-input::placeholder {
  color: var(--sh-muted-2) !important;
}
.captcha-group .captcha-img {
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 0 !important;
  height: 40px !important;
  width: 96px !important;
  object-fit: cover;
  background: #e9eaf0 !important;
  filter: brightness(.93) contrast(1.05);
}

/* ---------- 4. 窄屏：支付方式两列 ---------- */
@media (max-width: 720px) {
  .pay-list .pay { flex: 1 1 calc(50% - 4px) !important; }
  .panel-body h4 { font-size: 18px !important; }
  .input-group.captcha-group { width: 100% !important; }
}
/* ==========================================================================
   v6.2 收尾细节
   ========================================================================== */

/* ---------- 1. 移动端支付方式：2 列时最后一个撑满，避免 2+1 的残缺感 ---------- */
@media (max-width: 720px) {
  .pay-list .pay {
    flex: 1 1 calc(50% - 4px) !important;
  }
  .pay-list .pay:last-child:nth-child(odd) {
    flex: 1 1 100% !important;
  }
}

/* ---------- 2. 价格符号：别小到看不见 ---------- */
.price .unit {
  font-size: .62em !important;
  font-weight: 500 !important;
  color: var(--sh-muted) !important;
  opacity: 1 !important;
  margin-right: 3px !important;
  vertical-align: .08em !important;
}

/* 详情页大价格：数字更有存在感 */
.panel-body .price {
  font-size: 30px !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
  line-height: 1.1 !important;
}

/* ---------- 3. 详情页 SKU / 规格选择：和支付胶囊同一套 ---------- */
.switch-race,
.switch-sku {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  background: rgba(255, 255, 255, .03) !important;
  color: var(--sh-muted) !important;
  font-size: 12.5px !important;
  transition: background .18s, border-color .18s, color .18s !important;
}
.switch-race:hover,
.switch-sku:hover {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .15) !important;
  color: var(--sh-text) !important;
}
.switch-race.is-primary,
.switch-sku.is-primary {
  background: rgba(99, 102, 241, .16) !important;
  border-color: rgba(99, 102, 241, .5) !important;
  color: #c7c9ff !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, .16) inset !important;
}
.badge-money {
  color: inherit !important;
  opacity: .9;
}

/* ---------- 4. 表单标签统一 ---------- */
.panel-body .form-label,
.cash-pay .form-label {
  color: var(--sh-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
}

/* ---------- 5. 详情页输入框统一 ---------- */
.panel-body .form-control {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(255, 255, 255, .085) !important;
  border-radius: 11px !important;
  color: var(--sh-text) !important;
  font-size: 13px !important;
}
.panel-body .form-control:focus {
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(99, 102, 241, .55) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
}
.panel-body .form-control::placeholder {
  color: var(--sh-muted-2) !important;
}
/* ==========================================================================
   v6.3 移动端支付方式：改成三等分一行
   2+1 无论怎么补都会有一块空，直接三等分最整齐。
   ========================================================================== */
@media (max-width: 720px) {
  .pay-list {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  .pay-list .pay {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 4px !important;
    font-size: 10.5px !important;
    gap: 4px;
  }
  .pay-list .pay img {
    width: 17px !important;
    height: 17px !important;
    margin-right: 4px !important;
  }
  .pay-list .pay span,
  .pay-list .pay .name {
    font-size: 10.5px !important;
  }
}

/* 更窄的屏幕（<360px）再收一档字号 */
@media (max-width: 360px) {
  .pay-list .pay { font-size: 9.5px !important; padding: 7px 3px !important; }
  .pay-list .pay img { width: 15px !important; height: 15px !important; margin-right: 3px !important; }
}
/* ==========================================================================
   v6.4 支付方式改用 CSS Grid
   flex 在这套主题里被 `.pay { width: 515px }` 和 input-group 的盒模型干扰，
   换成 grid 的等分列，不受子项 width/flex 影响，最稳。
   ========================================================================== */

.pay-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}
.pay-list .pay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}
/* 文字不许溢出撑破格子 */
.pay-list .pay > *:not(img) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pay-list .pay img {
  flex: 0 0 auto !important;
}

/* 窄屏：仍是三等分，只收字号与内边距 */
@media (max-width: 720px) {
  .pay-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .pay-list .pay {
    padding: 8px 4px !important;
    font-size: 10.5px !important;
  }
  .pay-list .pay img {
    width: 17px !important;
    height: 17px !important;
    margin-right: 4px !important;
  }
}

@media (max-width: 360px) {
  .pay-list .pay { font-size: 9.5px !important; padding: 7px 3px !important; }
  .pay-list .pay img { width: 15px !important; height: 15px !important; margin-right: 3px !important; }
}
/* ==========================================================================
   v6.5 移动端支付方式：2 列 + 第三个跨整行
   三等分会把 "BEP20-USDT" 截断成 "BEP20-U..."，宁可换行也不要截字。
   grid 的 grid-column:1/-1 能保证第三个稳定跨满，不依赖 flex 的收缩规则。
   ========================================================================== */
@media (max-width: 720px) {
  .pay-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .pay-list .pay {
    padding: 9px 8px !important;
    font-size: 12px !important;
  }
  .pay-list .pay img {
    width: 19px !important;
    height: 19px !important;
    margin-right: 6px !important;
  }
  /* 奇数个时，最后一个跨整行 */
  .pay-list .pay:nth-child(3):last-child,
  .pay-list .pay:nth-child(5):last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .pay-list .pay { font-size: 11px !important; padding: 8px 6px !important; }
  .pay-list .pay img { width: 17px !important; height: 17px !important; margin-right: 5px !important; }
}
/* ==========================================================================
   v6.6 订单查询页：消除大片空白
   原因：内容只有 ~370px，但 #pjax-container 有 min-height:600px，
        多出来的 230px 全堆成空白，页脚被推到很低。
   做法：容器不再强制最小高度，改由查询页 main 自己撑满视口并垂直居中。
        :has() 保证只作用于查询页，不影响首页/详情页。
   ========================================================================== */

#pjax-container {
  min-height: 0 !important;
}

/* 查询页：撑满剩余视口并垂直居中 */
main.container:has(.order-query-form) {
  min-height: calc(100vh - 150px);
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
main.container:has(.order-query-form) > * {
  width: 100%;
}

/* 查询页搜索行：输入框别太窄，整体更稳 */
.order-query-form .d-flex {
  gap: 12px !important;
}
.order-query-form .d-flex > div:first-child {
  width: min(360px, 100%) !important;
}
.order-query-form .form-control {
  height: 44px;
}
.order-query-form .btn-search-query {
  height: 44px;
  padding: 0 26px !important;
  white-space: nowrap;
}

/* 查询说明卡：图标块与文字对齐更紧 */
.sh-help__item {
  padding: 20px 18px !important;
}
.sh-help__ico {
  margin-bottom: 2px;
}
.sh-help__item b {
  margin: 10px 0 5px !important;
  font-size: 13.5px !important;
}
.sh-help__item p {
  font-size: 12px !important;
  line-height: 1.7 !important;
}

/* 窄屏：查询页不需要撑满视口，避免手机上大片空白 */
@media (max-width: 720px) {
  main.container:has(.order-query-form) {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 16px !important;
  }
  .order-query-form .d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }
  .order-query-form .d-flex > div:first-child {
    width: 100% !important;
  }
  .order-query-form .btn-search-query {
    width: 100%;
  }
  .sh-help__item { padding: 18px 16px !important; }
}
/* ==========================================================================
   v6.7 移动端页脚：logo 与文字上下堆叠并居中
   窄屏下标语会折成两行、把品牌块撑满整行，text-align:left 让它看起来偏左，
   与页脚其余居中内容脱节。改成纵向堆叠 + 全部居中。
   ========================================================================== */
@media (max-width: 720px) {
  .sh-footer__brand {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
  }
  .sh-footer__brand img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
  .sh-footer__meta {
    text-align: center !important;
    width: 100% !important;
  }
  .sh-footer__meta b {
    font-size: 16px !important;
    text-align: center !important;
  }
  .sh-footer__meta small {
    text-align: center !important;
    font-size: 11.5px !important;
    line-height: 1.7 !important;
    padding: 0 6px;
  }
  .sh-footer__links {
    justify-content: center !important;
  }
  .sh-footer__contact {
    justify-content: center !important;
  }
  .sh-footer__bottom {
    align-items: center !important;
    text-align: center !important;
  }
}
/* ==========================================================================
   v7 · Ayi-AI 店铺 版式与质感精修
   修正 v3/v4 叠加造成的排版冲突，补齐手续费与卡池分组标识
   ========================================================================== */

/* ---------- 1. Hero：恢复「左文案 + 右徽记」双列网格 ---------- */
.sh-hero {
  margin: 0 0 22px !important;
  padding: 54px 48px 48px !important;
  border-radius: 26px !important;
  text-align: left !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  background:
    radial-gradient(110% 130% at 4% -12%, rgba(124, 124, 248, .28) 0%, transparent 56%),
    radial-gradient(76% 106% at 100% -4%, rgba(34, 211, 238, .15) 0%, transparent 58%),
    radial-gradient(66% 96% at 62% 124%, rgba(168, 85, 247, .13) 0%, transparent 62%),
    linear-gradient(180deg, #16171f 0%, #111219 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .07) inset,
    0 34px 90px -58px rgba(99, 102, 241, .95) !important;
}

.sh-hero__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 268px !important;
  align-items: center !important;
  gap: 40px !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}

.sh-hero__copy {
  max-width: none !important;
  min-width: 0;
  text-align: left !important;
}

.sh-hero__pill {
  margin-bottom: 0 !important;
  font-size: 11.5px !important;
  letter-spacing: .1em !important;
  padding: 6px 14px 6px 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  background: rgba(255, 255, 255, .05) !important;
  color: rgba(237, 238, 244, .66) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset !important;
}

.sh-hero__title {
  font-family: var(--sh-serif) !important;
  font-size: clamp(32px, 3.4vw, 44px) !important;
  font-weight: 400 !important;
  line-height: 1.14 !important;
  letter-spacing: -.028em !important;
  margin: 18px 0 14px !important;
  text-align: left !important;
  text-wrap: balance;
  max-width: 15em;
  background: linear-gradient(165deg, #ffffff 14%, #cdd3e8 78%, #9aa2c4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: none !important;
}

.sh-hero__sub {
  max-width: 500px !important;
  margin: 0 0 30px !important;
  font-size: 13.5px !important;
  line-height: 1.9 !important;
  text-align: left !important;
  color: rgba(237, 238, 244, .55) !important;
}

/* 数据条：裸分隔线，左对齐 */
.sh-hero__stats {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.sh-hero__stat {
  padding: 0 26px !important;
  min-width: 0 !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}
.sh-hero__stat:first-child { padding-left: 0 !important; }
.sh-hero__stat:last-child { border-right: 0 !important; }
.sh-hero__stat:hover { background: transparent !important; }
.sh-hero__stat b {
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -.015em !important;
  color: #f3f4fa !important;
}
.sh-hero__stat b i {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(237, 238, 244, .48) !important;
}
.sh-hero__stat small {
  margin-top: 5px !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: rgba(237, 238, 244, .40) !important;
}

/* 视觉徽记 */
.sh-hero__art {
  display: block !important;
  width: 268px !important;
  height: 268px !important;
  margin-right: 0 !important;
  justify-self: center;
}
.sh-hero__core {
  width: 138px !important;
  height: 138px !important;
}
.sh-hero__core img {
  width: 56px !important;
  height: 56px !important;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}
.sh-hero__core small { letter-spacing: .28em !important; }

/* ---------- 2. 分类 chip ---------- */
.chip-list { gap: 8px !important; }
.chip {
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.chip.is-primary {
  color: #fff !important;
  border-color: rgba(140, 140, 250, .55) !important;
  background: linear-gradient(120deg, rgba(99, 102, 241, .32), rgba(139, 92, 246, .18)) !important;
  box-shadow: 0 10px 24px -16px rgba(99, 102, 241, 1), 0 0 0 1px rgba(140, 140, 250, .20) inset !important;
}

/* ---------- 3. 商品卡：统一 1:1 图 + 底部价签分层 ---------- */
.acg-card {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .012)) !important;
}
.item-card-cell:hover .acg-card {
  transform: translateY(-4px) !important;
  border-color: rgba(140, 140, 250, .38) !important;
  box-shadow: 0 28px 64px -36px rgba(99, 102, 241, .95) !important;
}
.acg-thumb {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}
.acg-body { padding: 15px 16px 16px !important; gap: 7px !important; }
.goods-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: -.003em;
}
.acg-card .price {
  font-size: 22px !important;
  font-weight: 750 !important;
  letter-spacing: -.028em !important;
  color: #f5f6fb !important;
}
.acg-card .price .unit {
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-right: 2px;
  color: rgba(237, 238, 244, .55) !important;
}
/* 底部库存行：细线分隔，弱化 */
.acg-body .stat-bottom {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px;
  margin-top: 4px !important;
  padding: 9px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 11px !important;
  letter-spacing: .01em;
  color: rgba(237, 238, 244, .46) !important;
  line-height: 1.5 !important;
  height: auto !important;
}

/* ---------- 4. 手续费提示（商品页 + 充值页） ---------- */
/* 支付方式卡上的费率角标 —— 由 item.js / recharge.js 注入 data-fee */
.pay-list .pay.is-fee,
.pay-list .btn-pay.is-fee {
  position: relative;
  padding-right: 30px !important;
}
.pay-list .pay.is-fee::after,
.pay-list .btn-pay.is-fee::after {
  content: "+3%";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 5px;
  color: #fbbf24;
  background: rgba(251, 191, 36, .12);
  border: 1px solid rgba(251, 191, 36, .22);
  pointer-events: none;
}

/* 费率说明条 */
.sh-fee-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, .16);
  background: rgba(251, 191, 36, .055);
  font-size: 11.5px;
  line-height: 1.72;
  color: rgba(237, 238, 244, .62);
}
.sh-fee-note i {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(251, 191, 36, .16);
}
.sh-fee-note b { color: #fcd34d; font-weight: 700; }
.sh-fee-note em {
  font-style: normal;
  color: rgba(237, 238, 244, .44);
}

/* 商品页价格行的实时应付金额 */
.sh-amount-live {
  display: none;
  margin: -6px 0 12px;
  font-size: 11.5px;
  color: rgba(237, 238, 244, .50);
}
.sh-amount-live.is-on { display: block; }
.sh-amount-live b { color: #fcd34d; font-weight: 700; }

/* ---------- 5. 卡池分组（套餐专用卡密）标识 ---------- */
.sh-pool-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #a5b4fc;
  background: rgba(99, 102, 241, .16);
  border: 1px solid rgba(99, 102, 241, .26);
}
.sh-pool-badge--pro {
  color: #7ee0f5;
  background: rgba(34, 211, 238, .12);
  border-color: rgba(34, 211, 238, .24);
}

/* ---------- 6. 移动端 ---------- */
@media (max-width: 980px) {
  .sh-hero {
    padding: 36px 22px 32px !important;
    border-radius: 20px !important;
  }
  .sh-hero__inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  .sh-hero__title {
    font-size: 32px !important;
    margin: 15px 0 12px !important;
  }
  .sh-hero__sub { margin-bottom: 22px !important; font-size: 12.5px !important; }
  .sh-hero__stats { width: 100% !important; }
  .sh-hero__stat {
    flex: 1 1 0 !important;
    padding: 0 12px !important;
    min-width: 0 !important;
  }
  .sh-hero__stat b { font-size: 15px !important; }
  .sh-hero__stat b i { font-size: 10px !important; }
  .sh-hero__stat small { font-size: 9px !important; letter-spacing: .06em !important; }
  .sh-hero__art { display: none !important; }
  .acg-body { padding: 12px 13px 13px !important; }
  .goods-title { font-size: 13.5px !important; }
  .acg-card .price { font-size: 19px !important; }
  .acg-body .stat-bottom { font-size: 10.5px !important; padding-top: 7px !important; }
}
/* ---------- v7.1 手续费补充样式 ---------- */

/* 充值确认区的手续费行 */
.uc-topup-feerow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1px solid rgba(251, 191, 36, .18);
  background: rgba(251, 191, 36, .055);
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(237, 238, 244, .62);
}
.uc-topup-feerow > span:first-child { flex: 0 0 auto; }
.uc-topup-feerow b {
  color: #fcd34d;
  font-weight: 750;
  font-size: 12.5px;
}
.uc-topup-feerow em {
  margin-left: auto;
  font-style: normal;
  color: rgba(237, 238, 244, .44);
  white-space: nowrap;
}

/* 充值方式卡上的费率角标：与商品页一致 */
.uc-topup-methods .btn-pay.is-fee::after {
  content: "+3%";
  top: 6px;
  right: 8px;
  width: auto;
  height: auto;
  transform: none;
  border: 1px solid rgba(251, 191, 36, .22);
  border-radius: 5px;
  background: rgba(251, 191, 36, .12);
  color: #fbbf24;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 4px;
}
.uc-topup-methods .btn-pay.is-fee.checked::after {
  content: "+3%";
  background: rgba(251, 191, 36, .16);
  border-color: rgba(251, 191, 36, .3);
  color: #fcd34d;
}

/* 商品页费率说明条在 grid 布局下的对齐 */
.cash-pay .sh-fee-note {
  margin-top: 10px;
}

/* 卡池分组：商品页「宝贝类型」单选，做成套餐卡片更清晰 */
.sku-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sku-list .sku {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(237, 238, 244, .72);
  transition: border-color .18s, background .18s, color .18s;
}
.sku-list .sku:hover {
  border-color: rgba(140, 140, 250, .38);
  color: #fff;
}
.sku-list .sku.is-primary {
  border-color: rgba(140, 140, 250, .55);
  background: linear-gradient(120deg, rgba(99, 102, 241, .26), rgba(139, 92, 246, .14));
  color: #fff;
  box-shadow: 0 10px 26px -18px rgba(99, 102, 241, 1), 0 0 0 1px rgba(140, 140, 250, .18) inset;
}
.sku-list .sku .badge-money {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(237, 238, 244, .55);
}
.sku-list .sku.is-primary .badge-money { color: #c7d2fe; }
/* ===== v8：Hero CTA + 两种开通方式（2026-11-01） ===== */

/* Hero 按钮组 */
.sh-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.sh-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.sh-cta i { font-size: 14px; }
.sh-cta small {
  font-size: 10.5px;
  font-weight: 500;
  opacity: .72;
  margin-left: 1px;
}

.sh-cta--primary {
  color: #fff;
  background: linear-gradient(118deg, #6366f1, #8b5cf6 58%, #22d3ee 128%);
  box-shadow: 0 12px 28px -14px rgba(99, 102, 241, .95), inset 0 1px rgba(255, 255, 255, .18);
}
.sh-cta--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -14px rgba(99, 102, 241, 1), inset 0 1px rgba(255, 255, 255, .24);
}

.sh-cta--ghost {
  color: var(--sh-text);
  background: var(--sh-surface);
  border: 1px solid var(--sh-border-strong);
  box-shadow: var(--sh-shadow);
}
.sh-cta--ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(99, 102, 241, .5);
  background: var(--sh-accent-soft);
  box-shadow: var(--sh-shadow-hover);
}

/* 两种开通方式 */
.sh-ways {
  margin: 22px 0;
  padding: 26px 24px 24px;
  border-radius: 20px;
  border: 1px solid var(--sh-border);
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow);
}

.sh-ways__head {
  text-align: center;
  margin-bottom: 22px;
}
.sh-ways__head h2 {
  margin: 0 0 7px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--sh-text);
}
.sh-ways__head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--sh-muted);
  line-height: 1.65;
}

.sh-ways__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sh-way {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 18px;
  border-radius: 16px;
  border: 1px solid var(--sh-border);
  background: var(--sh-surface-2);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sh-way:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-shadow-hover);
  border-color: var(--sh-border-strong);
}

.sh-way--alt {
  border-color: rgba(99, 102, 241, .28);
  background: linear-gradient(158deg, rgba(99, 102, 241, .10), rgba(34, 211, 238, .05) 72%, transparent);
  box-shadow: 0 14px 34px -22px rgba(99, 102, 241, .8);
}
.sh-way--alt:hover {
  border-color: rgba(99, 102, 241, .5);
  box-shadow: 0 20px 42px -20px rgba(99, 102, 241, .85);
}

.sh-way__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 9px;
  margin-bottom: 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--sh-muted);
  background: var(--sh-accent-soft);
  border: 1px solid var(--sh-border);
}
.sh-way__badge--alt {
  color: #fff;
  background: linear-gradient(108deg, #6366f1, #8b5cf6 62%, #22d3ee 130%);
  border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(99, 102, 241, .9);
}

.sh-way h3 {
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-text);
}
.sh-way > p {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.72;
  color: var(--sh-muted);
}

.sh-way__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sh-way__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--sh-text);
}
.sh-way__list i {
  color: #22c55e;
  font-size: 12px;
  margin-top: 2px;
  flex: none;
}

.sh-way__btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--sh-text);
  background: var(--sh-surface);
  border: 1px solid var(--sh-border-strong);
  transition: all .18s ease;
}
.sh-way__btn:hover {
  color: var(--sh-accent);
  border-color: rgba(99, 102, 241, .5);
  background: var(--sh-accent-soft);
}

.sh-way__btn--primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(112deg, #6366f1, #8b5cf6 60%, #22d3ee 128%);
  box-shadow: 0 10px 24px -14px rgba(99, 102, 241, .95), inset 0 1px rgba(255, 255, 255, .18);
}
.sh-way__btn--primary:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(112deg, #6366f1, #8b5cf6 60%, #22d3ee 128%);
  box-shadow: 0 14px 30px -14px rgba(99, 102, 241, 1), inset 0 1px rgba(255, 255, 255, .24);
  transform: translateY(-1px);
}

.sh-way__url {
  margin-top: 9px;
  text-align: center;
  font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
  color: var(--sh-muted);
  opacity: .75;
}

/* 导航栏「自动代充」高亮 */
.shop-nav__item[href="https://api.ayirun.top"] {
  position: relative;
  color: var(--sh-accent) !important;
  font-weight: 600;
}
.shop-nav__item[href="https://api.ayirun.top"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #6366f1, #22d3ee);
}

/* 响应式 */
@media (max-width: 820px) {
  .sh-ways { padding: 20px 15px 18px; border-radius: 16px; }
  .sh-ways__grid { grid-template-columns: 1fr; gap: 12px; }
  .sh-ways__head h2 { font-size: 17.5px; }
  .sh-way { padding: 17px 15px 16px; }
}

@media (max-width: 560px) {
  .sh-hero__cta { margin-top: 18px; gap: 9px; }
  .sh-cta { height: 42px; padding: 0 16px; font-size: 13px; flex: 1 1 auto; justify-content: center; }
  .sh-cta small { display: none; }
}
/* ===== v8.1：两步流程（先买卡密 → 再去充值） ===== */

/* 网格改成「卡片 箭头 卡片」三列 */
.sh-ways__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.sh-way__arrow {
  display: grid;
  place-items: center;
  color: var(--sh-muted);
  opacity: .55;
  font-size: 15px;
}
.sh-way__arrow i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px dashed var(--sh-border-strong);
  background: var(--sh-surface);
}

/* 第二步的按钮也用主色，两步都是必经动作 */
.sh-way--alt .sh-way__btn--primary {
  margin-bottom: 0;
}

/* 移动端：竖排，箭头转向下 */
@media (max-width: 820px) {
  .sh-ways__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .sh-way__arrow {
    padding: 2px 0;
  }
  .sh-way__arrow i {
    transform: rotate(90deg);
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}
/* ==========================================================================
   v9 商品卡瘦身（2026-11-01）
   问题：封面 1:1 正方形 → 卡片高 446px，封面里还重复了下方标签的文案，又大又空
   做法：封面改 5:3 横向、内边距收紧、网格更密，信息密度提上来
   ========================================================================== */

/* ---------- 1. 封面比例：1:1 → 5:3 ---------- */
.acg-thumb {
  aspect-ratio: 5 / 3 !important;
  min-height: 0 !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}

/* 售罄时封面压暗，比例不变 */
.acg-card.soldout .acg-thumb {
  filter: grayscale(.55) brightness(.72);
}

/* ---------- 2. 卡片本体：更薄、更紧凑 ---------- */
.acg-card {
  border-radius: 15px !important;
  overflow: hidden !important;
}

.acg-body {
  padding: 11px 13px 12px !important;
  gap: 5px !important;
}

/* 标签行：小一号，贴顶 */
.acg-body .tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px !important;
  margin: 0 0 1px !important;
  min-height: 0 !important;
}
.acg-body .tags .badge-soft,
.acg-body .tags .acg-tag {
  font-size: 10px !important;
  padding: 2px 7px !important;
  line-height: 1.5 !important;
  border-radius: 5px !important;
}

/* 标题：两行封顶，不撑高 */
.acg-body .goods-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 价格：略收，和库存同一视觉层 */
.acg-card .price {
  font-size: 20px !important;
  font-weight: 750 !important;
  letter-spacing: -.03em !important;
  line-height: 1.15 !important;
}
.acg-card .price .unit {
  font-size: 11px !important;
  margin-right: 1px;
}

.acg-body .stat-row {
  margin: 0 !important;
  line-height: 1 !important;
}

/* 库存行：去掉上边框，改成和价格同排的轻文字，省一整行高度 */
.acg-body .stat-bottom {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px;
  margin: 0 !important;
  padding: 5px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .055) !important;
  background: none !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  height: auto !important;
  color: rgba(237, 238, 244, .42) !important;
}

/* ---------- 3. 网格：更密，宽屏多放一列 ---------- */
.item-list {
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)) !important;
  gap: 15px !important;
}

@media (min-width: 1500px) {
  .item-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 720px) {
  .item-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }
  .acg-thumb { aspect-ratio: 5 / 3 !important; }
  .acg-body { padding: 10px 11px 11px !important; }
  .acg-body .goods-title { font-size: 12.5px !important; -webkit-line-clamp: 2; }
  .acg-card .price { font-size: 17px !important; }
  .acg-body .tags .badge-soft,
  .acg-body .tags .acg-tag { font-size: 9px !important; padding: 2px 6px !important; }
  .acg-body .stat-bottom { font-size: 9.5px !important; padding-top: 4px !important; }
}

/* ---------- 4. hover：轻一点，别浮太高 ---------- */
.item-card-cell:hover .acg-card {
  transform: translateY(-3px) !important;
  border-color: rgba(140, 140, 250, .34) !important;
  box-shadow: 0 20px 44px -26px rgba(99, 102, 241, .9) !important;
}
/* ==========================================================================
   v9.1 卡片尺寸收敛（2026-11-01）
   auto-fit 会把仅有的 3 张卡拉伸填满整行 → 越改越宽。
   改成「单卡最大 300px + 整行居中」，尺寸稳定，不管商品有几个都不会忽大忽小。
   ========================================================================== */

@media (min-width: 992px) {
  .item-list {
    grid-template-columns: repeat(auto-fit, minmax(0, 300px)) !important;
    justify-content: center !important;
    gap: 16px !important;
  }
}

/* 中等屏：略收 */
@media (min-width: 768px) and (max-width: 991px) {
  .item-list {
    grid-template-columns: repeat(auto-fit, minmax(0, 260px)) !important;
    justify-content: center !important;
    gap: 14px !important;
  }
}

/* 小屏：两列铺满，不再居中留白 */
@media (max-width: 767px) {
  .item-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: 11px !important;
  }
}

/* 单卡内容再压一档，配合 300px 宽度 */
@media (min-width: 992px) {
  .acg-body { padding: 12px 14px 13px !important; }
  .acg-body .goods-title { font-size: 14px !important; }
  .acg-card .price { font-size: 21px !important; }
}
/* ==========================================================================
   v9.2 卡片底部补充（2026-11-01）
   价格行右侧加「立即购买 →」引导，填补空白且不增加高度
   ========================================================================== */

.acg-body .stat-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px;
}

.acg-body .stat-row::after {
  content: "立即购买 →";
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(199, 201, 255, .72);
  transition: color .18s ease, transform .18s ease;
  white-space: nowrap;
}

.item-card-cell:hover .acg-body .stat-row::after {
  color: #c7c9ff;
  transform: translateX(2px);
}

/* 售罄卡不显示购买引导 */
.acg-card.soldout .acg-body .stat-row::after {
  content: "已售罄";
  color: rgba(237, 238, 244, .32);
}

/* 移动端字号收一档 */
@media (max-width: 767px) {
  .acg-body .stat-row::after { font-size: 10px; }
}

/* ==========================================================================
   v10 封面与卡片精修（2026-11-02 修订）
   封面 SVG 实际为 800x480（5:3 横幅）构图，首页/详情页图区都按 5:3 铺满显示，
   不再留白、不再裁切；同时精修卡片内部排版与对比度。
   ========================================================================== */

/* --- 首页卡片封面：5:3 横幅铺满 --- */
.acg-thumb {
  aspect-ratio: 5 / 3 !important;
  min-height: 0 !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* --- 卡片内部：信息更紧凑、对齐更稳 --- */
.acg-card {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  background: linear-gradient(180deg, #1b1b22 0%, #141419 100%) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45) !important;
  overflow: hidden;
}
.acg-card:hover {
  border-color: rgba(129, 140, 248, .35) !important;
  box-shadow: 0 10px 32px rgba(129, 140, 248, .18) !important;
}
.acg-body {
  padding: 14px 16px 16px !important;
  gap: 10px !important;
}
.acg-body .tags {
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.acg-body .goods-title {
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  color: #f2f2f5 !important;
  margin: 0 !important;
}
.acg-body .stat-row {
  margin-top: 2px;
}
.acg-body .price {
  font-size: 21px !important;
  font-weight: 750 !important;
  color: #ffffff !important;
}
.acg-body .price .unit {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #9b9ba6 !important;
  margin-right: 2px;
}
.acg-body .stat-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  margin-top: 8px !important;
  font-size: 12px !important;
  color: #a0a0ab !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .1) !important;
  padding: 9px 0 0 !important;
  background: none !important;
}
.acg-body .stat-bottom span { color: #a0a0ab !important; }

/* --- 详情页封面：5:3 横幅铺满，不再被右侧栏撑高 --- */
.acg-cover {
  aspect-ratio: 5 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: flex-start !important;
  border-radius: 16px !important;
  background: #141419 !important;
}
.acg-cover .item-cover {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 16px;
}

@media (max-width: 720px) {
  .acg-thumb { aspect-ratio: 5 / 3 !important; }
  .acg-body { padding: 12px 13px 13px !important; }
}

/* ==========================================================================
   v11 详情页左栏「服务保障」卡片（2026-11-02）
   左栏原来只有一张 5:3 封面，下方空出 ~388px，与右栏信息栏严重失衡。
   在封面下方补一块服务保障卡，flex-fill 自动撑满剩余高度，左右视觉对齐。
   ========================================================================== */
.service-card {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  background: linear-gradient(180deg, #1b1b22 0%, #141419 100%) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4) !important;
  padding: 20px 22px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #f2f2f5;
  letter-spacing: .5px;
}
.service-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  justify-content: space-evenly;
}
.service-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sc-ic {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(129, 140, 248, .12);
  color: #818cf8;
  font-size: 17px;
}
.sc-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sc-txt b {
  font-size: 13.5px;
  font-weight: 650;
  color: #e8e8ee;
}
.sc-txt span {
  font-size: 12px;
  color: #8b8b96;
}

/* ==========================================================================
   v-fix-auth 2026-11-04：注册页视觉修复（最终覆盖，最高优先级）
   1) 账号框 autofill 白底 → 恢复半透明深色
   2) 图形验证码：不裁切不拉伸、保留白底让数字清晰、圆角统一
   ========================================================================== */
.auth-card .form-control:-webkit-autofill,
.auth-card .form-control:-webkit-autofill:hover,
.auth-card .form-control:-webkit-autofill:focus,
.auth-card .form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .04) inset !important;
  -webkit-text-fill-color: #e8e8ee !important;
  caret-color: #e8e8ee !important;
  background-color: rgba(255, 255, 255, .04) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

.auth-card .image-code,
img.image-code {
  width: auto !important;
  max-width: 100% !important;
  height: 46px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 10px !important;
  padding: 3px 8px !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* ==========================================================================
   v-florence 2026-11-04：Florence AI 风炫酷升级（追加覆盖，最高优先级）
   1) 品牌渐变主色（紫→蓝流动渐变，替代纯蓝）
   2) hero 光球升级为彩色径向渐变 + 呼吸漂浮动画
   3) 商品卡片 hover 上浮 + 渐变发光描边
   ========================================================================== */

/* --- 1) 品牌渐变主色 --- */
:root[data-theme] {
  --fl-grad: linear-gradient(135deg, #7c7cf8 0%, #a855f7 50%, #5eead4 100%);
  --fl-grad-2: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* 主按钮换成渐变 */
.auth-card .sh-cta--primary,
.sh-cta--primary,
.sh-way__btn--primary,
.btn-primary {
  background-image: var(--fl-grad-2) !important;
  background-size: 200% 200% !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(139, 92, 246, .35) !important;
  transition: background-position .5s ease, transform .2s ease, box-shadow .3s ease !important;
}
.auth-card .sh-cta--primary:hover,
.sh-cta--primary:hover,
.sh-way__btn--primary:hover,
.btn-primary:hover {
  background-position: 100% 50% !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(139, 92, 246, .5) !important;
}

/* 分类 Chip 选中态改渐变 */
.chip.is-primary,
.switch-category.is-primary {
  background-image: var(--fl-grad-2) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(139, 92, 246, .4) !important;
}

/* --- 2) hero 光球升级为彩色渐变 --- */
.sh-hero__orb--1 {
  background: radial-gradient(circle at 30% 30%, rgba(168,85,247,.55), rgba(124,124,248,.15) 60%, transparent) !important;
  filter: blur(60px) !important;
  animation: fl-float1 8s ease-in-out infinite !important;
}
.sh-hero__orb--2 {
  background: radial-gradient(circle at 70% 70%, rgba(94,234,212,.45), rgba(99,102,241,.12) 60%, transparent) !important;
  filter: blur(70px) !important;
  animation: fl-float2 10s ease-in-out infinite !important;
}
.sh-hero__orb--3 {
  background: radial-gradient(circle at 50% 50%, rgba(99,102,241,.5), rgba(168,85,247,.1) 60%, transparent) !important;
  filter: blur(80px) !important;
  animation: fl-float3 12s ease-in-out infinite !important;
}
@keyframes fl-float1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-20px) scale(1.15)} }
@keyframes fl-float2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-25px,25px) scale(1.1)} }
@keyframes fl-float3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(15px,30px) scale(1.2)} }

/* --- 3) 商品卡片 hover 上浮 + 渐变发光描边 --- */
.item-list .item-card,
.goods-card,
.product-card {
  transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease !important;
  position: relative !important;
}
.item-list .item-card:hover,
.goods-card:hover,
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.45) !important;
}
/* 渐变描边：用伪元素给 hover 卡片加一圈发光边 */
.item-list .item-card::before,
.goods-card::before,
.product-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: var(--fl-grad) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
  pointer-events: none !important;
}
.item-list .item-card:hover::before,
.goods-card:hover::before,
.product-card:hover::before {
  opacity: 1 !important;
}