/* ============================================================================
   WhaleLand 移动端设计系统 (whaleland-mobile.css)

   本文件是移动端 UI 升级唯一的设计 Token 与公共组件样式来源。
   加载顺序在 main.css 之后, 只覆盖移动端 (max-width: 1023px) 的页面级布局,
   Token 本身是全局的但只被本轮新增的 .wl-* 类使用, 桌面端既有样式不受影响。

   约定:
   - 所有新增类统一 wl- 前缀, 避免与 main.css 既有类名冲突
   - 颜色/圆角/间距/阴影/动效一律走 Token, 不在组件里写死色值
   - 涨绿跌红; 品牌绿只用于选中态/主按钮/实时/关键积分; 金色只用于等级与身份
   ========================================================================== */

:root {
  /* ── 背景与表面 ───────────────────────────────────────────── */
  /* 最终基准: 纯黑背景 + 极薄细边框 (原生金融 APP 质感) */
  --wl-bg: #000000;               /* 页面主背景: 纯黑 */
  --wl-bg-soft: #050605;
  --wl-surface-1: #0a0c0b;        /* 一级内容层 */
  --wl-surface-2: #101312;        /* 二级内容层 (卡片) */
  --wl-surface-3: #171a19;        /* 三级内容层 (输入框/胶囊) */
  --wl-surface-raised: #1c201e;
  --wl-hairline: rgba(255, 255, 255, 0.07);   /* 细边框, 不使用厚边框 */
  --wl-hairline-strong: rgba(255, 255, 255, 0.13);

  /* ── 文字 ─────────────────────────────────────────────────── */
  --wl-text-1: #f4f7f5;
  --wl-text-2: #9aa5a0;
  --wl-text-3: #6b736f;
  --wl-text-inverse: #001b0c;

  /* ── 品牌与语义色 ─────────────────────────────────────────── */
  --wl-brand: #00e56a;            /* WhaleLand 荧光绿 */
  --wl-brand-strong: #00c95c;
  --wl-brand-soft: rgba(0, 229, 106, 0.12);
  --wl-brand-line: rgba(0, 229, 106, 0.30);
  --wl-brand-glow: 0 0 16px rgba(0, 229, 106, 0.30);    /* 轻微绿色光效 */

  --wl-gold: #f5c451;             /* 仅 VIP / 高级合伙人 / 推荐位 */
  --wl-gold-soft: rgba(245, 196, 81, 0.14);
  --wl-gold-line: rgba(245, 196, 81, 0.36);

  --wl-up: #00e56a;               /* 涨 */
  --wl-up-bg: rgba(0, 229, 106, 0.13);
  --wl-down: #ff4d63;             /* 跌 */
  --wl-down-bg: rgba(255, 77, 99, 0.14);
  --wl-info: #4aa8ff;
  --wl-warn: #f5c451;
  --wl-lock: #64708c;             /* 锁定 / 未解锁态 */

  /* ── 圆角 ─────────────────────────────────────────────────── */
  --wl-r-xs: 6px;
  --wl-r-sm: 8px;
  --wl-r-md: 10px;
  --wl-r-lg: 12px;
  --wl-r-xl: 14px;
  --wl-r-pill: 999px;

  /* ── 间距 (8px 体系) ──────────────────────────────────────── */
  --wl-s1: 4px;
  --wl-s2: 7px;
  --wl-s3: 10px;
  --wl-s4: 14px;
  --wl-s5: 16px;
  --wl-s6: 20px;
  --wl-s8: 26px;

  /* ── 字号层级 ─────────────────────────────────────────────── */
  /* 精修: 字号整体下调 ~10%–15%, 提高首屏信息密度 */
  --wl-f-caption: 10px;
  --wl-f-sm: 11px;
  --wl-f-body: 13px;
  --wl-f-md: 14px;
  --wl-f-lg: 15px;
  --wl-f-title: 18px;
  --wl-f-display: 24px;
  --wl-f-hero: 29px;

  /* ── 阴影 ─────────────────────────────────────────────────── */
  --wl-shadow-card: 0 6px 24px rgba(0, 0, 0, 0.36);
  --wl-shadow-nav: 0 -6px 24px rgba(0, 0, 0, 0.46);

  /* ── 控件尺寸 ─────────────────────────────────────────────── */
  --wl-btn-h: 40px;
  --wl-btn-h-sm: 31px;
  --wl-tap: 44px;                 /* 最小可点区域 — 触控标准, 不随字号缩小 */

  /* ── Safe Area ────────────────────────────────────────────── */
  --wl-safe-top: env(safe-area-inset-top, 0px);
  --wl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --wl-safe-left: env(safe-area-inset-left, 0px);
  --wl-safe-right: env(safe-area-inset-right, 0px);
  --wl-nav-h: 58px;
  /* 所有滚动容器底部留白: 导航高度 + Home Indicator + 呼吸空间 */
  --wl-nav-inset: calc(var(--wl-nav-h) + var(--wl-safe-bottom) + 20px);

  /* ── 动效 ─────────────────────────────────────────────────── */
  --wl-dur-fast: 120ms;
  --wl-dur: 200ms;
  --wl-dur-slow: 320ms;
  --wl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 浅色主题下保持可读: 移动端新组件跟随既有 data-theme 契约 */
html[data-theme="light"] {
  --wl-bg: #f4f6fb;
  --wl-bg-soft: #eef1f8;
  --wl-surface-1: #ffffff;
  --wl-surface-2: #ffffff;
  --wl-surface-3: #eef1f8;
  --wl-surface-raised: #ffffff;
  --wl-hairline: rgba(15, 23, 42, 0.10);
  --wl-hairline-strong: rgba(15, 23, 42, 0.16);
  --wl-text-1: #0d1526;
  --wl-text-2: #47536b;
  --wl-text-3: #75809a;
  --wl-brand: #0fae5e;
  --wl-brand-strong: #0a8d4b;
  --wl-up: #0fae5e;
  --wl-down: #e0374c;
  --wl-shadow-card: 0 6px 20px rgba(15, 23, 42, 0.08);
  --wl-shadow-nav: 0 -6px 20px rgba(15, 23, 42, 0.08);
}

/* ============================================================================
   1. 公共原子: SafeAreaPage / SectionHeader / StatusPill / 状态视图
   ========================================================================== */

.wl-icon { width: 20px; height: 20px; display: inline-block; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wl-icon-sm { width: 16px; height: 16px; }
.wl-icon-lg { width: 24px; height: 24px; }

.wl-page { background: var(--wl-bg); color: var(--wl-text-1); }
.wl-page-scroll { padding-bottom: var(--wl-nav-inset); }

.wl-appbar {
  display: flex; align-items: center; gap: var(--wl-s3);
  padding: calc(var(--wl-safe-top) + var(--wl-s3)) var(--wl-s4) var(--wl-s3);
  background: var(--wl-bg);
}
.wl-appbar-title { font-size: var(--wl-f-title); font-weight: 800; letter-spacing: 0.2px; margin: 0; }
.wl-appbar-spacer { flex: 1 1 auto; min-width: 0; }
.wl-appbar-btn {
  width: 40px; height: 40px; border-radius: var(--wl-r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wl-text-2); background: var(--wl-surface-2);
  border: 1px solid var(--wl-hairline); transition: color var(--wl-dur) var(--wl-ease), background var(--wl-dur) var(--wl-ease);
}
.wl-appbar-btn:active { background: var(--wl-surface-3); color: var(--wl-text-1); }

.wl-section-header { display: flex; align-items: center; gap: var(--wl-s2); padding: var(--wl-s5) var(--wl-s4) var(--wl-s3); }
.wl-section-header h2 { font-size: var(--wl-f-lg); font-weight: 800; margin: 0; color: var(--wl-text-1); }
.wl-section-header .wl-section-bar { width: 3px; height: 15px; border-radius: 2px; background: var(--wl-brand); flex: none; }
.wl-section-more { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: var(--wl-f-sm); color: var(--wl-text-3); }

/* 实时呼吸灯 — 唯一允许的循环动画 */
.wl-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--wl-f-sm); color: var(--wl-brand); font-weight: 600; }
.wl-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wl-brand); animation: wl-breath 2.4s var(--wl-ease) infinite; }
@keyframes wl-breath { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 229, 106, 0.42); } 50% { opacity: 0.55; box-shadow: 0 0 0 5px rgba(0, 229, 106, 0); } }

.wl-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--wl-r-pill); font-size: var(--wl-f-caption); font-weight: 700; }
.wl-pill-brand { background: var(--wl-brand-soft); color: var(--wl-brand); border: 1px solid var(--wl-brand-line); }
.wl-pill-gold { background: var(--wl-gold-soft); color: var(--wl-gold); border: 1px solid var(--wl-gold-line); }
.wl-pill-muted { background: var(--wl-surface-3); color: var(--wl-text-3); }
.wl-pill-lock { background: var(--wl-surface-3); color: var(--wl-lock); }

/* Loading / Empty / Error 三态 */
.wl-state { padding: var(--wl-s8) var(--wl-s4); text-align: center; color: var(--wl-text-3); }
.wl-state-icon { width: 40px; height: 40px; margin: 0 auto var(--wl-s3); color: var(--wl-text-3); opacity: 0.7; }
.wl-state-title { font-size: var(--wl-f-body); color: var(--wl-text-2); font-weight: 600; }
.wl-state-desc { font-size: var(--wl-f-sm); margin-top: 6px; }
.wl-state-action { margin-top: var(--wl-s4); }
.wl-skeleton { background: linear-gradient(90deg, var(--wl-surface-2) 25%, var(--wl-surface-3) 37%, var(--wl-surface-2) 63%); background-size: 400% 100%; animation: wl-shimmer 1.4s ease infinite; border-radius: var(--wl-r-sm); }
@keyframes wl-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 按钮 */
.wl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--wl-btn-h); padding: 0 18px; border-radius: var(--wl-r-pill); font-size: var(--wl-f-body); font-weight: 700; border: 1px solid transparent; transition: transform var(--wl-dur-fast) var(--wl-ease), opacity var(--wl-dur) var(--wl-ease); }
.wl-btn:active { transform: scale(0.97); }
.wl-btn-primary { background: var(--wl-brand); color: var(--wl-text-inverse); }
.wl-btn-ghost { background: var(--wl-surface-3); color: var(--wl-text-1); border-color: var(--wl-hairline); }
.wl-btn-outline { background: transparent; color: var(--wl-brand); border-color: var(--wl-brand-line); }
.wl-btn-sm { height: var(--wl-btn-h-sm); padding: 0 14px; font-size: var(--wl-f-sm); }
.wl-btn[disabled], .wl-btn.is-disabled { opacity: 0.45; pointer-events: none; }

/* SearchBar */
.wl-search { display: flex; align-items: center; gap: var(--wl-s2); height: 46px; padding: 0 var(--wl-s4); margin: 0 var(--wl-s4); border-radius: var(--wl-r-md); background: var(--wl-surface-2); color: var(--wl-text-3); border: 1px solid transparent; transition: border-color var(--wl-dur) var(--wl-ease); }
.wl-search:focus-within { border-color: var(--wl-brand-line); }
.wl-search input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--wl-text-1); font-size: var(--wl-f-body); }
.wl-search input::placeholder { color: var(--wl-text-3); }

/* 横向筛选胶囊 */
.wl-chips { display: flex; gap: var(--wl-s2); overflow-x: auto; padding: var(--wl-s4) var(--wl-s4) var(--wl-s2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wl-chips::-webkit-scrollbar { display: none; }
.wl-chip { flex: none; height: 34px; padding: 0 16px; border-radius: var(--wl-r-pill); background: var(--wl-surface-2); color: var(--wl-text-2); font-size: var(--wl-f-body); font-weight: 600; border: 1px solid var(--wl-hairline); display: inline-flex; align-items: center; gap: 6px; }
.wl-chip.is-active { background: var(--wl-brand-soft); color: var(--wl-brand); border-color: var(--wl-brand-line); }

/* ============================================================================
   2. BottomNavigation — 五宫格 + 中央闪兑
   ========================================================================== */
@media (max-width: 1023px) {
  .mobile-tabbar {
    background: color-mix(in srgb, var(--wl-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--wl-hairline);
    box-shadow: var(--wl-shadow-nav);
    height: calc(var(--wl-nav-h) + var(--wl-safe-bottom));
    padding-bottom: var(--wl-safe-bottom);
  }
  .mobile-tabbar-inner { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: var(--wl-nav-h); padding: 0 4px; }
  .mobile-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--wl-tap);
    color: var(--wl-text-3);
    font-size: var(--wl-f-caption); font-weight: 600;
    transition: color var(--wl-dur) var(--wl-ease);
    background: none; border: 0;
  }
  .mobile-tab .wl-icon { width: 22px; height: 22px; }
  .mobile-tab.active { color: var(--wl-brand); }
  .mobile-tab.active .wl-icon { stroke-width: 2; }

  /* 中央闪兑: 56px, 收敛光晕, 不抢主视觉 (覆盖 main.css 的 48px/#39FF14 强光版本) */
  .mobile-tab-swap { position: relative; }
  .mobile-tabbar .mobile-tab-swap .mobile-tab-swap-btn,
  .mobile-tab-swap-btn {
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wl-brand); color: var(--wl-text-inverse) !important;
    box-shadow: var(--wl-brand-glow);
    margin-top: -20px;
    border: 3px solid var(--wl-bg);
  }
  /* 未选中冷灰 / 选中品牌绿, 去掉旧的蓝色高亮与图标外发光 */
  .mobile-tabbar .mobile-tab { color: var(--wl-text-3); font-size: var(--wl-f-caption); }
  .mobile-tabbar .mobile-tab.active { color: var(--wl-brand); }
  .mobile-tabbar .mobile-tab.active i,
  .mobile-tabbar .mobile-tab.active .wl-icon { filter: none; }
  .mobile-tab-swap-btn .wl-icon { width: 24px; height: 24px; stroke-width: 2.2; }
  .mobile-tab-swap span:last-child { margin-top: 1px; }

  /* 滚动容器底部留白: 任何带 .mobile-footer-main / .wl-page-scroll 的主区都不被导航遮挡 */
  body { padding-bottom: 0; }
  .wl-page-scroll { padding-bottom: var(--wl-nav-inset); }
  /* 滚动容器底部留白: 必须同时压过 main.css 里 .mobile-footer-compact .mobile-footer-main
     的 0.75rem 收紧规则 (该规则会让内容被固定导航压住) */
  .mobile-footer-main,
  .mobile-footer-compact .mobile-footer-main,
  .page-root.mobile-footer-compact { padding-bottom: max(var(--wl-nav-inset), 6rem) !important; }
  .page-root.mobile-footer-compact { padding-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-live-dot, .wl-skeleton { animation: none !important; }
  .wl-btn:active { transform: none; }
  .wl-flash-up, .wl-flash-down { animation: none !important; }
}

/* ============================================================================
   3. 行情页 (Market)
   ========================================================================== */
@media (max-width: 1023px) {
  .wl-market-head { display: flex; align-items: center; gap: var(--wl-s3); padding: var(--wl-s2) var(--wl-s4) var(--wl-s3); }
  .wl-market-head .wl-brand-mark { width: 34px; height: auto; flex: none; }
  .wl-market-head h1 { font-size: var(--wl-f-title); font-weight: 900; margin: 0; }

  /* 列表列头: 交易对 / 24H交易量 · 价格 · 24H涨跌 */
  .wl-market-page .wl-market-colhead { display: flex; align-items: center; justify-content: space-between; padding: var(--wl-s2) var(--wl-s3); font-size: var(--wl-f-sm); color: var(--wl-text-3); }
  .wl-market-page .wl-market-colhead span:nth-child(2) { display: none; }

  /* 交易对行: 左 logo | 中两层信息 | 右 走势/涨跌/交易 */
  .wl-mrow { display: flex; align-items: center; gap: var(--wl-s2); padding: var(--wl-s3); border-bottom: 1px solid var(--wl-hairline); }
  .wl-mrow-logo { width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden; background: var(--wl-surface-3); display: inline-flex; align-items: center; justify-content: center; }
  .wl-mrow-logo img { width: 100%; height: 100%; object-fit: cover; }
  .wl-mrow-main { flex: 1 1 auto; min-width: 0; }

  /* 第一行: 交易对 + 链标签 + 价格 */
  .wl-mrow-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .wl-mrow-pair { min-width: 0; font-size: var(--wl-f-md); font-weight: 800; color: var(--wl-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wl-mrow-pair i { font-style: normal; font-weight: 600; color: var(--wl-text-2); }
  .wl-chain-tag { flex: none; height: 16px; padding: 0 5px; border-radius: 4px; background: var(--wl-surface-3); color: var(--wl-text-2); font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; display: inline-flex; align-items: center; }
  .wl-mrow-price { margin-left: auto; flex: none; font-size: var(--wl-f-body); font-weight: 700; color: var(--wl-text-1); font-variant-numeric: tabular-nums; padding-left: 4px; }

  /* 第二行: DEX · 池子地址 · 流动性 · 24H 量 · 买卖笔数 */
  /* 第二行允许换行: 宁可多占一行, 也要保证 DEX / 池子地址 / 流动性 / 24H量 / 笔数 全部可见 */
  .wl-mrow-l2 { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; font-size: 9.5px; line-height: 1.45; color: var(--wl-text-3); }
  .wl-mrow-l2 em { font-style: normal; opacity: 0.75; }
  .wl-mrow-l2 > span { flex: none; }
  .wl-mrow-dex { color: var(--wl-text-2); font-weight: 700; letter-spacing: 0.2px; }
  .wl-mrow-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .wl-mrow-txns { font-variant-numeric: tabular-nums; }

  /* 右侧: 迷你走势 + 涨跌 + 交易 */
  .wl-mrow-right { flex: none; width: 58px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .wl-spark { width: 26px; height: 16px; flex: none; }
  .wl-spark path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .wl-chg { width: 100%; height: 22px; border-radius: var(--wl-r-xs); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .wl-chg-up { background: var(--wl-up-bg); color: var(--wl-up); }
  .wl-chg-down { background: var(--wl-down-bg); color: var(--wl-down); }
  .wl-chg-na { background: var(--wl-surface-3); color: var(--wl-text-3); font-weight: 600; }
  .wl-mrow-trade {
    width: 100%; height: 22px; padding: 0 4px;
    border-radius: var(--wl-r-pill); border: 1px solid var(--wl-brand-line);
    background: var(--wl-brand-soft); color: var(--wl-brand);
    font-size: 11px; font-weight: 700; white-space: nowrap;
  }
  .wl-mrow-trade.is-off { background: var(--wl-surface-3); color: var(--wl-text-3); border-color: transparent; font-weight: 600; font-size: 8.5px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }

  /* 价格更新的一次性反馈, 不闪烁循环 */
  .wl-flash-up { animation: wl-flash-up var(--wl-dur-slow) var(--wl-ease) 1; }
  .wl-flash-down { animation: wl-flash-down var(--wl-dur-slow) var(--wl-ease) 1; }
  @keyframes wl-flash-up { from { color: var(--wl-up); } to { color: var(--wl-text-1); } }
  @keyframes wl-flash-down { from { color: var(--wl-down); } to { color: var(--wl-text-1); } }

  /* 平台快讯 — 降低营销感 */
  .wl-news-item { display: flex; align-items: center; gap: var(--wl-s3); padding: var(--wl-s3) var(--wl-s4); border-bottom: 1px solid var(--wl-hairline); color: inherit; }
  .wl-news-icon { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--wl-surface-2); color: var(--wl-brand); display: inline-flex; align-items: center; justify-content: center; }
  .wl-news-body { min-width: 0; flex: 1 1 auto; }
  .wl-news-title { font-size: var(--wl-f-body); font-weight: 700; color: var(--wl-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wl-news-desc { font-size: var(--wl-f-sm); color: var(--wl-text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================================
   4. 我的 / 权益中心 / 合伙人 共用块
   ========================================================================== */
@media (max-width: 1023px) {
  .wl-card { background: var(--wl-surface-2); border: 1px solid var(--wl-hairline); border-radius: var(--wl-r-md); padding: var(--wl-s4); margin: 0 var(--wl-s4) var(--wl-s4); }
  .wl-card-flat { background: transparent; padding: 0; }

  /* 身份区 */
  .wl-profile { display: flex; align-items: center; gap: var(--wl-s3); padding: var(--wl-s2) var(--wl-s4) var(--wl-s4); }
  .wl-avatar { width: 68px; height: 68px; border-radius: 50%; flex: none; background: var(--wl-surface-2); border: 1px solid var(--wl-brand-line); display: inline-flex; align-items: center; justify-content: center; color: var(--wl-brand); overflow: hidden; }
  .wl-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .wl-profile-name { display: flex; align-items: center; gap: var(--wl-s2); font-size: var(--wl-f-title); font-weight: 800; }
  .wl-profile-meta { display: flex; align-items: center; gap: var(--wl-s2); margin-top: 6px; font-size: var(--wl-f-sm); color: var(--wl-text-3); }
  .wl-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .wl-copy { color: var(--wl-text-3); display: inline-flex; }

  /* 积分 / 等级进度 */
  .wl-points-label { display: flex; align-items: center; justify-content: space-between; font-size: var(--wl-f-sm); color: var(--wl-text-3); }
  .wl-points-value { font-size: var(--wl-f-hero); font-weight: 900; color: var(--wl-brand); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: var(--wl-s2); }
  .wl-progress { height: 8px; border-radius: var(--wl-r-pill); background: var(--wl-surface-3); overflow: hidden; margin-top: var(--wl-s3); }
  .wl-progress-fill { height: 100%; border-radius: var(--wl-r-pill); background: var(--wl-brand); transition: width var(--wl-dur-slow) var(--wl-ease); }
  .wl-progress-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--wl-s2); font-size: var(--wl-f-sm); color: var(--wl-text-3); }
  .wl-progress-foot a { color: var(--wl-brand); }

  /* 权益九宫格入口 (3 列) */
  .wl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wl-s3); padding: 0 var(--wl-s4); }
  .wl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wl-s3); padding: 0 var(--wl-s4); }
  .wl-tile { background: var(--wl-surface-2); border-radius: var(--wl-r-md); padding: var(--wl-s4) var(--wl-s2); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--wl-text-2); text-align: center; position: relative; }
  .wl-tile-icon { width: 30px; height: 30px; }
  .wl-tile-label { font-size: var(--wl-f-sm); font-weight: 600; color: var(--wl-text-1); }
  .wl-tile-sub { font-size: var(--wl-f-caption); color: var(--wl-text-3); }
  .wl-tile.is-locked { opacity: 0.55; }
  .wl-tile-flag { position: absolute; top: 6px; right: 6px; }
  .wl-tile-quiet { background: transparent; padding: var(--wl-s2) 0; }

  /* 列表行 */
  .wl-list { background: var(--wl-surface-2); border: 1px solid var(--wl-hairline); border-radius: var(--wl-r-md); margin: 0 var(--wl-s4) var(--wl-s4); overflow: hidden; }
  .wl-list-row { display: flex; align-items: center; gap: var(--wl-s3); padding: var(--wl-s4); color: inherit; border-bottom: 1px solid var(--wl-hairline); }
  .wl-list-row:last-child { border-bottom: 0; }
  .wl-list-icon { width: 38px; height: 38px; border-radius: var(--wl-r-sm); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--wl-surface-3); }
  .wl-list-body { flex: 1 1 auto; min-width: 0; display: block; }
  .wl-list-title { display: block; font-size: var(--wl-f-body); font-weight: 700; color: var(--wl-text-1); }
  .wl-list-desc { display: block; font-size: var(--wl-f-sm); color: var(--wl-text-3); margin-top: 2px; }
  .wl-list-right { display: inline-flex; align-items: center; gap: 6px; color: var(--wl-text-3); font-size: var(--wl-f-sm); flex: none; }

  /* 色调 (图标底色) */
  .tone-brand { color: var(--wl-brand); background: var(--wl-brand-soft); }
  .tone-gold { color: var(--wl-gold); background: var(--wl-gold-soft); }
  .tone-info { color: var(--wl-info); background: rgba(74, 168, 255, 0.12); }
  .tone-violet { color: #a98bff; background: rgba(169, 139, 255, 0.12); }
  .tone-rose { color: var(--wl-down); background: var(--wl-down-bg); }

  /* 活动 Banner */
  .wl-banner { position: relative; margin: 0 var(--wl-s4) var(--wl-s5); border-radius: var(--wl-r-xl); padding: var(--wl-s5); overflow: hidden; background: linear-gradient(135deg, rgba(33, 224, 122, 0.16), rgba(11, 16, 32, 0.9) 62%); border: 1px solid var(--wl-brand-line); }
  .wl-banner-title { font-size: var(--wl-f-title); font-weight: 900; margin-top: var(--wl-s3); }
  .wl-banner-sub { font-size: var(--wl-f-sm); color: var(--wl-text-2); margin-top: 6px; }
  .wl-banner-cta { display: flex; align-items: center; gap: var(--wl-s3); margin-top: var(--wl-s4); }
  .wl-banner-art { position: absolute; right: -8px; bottom: -6px; width: 148px; opacity: 0.95; pointer-events: none; }

  /* 权益模块卡 (M1–M5) — 压缩高度提高首屏密度 */
  .wl-benefit { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--wl-s3); align-items: start; background: var(--wl-surface-2); border-radius: var(--wl-r-md); padding: var(--wl-s3) var(--wl-s4); margin: 0 var(--wl-s4) var(--wl-s3); }
  .wl-benefit-icon { width: 44px; height: 44px; border-radius: var(--wl-r-sm); display: inline-flex; align-items: center; justify-content: center; }
  .wl-benefit-name { font-size: var(--wl-f-md); font-weight: 800; color: var(--wl-text-1); }
  .wl-benefit-desc { font-size: var(--wl-f-sm); color: var(--wl-text-2); margin-top: 3px; }
  .wl-benefit-cost { font-size: var(--wl-f-sm); color: var(--wl-text-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
  .wl-benefit-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--wl-s2); width: 78px; flex: none; }
  .wl-benefit-side .wl-btn { width: 100%; padding: 0 8px; height: 30px; font-size: var(--wl-f-sm); }
  .wl-benefit-side .wl-pill { max-width: 100%; overflow: hidden; }
  .wl-benefit-name { line-height: 1.25; }
  .wl-benefit-desc { line-height: 1.35; }

  /* 合伙人方案卡 */
  .wl-plan { border-radius: var(--wl-r-lg); background: var(--wl-surface-2); padding: var(--wl-s4); margin: 0 var(--wl-s4) var(--wl-s3); border: 1px solid transparent; position: relative; }
  .wl-plan.is-selected { border-color: var(--wl-brand-line); background: linear-gradient(180deg, var(--wl-brand-soft), var(--wl-surface-2) 46%); }
  .wl-plan.is-premium.is-selected { border-color: var(--wl-gold-line); background: linear-gradient(180deg, var(--wl-gold-soft), var(--wl-surface-2) 46%); }
  .wl-plan-head { display: flex; align-items: center; gap: var(--wl-s2); }
  .wl-plan-name { font-size: var(--wl-f-lg); font-weight: 800; }
  .wl-plan-price { font-size: var(--wl-f-display); font-weight: 900; font-variant-numeric: tabular-nums; margin-top: var(--wl-s2); }
  .wl-plan-price small { font-size: var(--wl-f-body); font-weight: 700; color: var(--wl-text-3); margin-left: 4px; }
  .wl-plan-rows { margin-top: var(--wl-s3); display: grid; gap: 8px; }
  .wl-plan-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--wl-f-sm); }
  .wl-plan-row span:first-child { color: var(--wl-text-3); }
  .wl-plan-row strong { color: var(--wl-text-1); font-variant-numeric: tabular-nums; }
  .wl-plan-check { position: absolute; top: var(--wl-s4); right: var(--wl-s4); color: var(--wl-brand); }

  /* 信息行 (认购信息 / 规则) */
  .wl-kv { display: flex; align-items: center; justify-content: space-between; gap: var(--wl-s3); padding: 11px 0; border-bottom: 1px solid var(--wl-hairline); font-size: var(--wl-f-body); }
  .wl-kv:last-child { border-bottom: 0; }
  .wl-kv span { color: var(--wl-text-3); }
  .wl-kv strong { color: var(--wl-text-1); font-weight: 700; text-align: right; min-width: 0; }
  .wl-note { font-size: var(--wl-f-sm); color: var(--wl-text-3); line-height: 1.65; }

  /* 底部固定操作区 (合伙人认购) — 自身也要避让导航 */
  .wl-sticky-cta {
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--wl-nav-h) + var(--wl-safe-bottom));
    padding: var(--wl-s3) var(--wl-s4) var(--wl-s3);
    background: var(--wl-bg);
    border-top: 1px solid var(--wl-hairline);
    z-index: 30;
  }
  .wl-sticky-cta .wl-btn { width: 100%; }
}

/* 桌面端: 本轮新增的移动专用块全部隐藏, 不影响既有响应式页面 */
@media (min-width: 1024px) {
  .wl-mobile-only { display: none !important; }
}
@media (max-width: 1023px) {
  .wl-desktop-only { display: none !important; }
}

/* ============================================================================
   5. WhaleLandLogo — 品牌组件
   ========================================================================== */
.wl-brand { display: inline-flex; align-items: center; }
.wl-brand-lockup { display: inline-flex; align-items: center; gap: 8px; }
.wl-brand-word { font-size: var(--wl-f-lg); font-weight: 800; letter-spacing: 0.3px; color: var(--wl-text-1); }
.wl-brand-mark { display: block; object-fit: contain; height: auto; }

/* ============================================================================
   6. 行情表格的移动端形态
   移动端只渲染 .col-m 单元格 (数据与桌面同源), 表格退化为纵向列表,
   不再横向滚动, 也不再出现价格/涨跌错位。桌面端完全不受影响。
   ========================================================================== */
@media (max-width: 1023px) {
  #market-table .col-m { display: block; padding: 0; border: 0; }
  #market-table .data-table { min-width: 0 !important; width: 100%; display: block; }
  #market-table .data-table thead { display: none; }
  #market-table .data-table tbody { display: block; }
  #market-table .data-table tbody tr { display: block; width: 100%; }
  /* 只隐藏桌面数据列; 跨列的状态行 (加载 / 空数据 / 接口不可用) 必须保留,
     否则移动端会出现一片空白而看不到任何状态提示 */
  #market-table .data-table tbody tr > td:not(.col-m):not([colspan]) { display: none !important; }
  #market-table .data-table tbody tr > td[colspan] { display: block; width: 100%; padding: var(--wl-s6) var(--wl-s4); text-align: center; }
  #market-table .market-table-scroll-x { overflow-x: visible; }
  #market-table.card { background: transparent; border: 0; box-shadow: none; padding: 0; }
  #market-table .wl-mrow { border-bottom: 1px solid var(--wl-hairline); }
  #market-table tbody tr:last-child .wl-mrow { border-bottom: 0; }

  /* 行情页移动端: 顶部 Hero / 品牌大图 / 海报轮播不再出现在功能页,
     品牌内容改由「平台快讯」承载 (同一份 /api/banners 真实数据) */
  .wl-market-page .home-hero-section { display: none; }
  .wl-market-page .hero-search-wrap { margin-top: 0; }
  .wl-market-page .majors-strip { margin-bottom: var(--wl-s2); }
}

/* 桌面端: 移动端专用单元格不参与布局 */
@media (min-width: 1024px) {
  #market-table .col-m { display: none !important; }
}

/* ============================================================================
   7. 行情页筛选栏的移动端形态 (全部 / 关注 / 热搜 / 新开盘 / 涨幅榜)
   复用既有 .list-tab / .chain-tab 真实交互与数据绑定, 只做视觉收敛
   ========================================================================== */
@media (max-width: 1023px) {
  .wl-market-page .home-filter-inner {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    gap: var(--wl-s2) !important;
  }
  .wl-market-page .list-tab,
  .wl-market-page .chain-tab,
  .wl-market-page .tf-tab {
    height: 34px;
    padding: 0 16px !important;
    border-radius: var(--wl-r-pill);
    background: var(--wl-surface-2) !important;
    color: var(--wl-text-2) !important;
    border: 1px solid var(--wl-hairline);
    font-size: var(--wl-f-body);
    font-weight: 600;
  }
  .wl-market-page .list-tab i,
  .wl-market-page .chain-tab i { display: none; }
  .wl-market-page .list-tab.active,
  .wl-market-page .chain-tab.active,
  .wl-market-page .tf-tab.active {
    background: var(--wl-brand-soft) !important;
    color: var(--wl-brand) !important;
    border-color: var(--wl-brand-line);
  }

  /* 搜索框收敛成设计系统里的 SearchBar */
  .wl-market-page .hero-search {
    border: 1px solid transparent !important;
    border-radius: var(--wl-r-md) !important;
    background: var(--wl-surface-2) !important;
    box-shadow: none !important;
  }
  .wl-market-page .hero-search:focus-within { border-color: var(--wl-brand-line) !important; }
  .wl-market-page .hero-search input { font-size: var(--wl-f-body); padding-top: 10px; padding-bottom: 10px; }
  .wl-market-page .hero-search-go { display: none; }
  .wl-market-page .hero-search-icon { color: var(--wl-text-3); }
  .wl-market-page .hero-search-wrap > div + div { display: none; }
}

/* ============================================================================
   8. 「我的」页移动端
   ========================================================================== */
@media (max-width: 1023px) {
  /* 新版结构接管移动端; 旧版移动块与桌面专用块在移动端隐藏 (桌面端保持原样) */
  .account-page .wl-legacy-mobile-hide { display: none !important; }
  .wl-account-m { display: block; }
  .wl-account-m .wl-appbar { padding-top: calc(var(--wl-safe-top) + var(--wl-s2)); }
  .wl-settings-panel .mobile-account-control-slot { display: inline-flex; align-items: center; gap: var(--wl-s2); }
  .wl-account-m .wl-profile-name .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wl-account-m .wl-list-row { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; }
}
@media (min-width: 1024px) {
  .wl-account-m { display: none !important; }
}

/* ============================================================================
   9. 权益中心
   ========================================================================== */
/* 权益中心活动 Banner: 纯 CSS/SVG, 深色渐变 + 网格 + 链上节点 + 品牌光效
   不使用任何被拉伸的低分辨率图片, 也不重复放大品牌 Logo */
.wl-eco-banner {
  position: relative; overflow: hidden;
  margin: var(--wl-s2) var(--wl-s4) var(--wl-s4);
  border-radius: var(--wl-r-lg);
  border: 1px solid var(--wl-hairline);
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(0, 229, 106, 0.16), transparent 58%),
    linear-gradient(135deg, #0d1526 0%, #0a1120 46%, #070c17 100%);
  isolation: isolate;
}
html[data-theme="light"] .wl-eco-banner {
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(15, 174, 94, 0.14), transparent 58%),
    linear-gradient(135deg, #ffffff 0%, #f2f5fb 100%);
}
.wl-eco-banner-art {
  position: absolute; inset: 0; z-index: 0;
  color: var(--wl-brand); opacity: 0.5; pointer-events: none;
}
.wl-eco-banner-art svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.wl-eco-nodes { opacity: 0.55; }
.wl-eco-dots { opacity: 0.85; }
.wl-eco-banner-body { position: relative; z-index: 1; padding: var(--wl-s4); }
.wl-eco-banner-title {
  margin: var(--wl-s2) 0 0;
  font-size: var(--wl-f-title); font-weight: 900; line-height: 1.25;
  color: var(--wl-text-1); max-width: 15em;
}
.wl-eco-banner-desc {
  margin: 6px 0 0; font-size: var(--wl-f-sm); line-height: 1.5;
  color: var(--wl-text-2); max-width: 22em;
}
.wl-eco-banner-stats {
  display: flex; gap: var(--wl-s6); margin-top: var(--wl-s4);
  padding-top: var(--wl-s3); border-top: 1px solid var(--wl-hairline);
}
.wl-eco-banner-stats > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wl-eco-banner-stats span { font-size: var(--wl-f-caption); color: var(--wl-text-3); }
.wl-eco-banner-stats strong {
  font-size: var(--wl-f-lg); font-weight: 800; color: var(--wl-brand);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
/* 数据未开放时不使用品牌绿高亮, 也不放大 */
.wl-eco-banner-stats strong.is-na { color: var(--wl-text-3); font-size: var(--wl-f-body); font-weight: 600; }
.wl-benefits-page .wl-note { margin-top: var(--wl-s3); }

/* ============================================================================
   10. 合伙人认购
   ========================================================================== */
.wl-partner-page .wl-plan { cursor: pointer; }
.wl-partner-page .wl-plan:focus-visible { outline: 2px solid var(--wl-brand); outline-offset: 2px; }

/* ============================================================================
   11. 发现页
   ========================================================================== */
@media (max-width: 1023px) {
  .wl-discover-head {
    display: flex; align-items: flex-start; gap: var(--wl-s3);
    padding: calc(var(--wl-safe-top) + var(--wl-s5)) var(--wl-s4) var(--wl-s4);
  }
  .wl-discover-title { font-size: var(--wl-f-hero); font-weight: 900; margin: 0; line-height: 1.15; }
  .wl-discover-sub { font-size: var(--wl-f-body); color: var(--wl-text-3); margin: 6px 0 0; }
  .discover-mobile-main.discover-home-main { padding-top: 0; }
  /* 热门项目列表沿用既有 discover.css 卡片, 只补齐左右间距与底部留白 */
  .discover-home-main .discover-home-projects { padding: 0 var(--wl-s4); }
}

/* ============================================================================
   12. 通用可访问性 / 滚动行为
   ========================================================================== */
@media (max-width: 1023px) {
  /* 页面滚动只交给文档流, 避免出现"只能下滑无法回滑"的嵌套滚动容器 */
  .wl-page { min-height: 100vh; min-height: 100dvh; }
  .wl-page main { overscroll-behavior-y: contain; }
  .wl-btn:focus-visible,
  .wl-appbar-btn:focus-visible,
  .wl-list-row:focus-visible,
  .wl-tile:focus-visible { outline: 2px solid var(--wl-brand); outline-offset: 2px; }
}

/* ============================================================================
   13. 收口修正 (移动端回归发现的问题)
   ========================================================================== */
@media (max-width: 1023px) {
  /* 合伙人页: 底部固定操作区不得遮挡认购信息与风险说明 */
  .wl-partner-page .wl-page-scroll { padding-bottom: calc(var(--wl-nav-inset) + 84px); }
  .wl-partner-page .wl-sticky-cta .wl-btn { width: 100%; }
  /* 通道未开放时按钮不使用主按钮的实心品牌绿, 避免看起来可点 */
  .wl-partner-page .wl-btn.is-disabled,
  .wl-partner-page .wl-btn[disabled] {
    background: var(--wl-surface-3);
    color: var(--wl-text-3);
    border-color: var(--wl-hairline);
    opacity: 1;
  }

  /* 权益入口宫格: 两字与四字标签统一高度 */
  .wl-grid-3 .wl-tile { min-height: 96px; justify-content: center; }
  .wl-grid-3 .wl-tile-label { line-height: 1.25; }
  /* 发现页四入口: 说明文字不换到第三行 */
  .wl-grid-4 .wl-tile-sub { line-height: 1.3; }

  /* 权益中心首屏密度 */
  .wl-benefits-page .wl-benefits-hero { padding-bottom: var(--wl-s2); }
}

/* 「我的」页: 移动端由新版结构承载, 隐藏与之重复的旧版引导卡;
   合规入口 (用户协议 / 隐私 / 风险 / 主体信息) 与已连接用户的真实面板保持不变 */
@media (max-width: 1023px) {
  .account-page #guest-view { display: none !important; }
}

/* Toast 关闭按钮 (fix: 提示必须可手动关闭) */
.toast-close {
  flex: none; width: 24px; height: 24px; margin-left: 4px;
  border: 0; background: transparent; color: var(--wl-text-3);
  font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.toast-close:hover { color: var(--wl-text-1); }

/* ============================================================================
   14. 精修 (PR #37 复审): 信息密度、留白、统一卡片语言、导航安全区
   ========================================================================== */
@media (max-width: 1023px) {
  /* — 头像 / 大数字 / Banner 收敛, 去掉大面积无效留白 — */
  .wl-avatar { width: 58px; height: 58px; }
  .wl-profile { padding: var(--wl-s1) var(--wl-s4) var(--wl-s3); }
  .wl-points-value { margin-top: 4px; }
  .wl-banner { padding: var(--wl-s4); border-radius: var(--wl-r-lg); }
  .wl-banner-art { width: 116px; }
  .wl-section-header { padding: var(--wl-s4) var(--wl-s4) var(--wl-s2); }

  /* — 统一卡片语言: 同一圆角 / 无厚边框 / 同一图标底板 — */
  .wl-card,
  .wl-list,
  .wl-tile,
  .wl-benefit,
  .wl-plan { border-radius: var(--wl-r-md); }
  .wl-tile-icon,
  .wl-list-icon,
  .wl-benefit-icon { border-radius: var(--wl-r-sm); }
  .wl-tile-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; }
  .wl-tile-icon .wl-icon { width: 21px; height: 21px; }
  .wl-list-icon { width: 34px; height: 34px; }
  .wl-list-icon .wl-icon { width: 18px; height: 18px; }
  .wl-benefit-icon { width: 38px; height: 38px; }
  .wl-benefit { grid-template-columns: 38px minmax(0, 1fr) auto; padding: var(--wl-s3); }
  .wl-list-row { padding: var(--wl-s3) var(--wl-s4); }
  .wl-grid-3 .wl-tile { min-height: 80px; padding: var(--wl-s3) var(--wl-s2); }
  .wl-grid-4 .wl-tile { padding: var(--wl-s2) 2px; }

  /* — 右侧状态标签统一到同一宽度与高度 — */
  .wl-benefit-side { width: 70px; }
  .wl-benefit-side .wl-btn { height: 27px; font-size: var(--wl-f-caption); }
  .wl-benefit-side .wl-pill { height: 20px; }
  .wl-list-right { font-size: var(--wl-f-sm); }

  /* — 品牌绿只保留在核心操作 / 选中 / 实时: 分区竖条改中性色 — */
  .wl-section-header .wl-section-bar { background: var(--wl-hairline-strong); }

  /* — 底部导航安全区: 中央按钮、文字与 Home Indicator 不重叠 — */
  .mobile-tabbar { height: calc(var(--wl-nav-h) + var(--wl-safe-bottom)); }
  .mobile-tabbar .mobile-tab { padding: 6px 2px 4px; line-height: 1.15; }
  .mobile-tabbar .mobile-tab-swap-btn { width: 52px; height: 52px; margin-top: -17px; }
  .mobile-tabbar .mobile-tab-swap-btn .wl-icon { width: 22px; height: 22px; }

  /* — 页面顶部内容不被状态栏 / 固定组件压住 — */
  .wl-appbar { padding-top: calc(var(--wl-safe-top) + var(--wl-s3)); }
  .wl-discover-head { padding-top: calc(var(--wl-safe-top) + var(--wl-s4)); }

  /* — Toast 不再盖住页头: 移动端下移到安全区之下并留出侧边距 — */
  .toast-container {
    top: calc(var(--wl-safe-top) + 8px) !important;
    left: var(--wl-s3) !important;
    right: var(--wl-s3) !important;
    width: auto !important;
  }
}

/* 行情空状态 / 数据源降级横幅: 移动端收敛到设计系统语言 */
@media (max-width: 1023px) {
  #market-empty { padding: var(--wl-s8) var(--wl-s4); color: var(--wl-text-3); }
  #market-empty i { font-size: 28px; opacity: 0.45; }
  #market-empty p { font-size: var(--wl-f-body); margin-top: var(--wl-s2); }
  #market-banner .card,
  #market-banner > div { border-radius: var(--wl-r-md); font-size: var(--wl-f-sm); }
  /* 底部状态条 (当前展示 X-Y / 更新时间) */
  #market-table .p-3 { padding: var(--wl-s3) !important; font-size: var(--wl-f-caption); }
}

/* ============================================================================
   15. 检测 / 闪兑 两页的共用视觉归一 (仅颜色、图标底板与密度, 不改业务流程)
   —— 这两页保留既有真实功能与路由, 本轮只同步品牌色与 Safe Area
   ========================================================================== */
@media (max-width: 1023px) {
  /* 主按钮从霓虹绿 #39FF14 收敛到品牌绿, 去掉过强外发光 */
  .btn-primary,
  .btn-success {
    background: var(--wl-brand) !important;
    color: var(--wl-text-inverse) !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
  .btn-primary:hover, .btn-success:hover { background: var(--wl-brand-strong) !important; }

  /* 检测页: 压缩首屏英雄区, 三张统计卡改为一行, 提高信息密度 */
  .detect-page h1, .page-root h1.gradient-text { font-size: var(--wl-f-display) !important; }
  .detect-hero-stats, .detect-page .grid.grid-cols-1 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--wl-s2) !important; }
  .detect-page .card { border-radius: var(--wl-r-md); }

  /* 闪兑页: 卡片圆角与描边跟随设计系统, 数值区不再使用超大字号 */
  .swap-page .card, .swap-card { border-radius: var(--wl-r-lg); }
}

/* ============================================================================
   16. 发现页 — 最终视觉基准 (纯黑 / 荧光绿 / 原生 APP 密度)
   ========================================================================== */
@media (max-width: 1023px) {
  .wl-page { background: var(--wl-bg); }

  /* 1. 顶部栏: 左小标记 · 居中标题 · 右侧操作 */
  .wl-topbar {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    padding: calc(var(--wl-safe-top) + var(--wl-s3)) var(--wl-s4) var(--wl-s3);
    background: var(--wl-bg);
  }
  .wl-topbar-mark {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wl-brand-soft); border: 1px solid var(--wl-brand-line);
  }
  .wl-topbar-mark img { width: 20px; height: auto; display: block; }
  .wl-topbar-title {
    position: absolute; left: 50%; transform: translateX(-50%);
    margin: 0; font-size: var(--wl-f-title); font-weight: 800; color: var(--wl-text-1);
  }
  .wl-topbar-actions { display: flex; align-items: center; gap: var(--wl-s2); }
  .wl-topbar-btn {
    position: relative; width: 30px; height: 30px; border: 0; background: none;
    color: var(--wl-text-1); display: inline-flex; align-items: center; justify-content: center;
  }
  .wl-topbar-btn .wl-icon { width: 19px; height: 19px; }
  .wl-topbar-dot {
    position: absolute; top: 3px; right: 3px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--wl-down);
  }

  /* 2. 主 Banner */
  .wl-hero {
    position: relative; overflow: hidden; isolation: isolate;
    margin: 0 var(--wl-s4) var(--wl-s3);
    border-radius: var(--wl-r-lg); border: 1px solid var(--wl-hairline);
    min-height: 128px;
  }
  .wl-hero-sky { position: absolute; inset: 0; z-index: 0; }
  .wl-hero-sky svg { width: 100%; height: 100%; display: block; }
  .wl-hero-whale {
    position: absolute; z-index: 1; right: 10px; top: 50%; transform: translateY(-50%);
    width: 42%; max-width: 150px; height: auto;      /* 保持原始比例, 不拉伸 */
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(0, 229, 106, 0.35));
    pointer-events: none;
  }
  .wl-hero-body { position: relative; z-index: 2; padding: var(--wl-s4); max-width: 62%; }
  .wl-hero-title { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.2; color: #fff; }
  .wl-hero-title b { color: var(--wl-brand); font-weight: 900; }
  .wl-hero-sub { margin: 6px 0 0; font-size: var(--wl-f-sm); color: var(--wl-text-2); }
  .wl-hero-cta {
    margin-top: var(--wl-s3); height: 32px; padding: 0 14px;
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: var(--wl-r-pill); background: var(--wl-brand);
    color: var(--wl-text-inverse); font-size: var(--wl-f-body); font-weight: 800;
    box-shadow: var(--wl-brand-glow);
  }
  .wl-hero-dots { position: absolute; z-index: 2; left: var(--wl-s4); bottom: 8px; display: flex; gap: 4px; }
  .wl-hero-dots i { width: 12px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.25); }
  .wl-hero-dots i.is-on { width: 16px; background: var(--wl-brand); }

  /* 3. 平台动态 */
  .wl-ticker {
    display: flex; align-items: center; gap: var(--wl-s2);
    margin: 0 var(--wl-s4) var(--wl-s3); padding: 0 var(--wl-s3);
    height: 34px; border-radius: var(--wl-r-sm);
    background: var(--wl-surface-2); border: 1px solid var(--wl-hairline);
    color: var(--wl-text-3);
  }
  .wl-ticker-icon { color: var(--wl-brand); display: inline-flex; flex: none; }
  .wl-ticker-body {
    flex: 1 1 auto; min-width: 0; font-size: var(--wl-f-sm); color: var(--wl-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity var(--wl-dur) var(--wl-ease);
  }
  .wl-ticker-body.is-swap { opacity: 0; }
  .wl-ticker-body.is-empty { color: var(--wl-text-3); }

  /* 4. 核心数据 — 四个紧凑卡片 */
  .wl-stat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    padding: 0 var(--wl-s4) var(--wl-s3);
  }
  .wl-stat {
    background: var(--wl-surface-2); border: 1px solid var(--wl-hairline);
    border-radius: var(--wl-r-sm); padding: 8px 7px; min-width: 0;
  }
  .wl-stat-label {
    display: block; font-size: 9px; color: var(--wl-text-3); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .wl-stat-value {
    display: block; margin-top: 4px; font-size: var(--wl-f-body); font-weight: 800;
    color: var(--wl-text-1); font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .wl-stat-value.is-na { color: var(--wl-text-3); font-weight: 600; }
  .wl-stat-note { display: block; margin-top: 2px; font-size: 8.5px; color: var(--wl-text-3); }

  /* 5. 快捷入口 — 两行四列 */
  .wl-quick-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wl-s3) 4px;
    margin: 0 var(--wl-s4) var(--wl-s3); padding: var(--wl-s4) 2px;
    background: var(--wl-surface-1); border: 1px solid var(--wl-hairline);
    border-radius: var(--wl-r-md);
  }
  .wl-quick {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--wl-text-2); text-align: center; min-width: 0;
  }
  .wl-quick-icon {
    width: 38px; height: 38px; border-radius: var(--wl-r-md);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .wl-quick-label {
    font-size: var(--wl-f-sm); color: var(--wl-text-1); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .wl-quick.is-soon .wl-quick-icon { opacity: 0.5; }
  .wl-quick-soon {
    position: absolute; top: -3px; left: 50%; margin-left: 8px;
    padding: 0 4px; height: 13px; line-height: 13px;
    border-radius: 3px; background: var(--wl-surface-3);
    color: var(--wl-text-3); font-size: 8px; font-weight: 700;
  }

  /* 6. 市场行情卡片 */
  .wl-market-card {
    margin: 0 var(--wl-s4) var(--wl-s3);
    background: var(--wl-surface-1); border: 1px solid var(--wl-hairline);
    border-radius: var(--wl-r-md); overflow: hidden;
  }
  .wl-market-head { display: flex; align-items: center; padding: var(--wl-s3) var(--wl-s3) var(--wl-s2); }
  .wl-market-head h2 { margin: 0; font-size: var(--wl-f-lg); font-weight: 800; color: var(--wl-text-1); }
  .wl-market-all { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: var(--wl-f-sm); color: var(--wl-text-3); }
  .wl-market-tabs { display: flex; gap: 14px; padding: 0 var(--wl-s3); overflow-x: auto; scrollbar-width: none; }
  .wl-market-tabs::-webkit-scrollbar { display: none; }
  .wl-market-tab {
    position: relative; flex: none; padding: 6px 0 8px; border: 0; background: none;
    font-size: var(--wl-f-body); font-weight: 600; color: var(--wl-text-3);
  }
  .wl-market-tab.is-on { color: var(--wl-brand); font-weight: 800; }
  .wl-market-tab.is-on::after {
    content: ''; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
    width: 16px; height: 2px; border-radius: 2px; background: var(--wl-brand);
  }
  .wl-market-card .wl-market-colhead {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) 84px 64px; gap: 6px;
    padding: 6px var(--wl-s3); font-size: 9.5px; color: var(--wl-text-3);
    border-top: 1px solid var(--wl-hairline);
  }
  .wl-market-card .wl-market-colhead > span:first-child { grid-column: 1 / 3; }
  .wl-market-card .wl-market-colhead > span:nth-child(2) { grid-column: 3; text-align: right; }
  .wl-market-card .wl-market-colhead > span:nth-child(3) { grid-column: 4; text-align: right; }

  .wl-mkt-row {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) 84px 64px; gap: 6px;
    align-items: center; padding: 7px var(--wl-s3); color: inherit;
    border-top: 1px solid var(--wl-hairline);
  }
  .wl-mkt-logo { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--wl-surface-3); display: inline-flex; align-items: center; justify-content: center; }
  .wl-mkt-logo img { width: 100%; height: 100%; object-fit: cover; }
  .wl-mkt-id { min-width: 0; display: block; }
  .wl-mkt-pair { display: block; font-size: var(--wl-f-body); font-weight: 800; color: var(--wl-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wl-mkt-pair i { font-style: normal; font-weight: 600; color: var(--wl-text-2); }
  .wl-mkt-vol { display: block; margin-top: 1px; font-size: 9.5px; color: var(--wl-text-3); }
  .wl-mkt-price { text-align: right; min-width: 0; }
  .wl-mkt-price b { display: block; font-size: var(--wl-f-body); font-weight: 700; color: var(--wl-text-1); font-variant-numeric: tabular-nums; }
  .wl-mkt-price i { display: block; margin-top: 1px; font-style: normal; font-size: 9.5px; color: var(--wl-text-3); font-variant-numeric: tabular-nums; }
  .wl-market-card .wl-chg { width: 100%; height: 26px; }
  .wl-market-card .wl-state { padding: var(--wl-s6) var(--wl-s4); }
}

/* ============================================================================
   17. 最终基准收口: 交易对与代币符号不得被省略号截断
   ========================================================================== */
@media (max-width: 1023px) {
  /* 行情页: 交易对名称完整显示 (右侧价格/涨跌/交易改为独立右栏, 见下) */
  .wl-mrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) 82px; gap: var(--wl-s2); align-items: center; }
  .wl-mrow-logo { width: 30px; height: 30px; }
  .wl-mrow-l1 { display: flex; align-items: center; gap: 5px; }
  .wl-mrow-pair {
    flex: 0 0 auto; min-width: 0;
    overflow: visible; text-overflow: clip;   /* 不截断交易对 */
  }
  .wl-mrow-price {
    margin-left: auto; padding-left: 6px;
    font-size: var(--wl-f-sm); color: var(--wl-text-2); font-weight: 600;
  }
  .wl-mrow-right { width: 82px; gap: 3px; }
  .wl-mrow-right .wl-chg { height: 24px; font-size: 12px; }
  .wl-mrow-trade { height: 22px; font-size: 10.5px; }

  /* 闪兑页: 代币符号完整显示, 不出现 US... / BN... */
  .swap-token-select { max-width: none !important; }
  .swap-token-select > span {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

/* ============================================================================
   18. 五个主页面统一到纯黑底 (最终视觉基准)
   桌面端不受影响; 只覆盖移动端的页面级背景与装饰渐变
   ========================================================================== */
@media (max-width: 1023px) {
  html, body { background: var(--wl-bg) !important; }
  body::before, body::after { display: none !important; }        /* 关掉海洋/光晕装饰层 */
  .page-root { background: var(--wl-bg) !important; }
  .page-root::before, .page-root::after { display: none !important; }
  .wl-market-page .home-sticky-header,
  .wl-market-page #market-table,
  .account-page .account-page-root { background: transparent !important; }

  /* 统一左右边距 */
  .wl-market-page > section,
  .account-page .account-page-root { padding-left: var(--wl-s4) !important; padding-right: var(--wl-s4) !important; }
  .wl-market-page .wl-mrow,
  .wl-market-page .wl-market-colhead { padding-left: 0; padding-right: 0; }

  /* 卡片统一: 细边框 + 小圆角, 去掉厚重描边 */
  .card { border-radius: var(--wl-r-md) !important; border-color: var(--wl-hairline) !important; }

  /* 检测页 / 闪兑页首屏压缩 */
  .detect-page .hero, .page-root > section:first-of-type { padding-top: var(--wl-s3) !important; }
}

/* 卡片底色与强调图标统一到设计系统 (仅移动端, 不改业务结构) */
@media (max-width: 1023px) {
  .card, .swap-panel, .swap-card { background: var(--wl-surface-2) !important; }
  /* 面板标题上的黄色强调图标改为中性/品牌色, 避免与金色身份色混淆 */
  .swap-panel h3 .fa-bolt, .page-root h3 .fa-bolt { color: var(--wl-brand) !important; }
}

/* ============================================================================
   19. 五个底部导航页的页头统一 (最终视觉基准)
   行情 / 检测 / 闪兑 / 发现 / 我的 共用同一条规则:
     顶部安全区留白 → 左侧小品牌标记 → 绝对居中的页面标题 → 右侧操作
   桌面端不受影响 (.wl-mobile-only 在 ≥1024px 已经 display:none)
   ========================================================================== */
@media (max-width: 1023px) {
  .wl-page-appbar { position: relative; gap: var(--wl-s2); }
  .wl-page-appbar .wl-appbar-title {
    position: absolute; left: 50%; transform: translateX(-50%);
    pointer-events: none;                 /* 不挡住左右两侧的可点区域 */
    max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .wl-page-appbar .wl-appbar-btn { width: 32px; height: 32px; }
  .wl-page-appbar .wl-appbar-btn .wl-icon { width: 18px; height: 18px; }
  .wl-page-appbar .wl-live { font-size: var(--wl-f-caption); }
}

/* ============================================================================
   20. 检测页 (/detect) — 最终视觉基准落地
   注意: 此前 15/18 节写了 .detect-page 规则, 但页面根节点上并没有这个类,
   规则从未命中。本轮在 detect.tsx 上补齐 class 后, 以下收敛才真正生效。
   仅调整密度与配色, 不触碰检测流程、链选择与 /api/detect 调用。
   ========================================================================== */
@media (max-width: 1023px) {
  /* 页头已由 .wl-page-appbar 承担 → 原 Hero 徽章与副标题在移动端收起, 抬高首屏密度 */
  .detect-page .detect-hero { margin-bottom: var(--wl-s4) !important; text-align: left; }
  .detect-page .detect-hero-glow,
  .detect-page .detect-badge-pulse { display: none; }
  .detect-page .detect-hero h1 { font-size: var(--wl-f-display) !important; margin-bottom: 2px !important; }
  .detect-page .detect-hero > p { font-size: var(--wl-f-sm); }

  /* 三个指标条并排 (原 grid-cols-1 在移动端会竖排, 占掉整屏) */
  .detect-page .detect-hero .grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important; margin-top: var(--wl-s3) !important;
  }
  .detect-page .detect-stat-pill {
    padding: 8px 6px; border-radius: var(--wl-r-sm);
    background: var(--wl-surface-2); border: 1px solid var(--wl-hairline);
    text-align: center; min-width: 0;
  }
  .detect-page .detect-stat-pill > div:first-child {
    font-size: 9px; color: var(--wl-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .detect-page .detect-stat-pill > div:last-child { font-size: var(--wl-f-md) !important; margin-top: 3px; }

  /* 搜索卡: 链选择横向滑动, 输入与按钮各占一行, 不再挤成三段 */
  .detect-page .detect-search-card {
    flex-direction: column; align-items: stretch; gap: var(--wl-s2) !important;
    padding: var(--wl-s3) !important; border-radius: var(--wl-r-md);
  }
  .detect-page .detect-chain-bar { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .detect-page .detect-chain-bar::-webkit-scrollbar { display: none; }
  .detect-page #detect-input {
    background: var(--wl-surface-1) !important; border: 1px solid var(--wl-hairline);
    border-radius: var(--wl-r-sm); font-size: var(--wl-f-body);
  }
  .detect-page #detect-btn { width: 100%; height: var(--wl-btn-h); justify-content: center; }

  /* 内容区左右边距与其它移动页一致 */
  .detect-page > div { padding-left: var(--wl-s4) !important; padding-right: var(--wl-s4) !important; padding-top: 0 !important; }
  .detect-page .card { padding: var(--wl-s3) !important; }
  .detect-page .card h3 { font-size: var(--wl-f-body); }
}

/* ============================================================================
   21. 闪兑页 (/swap) — 最终视觉基准落地
   同样地, .swap-page 此前并不存在于 DOM, 15/18 节的规则从未命中。
   本轮只做视觉归一 (卡片 / 字号 / 输入框 / 主按钮 / 底部避让),
   报价、授权、滑点、Gas、路由与 MEV 的业务逻辑一行未改。
   ========================================================================== */
@media (max-width: 1023px) {
  .swap-page #swap-page-container { padding-top: 0 !important; padding-left: var(--wl-s4) !important; padding-right: var(--wl-s4) !important; }

  /* 极简 / 完整 视图切换收敛成设计系统里的分段控件 */
  .swap-page #swap-lite-toggle-bar > div {
    background: var(--wl-surface-2) !important; border: 1px solid var(--wl-hairline) !important;
    border-radius: var(--wl-r-pill) !important; padding: 3px !important;
  }
  .swap-page .swap-mode-btn {
    height: var(--wl-btn-h-sm); border-radius: var(--wl-r-pill) !important;
    font-size: var(--wl-f-body) !important; color: var(--wl-text-3) !important;
  }
  .swap-page .swap-mode-btn.active {
    background: var(--wl-brand-soft) !important; color: var(--wl-brand) !important;
  }

  /* Token 摘要栏: 超大字号回落到移动端层级 */
  .swap-page #token-header { padding: var(--wl-s3) !important; gap: var(--wl-s3) !important; }
  .swap-page #th-logo { width: 40px !important; height: 40px !important; font-size: var(--wl-f-md) !important; }
  .swap-page #th-symbol { font-size: var(--wl-f-title) !important; }
  .swap-page .swap-th-badges span { font-size: var(--wl-f-sm) !important; padding: 2px 7px !important; }
  .swap-page .swap-th-badges span [class*="font-black"] { font-size: var(--wl-f-body) !important; }

  /* 金额输入: 数字主导, 单位与副信息弱化 */
  .swap-page #from-amount, .swap-page #to-amount { font-size: var(--wl-f-hero) !important; }
  .swap-page .swap-panel { padding: var(--wl-s3) !important; }

  /* 报价明细行: 统一行高与数字对齐 */
  .swap-page #quote-details-extra > div { font-size: var(--wl-f-sm); }
  .swap-page #quote-details-extra .font-mono { font-variant-numeric: tabular-nums; }

  /* 主操作按钮: 品牌绿 + 44px 触达高度, 且不被底部导航遮挡 */
  .swap-page #swap-btn { height: var(--wl-tap); font-size: var(--wl-f-md); border-radius: var(--wl-r-md); }
  .swap-page #swap-page-container { padding-bottom: var(--wl-nav-inset) !important; }
}

/* ============================================================================
   22. 代币详情页 (/swap?to=…) — 移动端信息架构
   参考成熟移动端行情 APP 的信息层级与操作路径, 视觉沿用鲸域深色 + 品牌绿。
   页面上的数据区块全部是既有真实模块, 这里只负责重排与显隐:
     #swap-kline-card / #ave-data-panel / #token-profile-card / .security-card
   桌面端完全不受影响 (以下规则全在 max-width:1023px 内, 且依赖 .wl-td-on)。
   ========================================================================== */
@media (max-width: 1023px) {
  .wl-td-on { padding-top: 0 !important; }

  /* 顶栏被新的紧凑标识区取代 */
  .wl-td-on #token-header { display: none !important; }
  /* 移动端的兑换面板改由底部抽屉承载; 被移进抽屉后此选择器不再命中, 自动恢复显示 */
  .wl-td-on .swap-page-right > #trade-tabs-card { display: none !important; }
  .wl-td-on .swap-page-grid { display: block !important; }
  .wl-td-on .swap-page-left > * + * { margin-top: var(--wl-s3); }

  /* ── 顶部紧凑标识栏 (吸顶) ── */
  .wl-td-bar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--wl-s2);
    padding: calc(var(--wl-safe-top) + var(--wl-s2)) 0 var(--wl-s2);
    background: var(--wl-bg);
    border-bottom: 1px solid var(--wl-hairline);
  }
  .wl-td-back {
    width: 30px; height: 30px; flex: none; border: 0; background: none;
    color: var(--wl-text-1); display: inline-flex; align-items: center; justify-content: center;
  }
  .wl-td-back .wl-icon { width: 20px; height: 20px; }
  .wl-td-idlogo { width: 24px; height: 24px; flex: none; border-radius: 50%; overflow: hidden; }
  .wl-td-idlogo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .wl-td-idlogo > div { width: 100% !important; height: 100% !important; font-size: 10px !important; }
  .wl-td-idtext { min-width: 0; display: flex; align-items: baseline; gap: 5px; }
  .wl-td-idtext b {
    font-size: var(--wl-f-md); font-weight: 800; color: var(--wl-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px;
  }
  .wl-td-idtext i { font-style: normal; font-size: 9px; color: var(--wl-text-3); }
  .wl-td-barchg { font-size: var(--wl-f-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
  .wl-td-baracts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
  .wl-td-act {
    width: 30px; height: 30px; border: 0; background: none; color: var(--wl-text-2);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .wl-td-act .wl-icon { width: 17px; height: 17px; }
  .wl-td-act.is-on { color: var(--wl-brand); }

  /* 更多菜单 */
  .wl-td-more {
    position: absolute; right: 0; top: 100%; z-index: 40; min-width: 148px;
    display: flex; flex-direction: column;
    background: var(--wl-surface-2); border: 1px solid var(--wl-hairline-strong);
    border-radius: var(--wl-r-md); overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  }
  .wl-td-more > * {
    padding: 10px 12px; font-size: var(--wl-f-body); color: var(--wl-text-1);
    text-align: left; background: none; border: 0; border-bottom: 1px solid var(--wl-hairline);
  }
  .wl-td-more > *:last-child { border-bottom: 0; }

  /* ── 价格与首屏统计 ── */
  .wl-td-hero { padding: var(--wl-s3) 0 var(--wl-s2); }
  .wl-td-priceline { display: flex; align-items: baseline; gap: var(--wl-s3); }
  .wl-td-price {
    font-size: var(--wl-f-hero); font-weight: 900; color: var(--wl-text-1);
    font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  .wl-td-chg { font-size: var(--wl-f-md); font-weight: 800; font-variant-numeric: tabular-nums; }
  .wl-td-chg.is-up, .wl-td-barchg.is-up { color: var(--wl-up); }
  .wl-td-chg.is-down, .wl-td-barchg.is-down { color: var(--wl-down); }
  .wl-td-chg.is-na, .wl-td-barchg.is-na { color: var(--wl-text-3); }

  .wl-td-addr {
    margin-top: 5px; display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px; border-radius: var(--wl-r-pill);
    background: var(--wl-surface-2); border: 1px solid var(--wl-hairline);
    color: var(--wl-text-3); font-size: var(--wl-f-caption); font-family: ui-monospace, monospace;
  }
  .wl-td-addr .wl-icon { width: 12px; height: 12px; }

  .wl-td-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: var(--wl-s3); }
  .wl-td-stat {
    min-width: 0; padding: 7px 6px; border-radius: var(--wl-r-sm);
    background: var(--wl-surface-2); border: 1px solid var(--wl-hairline);
  }
  .wl-td-stat i {
    display: block; font-style: normal; font-size: 9px; color: var(--wl-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .wl-td-stat b {
    display: block; margin-top: 3px; font-size: var(--wl-f-body); font-weight: 800;
    color: var(--wl-text-1); font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .wl-td-stat b.is-na { color: var(--wl-text-3); font-weight: 600; font-size: var(--wl-f-sm); }

  /* ── 一级标签 (吸顶, 紧贴顶栏之下) ── */
  .wl-td-tabs {
    position: sticky; top: calc(var(--wl-safe-top) + 46px); z-index: 25;
    display: flex; gap: 18px; padding: var(--wl-s2) 0;
    background: var(--wl-bg); border-bottom: 1px solid var(--wl-hairline);
    overflow-x: auto; scrollbar-width: none;
  }
  .wl-td-tabs::-webkit-scrollbar { display: none; }
  .wl-td-tab {
    position: relative; flex: none; border: 0; background: none; padding: 5px 0 7px;
    font-size: var(--wl-f-md); font-weight: 600; color: var(--wl-text-3);
    min-height: 32px;                       /* 标签不做得过小, 保证可点 */
  }
  .wl-td-tab.is-on { color: var(--wl-text-1); font-weight: 800; }
  .wl-td-tab.is-on::after {
    content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 18px; height: 2px; border-radius: 2px; background: var(--wl-brand);
  }

  /* ── 标签 → 区块显隐 ── */
  .wl-td-on #swap-kline-card,
  .wl-td-on #ave-data-panel,
  .wl-td-on .wl-td-hsum,
  .wl-td-on #token-profile-card,
  .wl-td-on .wl-td-feed,
  .wl-td-on .security-card { display: none !important; }

  .wl-td-on[data-td-tab="market"] #swap-kline-card,
  .wl-td-on[data-td-tab="market"] #ave-data-panel { display: block !important; }
  .wl-td-on[data-td-tab="holders"] .wl-td-hsum { display: grid !important; }
  .wl-td-on[data-td-tab="holders"] #ave-data-panel { display: block !important; }
  /* 详情面板初始带 Tailwind .hidden, 数据未回来时内部有 #tp-loading 加载态,
     强制显示才不会出现整屏空白 */
  .wl-td-on[data-td-tab="detail"] #token-profile-card { display: block !important; }
  .wl-td-on[data-td-tab="feed"] .wl-td-feed { display: block !important; }
  .wl-td-on[data-td-tab="risk"] .security-card { display: block !important; }
  /* 持币人标签下, 数据面板自身的 Tab 头由脚本切到"持币人", 这里隐藏交易子筛选 */
  .wl-td-on[data-td-tab="holders"] #ave-sub-tabs { display: none !important; }

  /* 持币人汇总条 */
  .wl-td-hsum { grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: var(--wl-s3); }
  .wl-td-hsum-cell {
    padding: 8px 9px; border-radius: var(--wl-r-sm);
    background: var(--wl-surface-2); border: 1px solid var(--wl-hairline);
  }
  .wl-td-hsum-cell i { display: block; font-style: normal; font-size: 9.5px; color: var(--wl-text-3); }
  .wl-td-hsum-cell b {
    display: block; margin-top: 3px; font-size: var(--wl-f-md); font-weight: 800;
    color: var(--wl-text-1); font-variant-numeric: tabular-nums;
  }
  .wl-td-hsum-cell b.is-na { color: var(--wl-text-3); font-weight: 600; font-size: var(--wl-f-sm); }

  /* ── 数据表: 横向滚动流畅, 右侧不被裁切 ── */
  .wl-td-on .ave-tab-pane { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: none !important; }
  .wl-td-on .ave-tab-pane .data-table { min-width: 560px; }
  .wl-td-on .ave-tab-pane .data-table th,
  .wl-td-on .ave-tab-pane .data-table td { white-space: nowrap; font-size: var(--wl-f-sm); padding: 7px 8px; }
  /* 移动端不再隐藏"交易者"列 —— 钱包地址是这张表的关键信息, 改为横向滚动查看 */
  .wl-td-on .ave-tab-pane .data-table .hide-mobile { display: table-cell !important; }
  .wl-td-on .ave-main-tabs { overflow-x: auto; scrollbar-width: none; }
  .wl-td-on .ave-main-tabs::-webkit-scrollbar { display: none; }
  .wl-td-on .ave-main-tab, .wl-td-on .ave-sub-tab { flex: none; min-height: 30px; font-size: var(--wl-f-sm); }

  /* K 线区在移动端给足高度, 指标按钮保持可点 */
  .wl-td-on #kline-wrap { min-height: 260px; }
  .wl-td-on .kline-tool-label { font-size: var(--wl-f-caption); }

  /* ── 底部买入 / 卖出 (安全区内, 位于底部导航之上) ── */
  .wl-td-actions {
    position: fixed; left: 0; right: 0; z-index: 40;
    bottom: calc(var(--wl-nav-h) + var(--wl-safe-bottom));
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--wl-s2);
    padding: var(--wl-s2) var(--wl-s4);
    background: var(--wl-bg); border-top: 1px solid var(--wl-hairline);
  }
  .wl-td-actions button {
    height: var(--wl-tap); border: 0; border-radius: var(--wl-r-md);
    font-size: var(--wl-f-md); font-weight: 800;
  }
  .wl-td-buy { background: var(--wl-up); color: var(--wl-text-inverse); }
  .wl-td-sell { background: var(--wl-down); color: #fff; }
  /* 列表内容不被固定操作条与底部导航遮挡 */
  .wl-td-on { padding-bottom: calc(var(--wl-nav-inset) + var(--wl-tap) + var(--wl-s4)) !important; }

  /* ── 兑换抽屉: 承载真实的 #trade-tabs-card ── */
  .wl-td-sheet { position: fixed; inset: 0; z-index: 60; }
  .wl-td-sheet[hidden] { display: none; }
  .wl-td-sheet-mask {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6);
    opacity: 0; transition: opacity var(--wl-dur) var(--wl-ease);
  }
  .wl-td-sheet.is-open .wl-td-sheet-mask { opacity: 1; }
  .wl-td-sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 88vh; display: flex; flex-direction: column;
    background: var(--wl-surface-1);
    border-top-left-radius: var(--wl-r-xl); border-top-right-radius: var(--wl-r-xl);
    border-top: 1px solid var(--wl-hairline-strong);
    transform: translateY(102%); transition: transform var(--wl-dur) var(--wl-ease);
  }
  .wl-td-sheet.is-open .wl-td-sheet-panel { transform: translateY(0); }
  .wl-td-sheet-head {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: var(--wl-s4) var(--wl-s4) var(--wl-s2);
    font-size: var(--wl-f-md); font-weight: 800; color: var(--wl-text-1);
  }
  .wl-td-sheet-grip {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 34px; height: 3px; border-radius: 2px; background: var(--wl-hairline-strong);
  }
  .wl-td-sheet-x {
    position: absolute; right: var(--wl-s4); top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: 0; background: none; color: var(--wl-text-3); font-size: 20px;
  }
  .wl-td-sheet-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 var(--wl-s3) calc(var(--wl-safe-bottom) + var(--wl-s5));
  }
  body.wl-td-sheet-open { overflow: hidden; }
}

/* 桌面端: 移动端专属外壳一律不渲染, 既有两栏布局保持原样 */
@media (min-width: 1024px) {
  .wl-td-bar, .wl-td-hero, .wl-td-tabs, .wl-td-hsum,
  .wl-td-feed, .wl-td-actions, .wl-td-sheet { display: none !important; }
}

/* ============================================================================
   23. 代币详情页收口 (真机 390×844 验证后的修正)
   ========================================================================== */
@media (max-width: 1023px) {
  /* 详情页已有自己的紧凑标识栏, 通用「闪兑」页头在这里是重复的一层,
     白白吃掉约 90px 首屏高度 → 详情态下隐藏。
     (这个类由 wl-token-detail.js 在挂载时打上: 页头是容器的前一个兄弟节点,
      CSS 没有"前一个兄弟"选择器, 用 :has() 会依赖较新的浏览器支持。) */
  .wl-page-appbar.is-td-hidden { display: none !important; }

  /* 周期切换 1m/5m/15m/1H/4H/1D/1W 必须全部可达, 不能被右侧裁切 */
  .wl-td-on .kline-timeframes {
    display: flex; flex-wrap: nowrap; gap: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    max-width: 100%;
  }
  .wl-td-on .kline-timeframes::-webkit-scrollbar { display: none; }
  .wl-td-on .kline-tf { flex: none; }
  .wl-td-on .kline-header { flex-wrap: wrap; gap: var(--wl-s2); }

  /* K 线卡片跟随设计系统的表面色, 去掉偏蓝的旧底色 */
  .wl-td-on #swap-kline-card { background: var(--wl-surface-1) !important; border: 1px solid var(--wl-hairline); }
  .wl-td-on .kline-toolbar .btn { min-height: 30px; }

  /* 底部买卖条与底部导航中央闪兑按钮不再叠压:
     操作条底边贴住导航顶边, 再用 padding 把按钮抬到 FAB 之上,
     FAB (z-index 100) 仍然画在这条 padding 区之上, 视觉上是连续的。 */
  .wl-td-actions { padding-bottom: 20px; }
}

/* ============================================================================
   24. 代币详情页信息密度收口 (首屏两栏 / 池子摘要 / 标签计数 / 创建者)
   ========================================================================== */
@media (max-width: 1023px) {
  /* 首屏两栏: 左价格 · 右指标 */
  .wl-td-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--wl-s4); align-items: start;
  }
  .wl-td-heroL { min-width: 0; }
  .wl-td-pricelabel { display: block; font-size: var(--wl-f-caption); color: var(--wl-text-3); }
  .wl-td-price { display: block; margin-top: 2px; }
  .wl-td-chg { display: block; margin-top: 2px; font-size: var(--wl-f-body); }

  /* 右侧四项指标: 标签左 / 数值右, 逐行对齐 */
  .wl-td-stats { display: block; margin-top: 0; }
  .wl-td-stat {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--wl-s2);
    padding: 0 0 4px; background: none; border: 0; border-radius: 0;
  }
  .wl-td-stat i { font-size: var(--wl-f-caption); color: var(--wl-text-3); flex: none; }
  .wl-td-stat b {
    margin-top: 0; font-size: var(--wl-f-body); text-align: right;
    min-width: 0; flex: 1 1 auto;
  }

  /* 图表下方池子摘要条 */
  .wl-td-pool {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin: var(--wl-s2) 0 var(--wl-s3); padding: 8px 9px;
    background: var(--wl-surface-2); border: 1px solid var(--wl-hairline);
    border-radius: var(--wl-r-sm);
  }
  .wl-td-pool-cell { min-width: 0; }
  .wl-td-pool-cell i { display: block; font-style: normal; font-size: 9px; color: var(--wl-text-3); }
  .wl-td-pool-cell b {
    display: block; margin-top: 2px; font-size: var(--wl-f-sm); font-weight: 700; color: var(--wl-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .wl-td-pool-cell b.is-na { color: var(--wl-text-3); font-weight: 500; }
  /* 池子摘要只在行情标签下出现 */
  .wl-td-on .wl-td-pool { display: none !important; }
  .wl-td-on[data-td-tab="market"] .wl-td-pool { display: grid !important; }

  /* 一级标签上的真实计数徽标 */
  .wl-td-tabnum { margin-left: 3px; font-size: var(--wl-f-caption); font-weight: 600; color: var(--wl-text-3); }
  .wl-td-tab.is-on .wl-td-tabnum { color: var(--wl-brand); }

  /* 创建者二级面板 */
  .wl-td-creator { padding: var(--wl-s3); }
  .wl-td-crow {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wl-s3);
    padding: 9px 0; border-bottom: 1px solid var(--wl-hairline);
  }
  .wl-td-crow i { font-style: normal; font-size: var(--wl-f-sm); color: var(--wl-text-3); }
  .wl-td-crow b { font-size: var(--wl-f-body); color: var(--wl-text-1); font-family: ui-monospace, monospace; }
  .wl-td-crow b.is-na { color: var(--wl-text-3); font-family: inherit; font-weight: 500; }
  .wl-td-crow a { color: var(--wl-brand); }
  .wl-td-cstate { padding-top: var(--wl-s6); }

  /* 持币人行的特殊地址标签 */
  .wl-td-tag {
    margin-left: 5px; padding: 0 5px; height: 15px; line-height: 15px; display: inline-block;
    border-radius: 3px; font-size: 9px; font-weight: 700;
  }
  .wl-td-tag.is-burn { background: rgba(255, 77, 99, 0.14); color: var(--wl-down); }
}

/* ============================================================================
   25. 代币详情页 · 极速兑换 / 完整视图
   这是既有的真实功能, 必须保留。极速兑换下收起标签外壳, 回到紧凑的快速兑换形态,
   兑换面板 (含链切换条 / MEV 防护 / 余额与比例按钮) 回到页面内联位置。
   ========================================================================== */
@media (max-width: 1023px) {
  .wl-td-on #swap-lite-toggle-bar { margin: 0 0 var(--wl-s2); }

  .wl-td-on.wl-td-lite .wl-td-hero,
  .wl-td-on.wl-td-lite .wl-td-tabs,
  .wl-td-on.wl-td-lite .wl-td-pool,
  .wl-td-on.wl-td-lite .wl-td-hsum,
  .wl-td-on.wl-td-lite .wl-td-feed,
  .wl-td-on.wl-td-lite .wl-td-actions { display: none !important; }

  /* 极速兑换下兑换面板必须可见 (它已被移回 .swap-page-right) */
  .wl-td-on.wl-td-lite .swap-page-right > #trade-tabs-card { display: block !important; }
  /* 底部不再有买卖操作条, 留白回落到导航高度 */
  .wl-td-on.wl-td-lite { padding-bottom: var(--wl-nav-inset) !important; }
}

/* ============================================================================
   26. 权益「?」说明弹层 / 等级进度 / 合伙人收款页面
   ========================================================================== */
.wl-help-btn {
  margin-left: 6px; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--wl-hairline-strong); background: var(--wl-surface-3);
  color: var(--wl-text-3); font-size: 10px; line-height: 1; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
.wl-level-progress { margin: 6px 0 0; font-size: var(--wl-f-sm); color: var(--wl-brand); }

.wl-help-sheet { position: fixed; inset: 0; z-index: 70; }
.wl-help-mask {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
  opacity: 0; transition: opacity var(--wl-dur) var(--wl-ease);
}
.wl-help-sheet.is-open .wl-help-mask { opacity: 1; }
.wl-help-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh;
  display: flex; flex-direction: column;
  background: var(--wl-surface-1);
  border-top-left-radius: var(--wl-r-xl); border-top-right-radius: var(--wl-r-xl);
  border-top: 1px solid var(--wl-hairline-strong);
  transform: translateY(102%); transition: transform var(--wl-dur) var(--wl-ease);
}
.wl-help-sheet.is-open .wl-help-panel { transform: translateY(0); }
.wl-help-head {
  position: relative; padding: var(--wl-s4) var(--wl-s4) var(--wl-s2);
  font-size: var(--wl-f-md); color: var(--wl-text-1); text-align: center;
}
.wl-help-x {
  position: absolute; right: var(--wl-s4); top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; background: none; color: var(--wl-text-3); font-size: 20px;
}
.wl-help-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 var(--wl-s4) calc(var(--wl-safe-bottom) + var(--wl-s6));
  font-size: var(--wl-f-body); color: var(--wl-text-2); line-height: 1.6;
}
.wl-help-body b { display: block; margin: var(--wl-s4) 0 var(--wl-s2); color: var(--wl-text-1); }
.wl-help-body ul { margin: 0; padding-left: 18px; }
.wl-help-body li { margin-bottom: 4px; }

/* 合伙人收款页面 */
.wl-pay-box {
  margin: var(--wl-s4); padding: var(--wl-s4);
  background: var(--wl-surface-1); border: 1px solid var(--wl-hairline);
  border-radius: var(--wl-r-md);
}
.wl-pay-box[hidden] { display: none; }
.wl-pay-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--wl-s3);
  padding: 8px 0; border-bottom: 1px solid var(--wl-hairline);
  font-size: var(--wl-f-body);
}
.wl-pay-row:last-child { border-bottom: 0; }
.wl-pay-row span { color: var(--wl-text-3); flex: none; }
.wl-pay-row b { color: var(--wl-text-1); text-align: right; min-width: 0; word-break: break-all; }
.wl-pay-row b.is-mono { font-family: ui-monospace, monospace; font-size: var(--wl-f-sm); }
.wl-pay-label { display: block; margin-top: var(--wl-s4); font-size: var(--wl-f-sm); color: var(--wl-text-3); }
.wl-pay-input {
  width: 100%; height: var(--wl-btn-h); margin: 6px 0 var(--wl-s3); padding: 0 10px;
  background: var(--wl-surface-2); border: 1px solid var(--wl-hairline);
  border-radius: var(--wl-r-sm); color: var(--wl-text-1);
  font-family: ui-monospace, monospace; font-size: var(--wl-f-sm);
}
.wl-pay-input:focus { outline: none; border-color: var(--wl-brand-line); }
.wl-pay-box .wl-btn { width: 100%; }
.wl-pay-missing {
  margin: var(--wl-s3) 0 0; padding-left: 18px; text-align: left;
  font-size: var(--wl-f-sm); color: var(--wl-text-3);
}
.wl-pay-missing li { margin-bottom: 3px; font-family: ui-monospace, monospace; }

/* ============================================================================
   27. 代币详情页 · 详情 / 持币人 / 风险 三个标签的排版精修
   参考成熟行情 APP 的信息密度; 配色仍是鲸域深色科技风 + 品牌绿,
   不引入任何浅色底或第三方品牌元素。
   ========================================================================== */
@media (max-width: 1023px) {

  /* ── 详情标签: 键值两列网格 ── */
  .wl-td-on #token-profile-card { padding: var(--wl-s3) !important; background: var(--wl-surface-1) !important; }
  .wl-td-on #tp-header { gap: var(--wl-s3); }
  .wl-td-on #tp-image { width: 52px !important; height: 52px !important; }
  .wl-td-on #tp-name { font-size: var(--wl-f-title) !important; }
  .wl-td-on #tp-symbol { font-size: var(--wl-f-sm) !important; }

  /* 每行左标签右值; 两列排布把首屏信息量翻倍 */
  .wl-td-on #tp-rows {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--wl-s4); margin-top: var(--wl-s3);
  }
  .wl-td-on #tp-rows > div {
    display: flex; flex-direction: column; align-items: flex-start !important;
    gap: 2px; padding: 7px 0; min-width: 0;
    border-bottom: 1px solid var(--wl-hairline);
  }
  .wl-td-on #tp-rows > div > span:first-child {
    font-size: var(--wl-f-caption); color: var(--wl-text-3);
  }
  .wl-td-on #tp-rows > div > span:last-child {
    justify-content: flex-start !important; text-align: left !important;
    width: 100%; font-size: var(--wl-f-body); color: var(--wl-text-1);
  }
  /* 合约地址这类长值允许换行, 不被右侧裁掉 */
  .wl-td-on #tp-rows .truncate { overflow: visible; text-overflow: clip; white-space: normal; }

  /* 简介 */
  .wl-td-on #tp-desc { font-size: var(--wl-f-body); line-height: 1.65; color: var(--wl-text-2); }

  /* 官方链接与社群: 统一成等高胶囊, 横向可滚 */
  .wl-td-on #tp-links {
    display: flex; flex-wrap: wrap; gap: 6px !important; margin-top: var(--wl-s3) !important;
  }
  .wl-td-on #tp-links .tp-link-btn {
    padding: 7px 11px !important; font-size: var(--wl-f-sm) !important;
    border-radius: var(--wl-r-sm) !important;
  }
  .wl-td-on #tp-links .tp-link-btn i { font-size: 13px !important; }

  /* ── 持币人标签: 宽表格横向滑动, 右侧信息不被裁切 ── */
  .wl-td-on[data-td-tab="holders"] .ave-tab-pane {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    /* 让用户一眼看出还能往右滑 */
    background:
      linear-gradient(to right, var(--wl-surface-1) 30%, rgba(0,0,0,0)) left / 24px 100% no-repeat,
      linear-gradient(to left,  var(--wl-surface-1) 30%, rgba(0,0,0,0)) right / 24px 100% no-repeat;
    background-attachment: local, local;
  }
  .wl-td-on[data-td-tab="holders"] .ave-tab-pane .data-table { min-width: 620px; }
  /* 排名 + 地址列吸左, 横滑时始终知道自己在看谁 */
  .wl-td-on[data-td-tab="holders"] .ave-tab-pane .data-table td:first-child,
  .wl-td-on[data-td-tab="holders"] .ave-tab-pane .data-table th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--wl-surface-1); box-shadow: 1px 0 0 var(--wl-hairline);
  }
  .wl-td-on[data-td-tab="holders"] .ave-tab-pane .data-table td { vertical-align: middle; }
  /* 占比条: 用品牌绿, 不用旧的蓝色 */
  .wl-td-on .ave-tab-pane .data-table .bar,
  .wl-td-on .ave-tab-pane .data-table progress { accent-color: var(--wl-brand); }

  /* ── 风险标签: 保持鲸域深色, 分数与结论作为主视觉 ── */
  .wl-td-on .security-card {
    background: var(--wl-surface-1) !important;
    border: 1px solid var(--wl-hairline) !important;
    border-radius: var(--wl-r-md);
  }
  .wl-td-on .security-header { padding: var(--wl-s3) !important; }
  .wl-td-on .security-body { padding: var(--wl-s3) !important; background: transparent !important; }
  .wl-td-on .security-footer { padding: var(--wl-s2) var(--wl-s3) !important; }
  /* 检测结果项: 通过绿 / 警示金 / 危险红, 与全站涨跌色系一致 */
  .wl-td-on .security-body .sec-item { border-bottom: 1px solid var(--wl-hairline); padding: 8px 0; }
  .wl-td-on .security-body .sec-ok { color: var(--wl-up); }
  .wl-td-on .security-body .sec-warn { color: var(--wl-gold); }
  .wl-td-on .security-body .sec-bad { color: var(--wl-down); }
  /* 第三方检测面板若带浅色底, 在移动端一律拉回深色, 避免整块白屏 */
  .wl-td-on .security-body [class*="bg-white"],
  .wl-td-on .security-body [style*="background:#fff"],
  .wl-td-on .security-body [style*="background: #fff"] {
    background: var(--wl-surface-2) !important; color: var(--wl-text-1) !important;
  }
}