/* ════════════════════════════════════════════════════════════════════════
 * Jiguang DEX · Bitget Light 视觉系统 (vFinal-Complete)
 * 日期: 2026-05-28
 *
 * 设计基准: Bitget Wallet 移动端 (浅色 / 大气 / 留白 / 大圆角 / 字体 14px)
 * 主色: #18AFFF (纯色, 无渐变)
 *
 * 引入顺序: main.css → bitget-light.css (最后, 覆盖一切)
 *
 * 强制规则:
 *  1. 默认浅色, html[data-theme="dark"] 才是深色
 *  2. 所有按钮/Logo/导航 = #18AFFF 纯色
 *  3. 卡片白底 + 16-20px 圆角 + 柔和阴影
 *  4. 字体基础 14px
 *  5. 主容器 max-width: 1440px
 * ════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
 * 1. CSS 变量 — Bitget Light Design Tokens
 * ────────────────────────────────────────────────────────────────────── */
:root {
  /* 主品牌色 */
  --bg-primary: #18AFFF;
  --bg-primary-hover: #0E9CE9;
  --bg-primary-active: #0987CC;
  --bg-primary-soft: rgba(24, 175, 255, 0.10);
  --bg-primary-soft-2: rgba(24, 175, 255, 0.16);

  /* 辅助色 */
  --bg-accent: #6FD3FF;
  --bg-accent-2: #22D3EE;
  --bg-accent-mint: #D4F7E7;  /* Bitget 截图中的薄荷绿胶囊底 */

  /* 中性色 — 浅色模式 */
  --bg-bg: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F1F5F9;        /* 输入框/次卡片 */
  --bg-surface-3: #E2E8F0;        /* 三级背景 */
  --bg-text-primary: #0F172A;
  --bg-text-secondary: #64748B;
  --bg-text-tertiary: #94A3B8;
  --bg-border: #E2E8F0;
  --bg-border-soft: #F1F5F9;
  --bg-divider: rgba(148, 163, 184, 0.18);

  /* 语义色 */
  --bg-success: #10B981;
  --bg-success-soft: rgba(16, 185, 129, 0.12);
  --bg-danger: #EF4444;
  --bg-danger-soft: rgba(239, 68, 68, 0.12);
  --bg-warning: #F59E0B;
  --bg-warning-soft: rgba(245, 158, 11, 0.12);

  /* 阴影 */
  --bg-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --bg-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  --bg-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --bg-shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10);
  --bg-shadow-card: 0 2px 12px rgba(15, 23, 42, 0.05);

  /* 圆角 */
  --bg-radius-sm: 8px;
  --bg-radius: 12px;
  --bg-radius-md: 16px;
  --bg-radius-lg: 20px;
  --bg-radius-pill: 9999px;

  /* 间距 */
  --bg-space-xs: 4px;
  --bg-space-sm: 8px;
  --bg-space: 12px;
  --bg-space-md: 16px;
  --bg-space-lg: 24px;
  --bg-space-xl: 32px;

  /* 容器 */
  --bg-container-max: 1440px;

  /* 字体 */
  --bg-font-base: 14px;
  --bg-font-sm: 12px;
  --bg-font-md: 16px;
  --bg-font-lg: 20px;
  --bg-font-xl: 28px;
  --bg-font-2xl: 36px;
  --bg-font-hero: clamp(32px, 5vw, 56px);
}

/* 深色模式备用 (用户主动切换) */
html[data-theme="dark"] {
  --bg-bg: #0B1220;
  --bg-surface: #131A2B;
  --bg-surface-2: #1A2236;
  --bg-surface-3: #232C45;
  --bg-text-primary: #F1F5F9;
  --bg-text-secondary: #94A3B8;
  --bg-text-tertiary: #64748B;
  --bg-border: rgba(148, 163, 184, 0.18);
  --bg-border-soft: rgba(148, 163, 184, 0.10);
  --bg-divider: rgba(148, 163, 184, 0.16);

  --bg-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --bg-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --bg-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ──────────────────────────────────────────────────────────────────────
 * 2. 全局重置 — 覆盖 renderer body bg-deep-950
 * ────────────────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg-bg) !important;
  color: var(--bg-text-primary) !important;
  font-size: var(--bg-font-base) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
               'Microsoft YaHei', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 关闭旧的深色海洋背景 (覆盖) */
.ocean-bg,
#ocean-bg {
  display: none !important;
}
.ocean-toggle {
  display: none !important;
}

/* page-content 容器 */
.page-content {
  background: var(--bg-bg);
  min-height: 100vh;
}

/* 默认链接 */
a {
  color: var(--bg-primary);
  text-decoration: none;
}
a:hover {
  color: var(--bg-primary-hover);
}

/* 文本颜色覆盖 Tailwind 旧深色类 */
.text-gray-100,
.text-gray-200,
.text-gray-300,
.text-white {
  color: var(--bg-text-primary) !important;
}
.text-gray-400,
.text-gray-500 {
  color: var(--bg-text-secondary) !important;
}
.text-gray-600 {
  color: var(--bg-text-tertiary) !important;
}

/* deep-* 背景类全部映射到浅色卡片 */
.bg-deep-950,
.bg-deep-900,
.bg-deep-800 {
  background-color: var(--bg-surface) !important;
}
.bg-deep-700,
.bg-deep-600 {
  background-color: var(--bg-surface-2) !important;
}
.bg-deep-800\/60,
.bg-deep-800\/80,
.bg-deep-800\/90,
.bg-deep-900\/95,
.bg-deep-900\/60 {
  background-color: var(--bg-surface) !important;
}
.border-deep-600,
.border-deep-600\/30,
.border-deep-600\/40,
.border-deep-600\/50,
.border-deep-600\/60 {
  border-color: var(--bg-border) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 3. 容器 — max-width 1440 + 响应式 padding
 * ────────────────────────────────────────────────────────────────────── */
.vf-container,
.bg-container,
.page-content > .page-root {
  width: 100%;
}
.vf-container,
.bg-container {
  max-width: var(--bg-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px) {
  .vf-container, .bg-container { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1280px) {
  .vf-container, .bg-container { padding-left: 32px; padding-right: 32px; }
}

/* ──────────────────────────────────────────────────────────────────────
 * 4. Navbar — 浅色 sticky header
 * ────────────────────────────────────────────────────────────────────── */
nav,
.navbar,
header.navbar,
nav.jdex-nav,
nav.glass-nav {
  position: sticky !important;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bg-border) !important;
  box-shadow: var(--bg-shadow-sm);
}

/* nav-link */
.nav-link {
  color: var(--bg-text-secondary) !important;
  border-radius: var(--bg-radius);
  padding: 8px 12px;
  font-weight: 600;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover {
  color: var(--bg-primary) !important;
  background: var(--bg-primary-soft);
}
.nav-link.active {
  color: var(--bg-primary) !important;
  background: var(--bg-primary-soft) !important;
}

/* nav-chain-status / realtime badge */
.nav-chain-status {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--bg-border) !important;
  color: var(--bg-text-secondary) !important;
}
.realtime-badge {
  background: var(--bg-success-soft);
  color: var(--bg-success);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 4px 8px;
  border-radius: var(--bg-radius-pill);
  font-size: 11px;
  font-weight: 600;
}

/* Brand 文字 */
.brand-text-wordmark,
nav .text-base.font-extrabold {
  color: var(--bg-text-primary) !important;
}
nav .text-\[10px\].text-gray-500.tracking-wider {
  color: var(--bg-text-secondary) !important;
}

/* 主题切换按钮 */
.theme-toggle,
#theme-toggle-btn {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--bg-border) !important;
  color: var(--bg-text-primary) !important;
  border-radius: var(--bg-radius-pill);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.theme-toggle:hover {
  background: var(--bg-primary-soft) !important;
  color: var(--bg-primary) !important;
  border-color: var(--bg-primary) !important;
}
.theme-toggle .icon-sun { display: inline-block; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; }

/* 钱包连接按钮 (主品牌色) */
#wallet-connect-btn {
  background: var(--bg-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--bg-radius-pill);
  padding: 8px 16px;
  font-weight: 700;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(24, 175, 255, 0.25);
}
#wallet-connect-btn:hover {
  background: var(--bg-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 175, 255, 0.35);
}

/* mobile menu btn */
#mobile-menu-btn {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--bg-border) !important;
  color: var(--bg-text-primary) !important;
  border-radius: var(--bg-radius);
}

/* mobile menu drawer */
#mobile-menu {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--bg-border) !important;
}
#mobile-menu .nav-link {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--bg-border) !important;
}
#mobile-menu .nav-link.active {
  background: var(--bg-primary-soft) !important;
  border-color: var(--bg-primary) !important;
  color: var(--bg-primary) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 5. 按钮系统 — 全站统一纯色 #18AFFF
 * ────────────────────────────────────────────────────────────────────── */
.btn,
button.btn {
  font-family: inherit;
  font-size: var(--bg-font-base);
  font-weight: 700;
  border-radius: var(--bg-radius);
  padding: 10px 18px;
  border: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-primary,
.btn.btn-primary,
button.btn-primary,
.jdex-btn-primary,
.jdex-btn.jdex-btn-primary,
.jdex-hero-cta-primary,
.swap-primary-btn,
.vf-btn-primary,
.vf-btn,
.bg-btn-primary {
  background: var(--bg-primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(24, 175, 255, 0.25);
}
.btn-primary:hover,
.btn.btn-primary:hover,
.jdex-btn-primary:hover,
.jdex-hero-cta-primary:hover,
.swap-primary-btn:hover,
.vf-btn-primary:hover,
.vf-btn:hover,
.bg-btn-primary:hover {
  background: var(--bg-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(24, 175, 255, 0.35);
}
.btn-primary:active,
.jdex-btn-primary:active {
  background: var(--bg-primary-active) !important;
  transform: translateY(0);
}
.btn-primary:disabled,
.btn-primary[disabled] {
  background: var(--bg-surface-3) !important;
  color: var(--bg-text-tertiary) !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* 辅助按钮 (描边) */
.btn-secondary,
.jdex-btn-secondary,
.jdex-btn.jdex-btn-secondary,
.vf-btn-secondary,
.bg-btn-secondary {
  background: var(--bg-surface) !important;
  background-image: none !important;
  color: var(--bg-primary) !important;
  border: 1px solid var(--bg-primary) !important;
}
.btn-secondary:hover,
.jdex-btn-secondary:hover,
.vf-btn-secondary:hover,
.bg-btn-secondary:hover {
  background: var(--bg-primary-soft) !important;
}

/* Ghost 按钮 */
.btn-ghost {
  background: transparent !important;
  color: var(--bg-text-secondary) !important;
  border: 0 !important;
}
.btn-ghost:hover {
  background: var(--bg-surface-2) !important;
  color: var(--bg-text-primary) !important;
}

/* 杀死所有渐变按钮 */
.swap-primary-btn,
.jdex-hero-cta-primary,
.jdex-feature-cta,
.swap-flip-btn:hover,
.swap-chain-pill.active,
.hero-search-go,
.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-l,
.bg-gradient-to-tr,
.bg-gradient-to-tl,
.bg-gradient-to-b,
.bg-gradient-to-t {
  background-image: none !important;
}

.hero-search-go {
  background: var(--bg-primary) !important;
  color: #fff !important;
}
.hero-search-go:hover {
  background: var(--bg-primary-hover) !important;
}

.jdex-feature-cta {
  color: var(--bg-primary) !important;
  background: transparent !important;
}

/* swap-chain-pill */
.swap-chain-pill {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--bg-border) !important;
  color: var(--bg-text-primary) !important;
  border-radius: var(--bg-radius-pill);
}
.swap-chain-pill.active {
  background: var(--bg-primary) !important;
  color: #fff !important;
  border-color: var(--bg-primary) !important;
}

/* swap-flip-btn (中间翻转圆) */
.swap-flip-btn {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  color: var(--bg-text-primary) !important;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--bg-shadow);
}
.swap-flip-btn:hover {
  background: var(--bg-surface-2) !important;
  color: var(--bg-primary) !important;
  border-color: var(--bg-primary) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 6. 卡片系统 — 白底 + 大圆角 + 柔和阴影
 * ────────────────────────────────────────────────────────────────────── */
.card,
.bg-card,
.jdex-feature-card,
.jdex-trust-card,
.swap-card,
.swap-side-card,
.market-cta-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--bg-radius-md) !important;
  box-shadow: var(--bg-shadow-card) !important;
  color: var(--bg-text-primary) !important;
  transition: all 0.2s ease;
}
.jdex-feature-card:hover,
.market-cta-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bg-shadow-md) !important;
  border-color: rgba(24, 175, 255, 0.30) !important;
}

/* 二级卡片（输入框背景） */
.bg-surface-2,
.swap-pay-block,
.swap-amount-input {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--bg-border-soft) !important;
  border-radius: var(--bg-radius-md) !important;
  color: var(--bg-text-primary) !important;
}
.swap-amount-input:focus,
input:focus {
  border-color: var(--bg-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--bg-primary-soft);
}

/* ──────────────────────────────────────────────────────────────────────
 * 7. Input / Select
 * ────────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  color: var(--bg-text-primary) !important;
  border-radius: var(--bg-radius);
  padding: 10px 14px;
  font-size: var(--bg-font-base);
  font-family: inherit;
  transition: all 0.15s ease;
}
input::placeholder,
textarea::placeholder {
  color: var(--bg-text-tertiary) !important;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--bg-primary) !important;
  box-shadow: 0 0 0 3px var(--bg-primary-soft);
}

/* hero-search */
.hero-search {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--bg-radius-lg) !important;
  box-shadow: var(--bg-shadow-sm);
}
.hero-search:focus-within {
  border-color: var(--bg-primary) !important;
  box-shadow: 0 0 0 4px var(--bg-primary-soft), var(--bg-shadow);
}
.hero-search input {
  background: transparent !important;
  border: 0 !important;
  color: var(--bg-text-primary) !important;
  box-shadow: none !important;
}
.hero-search input:focus {
  box-shadow: none !important;
}
.hero-search-icon {
  color: var(--bg-primary) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 8. Hero 区 — 浅色大气 (Bitget 风格)
 * ────────────────────────────────────────────────────────────────────── */
.jdex-hero {
  background: linear-gradient(180deg, #F0F9FF 0%, var(--bg-bg) 100%) !important;
  background-image: linear-gradient(180deg, #F0F9FF 0%, var(--bg-bg) 100%) !important;
  padding: 64px 16px 48px !important;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .jdex-hero { padding: 80px 32px 64px !important; }
}
@media (min-width: 1280px) {
  .jdex-hero { padding: 96px 48px 80px !important; }
}

/* 装饰圆环 — 留白大气感 */
.jdex-hero::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(24, 175, 255, 0.08), transparent 70%);
  top: -120px;
  right: -120px;
  pointer-events: none;
}
.jdex-hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(111, 211, 255, 0.10), transparent 70%);
  bottom: -100px;
  left: -100px;
  pointer-events: none;
}

.jdex-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.vf-hero-text {
  max-width: 760px;
  margin: 0 auto;
}
.jdex-hero-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.jdex-hero-logo img {
  height: 64px;
  width: auto;
  filter: none !important;
}
@media (min-width: 768px) {
  .jdex-hero-logo img { height: 80px; }
}

.jdex-hero-title {
  color: var(--bg-text-primary) !important;
  font-size: var(--bg-font-hero) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
  line-height: 1.1 !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--bg-text-primary) !important;
}
.jdex-hero-slogan {
  color: var(--bg-primary) !important;
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  background: none !important;
  -webkit-text-fill-color: var(--bg-primary) !important;
}
.jdex-hero-slogan-en {
  color: var(--bg-text-secondary) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.01em;
}
.jdex-hero-subtitle {
  color: var(--bg-text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  max-width: 600px;
  margin: 0 auto 32px !important;
}
.jdex-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}
.jdex-btn {
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--bg-radius-pill) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.jdex-hero-disclaimer {
  color: var(--bg-text-tertiary) !important;
  font-size: 12px !important;
  margin-top: 8px;
}

/* ──────────────────────────────────────────────────────────────────────
 * 9. Feature Cards (4 大卡片)
 * ────────────────────────────────────────────────────────────────────── */
.jdex-section {
  padding: 48px 16px !important;
  background: transparent !important;
}
@media (min-width: 768px) {
  .jdex-section { padding: 64px 32px !important; }
}

.jdex-section-title {
  color: var(--bg-text-primary) !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 800 !important;
  text-align: center;
  margin-bottom: 8px !important;
  background: none !important;
  -webkit-text-fill-color: var(--bg-text-primary) !important;
}
.jdex-section-subtitle {
  color: var(--bg-text-secondary) !important;
  font-size: 14px !important;
  text-align: center;
  margin-bottom: 32px !important;
}

.jdex-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 640px) { .jdex-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jdex-feature-grid { grid-template-columns: repeat(4, 1fr); } }

.jdex-feature-card {
  padding: 28px 22px !important;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--bg-surface) !important;
}
.jdex-feature-card .jdex-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--bg-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 22px;
  background: var(--bg-primary-soft) !important;
  color: var(--bg-primary) !important;
  background-image: none !important;
}
.jdex-feature-card[data-color="purple"] .jdex-feature-icon {
  background: rgba(139, 92, 246, 0.10) !important;
  color: #8B5CF6 !important;
}
.jdex-feature-card[data-color="cyan"] .jdex-feature-icon {
  background: rgba(34, 211, 238, 0.12) !important;
  color: #0891B2 !important;
}
.jdex-feature-card[data-color="pink"] .jdex-feature-icon {
  background: rgba(236, 72, 153, 0.10) !important;
  color: #DB2777 !important;
}
.jdex-feature-title {
  color: var(--bg-text-primary) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
.jdex-feature-desc {
  color: var(--bg-text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  flex: 1;
}
.jdex-feature-cta {
  color: var(--bg-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ──────────────────────────────────────────────────────────────────────
 * 10. Trust Section (4 列卖点)
 * ────────────────────────────────────────────────────────────────────── */
.jdex-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 640px) { .jdex-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .jdex-trust-grid { grid-template-columns: repeat(4, 1fr); } }

.jdex-trust-card {
  padding: 24px 20px !important;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.jdex-trust-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--bg-radius);
  background: var(--bg-primary-soft) !important;
  color: var(--bg-primary) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.jdex-trust-title {
  color: var(--bg-text-primary) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}
.jdex-trust-desc {
  color: var(--bg-text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 11. Trending / Market 区 (首页表格)
 * ────────────────────────────────────────────────────────────────────── */
.jdex-trending-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.jdex-view-all {
  color: var(--bg-primary) !important;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.home-sticky-header {
  background: var(--bg-bg) !important;
  border: 0 !important;
}
.home-filter-bar > .home-filter-inner,
.home-filter-inner {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--bg-radius-pill) !important;
  padding: 4px !important;
}
.list-tab,
.chain-tab,
.tf-tab {
  background: transparent !important;
  color: var(--bg-text-secondary) !important;
  border-radius: var(--bg-radius-pill) !important;
  font-weight: 600 !important;
}
.list-tab.active,
.chain-tab.active,
.tf-tab.active {
  background: var(--bg-primary) !important;
  color: #fff !important;
}

/* 行情表 */
.data-table,
#market-table table,
.market-table {
  background: var(--bg-surface) !important;
  border: 0 !important;
  color: var(--bg-text-primary) !important;
  width: 100%;
  border-collapse: collapse;
}
.data-table thead,
.market-table thead {
  background: var(--bg-surface-2) !important;
}
.data-table thead th,
.market-table thead th {
  color: var(--bg-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 12px !important;
  border-bottom: 1px solid var(--bg-border) !important;
  text-transform: none;
  letter-spacing: 0;
}
.data-table tbody tr,
.market-table tbody tr {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--bg-border-soft) !important;
  transition: background 0.1s ease;
}
.data-table tbody tr:hover,
.market-table tbody tr:hover {
  background: var(--bg-surface-2) !important;
}
.data-table tbody td,
.market-table tbody td {
  padding: 12px !important;
  color: var(--bg-text-primary) !important;
  font-size: 13px;
  border-color: var(--bg-border-soft) !important;
}

/* 行情卡片包装 */
#market-table.card {
  border-radius: var(--bg-radius-md) !important;
  overflow: hidden;
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
}

/* 涨跌色 */
.text-green-400,
.text-green-500,
.text-emerald-400,
.text-emerald-500 {
  color: var(--bg-success) !important;
}
.text-red-400,
.text-red-500,
.text-rose-400,
.text-rose-500 {
  color: var(--bg-danger) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 12. /market 完整页 (vFinal)
 * ────────────────────────────────────────────────────────────────────── */
.market-page {
  background: var(--bg-bg);
}
.market-title {
  color: var(--bg-text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: var(--bg-text-primary) !important;
}
.market-subtitle {
  color: var(--bg-text-secondary) !important;
}
.market-header-sticky {
  background: var(--bg-bg) !important;
  border-bottom: 1px solid var(--bg-border) !important;
  position: sticky;
  top: 64px;
  z-index: 40;
  padding: 12px 0;
  backdrop-filter: blur(10px);
}
.market-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.market-search {
  flex: 1 1 280px;
  min-width: 240px;
  position: relative;
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--bg-radius-pill) !important;
  display: flex;
  align-items: center;
  padding: 0 16px;
  transition: all 0.15s ease;
}
.market-search:focus-within {
  border-color: var(--bg-primary) !important;
  box-shadow: 0 0 0 3px var(--bg-primary-soft);
}
.market-search i {
  color: var(--bg-text-tertiary);
  font-size: 14px;
  margin-right: 10px;
}
.market-search input {
  background: transparent !important;
  border: 0 !important;
  padding: 10px 0 !important;
  flex: 1;
  outline: none;
  font-size: 14px;
  color: var(--bg-text-primary) !important;
  box-shadow: none !important;
}
.market-search input:focus { box-shadow: none !important; }

.market-chain-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.market-chain-chip {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  color: var(--bg-text-secondary) !important;
  border-radius: var(--bg-radius-pill) !important;
  padding: 6px 12px !important;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.market-chain-chip:hover {
  border-color: var(--bg-primary) !important;
  color: var(--bg-primary) !important;
}
.market-chain-chip.active {
  background: var(--bg-primary) !important;
  color: #fff !important;
  border-color: var(--bg-primary) !important;
}
.market-chain-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.market-demo-banner {
  background: var(--bg-warning-soft) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: #92400E !important;
  padding: 10px 14px !important;
  border-radius: var(--bg-radius) !important;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.market-table-wrap {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--bg-radius-md) !important;
  overflow: hidden;
  margin-top: 12px;
}
.market-token-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.market-token-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-primary-soft);
  color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.market-token-sym {
  color: var(--bg-text-primary);
  font-weight: 700;
  font-size: 14px;
}
.market-num-up { color: var(--bg-success) !important; font-weight: 600; }
.market-num-down { color: var(--bg-danger) !important; font-weight: 600; }
.market-risk-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--bg-radius-pill);
  font-size: 11px;
  font-weight: 700;
}
.market-risk-tag.low {
  background: var(--bg-success-soft);
  color: var(--bg-success);
}
.market-risk-tag.medium {
  background: var(--bg-warning-soft);
  color: #B45309;
}
.market-risk-tag.high {
  background: var(--bg-danger-soft);
  color: var(--bg-danger);
}
.market-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--bg-text-tertiary);
}
.market-empty i {
  font-size: 36px;
  opacity: 0.4;
  margin-bottom: 12px;
  display: block;
}

.market-cta-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .market-cta-row { grid-template-columns: repeat(3, 1fr); }
}
.market-cta-card {
  padding: 24px 20px !important;
  text-decoration: none;
  display: block;
}
.market-cta-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--bg-radius);
  background: var(--bg-primary-soft) !important;
  color: var(--bg-primary) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
}
.market-cta-card-title {
  color: var(--bg-text-primary) !important;
  font-size: 15px !important;
  font-weight: 700;
  margin-bottom: 6px !important;
}
.market-cta-card-desc {
  color: var(--bg-text-secondary) !important;
  font-size: 13px;
  line-height: 1.6;
}
.market-cta-card-enter {
  color: var(--bg-primary) !important;
  font-weight: 700;
  font-size: 13px;
  margin-top: 12px;
  display: inline-block;
}

/* ──────────────────────────────────────────────────────────────────────
 * 13. /swap 跨链闪兑 — Bitget 风格重构
 * ────────────────────────────────────────────────────────────────────── */
.swap-card,
.swap-side-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--bg-radius-lg) !important;
  box-shadow: var(--bg-shadow-card) !important;
  padding: 20px !important;
}
.swap-card-title {
  color: var(--bg-text-primary) !important;
  font-weight: 700;
}
.swap-pay-block {
  background: var(--bg-surface-2) !important;
  border-radius: var(--bg-radius-md) !important;
  border: 1px solid var(--bg-border-soft) !important;
  padding: 18px !important;
  margin-bottom: 12px;
}
.swap-amount-input {
  background: transparent !important;
  border: 0 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  padding: 0 !important;
  color: var(--bg-text-primary) !important;
  width: 100%;
  outline: none !important;
  box-shadow: none !important;
}
.swap-amount-input:focus {
  box-shadow: none !important;
}
.swap-amount-input::placeholder {
  color: var(--bg-text-tertiary) !important;
}
.swap-quote-summary {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--bg-border-soft) !important;
  border-radius: var(--bg-radius) !important;
  padding: 12px !important;
  color: var(--bg-text-secondary) !important;
}
.swap-demo-notice {
  background: var(--bg-warning-soft) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: #92400E !important;
  border-radius: var(--bg-radius) !important;
}

/* swap modal */
.jdex-modal-content,
.swap-modal {
  background: var(--bg-surface) !important;
  color: var(--bg-text-primary) !important;
  border-radius: var(--bg-radius-lg) !important;
  border: 1px solid var(--bg-border) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 14. MobileTabbar — 胶囊式 (Bitget 截图风格)
 * ────────────────────────────────────────────────────────────────────── */
.mobile-tabbar,
#mobile-tabbar,
.tabbar,
[class*="mobile-tabbar"] {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--bg-border) !important;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.05);
  padding: 8px 12px 14px !important;
}
.mobile-tabbar a,
.mobile-tabbar button,
.tabbar a {
  color: var(--bg-text-tertiary) !important;
  background: transparent !important;
  border-radius: var(--bg-radius);
  transition: all 0.15s ease;
}
.mobile-tabbar a.active,
.mobile-tabbar button.active,
.tabbar a.active {
  color: var(--bg-primary) !important;
  background: var(--bg-primary-soft) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 15. Footer
 * ────────────────────────────────────────────────────────────────────── */
footer,
.footer,
[class*="footer"] {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--bg-border) !important;
  color: var(--bg-text-secondary) !important;
}
footer a,
.footer a {
  color: var(--bg-text-secondary) !important;
}
footer a:hover,
.footer a:hover {
  color: var(--bg-primary) !important;
}
footer h3, footer h4, footer .font-bold {
  color: var(--bg-text-primary) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 16. Detect 页
 * ────────────────────────────────────────────────────────────────────── */
.detect-hero {
  background: linear-gradient(180deg, #F0F9FF 0%, var(--bg-bg) 100%) !important;
  padding: 40px 16px !important;
}
.detect-input-wrap {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  border-radius: var(--bg-radius-md) !important;
  box-shadow: var(--bg-shadow-card);
}

/* ──────────────────────────────────────────────────────────────────────
 * 17. 杂项: skeleton / loading / toasts / modals
 * ────────────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-surface-2) 0%,
    var(--bg-surface-3) 50%,
    var(--bg-surface-2) 100%) !important;
  background-size: 200% 100% !important;
  border-radius: var(--bg-radius-sm);
  animation: bg-skeleton 1.5s ease-in-out infinite;
}
@keyframes bg-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 风险横幅 (Footer 上方) */
.risk-banner,
[class*="risk-banner"] {
  background: var(--bg-warning-soft) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: #92400E !important;
}

/* Tab / Filter inline bars */
.home-filter-bar {
  background: transparent !important;
}

/* 链 marquee */
.chain-marquee,
[class*="chain-marquee"] {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--bg-border) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 18. 字体大小全局收紧到 14px (Bitget 截图等效)
 * ────────────────────────────────────────────────────────────────────── */
body, p, span, div, a, button, input, td, th, li {
  font-size: var(--bg-font-base);
}
small, .text-xs, .text-\[11px\], .text-\[10px\] { font-size: 12px; }
h1 { font-size: clamp(24px, 3vw, 32px); }
h2 { font-size: clamp(20px, 2.5vw, 26px); }
h3 { font-size: clamp(16px, 2vw, 20px); }
h4 { font-size: 15px; }
h5 { font-size: 14px; }

/* 大字段保留(金额/Hero) */
.jdex-hero-title { font-size: var(--bg-font-hero) !important; }
.swap-amount-input { font-size: 28px !important; }

/* ──────────────────────────────────────────────────────────────────────
 * 19. 杀掉旧的紫色/青色玻璃效果残留 (覆盖 main.css)
 * ────────────────────────────────────────────────────────────────────── */
.glass,
.glass-nav,
.glass-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--bg-border) !important;
  backdrop-filter: none !important;
}

/* 旧的 jdex-hero-title gradient text 强制覆盖 */
.jdex-hero-title,
.jdex-hero-slogan,
.market-title,
.jdex-section-title,
[class*="gradient-text"] {
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 20. 响应式: 移动端关键调整
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 13px; }
  .jdex-hero { padding: 40px 16px 32px !important; }
  .jdex-hero-logo img { height: 56px; }
  .jdex-feature-card { padding: 20px 16px !important; }
  .jdex-section { padding: 32px 12px !important; }
  .swap-amount-input { font-size: 24px !important; }
  .market-toolbar { flex-direction: column; align-items: stretch; }
  .market-chain-filter { overflow-x: auto; flex-wrap: nowrap; }
}

/* ──────────────────────────────────────────────────────────────────────
 * 21. Layout.tsx 硬编码 Tailwind 深色类 兼容补丁
 *     (Layout.tsx 中部分行内 className 还在用 bg-deep-900 / border-deep-600,
 *      统一在浅色层强制覆盖, 避免回到 Layout.tsx 改 JSX)
 * ────────────────────────────────────────────────────────────────────── */

/* PC 更多下拉浅色 */
#nav-more-dropdown {
  background: #FFFFFF !important;
  border: 1px solid var(--bg-border) !important;
  backdrop-filter: none !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
}
#nav-more-dropdown a {
  color: var(--bg-text-primary) !important;
}
#nav-more-dropdown a:hover {
  background: #F0F9FF !important;
  color: var(--bg-primary) !important;
}

/* 移动菜单浅色 */
#mobile-menu {
  background: #FFFFFF !important;
  border-top: 1px solid var(--bg-border) !important;
  backdrop-filter: none !important;
}
#mobile-menu .nav-link {
  color: var(--bg-text-primary) !important;
}
#mobile-menu .nav-link:hover,
#mobile-menu .nav-link.active {
  background: #F0F9FF !important;
  color: var(--bg-primary) !important;
}
/* 核心工具组高亮区改成浅色青底 */
#mobile-menu .nav-link[style*="rgba(34,211,238"] {
  background: #ECFEFF !important;
  border-color: #A5F3FC !important;
  color: var(--bg-text-primary) !important;
}
#mobile-menu .nav-link[style*="rgba(34,211,238"] i {
  color: var(--bg-primary) !important;
}
#mobile-menu .nav-link[style*="rgba(34,211,238"] span {
  color: var(--bg-text-primary) !important;
}
/* 分区标题颜色 */
#mobile-menu .text-cyan-400\/80,
#mobile-menu .text-gray-500 {
  color: var(--bg-text-secondary) !important;
}

/* nav-chain-status / realtime-badge 浅色 */
.nav-chain-status {
  background: #F0F9FF !important;
  border: 1px solid #BAE6FD !important;
  color: var(--bg-text-secondary) !important;
}
.nav-chain-status span {
  color: var(--bg-text-secondary) !important;
}
.realtime-badge {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: var(--bg-success) !important;
}

/* BrandLogo 文字颜色 (Layout.tsx 用了 text-gray-500 在副标题) */
.brand-logo span:first-of-type {
  color: var(--bg-text-primary) !important;
}
.brand-logo span:last-of-type,
.brand-logo .text-gray-500 {
  color: var(--bg-text-secondary) !important;
}
.brand-logo {
  text-decoration: none !important;
}

/* Footer 全站底部浅色 (Layout 用了 border-deep-600/30 + text-gray-* 内联) */
footer {
  background: #FFFFFF !important;
  border-top: 1px solid var(--bg-border) !important;
  color: var(--bg-text-primary) !important;
}
footer .text-gray-500,
footer .text-gray-600,
footer .text-gray-400 {
  color: var(--bg-text-secondary) !important;
}
footer a {
  color: var(--bg-text-primary) !important;
}
footer a:hover {
  color: var(--bg-primary) !important;
}

/* RiskBanner 浅色 */
.risk-banner,
[class*="risk-banner"] {
  background: #FFF7ED !important;
  border-bottom: 1px solid #FED7AA !important;
  color: #9A3412 !important;
}

/* 通用 Tailwind 深色类批量兜底 (在浅色主题下若元素未被显式样式覆盖, 把背景拉回白) */
html[data-theme="light"] .bg-deep-950,
html[data-theme="light"] .bg-deep-900,
html[data-theme="light"] .bg-deep-800,
html[data-theme="light"] .bg-deep-700,
html[data-theme="light"] [class*="bg-deep-"] {
  background-color: #FFFFFF !important;
}
html[data-theme="light"] [class*="border-deep-"] {
  border-color: var(--bg-border) !important;
}
html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-gray-200,
html[data-theme="light"] .text-gray-300 {
  color: var(--bg-text-primary) !important;
}
html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-gray-500,
html[data-theme="light"] .text-gray-600 {
  color: var(--bg-text-secondary) !important;
}

/* 主题切换按钮浅色化 */
#theme-toggle-btn,
.theme-toggle {
  background: #F0F9FF !important;
  border: 1px solid #BAE6FD !important;
  color: var(--bg-primary) !important;
  border-radius: var(--bg-radius-pill) !important;
  width: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#theme-toggle-btn:hover {
  background: #E0F2FE !important;
}
/* 浅色主题下显示太阳, 隐藏月亮 (深色反过来) */
html[data-theme="light"] #theme-toggle-btn .icon-moon,
html[data-theme="light"] .theme-toggle .icon-moon { display: none !important; }
html[data-theme="light"] #theme-toggle-btn .icon-sun,
html[data-theme="light"] .theme-toggle .icon-sun { display: inline-block !important; }
html[data-theme="dark"] #theme-toggle-btn .icon-sun,
html[data-theme="dark"] .theme-toggle .icon-sun { display: none !important; }
html[data-theme="dark"] #theme-toggle-btn .icon-moon,
html[data-theme="dark"] .theme-toggle .icon-moon { display: inline-block !important; }

/* mobile-menu-btn 浅色 */
#mobile-menu-btn {
  background: #F1F5F9 !important;
  border: 1px solid var(--bg-border) !important;
  color: var(--bg-text-primary) !important;
  border-radius: 10px !important;
}
#mobile-menu-btn:hover {
  background: #E2E8F0 !important;
}

/* 钱包连接按钮 #18AFFF */
#wallet-connect-btn,
#wallet-connect-btn.btn-primary {
  background: var(--bg-primary) !important;
  background-image: none !important;
  border: 0 !important;
  color: #FFFFFF !important;
  border-radius: var(--bg-radius-pill) !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  box-shadow: 0 4px 12px rgba(24, 175, 255, 0.25) !important;
}
#wallet-connect-btn:hover {
  background: var(--bg-primary-hover) !important;
}

/* nav-link 浅色 */
.navbar .nav-link {
  color: var(--bg-text-secondary) !important;
  background: transparent !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 600 !important;
  font-size: 14px;
  transition: all .15s ease;
  text-decoration: none !important;
}
.navbar .nav-link:hover {
  background: #F0F9FF !important;
  color: var(--bg-primary) !important;
}
.navbar .nav-link.active {
  background: #18AFFF1A !important;
  color: var(--bg-primary) !important;
}
.navbar .nav-link.nav-account {
  background: #F1F5F9 !important;
  color: var(--bg-text-primary) !important;
}
.navbar .nav-link.nav-account:hover {
  background: #E2E8F0 !important;
  color: var(--bg-primary) !important;
}

/* lang-switcher mount 容器浅色 (内部组件 js 渲染, 这里只控制外壳) */
.lang-switcher-mount button,
.lang-switcher-mount [class*="dropdown"] {
  background: #F1F5F9 !important;
  border: 1px solid var(--bg-border) !important;
  color: var(--bg-text-primary) !important;
  border-radius: 10px !important;
}

/* page-content 移除最小高度限制下的深色填充 */
.page-content {
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════
 * vFinal-Bitget Light v1.1 (2026-05-28) 高级感升级
 * 三大升级:
 *   ① Hero 科技感渐变 + 大圆光晕 + 文字微高亮 + 3 信任徽章 + 数据条
 *   ② Market 表格 56px 行高 + hover 放大 + 涨跌加粗 + 胶囊操作按钮
 *   ③ Search / Trade / Operation 按钮统一 #18AFFF, hover #0F93D2
 * ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
 * 22. Hero 区高级感升级 (替代 §8 的简单浅色 Hero)
 * ────────────────────────────────────────────────────────────────────── */

/* 主 Hero 容器: 极浅蓝渐变 + 右上巨型柔光圆 + 左下小辅助光 */
.jdex-hero,
.hero,
section.hero {
  background: linear-gradient(135deg, #F8FAFC 0%, #E6F6FF 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 72px 16px 56px !important;
}

/* 右上 600px 主光晕 */
.jdex-hero::before,
.hero::before {
  content: '' !important;
  position: absolute !important;
  top: -20% !important;
  right: -20% !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(24, 175, 255, 0.12) 0%, transparent 70%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 左下辅助小光晕 + 网格线 (科技感) */
.jdex-hero::after,
.hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: -30% !important;
  left: -10% !important;
  width: 420px !important;
  height: 420px !important;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.08) 0%, transparent 70%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Hero 内部所有内容抬到光晕之上 */
.jdex-hero > *,
.hero > * {
  position: relative;
  z-index: 1;
}

/* Hero 主标题: 字号更大 + 微光晕文字阴影 (不要 webkit-gradient 渐变, 维持深色#0F172A) */
.jdex-hero-title,
.hero h1,
.hero-title {
  color: #0F172A !important;
  font-size: clamp(36px, 5.5vw, 60px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 12px rgba(24, 175, 255, 0.10) !important;
  margin-bottom: 16px !important;
}

/* Hero 副标题 */
.jdex-hero-slogan,
.jdex-hero-subtitle,
.hero p {
  color: #475569 !important;
  font-size: clamp(15px, 1.8vw, 18px) !important;
  max-width: 720px !important;
  margin: 0 auto 32px !important;
  line-height: 1.6 !important;
}

/* Hero badge "10条链聚合交易" 高级感升级 */
.jdex-hero-badge,
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(24, 175, 255, 0.25) !important;
  border-radius: 9999px !important;
  color: var(--bg-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(24, 175, 255, 0.08) !important;
  margin-bottom: 24px !important;
}
.jdex-hero-badge::before,
.hero-badge::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--bg-success) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important;
  animation: jdex-pulse-dot 2s ease-in-out infinite !important;
}
@keyframes jdex-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
  50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.05); }
}

/* ──────────────────────────────────────────────────────────────────────
 * 23. 信任徽章三件套 (.jdex-trust-badges)
 *     home.tsx 会插入 3 个 .jdex-trust-item
 * ────────────────────────────────────────────────────────────────────── */
.jdex-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 24px auto 0 !important;
  max-width: 720px !important;
}
.jdex-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
}
.jdex-trust-item:hover {
  border-color: rgba(24, 175, 255, 0.35) !important;
  box-shadow: 0 4px 16px rgba(24, 175, 255, 0.12) !important;
  transform: translateY(-2px) !important;
}
.jdex-trust-item i,
.jdex-trust-item svg {
  color: var(--bg-primary) !important;
  font-size: 14px !important;
}
.jdex-trust-item .trust-num {
  color: var(--bg-primary) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 24. 数据条 (.jdex-stats-bar) - "10+ 主流公链 · 20+ 风险检测点 · 0 资产托管"
 * ────────────────────────────────────────────────────────────────────── */
.jdex-stats-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  max-width: 960px !important;
  margin: 40px auto 0 !important;
  padding: 24px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04) !important;
}
.jdex-stats-bar .stat-item {
  text-align: center !important;
  padding: 0 8px !important;
  position: relative !important;
}
.jdex-stats-bar .stat-item:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 20% !important;
  bottom: 20% !important;
  width: 1px !important;
  background: #E2E8F0 !important;
}
.jdex-stats-bar .stat-num {
  display: block !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 900 !important;
  color: var(--bg-primary) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}
.jdex-stats-bar .stat-label {
  display: block !important;
  font-size: 12px !important;
  color: #64748B !important;
  margin-top: 6px !important;
  font-weight: 500 !important;
}
@media (max-width: 640px) {
  .jdex-stats-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 16px !important; }
  .jdex-stats-bar .stat-item:nth-child(2)::after { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
 * 25. Market 表格大气化 (覆盖 §13)
 *     - 行高 56px, hover 浅蓝 + 轻微放大
 *     - 涨跌颜色加粗加深
 *     - 交易按钮胶囊形 #18AFFF
 * ────────────────────────────────────────────────────────────────────── */

/* 表格容器: 白底大圆角 + 阴影 */
.market-table-wrap,
#market-table-wrap,
.home-market-table-wrap {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
}

/* 表头浅色背景 + 阴影下分隔 */
.market-table thead,
#market-table thead,
table.market-table thead,
.home-market-table thead {
  background: #F8FAFC !important;
}
.market-table thead th,
#market-table thead th,
.home-market-table thead th {
  color: #64748B !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* 行: 56px 高 + 平滑过渡 */
.market-table tbody tr,
#market-table tbody tr,
.home-market-table tbody tr {
  background: #FFFFFF !important;
  border-bottom: 1px solid #F1F5F9 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.market-table tbody tr:hover,
#market-table tbody tr:hover,
.home-market-table tbody tr:hover {
  background: #F0F9FF !important;
  transform: scale(1.005) !important;
  box-shadow: 0 4px 16px rgba(24, 175, 255, 0.08) !important;
  z-index: 1 !important;
  position: relative !important;
}
.market-table tbody td,
#market-table tbody td,
.home-market-table tbody td {
  padding: 0 16px !important;
  height: 56px !important;
  color: #0F172A !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  vertical-align: middle !important;
}

/* 交易对名 + 代币图标: 更大更显眼 */
.market-table tbody .pair-cell,
.market-table tbody .token-cell,
.home-market-table tbody .pair-cell {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}
.market-table tbody img.token-icon,
.home-market-table tbody img.token-icon,
.market-table tbody .token-cell img,
.home-market-table tbody .token-cell img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
}

/* 价格列: 数字字体 + 加粗 */
.market-table tbody .price-cell,
.market-table tbody td.price,
.home-market-table tbody .price-cell {
  font-variant-numeric: tabular-nums !important;
  font-weight: 700 !important;
  color: #0F172A !important;
}

/* 涨跌: 绿涨 #10B981 / 红跌 #EF4444 加粗 + 背景轻色块 */
.market-table tbody .change-up,
.market-table tbody .price-up,
.market-table tbody .up,
.home-market-table tbody .change-up,
.text-green-500.font-bold,
[class*="positive"].pct,
td.pct.up {
  color: #10B981 !important;
  font-weight: 800 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  font-variant-numeric: tabular-nums !important;
}
.market-table tbody .change-down,
.market-table tbody .price-down,
.market-table tbody .down,
.home-market-table tbody .change-down,
.text-red-500.font-bold,
[class*="negative"].pct,
td.pct.down {
  color: #EF4444 !important;
  font-weight: 800 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  font-variant-numeric: tabular-nums !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 26. Search / Trade / Operation 按钮统一品牌色 (#18AFFF / hover #0F93D2)
 * ────────────────────────────────────────────────────────────────────── */

/* 搜索按钮 - 所有变体 */
.search-btn,
.hero-search-go,
#hero-search-go,
button.search-btn,
.btn-search,
.search-submit,
.market-search-btn,
#market-search-btn {
  background-color: #18AFFF !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(24, 175, 255, 0.22) !important;
}
.search-btn:hover,
.hero-search-go:hover,
#hero-search-go:hover,
.btn-search:hover,
.search-submit:hover,
.market-search-btn:hover,
#market-search-btn:hover {
  background-color: #0F93D2 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(15, 147, 210, 0.32) !important;
}

/* 行情/交易表 交易按钮 - 全部胶囊形 #18AFFF */
.trade-btn,
.market-trade-btn,
.operation-btn,
.home-trade-btn,
button.trade-btn,
a.trade-btn,
.market-action-btn,
.market-table .action-btn,
.home-market-table .action-btn,
td.actions a,
td.actions button {
  background-color: #18AFFF !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 9999px !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(24, 175, 255, 0.18) !important;
}
.trade-btn:hover,
.market-trade-btn:hover,
.operation-btn:hover,
.home-trade-btn:hover,
.market-action-btn:hover,
.market-table .action-btn:hover,
.home-market-table .action-btn:hover,
td.actions a:hover,
td.actions button:hover {
  background-color: #0F93D2 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(15, 147, 210, 0.32) !important;
}

/* "检测"按钮副品牌 (浅蓝边框版, 用于 Market 行检测) */
.detect-btn,
.market-detect-btn,
.home-detect-btn,
.market-action-btn.secondary {
  background-color: #FFFFFF !important;
  color: #18AFFF !important;
  border: 1px solid #BAE6FD !important;
  border-radius: 9999px !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.detect-btn:hover,
.market-detect-btn:hover,
.home-detect-btn:hover,
.market-action-btn.secondary:hover {
  background-color: #F0F9FF !important;
  border-color: #18AFFF !important;
  color: #0F93D2 !important;
  transform: translateY(-1px) !important;
}

/* 主按钮 hover 全站统一深色 #0F93D2 (覆盖 --bg-primary-hover) */
:root { --bg-primary-hover: #0F93D2 !important; }
.btn-primary:hover,
.swap-primary-btn:hover,
.jdex-hero-cta-primary:hover,
.jdex-feature-cta:hover,
#wallet-connect-btn:hover {
  background-color: #0F93D2 !important;
  background-image: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 27. Header REAL-TIME 徽章高级感 + 玻璃化 sticky navbar
 * ────────────────────────────────────────────────────────────────────── */

.navbar {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 4px 24px rgba(15, 23, 42, 0.04) !important;
}

/* REAL-TIME 徽章高级化 */
.realtime-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 11px !important;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%) !important;
  border: 1px solid #A7F3D0 !important;
  color: #047857 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
}
.realtime-badge::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  animation: jdex-pulse-dot 1.6s ease-in-out infinite !important;
}

/* 链状态条 (10 链) 高级感 */
.nav-chain-status {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%) !important;
  border: 1px solid #BAE6FD !important;
}
.nav-chain-status .dot-live {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--bg-primary) !important;
  box-shadow: 0 0 0 3px rgba(24, 175, 255, 0.2) !important;
  display: inline-block !important;
  animation: jdex-pulse-dot 1.6s ease-in-out infinite !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 28. Feature Cards 高级感升级 (Hero 下方 4 个特性卡)
 * ────────────────────────────────────────────────────────────────────── */
.jdex-feature-card,
.feature-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.jdex-feature-card::before,
.feature-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #18AFFF 0%, #6FD3FF 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}
.jdex-feature-card:hover,
.feature-card:hover {
  border-color: rgba(24, 175, 255, 0.3) !important;
  box-shadow: 0 12px 32px rgba(24, 175, 255, 0.12) !important;
  transform: translateY(-4px) !important;
}
.jdex-feature-card:hover::before,
.feature-card:hover::before {
  opacity: 1 !important;
}
.jdex-feature-card .icon-wrap,
.jdex-feature-card-icon,
.feature-card .icon-wrap {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #E6F6FF 0%, #BAE6FD 100%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bg-primary) !important;
  font-size: 24px !important;
  margin-bottom: 16px !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 29. Footer 安全认证条
 * ────────────────────────────────────────────────────────────────────── */
.jdex-security-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 20px 16px !important;
  margin: 24px auto 0 !important;
  max-width: 1200px !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
.jdex-security-strip .sec-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #64748B !important;
  font-weight: 600 !important;
}
.jdex-security-strip .sec-item i {
  color: var(--bg-primary) !important;
  font-size: 16px !important;
}

/* ══════════════════════════════════════════════════════════════════════
 * vFinal v1.2 (2026-05-28) 移动端深度改造
 *   ① 杀绝所有绿色 (#10B981 / green / emerald → 蓝色)
 *   ② Logo 纯文字化 (倾斜艺术英文 + 锋刃 X)
 *   ③ Hero / 检测页 / 闪兑页 多余文案隐藏
 *   ④ /market 顶栏吸顶 + 去排名列 + 蓝色椭圆交易按钮
 *   ⑤ Tabbar 中心按钮闪电改蓝色
 *   ⑥ 仅首页保留 Features + Footer + RiskBanner, 其他页 footer 隐藏
 * ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
 * 30. 杀绝绿色 (全局)
 *     注: 上涨数据保留 #10B981 绿色 (金融语义), 其余 UI 一律改蓝
 * ────────────────────────────────────────────────────────────────────── */

/* Tabbar 中心按钮 (mobile-tab-swap-btn) 强制蓝色, 不再绿色 */
.mobile-tabbar .mobile-tab-swap-btn,
.mobile-tab-swap .mobile-tab-swap-btn,
.mobile-tab.mobile-tab-swap .mobile-tab-swap-btn {
  background: linear-gradient(135deg, #18AFFF 0%, #0F93D2 100%) !important;
  background-image: linear-gradient(135deg, #18AFFF 0%, #0F93D2 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(24, 175, 255, 0.4), 0 0 0 4px rgba(255, 255, 255, 1) !important;
  border: 0 !important;
}
.mobile-tabbar .mobile-tab-swap-btn i,
.mobile-tab-swap .mobile-tab-swap-btn i {
  color: #FFFFFF !important;
}
.mobile-tabbar .mobile-tab-swap.active .mobile-tab-swap-btn {
  background: linear-gradient(135deg, #0F93D2 0%, #18AFFF 100%) !important;
}

/* Hero badge 脉冲点 改蓝色 */
.jdex-hero-badge::before,
.hero-badge::before {
  background: var(--bg-primary) !important;
  box-shadow: 0 0 0 4px rgba(24, 175, 255, 0.15) !important;
}

/* REAL-TIME 徽章 改蓝色版本 */
.realtime-badge {
  background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%) !important;
  border: 1px solid #7DD3FC !important;
  color: #0369A1 !important;
}
.realtime-badge::before {
  background: #18AFFF !important;
  box-shadow: 0 0 0 3px rgba(24, 175, 255, 0.25) !important;
}

/* Footer Live 标签 / 各处绿色徽章 → 蓝色 */
.text-green-500,
.text-green-400,
.text-emerald-500,
.text-emerald-400,
[class*="text-green"]:not(.market-table *):not(td):not(.pct):not(.up):not(.change-up):not(.price-up),
[class*="text-emerald"]:not(.market-table *) {
  color: var(--bg-primary) !important;
}
.bg-green-500,
.bg-emerald-500,
.bg-green-400,
.bg-emerald-400 {
  background-color: var(--bg-primary) !important;
}
.border-green-500,
.border-emerald-500,
.border-green-400,
.border-emerald-400 {
  border-color: var(--bg-primary) !important;
}

/* 检测页 "开始检测" / "detect.start" 按钮 改纯蓝 */
.detect-submit,
#detect-submit,
.detect-start-btn,
button[data-i18n*="detect.start"],
button[data-i18n*="detect.btn"],
.detect-btn-primary {
  background: var(--bg-primary) !important;
  background-image: none !important;
  background-color: var(--bg-primary) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
}
.detect-submit:hover,
#detect-submit:hover {
  background-color: #0F93D2 !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 31. Logo 纯文字化 + 艺术倾斜字体 + 锋刃 X
 *     替代 Brand 组件中的 img+文字 双段视觉, 把图片隐藏只留艺术字
 * ────────────────────────────────────────────────────────────────────── */

/* 隐藏 Navbar 中 Brand 组件的 img (Logo 改为纯文字) */
.brand-logo img.brand-logo-mark,
.navbar .brand-logo img {
  display: none !important;
}

/* Brand Logo 整体: 把"Jiguang / JIGUANG DEX"上下两行 → 单行艺术字 */
.brand-logo {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
/* 覆盖 Tailwind 的 .flex-col, 强制单行 row 排列 */
.brand-logo > div,
.brand-logo > div.flex,
.brand-logo > div.flex-col {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* 主字 "Jiguang" */
.brand-logo > div > span:first-child,
.brand-logo > div.flex > span:first-child {
  font-family: 'Georgia', 'Cambria', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  background: linear-gradient(135deg, #6FD3FF 0%, #18AFFF 50%, #0F93D2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  position: relative !important;
}
/* 副字 "JIGUANG DEX" → 替换成锋刃 "X" (用 CSS 内容覆盖) */
.brand-logo > div > span:last-child,
.brand-logo > div.flex > span:last-child {
  display: inline-block !important;
  font-family: 'Bebas Neue', 'Anton', 'Arial Black', 'Helvetica', sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 28px !important;
  background: linear-gradient(135deg, #0F93D2 0%, #18AFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin-left: 4px !important;
  font-variant: normal !important;
  transform: skewX(-12deg) !important;
  transform-origin: bottom left !important;
  text-shadow: 0 2px 8px rgba(24, 175, 255, 0.2) !important;
  /* 把 "JIGUANG DEX" 文本完全隐藏, 用 ::after 注入锋刃 X */
  font-size: 0 !important;
}
.brand-logo > div > span:last-child::after,
.brand-logo > div.flex > span:last-child::after {
  content: 'X' !important;
  display: inline-block !important;
  font-family: 'Bebas Neue', 'Anton', 'Impact', 'Arial Black', sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  background: linear-gradient(135deg, #0F93D2 0%, #18AFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: -0.02em !important;
  position: relative !important;
}
/* 主字 "Jiguang" 后追加 " DE" 来构成 "Jiguang DEX" 视觉 */
.brand-logo > div > span:first-child::after,
.brand-logo > div.flex > span:first-child::after {
  content: ' DE' !important;
  font-family: 'Georgia', 'Cambria', serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  background: linear-gradient(135deg, #6FD3FF 0%, #18AFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -0.01em !important;
}

/* Hero 区主 Logo 图片 → 也隐藏, 改为纯文字标题 */
.jdex-hero-logo {
  display: none !important;
}
.jdex-hero-logo img {
  display: none !important;
}

/* Hero 主标题(Jiguang DEX) 升级为艺术字 */
.jdex-hero-title {
  font-family: 'Georgia', 'Cambria', serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #6FD3FF 0%, #18AFFF 40%, #0F93D2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  display: inline-block !important;
  letter-spacing: -0.02em !important;
}
/* Hero 标题中的 "X" 替换成更锋刃版本 (通过把 "Jiguang DEX" 拆开) */
.jdex-hero-title {
  position: relative;
}

/* ──────────────────────────────────────────────────────────────────────
 * 32. 首页 / 瘦身: 去掉 10 链滚动条 (ChainMarquee)
 * ────────────────────────────────────────────────────────────────────── */
.chain-marquee,
.chain-marquee-wrap,
.ChainMarquee,
[class*="chain-marquee"],
[class*="ChainMarquee"] {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 33. /market 行情页瘦身 + 吸顶 + 去排名列
 * ────────────────────────────────────────────────────────────────────── */

/* 行情页顶栏(搜索 + tabs + 链筛选)全部吸顶 */
html[data-page="market"] .market-toolbar,
body .market-toolbar,
.market-page-header,
.market-sticky-header,
#market-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 12px 16px !important;
}

/* /market 页 Hero / banner / 介绍文案 隐藏 */
html[data-page="market"] .jdex-section-subtitle,
html[data-page="market"] .market-demo-banner,
.market-banner,
.market-intro,
.market-hero,
.market-page-hero {
  display: none !important;
}

/* v1.2 patch2: 移动端隐藏 /market 页的大标题 "行情" 和副标题
   PC 端保留, 不影响桌面观感 */
@media (max-width: 768px) {
  html[data-page="market"] .market-header,
  html[data-page="market"] .market-title,
  html[data-page="market"] .market-subtitle {
    display: none !important;
  }
}

/* 行情表格: 去掉排名列 (第一列) + token logo 左移 */
.market-table thead th:first-child,
.home-market-table thead th:first-child,
#market-table thead th:first-child,
.market-table tbody td:first-child,
.home-market-table tbody td:first-child,
#market-table tbody td:first-child,
table.market-table thead th.rank-col,
table.market-table tbody td.rank-col,
.rank-cell,
.market-rank,
.token-rank,
[data-col="rank"] {
  display: none !important;
}

/* 移动端 /market: 行高紧凑 + 文字尺寸调整 */
@media (max-width: 768px) {
  .market-table tbody td,
  .home-market-table tbody td,
  #market-table tbody td {
    height: 64px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
  .market-table tbody img.token-icon,
  .home-market-table tbody img.token-icon {
    width: 36px !important;
    height: 36px !important;
  }
  /* 表格首列 (本来是 rank) 隐藏后, 让代币列吃满左 padding */
  .market-table thead th:nth-child(2),
  .market-table tbody td:nth-child(2),
  .home-market-table tbody td:nth-child(2) {
    padding-left: 16px !important;
  }
}

/* 移动端交易按钮: 椭圆胶囊 + 纯蓝, 不要绿色不要方形不要闪电 */
@media (max-width: 768px) {
  .market-table .action-btn,
  .home-market-table .action-btn,
  .trade-btn,
  .market-trade-btn,
  td.actions a,
  td.actions button {
    padding: 6px 16px !important;
    font-size: 12px !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #18AFFF 0%, #0F93D2 100%) !important;
    background-color: #18AFFF !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(24, 175, 255, 0.3) !important;
  }
  /* 隐藏交易按钮里的闪电 icon */
  .market-table .action-btn i.fa-bolt,
  .home-market-table .action-btn i.fa-bolt,
  .trade-btn i.fa-bolt,
  .market-trade-btn i.fa-bolt {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * 34. /swap 闪兑页瘦身
 *     - 移动端隐藏 Hero 文案 (多链聚合 Swap / 标语 / 描述)
 *     - 卡片缩窄 + 居中
 *     - 头栏固定
 *     - 闪电翻转按钮改蓝色
 * ────────────────────────────────────────────────────────────────────── */

/* 移动端 /swap 隐藏 Hero 文案区 */
@media (max-width: 768px) {
  html[data-page="swap"] .swap-hero,
  html[data-page="swap"] .swap-page-hero,
  html[data-page="swap"] .jdex-hero,
  html[data-page="swap"] .swap-intro,
  .swap-hero-title,
  .swap-hero-subtitle,
  .swap-hero-tagline,
  .swap-hero-desc,
  .swap-page-title,
  .swap-page-subtitle {
    display: none !important;
  }
}

/* 闪兑卡片缩窄居中, 移动端最大 380px */
.swap-card,
.swap-panel,
.swap-container {
  max-width: 480px !important;
  margin: 16px auto !important;
}
@media (max-width: 768px) {
  .swap-card,
  .swap-panel,
  .swap-container {
    max-width: 100% !important;
    margin: 12px 8px !important;
  }
}

/* 中间翻转按钮: 全部蓝色, 不要绿色 */
.swap-flip-btn,
.swap-switch-btn,
#swap-flip,
.flip-direction-btn,
button.swap-flip,
.swap-arrow-btn {
  background: linear-gradient(135deg, #18AFFF 0%, #0F93D2 100%) !important;
  background-color: #18AFFF !important;
  color: #FFFFFF !important;
  border: 4px solid #FFFFFF !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(24, 175, 255, 0.35) !important;
}
.swap-flip-btn i,
.swap-switch-btn i,
#swap-flip i,
.flip-direction-btn i,
.swap-arrow-btn i {
  color: #FFFFFF !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 35. /detect 检测页瘦身
 *     - 移动端隐藏 Hero / 统计卡 / 介绍文案
 *     - 头栏吸顶
 * ────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  html[data-page="detect"] .detect-hero,
  html[data-page="detect"] .jdex-hero,
  html[data-page="detect"] .detect-badge,
  html[data-page="detect"] .detect-title,
  html[data-page="detect"] .detect-subtitle,
  html[data-page="detect"] .detect-intro,
  html[data-page="detect"] .detect-stats,
  html[data-page="detect"] .detect-stats-row,
  html[data-page="detect"] .detect-stat-card,
  .detect-stats-grid,
  .detect-page-hero,
  .detect-hero-title,
  .detect-hero-desc {
    display: none !important;
  }
}

/* 检测页输入区吸顶 (mobile only) */
@media (max-width: 768px) {
  html[data-page="detect"] .detect-search-card,
  html[data-page="detect"] .detect-input-wrap,
  html[data-page="detect"] .detect-form,
  html[data-page="detect"] #detect-input-section {
    position: sticky !important;
    top: 56px !important;  /* leave room for navbar */
    z-index: 20 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }
  /* detect badge "Risks Detected" 也用蓝色 */
  html[data-page="detect"] .gradient-text-green {
    background: linear-gradient(135deg, #6FD3FF 0%, #18AFFF 50%, #0F93D2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
 * 36. 只在首页保留 Footer / RiskBanner / 平台介绍
 *     其他 4 个 Tab 页 (/market /swap /detect /account) 隐藏 footer
 * ────────────────────────────────────────────────────────────────────── */

/* 默认隐藏 Footer + RiskBanner */
html[data-page="market"] footer,
html[data-page="market"] .risk-banner,
html[data-page="market"] [class*="risk-banner"],
html[data-page="swap"] footer,
html[data-page="swap"] .risk-banner,
html[data-page="swap"] [class*="risk-banner"],
html[data-page="detect"] footer,
html[data-page="detect"] .risk-banner,
html[data-page="detect"] [class*="risk-banner"],
html[data-page="account"] footer,
html[data-page="account"] .risk-banner,
html[data-page="account"] [class*="risk-banner"],
html[data-page="ai-agent"] footer,
html[data-page="ai-agent"] .risk-banner,
html[data-page="ai-agent"] [class*="risk-banner"] {
  display: none !important;
}

/* 我的页面 (account) 上下交换在 JSX 层处理, 这里只兜底隐藏介绍 */
html[data-page="account"] .account-intro,
html[data-page="account"] .account-platform-desc,
html[data-page="account"] .account-about,
html[data-page="account"] .jdex-section-subtitle {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 37. Tabbar 移动端样式收紧 (5 格更紧凑 + 中心按钮更突出)
 * ────────────────────────────────────────────────────────────────────── */
.mobile-tabbar {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(226, 232, 240, 0.6) !important;
  box-shadow: 0 -2px 24px rgba(15, 23, 42, 0.06) !important;
}
.mobile-tab {
  color: #64748B !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 4px !important;
  flex: 1 1 0% !important;
}
.mobile-tab i {
  font-size: 18px !important;
  color: #64748B !important;
}
.mobile-tab.active {
  color: var(--bg-primary) !important;
}
.mobile-tab.active i {
  color: var(--bg-primary) !important;
}

/* Tabbar 中心按钮 (闪兑) 上突 */
.mobile-tab-swap {
  position: relative !important;
}
.mobile-tab-swap .mobile-tab-swap-btn {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  margin-top: -22px !important;
  position: relative !important;
}
.mobile-tab-swap span:last-child {
  color: var(--bg-primary) !important;
}

/* 关键 fix: Tabbar 不该跟着深色 ChainMarquee + 顶导航一块隐藏 */
.mobile-tabbar { display: flex !important; }

/* ──────────────────────────────────────────────────────────────────────
 * 38. /account 页面重排
 *     - 钱包/资产区 (.account-wallet-block) 上移
 *     - 用户中心快捷区 (.account-user-center) 下移
 *     使用 flex-direction:column-reverse + JSX order 调整组合实现
 *     由于这两块在 JSX 中是顺序：[user-center, guest-view 或 user-view],
 *     用 column-reverse 翻转后变成 [user-view, user-center]
 * ────────────────────────────────────────────────────────────────────── */

html[data-page="account"] .max-w-\[1200px\] {
  /* 让 h1 + user-center + wallet-block 都参与 flex */
  display: flex !important;
  flex-direction: column !important;
}
html[data-page="account"] .max-w-\[1200px\] > h1 {
  order: 0 !important;
}
html[data-page="account"] .max-w-\[1200px\] > .account-wallet-block,
html[data-page="account"] .max-w-\[1200px\] > #guest-view,
html[data-page="account"] .max-w-\[1200px\] > #user-view {
  order: 1 !important;  /* 钱包区上移, 紧跟标题 */
}
html[data-page="account"] .max-w-\[1200px\] > .account-user-center {
  order: 2 !important;  /* 快捷区下移 */
  margin-top: 24px !important;
}

/* 隐藏 account 页可能的"平台介绍" intro 文案 (如果存在) */
html[data-page="account"] .account-intro,
html[data-page="account"] .account-platform-desc,
html[data-page="account"] .account-about,
html[data-page="account"] .jdex-section-subtitle {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 39. ChainMarquee + 中心 swap 按钮颜色巩固 (kill green final pass)
 *     上一版 §30 已写, 但 .text-green-300 / .from-green-* 这类 Tailwind class
 *     在 account.tsx / detect.tsx / swap.tsx 大量出现, 这里做最终覆盖
 * ────────────────────────────────────────────────────────────────────── */

/* account 钱包身份卡 chain badge 绿色 → 蓝色 */
html[data-page="account"] .badge-green,
html[data-page="account"] [class*="bg-green-500"],
html[data-page="account"] [class*="from-green-500"],
html[data-page="account"] [class*="to-green-500"],
html[data-page="account"] [class*="border-green-500"] {
  background-color: rgba(24, 175, 255, 0.12) !important;
  border-color: rgba(24, 175, 255, 0.35) !important;
}
html[data-page="account"] .text-green-300,
html[data-page="account"] .text-green-400,
html[data-page="account"] .text-green-500 {
  color: #18AFFF !important;
}
/* detect badge 蓝色 */
html[data-page="detect"] [class*="bg-green-500"],
html[data-page="detect"] [class*="border-green-500"] {
  background-color: rgba(24, 175, 255, 0.10) !important;
  border-color: rgba(24, 175, 255, 0.30) !important;
}
html[data-page="detect"] .text-green-300,
html[data-page="detect"] .text-green-400,
html[data-page="detect"] .text-emerald-300,
html[data-page="detect"] .text-emerald-400 {
  color: #18AFFF !important;
}
/* 全局: emerald 系列也清掉 */
.bg-emerald-500\/10, .bg-emerald-500\/15, .bg-emerald-500\/20,
.border-emerald-500\/30, .border-emerald-500\/40 {
  background-color: rgba(24, 175, 255, 0.10) !important;
  border-color: rgba(24, 175, 255, 0.30) !important;
}
.text-emerald-300, .text-emerald-400 { color: #18AFFF !important; }

/* gradient-text-green → gradient-text-blue */
.gradient-text-green {
  background: linear-gradient(135deg, #6FD3FF 0%, #18AFFF 50%, #0F93D2 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 40. v1.2 hotfix-1 (post-deploy 截图修正):
 *     A) Logo: 强制 row + nowrap, 防止 .flex-col 让 X 跑到第二行
 *     B) /market: 移动端隐藏大标题 + chip 区域横向滚动 + 表格 border-radius 压扁
 *     C) /account: "用户中心" 标题 gradient-text → 蓝色 (kill green badge)
 *     D) Footer 在 /market /swap /detect /account /ai-agent 上隐藏 (再加固一遍)
 * ────────────────────────────────────────────────────────────────────── */

/* A) Logo 加固: 不管父 div 是什么 class, 强制单行 */
.brand-logo,
.brand-logo > * {
  white-space: nowrap !important;
}
.brand-logo > div {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* B-1) /market 移动端: 链 chip 容器横向滚动, 避免占用过多垂直空间 */
@media (max-width: 768px) {
  html[data-page="market"] .market-chain-filter {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    width: 100% !important;
  }
  html[data-page="market"] .market-chain-filter::-webkit-scrollbar { display: none !important; }
  html[data-page="market"] .market-chain-chip {
    flex-shrink: 0 !important;
  }
  /* market-toolbar 改为垂直堆: 搜索一行 + chip 一行 */
  html[data-page="market"] .market-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  /* 表格容器圆角压扁, 让骨架不再"椭圆化" */
  html[data-page="market"] .market-table-wrap {
    border-radius: 12px !important;
    margin-top: 8px !important;
  }
  /* market-header-sticky 内 padding 收紧 */
  html[data-page="market"] .market-header-sticky {
    padding: 8px 12px !important;
  }
  /* CTA 区域在移动端隐藏 (项目方服务 3 张卡) */
  html[data-page="market"] .market-cta-section {
    display: none !important;
  }
}

/* C) /account "用户中心" 标题 gradient-text 在 light 主题下确认是蓝色而非绿色 */
html[data-page="account"] h1 .gradient-text,
html[data-page="account"] .gradient-text {
  background: linear-gradient(135deg, #6FD3FF 0%, #18AFFF 50%, #0F93D2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* D) Footer 隐藏加固 — 涵盖 footer + footer.mt-16 + body > footer 等 */
html[data-page="market"] body footer,
html[data-page="market"] footer.mt-16,
html[data-page="swap"] body footer,
html[data-page="swap"] footer.mt-16,
html[data-page="detect"] body footer,
html[data-page="detect"] footer.mt-16,
html[data-page="account"] body footer,
html[data-page="account"] footer.mt-16,
html[data-page="ai-agent"] body footer,
html[data-page="ai-agent"] footer.mt-16 {
  display: none !important;
}

/* E) market-cta-section 在桌面端保留, 移动端在 §40 B-1 已隐藏 */
/* F) Tabbar 中心闪兑按钮不能被 logo X 的 ::after 文字遮挡 — Tabbar z-index 提到顶层 */
.mobile-tabbar {
  z-index: 1000 !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * 41. v1.2 Stage A: /market 子 Tab 分类样式
 *     - 横向滚动行
 *     - active 蓝色下划线
 * ────────────────────────────────────────────────────────────────────── */

.market-subtabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 0 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}
.market-subtabs::-webkit-scrollbar { display: none; }

.market-subtab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: #64748B;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
}
.market-subtab i { font-size: 12px; opacity: 0.7; }

.market-subtab:hover {
  color: #18AFFF;
}

.market-subtab.active {
  color: #0F93D2;
}
.market-subtab.active i { opacity: 1; }
.market-subtab.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6FD3FF 0%, #18AFFF 50%, #0F93D2 100%);
}

/* 移动端: padding 更紧凑 */
@media (max-width: 768px) {
  .market-subtabs {
    margin-top: 8px;
    gap: 2px;
  }
  .market-subtab {
    padding: 9px 10px;
    font-size: 13px;
  }
  .market-subtab i { display: none; }  /* 移动端只显示文字, 节省横向空间 */
}

/* ──────────────────────────────────────────────────────────────────────
 * 42. v1.2 Stage B: Navbar 极简钱包图标 + /account 设置中心样式
 * ────────────────────────────────────────────────────────────────────── */

/* 极简钱包图标 (替代原 .btn.btn-primary 大按钮) */
.navbar-wallet-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(24, 175, 255, 0.10) 0%, rgba(15, 147, 210, 0.06) 100%);
  border: 1px solid rgba(24, 175, 255, 0.25);
  color: #0F93D2;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.navbar-wallet-icon:hover {
  background: linear-gradient(135deg, rgba(24, 175, 255, 0.18) 0%, rgba(15, 147, 210, 0.10) 100%);
  border-color: rgba(24, 175, 255, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 175, 255, 0.18);
}
.navbar-wallet-icon i {
  font-size: 15px;
}
/* 状态点 - 默认灰色 (未连), 已连时 .connected 给绿色 */
.navbar-wallet-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94A3B8;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
  transition: background 0.2s ease;
}
.navbar-wallet-icon.connected,
.navbar-wallet-icon[data-connected="true"] {
  background: linear-gradient(135deg, #18AFFF 0%, #0F93D2 100%);
  border-color: #0F93D2;
  color: #FFFFFF;
}
.navbar-wallet-icon.connected .navbar-wallet-dot,
.navbar-wallet-icon[data-connected="true"] .navbar-wallet-dot {
  background: #10B981;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3), 0 0 8px rgba(16, 185, 129, 0.5);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.85); }
}

/* sr-only utility (visually hidden, accessible to screen readers) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* /account 设置中心卡片 */
.account-settings-block {
  margin-bottom: 24px;
}
.account-setting-card {
  transition: all 0.18s ease;
}
.account-setting-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
/* 让 lang-switcher-mount 内的下拉对齐右侧 */
.account-setting-card .lang-switcher-mount {
  min-width: 100px;
}
/* 主题切换按钮在 account 设置卡里的大小 */
.account-setting-card .theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #F59E0B;
  transition: all 0.18s ease;
}
.account-setting-card .theme-toggle:hover {
  background: rgba(245, 158, 11, 0.15);
}

/* 移动端: 3 卡变 1 列 */
@media (max-width: 768px) {
  .account-settings-block .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================ */
/* §43 v1.2 Stage C: /swap 右侧/移动端下方 功能跳转卡            */
/* 5 张卡: 合约检测 / 发币 / 流动性启动 / 量化机器人 / AI Agent  */
/* ============================================================ */
.swap-quick-links {
  background: #FFFFFF !important;
  border: 1px solid rgba(24, 175, 255, 0.10) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.swap-quick-links .swap-side-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.swap-quick-links .swap-side-card-header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  margin: 0;
}
.swap-quick-links .swap-side-card-header h4 i {
  color: #18AFFF;
  font-size: 13px;
}
.swap-quick-links-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.swap-quick-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid rgba(15, 23, 42, 0.04);
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.18s ease;
  cursor: pointer;
}
.swap-quick-link:hover {
  background: #FFFFFF;
  border-color: rgba(24, 175, 255, 0.30);
  box-shadow: 0 4px 14px rgba(24, 175, 255, 0.10);
  transform: translateY(-1px);
}
.swap-quick-link:hover .swap-quick-link-arrow {
  color: #18AFFF;
  transform: translateX(2px);
}
.swap-quick-link-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6FD3FF 0%, #18AFFF 50%, #0F93D2 100%);
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(24, 175, 255, 0.25);
}
.swap-quick-link-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.swap-quick-link-title {
  font-size: 13px;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swap-quick-link-desc {
  font-size: 11px;
  color: #64748B;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swap-quick-link-arrow {
  flex: 0 0 auto;
  color: #CBD5E1;
  font-size: 11px;
  transition: all 0.18s ease;
}

/* 每个卡片的图标主题色微调 (区分功能类别) */
.swap-quick-link[data-link-type="detect"] .swap-quick-link-icon {
  background: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.swap-quick-link[data-link-type="launch"] .swap-quick-link-icon {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}
.swap-quick-link[data-link-type="pool"] .swap-quick-link-icon {
  background: linear-gradient(135deg, #6FD3FF 0%, #18AFFF 50%, #0F93D2 100%);
  box-shadow: 0 2px 6px rgba(24, 175, 255, 0.25);
}
.swap-quick-link[data-link-type="quant"] .swap-quick-link-icon {
  background: linear-gradient(135deg, #C084FC 0%, #A855F7 50%, #7E22CE 100%);
  box-shadow: 0 2px 6px rgba(168, 85, 247, 0.25);
}
.swap-quick-link[data-link-type="ai-agent"] .swap-quick-link-icon {
  background: linear-gradient(135deg, #F472B6 0%, #EC4899 50%, #BE185D 100%);
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.25);
}

/* 移动端: swap-hub-grid 已是 auto stack, 这里仅微调内边距 */
@media (max-width: 768px) {
  .swap-quick-links {
    padding: 12px !important;
  }
  .swap-quick-link {
    padding: 10px;
  }
  .swap-quick-link-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .swap-quick-link-title {
    font-size: 13px;
  }
  .swap-quick-link-desc {
    font-size: 11px;
  }
}