@charset "UTF-8";
/**
 * 2BU 满血商城 · Ruby Obsidian V2 Visual Identity (VI)
 * 严格统一 2BU 品牌设计语言与明暗合理双模体验
 * 对标图1：全站商品划线参考价统一使用 -10° 红色倾斜删除线 (Diagonal Strike Price)
 */

/* ==========================================================================
   1. 基础全局与背景容器 (Global Canvas)
   ========================================================================== */
html.dark, html.dark body, html.dark #app {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

html:not(.dark), html:not(.dark) body, html:not(.dark) #app {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

.apple-cosmos-canvas, .apple-stars-layer {
  display: none !important;
}

/* 顶部累赘栏目强制消除 */
.shop-compact-vip-bar {
  display: none !important;
}

/* ==========================================================================
   2. 顶栏导航 Header 统一风格
   ========================================================================== */
header, html.dark header {
  background: rgba(9, 10, 15, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html:not(.dark) header {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* 品牌 Logo 标题 (严格限定 header a[href="/"]，绝不污染 aria-current="page" 其他激活导航项) */
header a[href="/"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

header a[href="/"] img {
  display: none !important;
}

header a[href="/"]::after,
html.dark header a[href="/"]::after,
html:not(.dark) header a[href="/"]::after {
  content: "2BU \6ee1\8840\5546\57ce" !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}

/* 顶栏导航容器及水平严格对齐 (2BU Apple-HIG 统一视觉规范) */
header nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: 8px !important;
}

header nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* 导航链接：公告 */
header nav a[href="/notice"],
header nav a[href*="notice"] {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #cbd5e1 !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  line-height: 1 !important;
}
header nav a[href="/notice"]:hover,
header nav a[href*="notice"]:hover {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.25) !important;
}
html:not(.dark) header nav a[href="/notice"],
html:not(.dark) header nav a[href*="notice"] {
  color: #334155 !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
html:not(.dark) header nav a[href="/notice"]:hover,
html:not(.dark) header nav a[href*="notice"]:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* 满血网主页加粗加大变成白色字体，高度与公告完全对齐 */
header nav a[href*="manxue"],
header nav a[href*="2bu.top"],
header a[href*="manxue.best"],
header a[href*="2bu.top"] {
  font-size: 18px !important;
  font-weight: 950 !important;
  color: #ffffff !important;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.45) !important;
}
html.dark header nav a[href*="manxue"],
html.dark header nav a[href*="2bu.top"],
html.dark header a[href*="manxue.best"],
html.dark header a[href*="2bu.top"],
html:not(.dark) header nav a[href*="manxue"],
html:not(.dark) header nav a[href*="2bu.top"],
html:not(.dark) header a[href*="manxue.best"],
html:not(.dark) header a[href*="2bu.top"] {
  color: #ffffff !important;
}
header nav a[href*="manxue"]:hover,
header nav a[href*="2bu.top"]:hover,
header a[href*="manxue.best"]:hover,
header a[href*="2bu.top"]:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8) !important;
}

/* 隐藏冗余顶栏图标 (购物车、语言) */
header a[href*="/cart"],
header a[href="/cart"],
header button:has(svg.lucide-shopping-cart),
header button:has(svg.lucide-languages),
header button[aria-label*="语言"],
header div:has(> button[aria-label*="语言"]) {
  display: none !important;
}

/* 顶栏操作区统一布局 */
header div.ml-auto {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 顶栏图标按钮微光胶囊化 (搜索按钮 & 主题切换按钮) */
header a[href="/products"],
header button[aria-label*="主题"],
header button:has(svg.lucide-sun),
header button:has(svg.lucide-moon) {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

html.dark header a[href="/products"],
html.dark header button[aria-label*="主题"],
html.dark header button:has(svg.lucide-sun),
html.dark header button:has(svg.lucide-moon) {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
}
html.dark header a[href="/products"]:hover,
html.dark header button[aria-label*="主题"]:hover,
html.dark header button:has(svg.lucide-sun):hover,
html.dark header button:has(svg.lucide-moon):hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.25) !important;
  transform: translateY(-1px) !important;
}

html:not(.dark) header a[href="/products"],
html:not(.dark) header button[aria-label*="主题"],
html:not(.dark) header button:has(svg.lucide-sun),
html:not(.dark) header button:has(svg.lucide-moon) {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #475569 !important;
}
html:not(.dark) header a[href="/products"]:hover,
html:not(.dark) header button[aria-label*="主题"]:hover,
html:not(.dark) header button:has(svg.lucide-sun):hover,
html:not(.dark) header button:has(svg.lucide-moon):hover {
  background: rgba(0, 0, 0, 0.09) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #ef4444 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* 订单查询统一风格 (半透明微光胶囊 + 图标 + 文本) */
header a[href="/guest/orders"] {
  width: auto !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

header a[href="/guest/orders"] svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

header a[href="/guest/orders"]::after {
  content: "\8ba2\5355\67e5\8be2" !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

html.dark header a[href="/guest/orders"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
html.dark header a[href="/guest/orders"] svg {
  color: #cbd5e1 !important;
}
html.dark header a[href="/guest/orders"]::after {
  content: "\8ba2\5355\67e5\8be2" !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}
html.dark header a[href="/guest/orders"]:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.28) !important;
  transform: translateY(-1px) !important;
}
html.dark header a[href="/guest/orders"]:hover svg {
  color: #f87171 !important;
}
html.dark header a[href="/guest/orders"]:hover::after {
  color: #ffffff !important;
}

html:not(.dark) header a[href="/guest/orders"] {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1e293b !important;
}
html:not(.dark) header a[href="/guest/orders"] svg {
  color: #475569 !important;
}
html:not(.dark) header a[href="/guest/orders"]::after {
  content: "\8ba2\5355\67e5\8be2" !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}
html:not(.dark) header a[href="/guest/orders"]:hover {
  background: rgba(0, 0, 0, 0.09) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #ef4444 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2) !important;
  transform: translateY(-1px) !important;
}
html:not(.dark) header a[href="/guest/orders"]:hover svg {
  color: #ef4444 !important;
}
html:not(.dark) header a[href="/guest/orders"]:hover::after {
  color: #ef4444 !important;
}

/* 登录按钮统一风格 (2BU 满血红 Ruby Capsule 专属渐变) */
header a[href="/auth/login"],
header a[href*="/login"],
a[href="/auth/login"],
a[href*="/login"].bg-primary {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  height: 36px !important;
  padding: 0 20px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(254, 202, 202, 0.45) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

header a[href="/auth/login"]:hover,
header a[href*="/login"]:hover,
a[href="/auth/login"]:hover,
a[href*="/login"].bg-primary:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #b91c1c 100%) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   3. 侧边栏分类 (Category Sidebar) - 明暗双模合理自适应
   ========================================================================== */
aside {
  background: transparent !important;
}
aside.shrink-0 button img {
  display: none !important;
}
aside.shrink-0 [class*="overflow-x-auto"] > div:first-child,
aside.shrink-0 button:not(:has(span)) {
  display: none !important;
}

aside.shrink-0 button:has(span) {
  border-radius: 14px !important;
  padding: 14px 8px !important;
  margin-bottom: 12px !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

html.dark aside button:has(span) {
  background: #0e1017 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html.dark aside button:has(span):hover {
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: #141722 !important;
  transform: translateY(-2px) !important;
}

html:not(.dark) aside button:has(span) {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
html:not(.dark) aside button:has(span):hover {
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: #fff5f5 !important;
  transform: translateY(-2px) !important;
}

aside button:has(span)::before,
aside button:has(span)::after {
  display: none !important;
  content: none !important;
}

aside button:has(span) span {
  display: block !important;
  text-align: center !important;
  white-space: pre-line !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  width: 100% !important;
  font-family: inherit !important;
  color: #ffffff !important;
}

/* 全局所有卡片的第一行和主体文字，全部白色，同款字体 */
html.dark aside button:has(span) span,
html:not(.dark) aside button:has(span) span,
aside button:has(span)[class*="bg-primary"] span,
aside button:has(span)[class*="text-primary"] span,
aside button:has(span).active span,
aside button:has(span):hover span {
  color: #ffffff !important;
}

aside button:has(span) span::first-line,
html.dark aside button:has(span) span::first-line,
html:not(.dark) aside button:has(span) span::first-line,
aside button:has(span)[class*="bg-primary"] span::first-line,
aside button:has(span)[class*="text-primary"] span::first-line,
aside button:has(span).active span::first-line,
aside button:has(span):hover span::first-line {
  color: #ffffff !important;
}

/* 1: 满血专区 - 激活态与选中态边框保持，文字纯白 */
aside [class*="overflow-x-auto"] > div:nth-child(2) button,
aside button:has(span)[class*="bg-primary"],
aside button:has(span)[class*="text-primary"],
aside button:has(span).active,
aside button:has(span)[class*="primary/10"] {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.18) !important;
  transform: translateY(-2px) !important;
}

/* Card 1: 全球最低价 / 满血专区 (全白) */
aside [class*="overflow-x-auto"] > div:nth-child(2) button span,
aside button:has(img[alt*="满血"]) span {
  font-size: 24px !important;
  font-weight: 950 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}
aside [class*="overflow-x-auto"] > div:nth-child(2) button span::first-line,
aside button:has(img[alt*="满血"]) span::first-line {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
}

/* Card 2: openai / chatgpt / codex (全白) */
aside [class*="overflow-x-auto"] > div:nth-child(3) button span::first-line,
aside button:has(img[alt*="openai"]) span::first-line {
  font-size: 24px !important;
  font-weight: 950 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}
aside [class*="overflow-x-auto"] > div:nth-child(3) button span,
aside button:has(img[alt*="openai"]) span {
  font-size: 14.5px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
}

/* Card 3: claude code / opus5.5 / sonet5.5 (全白，与 openai 同款) */
aside [class*="overflow-x-auto"] > div:nth-child(4) button span::first-line,
aside button:has(img[alt*="claude"]) span::first-line {
  font-size: 24px !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
}
aside [class*="overflow-x-auto"] > div:nth-child(4) button span,
aside button:has(img[alt*="claude"]) span {
  font-size: 14.5px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
}

/* Card 4: Gmail / 真人老号 (全白) */
aside [class*="overflow-x-auto"] > div:nth-child(5) button span::first-line,
aside button:has(img[alt*="Gmail"]) span::first-line {
  font-size: 24px !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
}
aside [class*="overflow-x-auto"] > div:nth-child(5) button span,
aside button:has(img[alt*="Gmail"]) span {
  font-size: 14.5px !important;
  font-weight: 850 !important;
  color: #ffffff !important;
}

/* Card 5: 干净VPS/VPN / 专为AI重度用户优化的优质IP / 专线高速无晚高峰不丢包 (全白三行，不折断) */
aside [class*="overflow-x-auto"] > div:nth-child(6) button span::first-line,
aside button:has(img[alt*="VPS"]) span::first-line,
aside button:has(img[alt*="VPN"]) span::first-line,
aside button:has(img[alt*="干净"]) span::first-line {
  font-size: 22px !important;
  font-weight: 950 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  line-height: 1.5 !important;
}
aside [class*="overflow-x-auto"] > div:nth-child(6) button span,
aside button:has(img[alt*="VPS"]) span,
aside button:has(img[alt*="VPN"]) span,
aside button:has(img[alt*="干净"]) span {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  white-space: pre-line !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Card 6: 非专业勿拍 / 残血专区 (全白) */
aside [class*="overflow-x-auto"] > div:nth-child(7) button span,
aside button:has(img[alt*="残血"]) span,
aside button:has(img[alt*="非专业"]) span {
  font-size: 24px !important;
  font-weight: 950 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}
aside [class*="overflow-x-auto"] > div:nth-child(7) button span::first-line,
aside button:has(img[alt*="残血"]) span::first-line,
aside button:has(img[alt*="非专业"]) span::first-line {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
}

/* ==========================================================================
   4. 搜索框 (Search Bar) - 明暗双模合理自适应
   ========================================================================== */
main input[type="text"], main input[placeholder*="搜索"] {
  border-radius: 12px !important;
  height: 46px !important;
  font-size: 0.92rem !important;
  padding: 0 40px 0 44px !important;
  transition: all 0.2s ease !important;
}

.relative.mb-4 input,
main input[placeholder*="搜索"],
input.pl-10 {
  padding-left: 44px !important;
  padding-right: 40px !important;
}

html.dark main input[type="text"], html.dark main input[placeholder*="搜索"] {
  background: #0e1017 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}
html.dark main input[type="text"]:focus {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.2) !important;
  outline: none !important;
}

html:not(.dark) main input[type="text"], html:not(.dark) main input[placeholder*="搜索"] {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
html:not(.dark) main input[type="text"]:focus {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.15) !important;
  outline: none !important;
}

/* ==========================================================================
   5. 商品卡片网格 (Product Cards Grid) - 明暗双模合理自适应
   ========================================================================== */
main .space-y-2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

main a.group.bg-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  border-radius: 16px !important;
  padding: 1.35rem 1.4rem !important;
  min-height: 255px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  text-decoration: none !important;
}

html.dark main a.group.bg-card {
  background: #0d0f17 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
html.dark main a.group.bg-card:hover {
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.2) !important;
  transform: translateY(-3px) !important;
}

html:not(.dark) main a.group.bg-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}
html:not(.dark) main a.group.bg-card:hover {
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.12) !important;
  transform: translateY(-3px) !important;
}









/* 图标容器 */
main a.group.bg-card > span:first-child {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}
html.dark main a.group.bg-card > span:first-child {
  background: #141722 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html:not(.dark) main a.group.bg-card > span:first-child {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* 官方高清图标展示规范 · 彻底移除历史表情符号 */
main a.group.bg-card > span:first-child {
  width: 46px !important;
  height: 46px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

main a.group.bg-card > span:first-child img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 11px !important;
}

main a.group.bg-card > span:first-child::after {
  content: "" !important;
  display: none !important;
}

aside button img {
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}







/* 商品标题 */
main a.group.bg-card h3 {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  white-space: pre-line !important;
  margin: 0 !important;
}
html.dark main a.group.bg-card h3 {
  color: #ffffff !important;
}
html:not(.dark) main a.group.bg-card h3 {
  color: #0f172a !important;
}

/* 隐藏冗余分类及中圆点 */
main a.group.bg-card > div:nth-child(2) > div:first-child span {
  display: none !important;
}

/* 库存/销量徽章 */
main a.group.bg-card span:has(svg.lucide-zap) {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  width: fit-content !important;
  margin-top: 4px !important;
}
html.dark main a.group.bg-card span:has(svg.lucide-zap) {
  color: #fca5a5 !important;
}
html:not(.dark) main a.group.bg-card span:has(svg.lucide-zap) {
  color: #ef4444 !important;
}
main a.group.bg-card span:has(svg.lucide-zap) svg {
  color: #ef4444 !important;
}



/* ==========================================================================
   6. 满血专区商品卡片官方划线价格 (红色斜向删除线 -10° 斜线效果)
   ========================================================================== */
.mx-strike-price,
.diagonal-strike-price {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 10px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-decoration: none !important; /* 彻底移除水平横删除线 */
  white-space: nowrap !important;
  line-height: 1.15 !important;
  vertical-align: middle !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: auto !important;
  pointer-events: auto !important;
}

.mx-strike-price::after,
.diagonal-strike-price::after {
  content: "" !important;
  position: absolute !important;
  left: -4px !important;
  right: -4px !important;
  top: 50% !important;
  height: 2px !important;
  background-color: #ef4444 !important;
  transform: translateY(-50%) rotate(-10deg) !important;
  transform-origin: center center !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.45) !important;
  display: block !important;
}

html.dark .mx-strike-price,
html.dark .diagonal-strike-price {
  color: #94a3b8 !important;
}

html:not(.dark) .mx-strike-price,
html:not(.dark) .diagonal-strike-price {
  color: #64748b !important;
}

/* 卡片底部操作容器：垂直排列，价格独占一行，立即购买独占一行 */
main a.group.bg-card > div:last-child,
main a.group.bg-card > div:last-of-type,
main a.group.bg-card > div:has(button),
main a.group.bg-card > div:has(.tabular-nums),
main a.group.bg-card > div.mx-card-bottom-actions {
  margin-top: auto !important;
  padding-top: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
}

/* 确保价格区域居左对齐，大字纯白 */
main a.group.bg-card .text-right,
main a.group.bg-card [class*="text-right"],
main a.group.bg-card > div:has(button) > div:first-child {
  text-align: left !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

main a.group.bg-card .tabular-nums {
  font-size: 1.65rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  line-height: 1.15 !important;
}
html.dark main a.group.bg-card .tabular-nums {
  color: #ffffff !important;
}
html:not(.dark) main a.group.bg-card .tabular-nums {
  color: #0f172a !important;
}

/* 消除原先的伪类删除线 */
main a.group.bg-card .tabular-nums::after {
  display: none !important;
  content: none !important;
}

/* “立即购买”按钮：单独一行 (独立整行)，红宝石高光圆角胶囊 */
main a.group.bg-card button,
main a.group.bg-card button[aria-label*="购买"],
main a.group.bg-card button.mx-buy-btn {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  font-size: 0 !important; /* 隐藏按钮原有svg或旧文本节点 */
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  outline: none !important;
}

main a.group.bg-card button:hover,
main a.group.bg-card button[aria-label*="购买"]:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
  border-color: rgba(248, 113, 113, 0.7) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.55) !important;
  transform: translateY(-1.5px) !important;
  color: #ffffff !important;
}

main a.group.bg-card button:active {
  transform: translateY(0.5px) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
}

main a.group.bg-card button::after {
  content: "立即购买" !important;
  font-family: inherit !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
}

main a.group.bg-card button svg {
  display: none !important;
}

main a.group.bg-card svg.lucide-chevron-right {
  display: none !important;
}

/* 响应式适配 */
@media (max-width: 1024px) {
  main .space-y-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  main .space-y-2 {
    grid-template-columns: 1fr !important;
  }
}

/* 隐藏底部 */
footer {
  display: none !important;
}


/* 侧边栏分类卡片内的一切图标彻底删除 */
aside button img,
aside button svg,
aside [class*="overflow-x-auto"] img,
aside [class*="overflow-x-auto"] svg,
aside button > img,
aside button > svg {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ==========================================================================
   LIGHT MODE CONTRAST REINFORCEMENT (白色背景高对比度精细重塑)
   ========================================================================== */

/* 1. 顶栏导航 满血网主页 在浅色模式下为深邃加粗黑色，高对比度 */
html:not(.dark) header nav a[href*="manxue"],
html:not(.dark) header nav a[href*="2bu.top"],
html:not(.dark) header a[href*="manxue.best"],
html:not(.dark) header a[href*="2bu.top"] {
  font-size: 20px !important;
  font-weight: 950 !important;
  color: #0f172a !important;
  text-shadow: none !important;
}
html:not(.dark) header nav a[href*="manxue"]:hover,
html:not(.dark) header nav a[href*="2bu.top"]:hover,
html:not(.dark) header a[href*="manxue.best"]:hover,
html:not(.dark) header a[href*="2bu.top"]:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

/* 2. 侧边栏整体卡片容器与未选中态文字 (浅色模式) */
html:not(.dark) aside button:has(span) {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html:not(.dark) aside button:has(span):hover {
  background: #fff5f5 !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* 浅色模式下，未激活卡片文字深度对比度保证 */
html:not(.dark) aside button:has(span) span {
  color: #334155 !important;
  font-family: inherit !important;
}
html:not(.dark) aside button:has(span) span::first-line {
  color: #0f172a !important;
}

/* Card 1: 全球最低价 / 满血专区 (浅色激活态) */
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(2) button,
html:not(.dark) aside button:has(img[alt*="满血"]) {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.04) 100%) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.65) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.15) !important;
}
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(2) button span,
html:not(.dark) aside button:has(img[alt*="满血"]) span {
  font-size: 24px !important;
  font-weight: 950 !important;
  color: #b91c1c !important;
  letter-spacing: -0.01em !important;
}
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(2) button span::first-line,
html:not(.dark) aside button:has(img[alt*="满血"]) span::first-line {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  color: #dc2626 !important;
  letter-spacing: 0.02em !important;
}

/* Card 2: openai / chatgpt / codex (浅色模式) */
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(3) button span::first-line,
html:not(.dark) aside button:has(img[alt*="openai"]) span::first-line {
  font-size: 24px !important;
  font-weight: 950 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
}
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(3) button span,
html:not(.dark) aside button:has(img[alt*="openai"]) span {
  font-size: 14.5px !important;
  font-weight: 850 !important;
  color: #334155 !important;
}

/* Card 3: claude code / opus5.5 / sonet5.5 (浅色模式) */
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(4) button span::first-line,
html:not(.dark) aside button:has(img[alt*="claude"]) span::first-line {
  font-size: 24px !important;
  font-weight: 950 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
}
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(4) button span,
html:not(.dark) aside button:has(img[alt*="claude"]) span {
  font-size: 14.5px !important;
  font-weight: 850 !important;
  color: #334155 !important;
}

/* Card 4: Gmail / 真人老号 (浅色模式) */
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(5) button span::first-line,
html:not(.dark) aside button:has(img[alt*="Gmail"]) span::first-line {
  font-size: 24px !important;
  font-weight: 950 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
}
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(5) button span,
html:not(.dark) aside button:has(img[alt*="Gmail"]) span {
  font-size: 14.5px !important;
  font-weight: 850 !important;
  color: #334155 !important;
}

/* Card 5: 干净VPS/VPN / 专为AI重度用户优化的优质IP / 专线高速无晚高峰不丢包 (浅色模式) */
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(6) button span::first-line,
html:not(.dark) aside button:has(img[alt*="VPS"]) span::first-line,
html:not(.dark) aside button:has(img[alt*="VPN"]) span::first-line,
html:not(.dark) aside button:has(img[alt*="干净"]) span::first-line {
  font-size: 22px !important;
  font-weight: 950 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
  line-height: 1.5 !important;
}
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(6) button span,
html:not(.dark) aside button:has(img[alt*="VPS"]) span,
html:not(.dark) aside button:has(img[alt*="VPN"]) span,
html:not(.dark) aside button:has(img[alt*="干净"]) span {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #334155 !important;
  line-height: 1.4 !important;
}

/* Card 6: 非专业勿拍 / 残血专区 (浅色模式) */
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(7) button span,
html:not(.dark) aside button:has(img[alt*="残血"]) span,
html:not(.dark) aside button:has(img[alt*="非专业"]) span {
  font-size: 24px !important;
  font-weight: 950 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
}
html:not(.dark) aside [class*="overflow-x-auto"] > div:nth-child(7) button span::first-line,
html:not(.dark) aside button:has(img[alt*="残血"]) span::first-line,
html:not(.dark) aside button:has(img[alt*="非专业"]) span::first-line {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  color: #64748b !important;
  letter-spacing: 0.02em !important;
}

/* 3. 浅色模式搜索框 */
html:not(.dark) main input[type="text"],
html:not(.dark) main input[placeholder*="搜索"] {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 0, 0, 0.14) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html:not(.dark) main input::placeholder {
  color: #64748b !important;
}

/* 4. 浅色模式商品卡片角标与库存药丸 */
html:not(.dark) 
html:not(.dark) main a.group.bg-card span:has(svg.lucide-zap) {
  background: #fef2f2 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #b91c1c !important;
  font-weight: 800 !important;
}
html:not(.dark) main a.group.bg-card span:has(svg.lucide-zap) svg {
  color: #dc2626 !important;
}

/* 5. 浅色模式购买按钮 - 纯黑轻奢高对比度设计 */
html:not(.dark) main a.group.bg-card button,
html:not(.dark) main a.group.bg-card button[aria-label*="购买"] {
  background: #0f172a !important;
  border: 1px solid #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
}
html:not(.dark) main a.group.bg-card button::after {
  content: "\7acb\5373\8d2d\4e70" !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}
html:not(.dark) main a.group.bg-card button:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4) !important;
  color: #ffffff !important;
}

/* 6. 浅色模式分类标题文本 */
html:not(.dark) main [class*="text-muted-foreground"] {
  color: #475569 !important;
}
html:not(.dark) main [class*="text-foreground"] {
  color: #0f172a !important;
}


/* 卡片右上角徽标 (动态属性绑定 data-badge，解绑硬编码 nth-child) */
main a.group.bg-card[data-badge]::before {
  content: attr(data-badge);
  white-space: pre-line;
  text-align: center;
  line-height: 1.25;
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 10px;
  border-radius: 9999px !important;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
  z-index: 10;
  pointer-events: none;
}
html.dark main a.group.bg-card[data-badge]::before {
  white-space: pre-line;
  text-align: center;
  line-height: 1.25;
  border-radius: 9999px !important;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* 表情图标动态属性配置 (解绑 nth-child) */
main a.group.bg-card[data-icon] > span:first-child img {
  display: none !important;
}
main a.group.bg-card[data-icon] > span:first-child::after {
  content: attr(data-icon);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   8. 结账页“购买方式”统一 Apple HIG 会员单输入框
   ========================================================================== */
.unified-checkout-auth-card {
  background: rgba(24, 24, 27, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
}

html:not(.dark) .unified-checkout-auth-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.unified-member-input {
  height: 46px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

html:not(.dark) .unified-member-input {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f172a !important;
}

.unified-member-input:focus {
  outline: none !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

.unified-member-btn {
  height: 46px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  padding: 0 24px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.unified-member-btn:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4) !important;
}

.unified-member-btn:active {
  transform: translateY(0) !important;
}


/* ==========================================================================
   9. 商城全站全页面视觉风格终极统一 (2BU Ruby Obsidian Visual Identity)
      - 登录/注册/找回密码页 (Auth)
      - 订单查询页 (Guest Orders)
      - 商品详情页 (Product Detail)
      - 商城公告页 (Notice)
      - 全局表单、输入框、按钮与红宝石胶囊统一
   ========================================================================== */

/* 全局主色变量与交互光圈强制收敛至 2BU 满血红宝石 */
:root, html, html.dark, html:not(.dark) {
  --ui-accent: #ef4444 !important;
  --ui-accent-hover: #dc2626 !important;
  --ui-focus-ring: rgba(239, 68, 68, 0.4) !important;
  --primary: 0 84.2% 60.2% !important;
}

/* 全站所有 primary 背景与文字按钮 */
.bg-primary {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}
.text-primary {
  color: #ef4444 !important;
}
.border-primary {
  border-color: #ef4444 !important;
}

/* 1. 登录 / 注册 / 找回密码页面 (Auth Pages) 深度统一黑曜石红宝石 */
.flex.min-h-\[70vh\] {
  background: transparent !important;
  padding: 40px 16px !important;
}

.flex.min-h-\[70vh\] .bg-card,
.flex.min-h-\[70vh\] div.rounded-xl.border {
  background: rgba(17, 20, 32, 0.94) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* 登录卡片标题与小标 */
.flex.min-h-\[70vh\] h1 {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
}

.flex.min-h-\[70vh\] p.text-primary,
.flex.min-h-\[70vh\] [class*="tracking-\[0.2em\]"] {
  color: #ef4444 !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
}

.flex.min-h-\[70vh\] p.text-muted-foreground,
.flex.min-h-\[70vh\] label {
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

/* 登录/注册表单输入框统一深色高质感材质 */
.flex.min-h-\[70vh\] input[type="email"],
.flex.min-h-\[70vh\] input[type="password"],
.flex.min-h-\[70vh\] input[type="text"] {
  height: 46px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.flex.min-h-\[70vh\] input:focus {
  outline: none !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.flex.min-h-\[70vh\] input::placeholder {
  color: #64748b !important;
}

/* 密码显隐小眼睛按钮彻底重置（杜绝继承主按钮样式） */
.flex.min-h-\[70vh\] button[aria-label*="密码"],
.flex.min-h-\[70vh\] .relative > button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #64748b !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  transition: color 0.2s ease !important;
}

.flex.min-h-\[70vh\] button[aria-label*="密码"]:hover,
.flex.min-h-\[70vh\] .relative > button:hover {
  color: #ef4444 !important;
  background: transparent !important;
}

/* 记住我复选框颜色 */
.flex.min-h-\[70vh\] input[type="checkbox"] {
  accent-color: #ef4444 !important;
}

/* 登录/注册主提交按钮统一 2BU 满血红宝石渐变胶囊 */
.flex.min-h-\[70vh\] button[type="submit"],
.flex.min-h-\[70vh\] form button[type="submit"],
.flex.min-h-\[70vh\] button.bg-primary {
  height: 48px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  font-size: 15px !important;
  border: 1px solid rgba(254, 202, 202, 0.45) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.flex.min-h-\[70vh\] button[type="submit"]:hover,
.flex.min-h-\[70vh\] button.bg-primary:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #b91c1c 100%) !important;
  box-shadow: 0 6px 22px rgba(239, 68, 68, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
}

/* 登录页相关导航链接与徽章 */
.flex.min-h-\[70vh\] a {
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.flex.min-h-\[70vh\] a:hover {
  color: #ef4444 !important;
}
.flex.min-h-\[70vh\] [class*="border-border"][class*="bg-muted"] {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #ef4444 !important;
}

/* 2. 订单查询页面 (Guest Orders) */
main [class*="max-w-\[1180px\]"] .bg-card,
main .mb-5.rounded-xl.border.bg-card {
  background: rgba(17, 20, 32, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
  color: #ffffff !important;
}

main .mb-5.rounded-xl.border.bg-card input {
  height: 46px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  padding: 0 16px !important;
  font-size: 14px !important;
}

main .mb-5.rounded-xl.border.bg-card input:focus {
  outline: none !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

main .mb-5.rounded-xl.border.bg-card button.bg-primary,
main .mb-5.rounded-xl.border.bg-card button[type="submit"] {
  height: 46px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
  cursor: pointer !important;
}

main span.bg-primary\/10 {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* 3. 商品详情页 (Product Detail) */
main section h1 {
  color: #ffffff !important;
}

/* 详情页价格高亮与红宝石数字 */
main section [class*="text-3xl font-extrabold text-primary"],
main section [class*="text-2xl font-extrabold text-primary"],
main section [class*="text-primary font-bold"],
main section [class*="text-primary font-extrabold"] {
  color: #ef4444 !important;
}

/* 规格选择卡片/胶囊高亮态 */
main section button[class*="border"][class*="rounded"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}
main section button[class*="border"][class*="rounded"]:hover {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}
main section button[class*="border-primary"],
main section button[aria-checked="true"],
main section button[data-state="checked"] {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2) !important;
}

/* 详情页立即购买与加入购物车按钮统一红宝石渐变胶囊 */
main section button.bg-primary,
main section a.bg-primary,
main section button[type="button"].bg-primary,
main section button:has(svg.lucide-shopping-cart),
main section button:has(svg.lucide-zap) {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.45) !important;
  border: 1px solid rgba(254, 202, 202, 0.35) !important;
  transition: all 0.2s ease !important;
}

main section button.bg-primary:hover,
main section a.bg-primary:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #b91c1c 100%) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6) !important;
  transform: translateY(-1px) !important;
}

/* 4. 商城公告页 (Notice Page) */
main div.grid.max-w-\[880px\] button.bg-card,
main div.grid.max-w-\[880px\] a.bg-card {
  background: rgba(17, 20, 32, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  transition: all 0.2s ease !important;
}
main div.grid.max-w-\[880px\] button.bg-card:hover,
main div.grid.max-w-\[880px\] a.bg-card:hover {
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: rgba(23, 27, 43, 0.95) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* 5. 顶栏右侧登录胶囊按钮高保真确保 (即使非 a[href="/auth/login"] 也能准确定位) */
header a[href*="login"],
header a[href*="register"] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  height: 36px !important;
  padding: 0 20px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(254, 202, 202, 0.45) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
header a[href*="login"]:hover,
header a[href*="register"]:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #b91c1c 100%) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.65) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}


/* ==========================================================================
   9. 结账页结算卡片与提交按钮专用样式 (Checkout Summary & Submit Button)
   ========================================================================== */
aside.bg-card {
  background: rgba(18, 18, 22, 0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

/* 结账页支付方式选择按钮 */
aside.bg-card .grid button,
aside.bg-card button:has-text('微信支付'),
aside.bg-card [class*="border-primary"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.2s ease !important;
}

aside.bg-card .grid button img {
  display: inline-block !important;
  margin-right: 8px !important;
}

/* 结账页“提交并支付”主按钮 - 强优先级，确保显眼可见且具备超强点击感 */
aside.bg-card button.bg-primary,
aside.bg-card button.w-full.bg-primary,
aside.bg-card button[type="submit"],
.checkout-panel button[type="submit"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 48px !important;
  width: 100% !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  font-size: 1.05rem !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.5) !important;
  border: 1px solid rgba(254, 202, 202, 0.35) !important;
  cursor: pointer !important;
  margin-top: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  letter-spacing: 0.5px !important;
}

aside.bg-card button.bg-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #b91c1c 100%) !important;
  box-shadow: 0 6px 26px rgba(239, 68, 68, 0.7) !important;
  transform: translateY(-1px) !important;
}

aside.bg-card button.bg-primary:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}


    /* 满血专区商品卡片右上角专属双行角标 (小试7天/30天畅享/无限制使用) */
    .mx-card-corner-badge {
      position: absolute !important;
      top: 14px !important;
      right: 14px !important;
      margin: 0 !important;
      width: auto !important;
      max-width: fit-content !important;
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      background: rgba(248, 113, 113, 0.16) !important;
      color: #f87171 !important;
      border: 1.5px solid rgba(248, 113, 113, 0.45) !important;
      border-radius: 12px !important;
      padding: 0.28rem 0.65rem !important;
      box-shadow: 0 2px 10px rgba(248, 113, 113, 0.25) !important;
      z-index: 10 !important;
      pointer-events: none !important;
      line-height: 1.25 !important;
      transition: all 0.2s ease !important;
    }
    main a.group.bg-card:hover .mx-card-corner-badge {
      position: absolute !important;
      top: 14px !important;
      right: 14px !important;
      margin: 0 !important;
      width: auto !important;
      max-width: fit-content !important;
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      background: rgba(248, 113, 113, 0.16) !important;
      color: #f87171 !important;
      border: 1.5px solid rgba(248, 113, 113, 0.45) !important;
      border-radius: 12px !important;
      padding: 0.28rem 0.65rem !important;
      box-shadow: 0 2px 10px rgba(248, 113, 113, 0.25) !important;
      z-index: 10 !important;
      pointer-events: none !important;
      line-height: 1.25 !important;
      transition: all 0.2s ease !important;
    }
    
/* Strictly hide 图1 two header login entrances: 游客查单 & Gmail 授权登录 */
header a[href*="guest/orders"], 
header a[href*="orders"],
header #header-gmail-auth-btn,
.gmail-nav-btn {
    display: none !important;
}

/* ==========================================================================
   CATEGORY SIDEBAR CARDS (左侧分类卡片 - 确保文字 100% 居中收纳在方框内部)
   ========================================================================== */
aside.shrink-0 button:has(span),
aside.shrink-0 [class*="overflow-x-auto"] > div button,
aside.shrink-0 button {
  height: auto !important;
  min-height: 74px !important;
  border-radius: 22px !important;
  padding: 12px 10px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  overflow: visible !important;
}

/* 激活态（如满血专区）保持优雅红宝石圆角方框，并确保内容完整居中 */
aside.shrink-0 button.bg-primary,
aside.shrink-0 button[class*="bg-primary"],
aside.shrink-0 button:has(span).active,
aside.shrink-0 [class*="overflow-x-auto"] > div:nth-child(2) button {
  height: auto !important;
  min-height: 74px !important;
  border-radius: 22px !important;
  padding: 12px 10px !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  border: 1px solid rgba(254, 202, 202, 0.4) !important;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

aside.shrink-0 button:has(span) span {
  display: block !important;
  text-align: center !important;
  white-space: pre-line !important;
  line-height: 1.25 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 满血专区字号微调以完美置中 */
aside.shrink-0 [class*="overflow-x-auto"] > div:nth-child(2) button span,
aside.shrink-0 button:has(img[alt*="满血"]) span {
  font-size: 22px !important;
  font-weight: 950 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}
aside.shrink-0 [class*="overflow-x-auto"] > div:nth-child(2) button span::first-line,
aside.shrink-0 button:has(img[alt*="满血"]) span::first-line {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
   NOTICE PAGE HORIZONTAL ALIGNMENT (公告列表页水平对齐强化)
   ========================================================================== */
.vault-scope main .my-6,
main .my-6:has(h1),
main div:has(> h1) {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

/* ==========================================================================
   ANNOUNCEMENT MODAL POPUP (进入商城系统公告弹窗 - 2BU Apple-HIG Obsidian)
   ========================================================================== */
div[role="dialog"][aria-labelledby="announcement-modal-title"],
div[role="dialog"]:has(#announcement-modal-title) {
  background: rgba(18, 20, 29, 0.96) !important;
  backdrop-filter: blur(32px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
  border: 1px solid rgba(239, 68, 68, 0.38) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(239, 68, 68, 0.28) !important;
  border-radius: 26px !important;
  max-width: 580px !important;
  animation: announcementModalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes announcementModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

div[role="dialog"] #announcement-modal-title {
  font-size: 1.35rem !important;
  font-weight: 950 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

div[role="dialog"] .theme-prose {
  font-size: 1.02rem !important;
  line-height: 1.85 !important;
  color: #e2e8f0 !important;
  text-align: left !important;
  padding: 6px 2px !important;
}

div[role="dialog"] .theme-prose p {
  margin: 0 !important;
  line-height: 1.85 !important;
  font-weight: 550 !important;
  color: #f1f5f9 !important;
}

div[role="dialog"] button:has-text("关闭"),
div[role="dialog"] [class*="w-full rounded-xl"],
div[role="dialog"] button.bg-primary {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  font-size: 0.95rem !important;
  border-radius: 9999px !important;
  padding: 8px 26px !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
  transition: all 0.2s ease !important;
}

div[role="dialog"] button:has-text("关闭"):hover,
div[role="dialog"] [class*="w-full rounded-xl"]:hover,
div[role="dialog"] button.bg-primary:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6) !important;
}


/* ========================================================
   个人中心顶部快捷入口：超级显著、超级加粗、加大、加长
   ======================================================== */
#personal-center-quick-links,
.personal-center-quick-links {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 18px auto 26px auto !important;
  padding: 16px 26px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.16) 0%, rgba(22, 23, 31, 0.96) 50%, rgba(220, 38, 38, 0.16) 100%) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(239, 68, 68, 0.15) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

.pc-btn-shop,
.pc-btn-workbench {
  height: 52px !important;
  min-width: 180px !important;
  padding: 0 32px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-size: 1.15rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

.pc-btn-shop {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  border: 1.5px solid rgba(254, 202, 202, 0.45) !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
}

.pc-btn-shop:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.12) !important;
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
  border-color: rgba(254, 202, 202, 0.75) !important;
}

.pc-btn-shop:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important;
}

.pc-btn-workbench {
  background: linear-gradient(135deg, #242634 0%, #151620 100%) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 14px rgba(239, 68, 68, 0.18) !important;
}

.pc-btn-workbench:hover {
  transform: translateY(-2px) scale(1.02) !important;
  background: linear-gradient(135deg, #2f3143 0%, #1c1d2b 100%) !important;
  border-color: rgba(239, 68, 68, 0.9) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75), 0 0 20px rgba(239, 68, 68, 0.35) !important;
}

.pc-btn-workbench:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

@keyframes pc-pulse-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 14px #ef4444, 0 0 6px #f87171;
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 22px #ef4444, 0 0 10px #fca5a5;
  }
}

.pulse-dot {
  animation: pc-pulse-glow 2s infinite ease-in-out !important;
}

@media (max-width: 640px) {
  #personal-center-quick-links,
  .personal-center-quick-links {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  .pc-quick-actions {
    width: 100% !important;
    display: flex !important;
    gap: 10px !important;
  }
  .pc-btn-shop,
  .pc-btn-workbench {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    height: 48px !important;
    font-size: 1.05rem !important;
  }
}