/* ════════════════════════════════════════════════════════════════════════
 * 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;
}