/* ===== Neo Template — Skin & Effects =====
   亮色为默认基线（继承 base.css 的 :root 亮色 token），
   暗色统一走 [data-theme="dark"]（与 base.js 的 Base.Theme / neo_theme key 对齐）。
   本文件不重定义 base 的中性 token（--text-1/2/3、--border、--bg-card 等）；
   旧 nova 专属 token（--accent 家族）桥接到 base 的 --primary 家族。 */

/* --- Token 桥接（旧 nova token → base --primary 家族 + neo 专属补充） --- */
:root {
  --accent: var(--primary);            /* 旧模板页面全部走 base 主色 */
  --accent-2: #fb923c;                 /* 主色渐变尾（同 --primary-gradient 终点） */
  --accent-3: #f43f5e;                 /* 暖玫点缀（渐变字 / 背景光球） */
  --glow: var(--primary-glow);
  --bg-deep: var(--bg-body);           /* 旧页面背景 token → base 页面底色 */
  --bg-surface: rgba(28, 25, 23, .04); /* neo 专属：浅浮层（输入框/次级底） */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --- 暗色皮肤（nova 原暗色值整体迁入；同名中性 token 在暗色下保持 neo 玻璃质感） --- */
[data-theme="dark"] {
  --bg-deep: #08080f;
  --bg-body: #08080f;
  --bg-surface: rgba(255, 255, 255, .045);
  --bg-card: rgba(255, 255, 255, .065);
  --border: rgba(255, 255, 255, .11);
  --text-1: #ededed;
  --text-2: rgba(255, 255, 255, .72);
  --text-3: rgba(255, 255, 255, .52);
  --glow: rgba(232, 93, 4, .16);
}

/* --- Smooth Theme Transition --- */
html { transition: background-color .5s var(--ease), color .5s var(--ease); }
body { background: var(--bg-deep); color: var(--text-1); }

/* --- Background Grid（亮色淡雅 / 暗色原味） --- */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(28, 25, 23, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 25, 23, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 100%);
}
[data-theme="dark"] .bg-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
}

/* --- Energy Orbs（亮色淡雅 / 暗色原味） --- */
.bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-orbs::before, .bg-orbs::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(120px); opacity: .14;
}
.bg-orbs::before {
  width: 600px; height: 600px; top: -200px; left: -100px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  animation: orbFloat 20s ease-in-out infinite alternate;
}
.bg-orbs::after {
  width: 500px; height: 500px; bottom: -150px; right: -80px;
  background: radial-gradient(circle, var(--accent-3) 0%, transparent 70%);
  animation: orbFloat 25s ease-in-out infinite alternate-reverse;
}
[data-theme="dark"] .bg-orbs::before,
[data-theme="dark"] .bg-orbs::after { opacity: .35; }
@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.1); }
  100% { transform: translate(-30px, 80px) scale(.95); }
}

/* --- Glassmorphism Card --- */
.glass {
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(28, 25, 23, .06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px -12px var(--glow);
  border-color: rgba(232, 93, 4, .25);
}
[data-theme="dark"] .glass { background: var(--bg-card); box-shadow: none; }

/* --- Spotlight Effect on Card Grid --- */
.spotlight-grid {
  --mouse-x: 50%; --mouse-y: 50%;
  position: relative;
}
.spotlight-card {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(28, 25, 23, .05);
  transition: border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
[data-theme="dark"] .spotlight-card { box-shadow: none; }
.spotlight-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(232, 93, 4, .07), transparent 40%);
  transition: opacity .4s;
}
.spotlight-card::after {
  content: ''; position: absolute; inset: -1px; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), rgba(232, 93, 4, .3), transparent 40%);
  border-radius: inherit;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: xor; -webkit-mask-composite: xor;
  padding: 1px;
  transition: opacity .4s;
}
.spotlight-grid:hover .spotlight-card::before,
.spotlight-grid:hover .spotlight-card::after { opacity: 1; }
.spotlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px -8px var(--glow);
}

/* --- Conic Gradient Rotating Border（两主题一致：深色内芯 + 暖色旋转描边） --- */
.conic-border {
  position: relative; z-index: 0; border-radius: 9999px; overflow: hidden;
  color: #fff;
}
.conic-border::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--conic-angle, 0deg), var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  animation: conicSpin 3s linear infinite;
}
.conic-border::after {
  content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: inherit;
  background: #1c1917;
}
@keyframes conicSpin { to { --conic-angle: 360deg; } }
@property --conic-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* --- Gradient Text --- */
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 40%, var(--accent-3) 80%, var(--accent) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s linear infinite;
}
@keyframes gradientShift { to { background-position: 200% center; } }

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0; transform: translateY(32px) scale(.97);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible {
  opacity: 1; transform: translateY(0) scale(1);
}

/* --- Marquee（支付方式横滑等） --- */
.marquee-track {
  display: flex; width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }

/* --- Number Counter Glow --- */
.counter-value {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px var(--glow);
}

/* --- Nav Link --- */
.nova-nav-link {
  padding: 6px 16px; border-radius: 12px; font-size: 14px; font-weight: 500;
  color: var(--text-2); transition: background .2s, color .2s;
}
.nova-nav-link:hover { background: var(--primary-glow); color: var(--text-1); }
.nova-nav-hover:hover { background: var(--primary-glow); }

/* --- Navbar Scroll Effect --- */
.nav-blur { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
.nav-scrolled { border-bottom-color: var(--border) !important; background: rgba(255, 255, 255, .85); }
[data-theme="dark"] .nav-scrolled { background: rgba(8, 8, 15, .6); }

/* --- Theme Toggle 图标（亮色显示月亮=点击进入暗色，暗色显示太阳） --- */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* --- 顶栏用户胶囊 + 头像 --- */
.nova-user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: 12px; border: 1px solid var(--border);
  background: transparent; font-size: 14px; font-weight: 500; color: var(--text-1);
  cursor: pointer; transition: background .2s, border-color .2s;
}
.nova-user-btn:hover { background: var(--primary-glow); border-color: rgba(232, 93, 4, .3); }
.nova-user-btn svg { color: var(--text-3); }
.nova-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-gradient); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.nova-user-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Mobile Menu Overlay --- */
.neo-nav-brand { min-width: 0; max-width: 220px; margin-right: 16px; }
.neo-nav-brand img, .neo-nav-actions { flex-shrink: 0; }
.neo-nav-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neo-nav-actions { white-space: nowrap; }
.neo-nav-links { display: none; min-width: 0; flex: 1; overflow-x: auto; margin-right: 16px; }
.neo-nav-links a { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 767px) {
  #main-nav .neo-nav-extra { display: none; }
}
@media (min-width: 1024px) {
  .neo-nav-links { display: flex; }
  #neo-menu-toggle, #mobile-menu { display: none; }
}
.neo-search-close {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  color: var(--text-2); background: var(--bg-surface); font-size: 24px; cursor: pointer;
}
.neo-search-close:hover { color: var(--primary); }
#search-modal > .relative { display: flex; flex-direction: column; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); }
#search-modal > .relative > .flex { flex-shrink: 0; }
#search-modal-body { min-height: 0; }
@media (min-width: 768px) {
  #search-modal > .relative { max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); }
}
#neo-menu-toggle:focus-visible, .neo-search-close:focus-visible, #search-modal a:focus-visible, #search-modal button:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.neo-menu-open .qj-ai-guide-launch, .neo-search-open .qj-ai-guide-launch { visibility: hidden; pointer-events: none; }
.mobile-menu {
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  background: rgba(250, 248, 245, .97);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease);
}
.mobile-menu.open {
  opacity: 1; visibility: visible; transform: translateY(0);
}
[data-theme="dark"] .mobile-menu { background: rgba(8, 8, 15, .96); }

/* --- Product Image Hover --- */
.img-zoom { overflow: hidden; border-radius: var(--radius-lg); }
.img-zoom img { transition: transform .6s var(--ease); }
.img-zoom:hover img { transform: scale(1.06); }

/* --- Skeleton Loading（token 化，随主题走） --- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-warm) 25%, var(--border) 50%, var(--bg-warm) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease infinite;
  border-radius: 8px;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, var(--bg-surface) 25%, rgba(255, 255, 255, .06) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
}
@keyframes skeletonShimmer { to { background-position: -200% 0; } }

/* --- State Badges（订单状态语义色，主题无关） --- */
.badge-ok { background: linear-gradient(135deg, #10b981, #059669); }
.badge-wait { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.badge-err { background: linear-gradient(135deg, #ef4444, #dc2626); }
.badge-proc { background: linear-gradient(135deg, #f59e0b, #d97706); }
.badge-refund { background: linear-gradient(135deg, #6b7280, #4b5563); }

/* --- Nova Toast（旧模板页兼容；新代码请用 Base.Toast） --- */
.nova-toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-20px);
  padding: 12px 28px; border-radius: 12px; font-size: 14px; font-weight: 500; z-index: 9999;
  background: rgba(255, 255, 255, .95); color: var(--text-1); border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(28, 25, 23, .12);
  backdrop-filter: blur(20px); opacity: 0;
  transition: opacity .3s, transform .3s var(--ease);
}
.nova-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-theme="dark"] .nova-toast {
  background: rgba(15, 15, 25, .9); color: #fff;
  border-color: rgba(255, 255, 255, .08); box-shadow: none;
}

/* --- SKU Button --- */
.sku-btn {
  padding: 8px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer;
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-1);
  transition: all .25s var(--ease);
}
.sku-btn:hover { border-color: rgba(232, 93, 4, .35); background: rgba(232, 93, 4, .06); }
.sku-btn.active { border-color: var(--accent); background: rgba(232, 93, 4, .12); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sku-btn[disabled] { opacity: .3; cursor: not-allowed; }

/* --- Form Input --- */
.nova-input {
  width: 100%; padding: 12px 16px; border-radius: 12px; font-size: 15px;
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-1);
  outline: none; transition: border-color .3s, box-shadow .3s;
}
.nova-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.nova-input::placeholder { color: var(--text-3); }

/* --- Pay Way Card --- */
.pay-way-card {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  border-radius: 14px; cursor: pointer; border: 1px solid var(--border);
  background: var(--bg-card); transition: all .3s var(--ease);
}
.pay-way-card:hover { border-color: rgba(232, 93, 4, .3); transform: translateX(4px); }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(28, 25, 23, .15); border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); }

/* --- Price（旧模板页兼容；新代码请用 base 的 .price 三段式） --- */
.price-tag { color: var(--primary); font-weight: 800; letter-spacing: -.02em; }
.price-old { text-decoration: line-through; opacity: .4; font-weight: 400; }

/* --- Promo Entry Cards --- */
.promo-entry {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  transition: all .25s var(--ease); text-decoration: none;
  min-height: 0;
}
.promo-entry:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -4px var(--glow); border-color: rgba(232, 93, 4, .25); }
.promo-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.promo-title { font-size: 13px; font-weight: 700; color: var(--text-1); }
.promo-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* --- Announcement Marquee（JS 测宽：溢出才滚动，未溢出加 .marquee-static 静止） --- */
@keyframes noticeScroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.animate-marquee { animation: noticeScroll 15s linear infinite; display: inline-block; will-change: transform; }
.animate-marquee.marquee-static { animation: none; transform: none; }

/* --- Hide Scrollbar (horizontal scroll areas) --- */
.cate-tabs-wrap::-webkit-scrollbar, #cate-tabs::-webkit-scrollbar, #flash-list::-webkit-scrollbar { height: 0; display: none; }
#cate-tabs, #flash-list { scrollbar-width: none; -ms-overflow-style: none; }

/* --- Category Tabs --- */
.cate-tab {
  padding: 7px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; flex-shrink: 0; border: 1px solid var(--border);
  background: transparent; color: var(--text-2); transition: all .2s var(--ease);
}
.cate-tab:hover { border-color: rgba(232, 93, 4, .3); color: var(--text-1); }
.cate-tab.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 2px 12px rgba(232, 93, 4, .25);
}

/* --- Category Tree Sidebar --- */
.cate-tree-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--text-2); cursor: pointer; transition: all .15s var(--ease);
  text-decoration: none; position: relative;
}
.cate-tree-item:hover { background: var(--bg-surface); color: var(--text-1); }
.cate-tree-item.active { background: var(--bg-surface); color: var(--accent); font-weight: 600; }
.cate-tree-item.sub { padding-left: 24px; font-size: 12px; }
.cate-tree-count {
  margin-left: auto; font-size: 12px; font-weight: 400;
  color: var(--text-3); min-width: 16px; text-align: right;
}
.cate-tree-arrow {
  margin-left: auto; flex-shrink: 0; color: var(--text-3);
  transition: transform .2s var(--ease);
}
.cate-tree-group.open > a .cate-tree-arrow { transform: rotate(90deg); }
.cate-tree-sub { display: none; }
.cate-tree-group.open .cate-tree-sub { display: block; }
.cate-tree-item.active .cate-tree-count { color: var(--accent); opacity: .6; }

/* --- Sub-category Buttons --- */
.cate-sub-btn {
  padding: 5px 14px; border-radius: 8px; font-size: 12px; font-weight: 500;
  white-space: nowrap; cursor: pointer; flex-shrink: 0; border: 1px solid transparent;
  background: var(--bg-surface); color: var(--text-3); transition: all .2s var(--ease);
}
.cate-sub-btn:hover { color: var(--text-1); background: var(--bg-card); }
.cate-sub-btn.active {
  background: var(--bg-card); color: var(--accent); border-color: var(--accent);
  font-weight: 600;
}
#cate-sub::-webkit-scrollbar { height: 0; display: none; }
#cate-sub { scrollbar-width: none; -ms-overflow-style: none; }

/* --- Sort Buttons --- */
.sort-btn {
  padding: 5px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: none; background: transparent; color: var(--text-3);
  transition: all .2s var(--ease);
}
.sort-btn:hover { color: var(--text-1); }
.sort-btn.active { color: var(--accent); }
.sort-arrow { transition: transform .2s var(--ease); vertical-align: middle; }

/* --- Search Bar --- */
.nova-search {
  position: relative; width: 100%;
}
.nova-search input {
  width: 100%; padding: 10px 16px 10px 40px; border-radius: 12px; font-size: 14px;
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-1);
  outline: none; transition: border-color .3s, box-shadow .3s, width .3s;
}
.nova-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.nova-search input::placeholder { color: var(--text-3); }
.nova-search .search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; pointer-events: none; opacity: .4;
}

/* --- 搜索历史标签 --- */
.search-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 20px; margin: 0 6px 8px 0;
  background: var(--bg-surface); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-2); cursor: pointer;
  transition: all .2s var(--ease); max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-tag:hover { border-color: rgba(232, 93, 4, .35); color: var(--accent); }
.search-history-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 8px; font-size: 12px; color: var(--text-3);
}
.search-history-clear {
  border: none; background: none; cursor: pointer; padding: 2px 6px;
  font-size: 12px; color: var(--text-3); border-radius: 6px;
  transition: color .2s;
}
.search-history-clear:hover { color: var(--danger); }

/* --- Pagination（旧模板页兼容；新代码请用 Base.Pager + .v4-pager） --- */
.nova-pagination {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2rem;
}
.nova-pagination button {
  padding: 8px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer; transition: all .25s var(--ease);
}
.nova-pagination button:hover { border-color: rgba(232, 93, 4, .3); color: var(--text-1); }
.nova-pagination button:disabled { opacity: .3; cursor: not-allowed; }
.nova-pagination button.active { border-color: var(--accent); background: rgba(232, 93, 4, .1); color: var(--accent); }
.nova-pagination span { font-size: 13px; color: var(--text-3); padding: 0 4px; }

/* --- 暗色下基座弹层用实色底（neo 暗色 --bg-card 是半透明玻璃，浮层需不透底） --- */
[data-theme="dark"] .v4-dropdown-menu,
[data-theme="dark"] .v4-modal,
[data-theme="dark"] .v4-toast {
  background: #15151d;
}

/* --- 右下角浮动按钮（返回顶部 / 在线客服）；z 低于移动端菜单(40)/导航(50) --- */
.nova-fab-wrap {
  position: fixed; right: 20px; bottom: 28px; z-index: 39;
  display: flex; flex-direction: column; gap: 10px;
}
.nova-fab {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-2);
  box-shadow: var(--shadow-md); cursor: pointer; text-decoration: none;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all .25s var(--ease);
}
.nova-fab:hover {
  color: #fff; background: var(--primary); border-color: var(--primary);
  transform: translateY(-2px); box-shadow: 0 8px 24px -4px var(--glow);
}
.nova-fab-top {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease), background .25s, color .25s, border-color .25s;
}
.nova-fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.qj-ai-guide-mounted .nova-fab-wrap { bottom: 90px; }
@media (max-width: 640px) {
  .nova-fab-wrap { right: 12px; bottom: 20px; }
  .nova-fab { width: 40px; height: 40px; }
  .qj-ai-guide-mounted .nova-fab-wrap { bottom: 84px; bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════
   ↓↓↓ 追加段：主页重建（index.php 首屏 SSR 化）新增组件 ↓↓↓
   规则：本段只增不改，上方既有规则保持原样
   ═══════════════════════════════════════════════ */

/* --- 新装饰 token（皮肤定义段：仅渐变尾色） --- */
:root {
  --neo-info-2: #38bdf8;    /* 信息渐变尾（快捷入口·公告） */
  --neo-success-2: #34d399; /* 成功渐变尾（快捷入口·订单） */
}

/* --- 通用卡片底（收敛重复内联 style="background:var(--bg-card);border:1px solid var(--border)"） --- */
.neo-card { background: var(--bg-card); border: 1px solid var(--border); }
.neo-surface { background: var(--bg-surface); border: 1px solid var(--border); }

/* --- 视觉隐藏（SEO 文本保留，如 SSR 的 h1） --- */
.neo-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Banner 轮播（SSR 直出 + JS 行为） --- */
.neo-banner {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 16 / 7; min-height: 220px; height: 100%; width: 100%;
}
.neo-banner-track { display: flex; height: 100%; transition: transform .5s var(--ease); }
.neo-banner-slide { min-width: 100%; height: 100%; display: block; }
.neo-banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.neo-banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  display: none; align-items: center; justify-content: center; cursor: pointer;
  color: #fff; background: rgba(28, 25, 23, .35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .2s;
}
.neo-banner-arrow:hover { background: rgba(28, 25, 23, .55); }
.neo-banner-arrow.prev { left: 12px; }
.neo-banner-arrow.next { right: 12px; }
.neo-banner-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; gap: 6px;
}
.neo-banner-dot {
  position: relative; /* 承载 ::before 触控热区 */
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: #fff; opacity: .45; transition: opacity .2s, transform .2s;
}
/* 移动端触控目标：视觉仍是 8px 小圆点，透明 ::before 把热区扩到 28px（≥24–28），不改变布局/间距 */
.neo-banner-dot::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 28px; height: 28px; transform: translate(-50%, -50%);
}
.neo-banner-dot.active { opacity: 1; transform: scale(1.2); }
.neo-banner-default {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
}
.neo-banner-default h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.neo-banner-default p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .85); }

/* --- 信任条（原假统计四宫格位置） --- */
.neo-trust-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border);
}
.neo-trust-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-glow); color: var(--primary);
}
.neo-trust-title { font-size: 13px; font-weight: 700; color: var(--text-1); }
.neo-trust-desc { font-size: 12px; color: var(--text-3); margin-top: 1px; }

/* --- 分类橱窗（带图分类横滑一排） --- */
.neo-cate-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex-shrink: 0; width: 96px; padding: 14px 8px 12px;
  border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border);
  text-decoration: none;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.neo-cate-card:hover {
  transform: translateY(-3px);
  border-color: rgba(232, 93, 4, .35);
  box-shadow: 0 10px 28px -8px var(--glow);
}
.neo-cate-thumb { width: 52px; height: 52px; border-radius: 14px; overflow: hidden; background: var(--bg-surface); display: block; }
.neo-cate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.neo-cate-name {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#cate-showcase::-webkit-scrollbar { height: 0; display: none; }
#cate-showcase { scrollbar-width: none; -ms-overflow-style: none; }

/* --- 快捷入口图标渐变（token 化，替代内联 hex 渐变；图标 stroke=currentColor） --- */
.promo-icon { color: #fff; }
.promo-icon-flash { background: linear-gradient(135deg, var(--primary), var(--accent-2)); }
.promo-icon-rank { background: linear-gradient(135deg, var(--accent-3), var(--accent-2)); }
.promo-icon-notice { background: linear-gradient(135deg, var(--info), var(--neo-info-2)); }
.promo-icon-query { background: linear-gradient(135deg, var(--success), var(--neo-success-2)); }
.promo-icon-new { background: linear-gradient(135deg, var(--primary), var(--accent-2)); }
.promo-icon-price { background: linear-gradient(135deg, var(--info, #38bdf8), var(--neo-info-2)); }
.promo-icon-category { background: linear-gradient(135deg, var(--accent-3), var(--accent-2)); }
.promo-icon-user { background: linear-gradient(135deg, var(--success, #10b981), var(--neo-success-2)); }

/* --- 秒杀横滑卡 + 抢购进度 --- */
.neo-flash-item { width: 150px; flex-shrink: 0; scroll-snap-align: start; }
.neo-flash-item .goods-card-title { font-size: 13px; }
.neo-flash-progress { margin-top: 6px; height: 4px; border-radius: 999px; overflow: hidden; background: var(--bg-surface); }
.neo-flash-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-3), var(--accent-2)); }
.neo-badge-hot {
  display: inline-block; padding: 1px 6px; border-radius: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: #fff; background: var(--danger);
}

/* --- 热销排行名次角标（1 金 --warning，2/3 --text-2，其余 --text-3） --- */
.neo-rank-item { position: relative; }
.neo-rank-num {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: var(--text-3); box-shadow: var(--shadow-sm);
}
.neo-rank-num.top1 { background: var(--warning); }
.neo-rank-num.top2, .neo-rank-num.top3 { background: var(--text-2); }

/* --- 商品网格骨架块（配 .v4-skeleton 用） --- */
.neo-goods-skeleton { height: 280px; border-radius: var(--radius-lg); }

/* --- 弹窗公告正文（Base.Modal 内） --- */
.neo-popup-body { font-size: 14px; line-height: 1.8; color: var(--text-2); }
.neo-popup-body img { max-width: 100%; }

/* --- 动态下单气泡 --- */
.neo-order-tip {
  position: fixed; left: 24px; bottom: 24px; z-index: 39;
  display: flex; align-items: center; gap: 10px; max-width: 320px;
  padding: 10px 14px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.neo-order-tip.show { opacity: 1; transform: translateY(0); }
.neo-order-tip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.neo-order-tip span { font-size: 12px; color: var(--text-2); }
[data-theme="dark"] .neo-order-tip { background: #15151d; }
@media (max-width: 640px) {
  .neo-order-tip { left: 12px; bottom: 12px; max-width: 75vw; }
  /* 移动端触控目标：切换箭头提到 40×40（图标仍 16px 小箭头，居中不变） */
  .neo-banner-arrow { width: 40px; height: 40px; }
}