/* Mobile Markets + Token Detail terminal redesign.
   Structure/density only 鈥?WhaleLand brand greens, no Bitget assets. */

html.wl-sheet-lock { overflow: hidden; }

.wl-sheet { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.wl-sheet.is-open { pointer-events: auto; }
.wl-sheet-mask {
  position: absolute; inset: 0; background: rgba(8, 12, 16, 0.45);
  opacity: 0; transition: opacity .2s ease;
}
.wl-sheet.is-open .wl-sheet-mask { opacity: 1; }
.wl-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--wl-surface-1, #fff);
  border-radius: 26px 26px 0 0;
  transform: translateY(104%);
  transition: transform .22s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Network sheet: denser rows so All鈫抩pBNB fit without scrolling on common phones */
.wl-sheet-network .wl-sheet-panel { max-height: min(92vh, 720px); }
.wl-sheet-network .wl-sheet-head { padding: 6px 16px 2px; }
.wl-sheet-network .wl-sheet-title { font-size: 16px; }
.wl-sheet-network .wl-sheet-handle { margin: 6px auto 0; }
.wl-sheet-network .wl-sheet-body { padding: 0 14px calc(10px + env(safe-area-inset-bottom, 0)); overflow-y: auto; }
.wl-sheet-network .wl-sheet-list { gap: 0; }
.wl-sheet-network .wl-sheet-row {
  min-height: 40px; padding: 4px 2px; gap: 10px; font-size: 14px;
}
.wl-sheet-network .wl-sheet-row img,
.wl-sheet-network .wl-sheet-row .wl-sheet-ico {
  width: 32px; height: 32px;
}
.wl-sheet-trade .wl-sheet-panel { max-height: 88vh; }
.wl-sheet-hint {
  margin: 4px 0 10px; font-size: 12px; line-height: 1.4;
  color: var(--wl-text-3, #888);
}
.wl-sheet-toggles { display: flex; flex-direction: column; gap: 2px; }
.wl-sheet-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 8px 4px;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.wl-sheet-toggle span { display: flex; flex-direction: column; gap: 2px; }
.wl-sheet-toggle b { font-size: 14px; font-weight: 600; color: var(--wl-text-1, #111); }
.wl-sheet-toggle i { font-style: normal; font-size: 11px; color: var(--wl-text-3, #888); }
.wl-sheet-toggle.is-disabled { opacity: .55; }
.wl-sheet-toggle input { width: 44px; height: 24px; }
.wl-sheet.is-open .wl-sheet-panel { transform: translateY(0); }
.wl-sheet-handle {
  width: 36px; height: 4px; border-radius: 99px;
  background: rgba(0,0,0,.12); margin: 8px auto 0;
}
.wl-sheet-head { padding: 12px 16px 8px; }
.wl-sheet-title {
  margin: 0; font-size: 17px; font-weight: 700;
  color: var(--wl-text-1, #111);
}
.wl-sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0));
}

.wl-sheet-list { display: flex; flex-direction: column; gap: 2px; }
.wl-sheet-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 6px 4px;
  border: 0; background: transparent; text-align: left;
  color: var(--wl-text-1, #111); font-size: 15px; font-weight: 500;
}
.wl-sheet-row img, .wl-sheet-row .wl-sheet-ico {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: contain; object-position: center; flex: none;
  background: transparent;
  display: block;
}
.wl-sheet-row .wl-sheet-check {
  margin-left: auto; color: var(--wl-brand, #07883B); font-size: 16px;
  opacity: 0;
}
.wl-sheet-row.is-on .wl-sheet-check { opacity: 1; }
.wl-sheet-row .wl-sheet-meta {
  margin-left: auto; font-size: 12px; color: var(--wl-text-3, #888); font-weight: 500;
}
.wl-sheet-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 0 12px;
}
.wl-sheet-chip {
  min-height: 44px; border-radius: 10px; border: 1px solid transparent;
  background: rgba(0,0,0,.04); color: var(--wl-text-1, #111);
  font-size: 14px; font-weight: 600; text-align: center;
}
.wl-sheet-chip.is-on {
  border-color: var(--wl-brand, #07883B);
  color: var(--wl-brand, #07883B);
  background: rgba(7, 136, 59, 0.08);
}
.wl-sheet-chip.is-planned {
  cursor: default;
  opacity: .85;
  color: var(--wl-text-2, #555);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 10px;
}
.wl-sheet-chip .wl-sheet-chip-title { line-height: 1.2; }
.wl-sheet-chip .wl-sheet-planned {
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
  line-height: 1;
}
/* 行情榜单 sheet chip: name and count are separate elements on one row with a
   real gap. Without this the count butts straight against the label and reads
   as one string ("全部代币332"). */
.wl-sheet-chip.wl-sheet-chip--count {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.wl-sheet-chip .wl-sheet-count {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  font-size: 11px;
  font-weight: 600;
  color: var(--wl-text-3, #888);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.wl-sheet-chip.is-on .wl-sheet-count {
  background: rgba(7, 136, 59, .14);
  color: var(--wl-brand, #07883B);
}
/* Long labels must stay readable rather than being clipped mid-character. */
.wl-sheet-chip .wl-sheet-chip-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop column tabs — real count badge + neutral disabled status chip.
   Mirrors the mobile rail so both surfaces read the same. */
.list-tab .list-tab-count {
  margin-left: 5px;
  font-size: 11px;
  font-weight: 600;
  opacity: .68;
  font-variant-numeric: tabular-nums;
}
.list-tab .list-tab-count:empty { display: none; }
.list-tab--disabled {
  opacity: .72;
  cursor: default;
}
.list-tab--disabled .list-tab-status {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(156, 163, 175, .18);
  color: #9CA3AF;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}
/* A disabled column must never take the brand-green selected state. */
.list-tab--disabled.active,
.list-tab--disabled:hover {
  background: transparent !important;
  color: inherit !important;
}
.wl-sheet-section {
  margin: 8px 0 6px; font-size: 12px; font-weight: 600;
  color: var(--wl-text-3, #888);
}

/* Primary CTA tokens — one soft mid-green shared by the trade page main
   button, the detail "立即闪兑" button and the settings modal. No neon green,
   no dark-green-on-black, no heavy shadow. */
:root {
  --wl-cta: #15965A;
  --wl-cta-active: #10804C;
  --wl-cta-disabled: #9BC7AF;
  --wl-cta-fg: #FFFFFF;
  --wl-cta-soft-bg: #EEF8F2;
  --wl-cta-soft-border: #CBE8D5;
  --wl-cta-soft-fg: #318A58;
}

/* 鈹€鈹€ Color preference: only price/change surfaces use these 鈹€鈹€ */
html[data-wl-color="green-up"] {
  --wl-dir-up: #0E9F52;
  --wl-dir-down: #E5484D;
}
html[data-wl-color="red-up"] {
  --wl-dir-up: #E5484D;
  --wl-dir-down: #0E9F52;
}
.wl-dir-up, .wl-chg-up, .is-up { color: var(--wl-dir-up, #0E9F52) !important; }
.wl-dir-down, .wl-chg-down, .is-down { color: var(--wl-dir-down, #E5484D) !important; }
.wl-dir-flat, .wl-chg-na, .is-flat, .is-na.wl-dir-na { color: var(--wl-text-3, #888) !important; }

@media (max-width: 1023px) {
  /* Compact baseline: full-bleed width, no phone-shell centering, no dual padding. */
  html.wl-token-detail-active .page-root.swap-page,
  html.wl-token-detail-active #swap-page-container.wl-td-ssr,
  html.wl-token-detail-active #swap-page-container.wl-td-on,
  html.wl-token-detail-active .swap-page-grid,
  html.wl-token-detail-active .swap-page-left,
  html[data-page="markets"] .page-root.wl-market-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Markets use one root scroller on mobile. This lets the theme rail leave
     naturally and makes the existing, single control header sticky in the
     same coordinate system. */
  html[data-page="markets"] .page-root.wl-market-page {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  html[data-page="markets"] .page-root.wl-market-page > section.max-w-\[1600px\] {
    flex: 0 0 auto !important;
    overflow: visible !important;
    padding-bottom: calc(var(--wl-nav-h, 58px) + var(--wl-nav-float-gap, 8px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }

  html.wl-token-detail-active #swap-page-container.wl-td-ssr,
  html.wl-token-detail-active #swap-page-container.wl-td-on {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }
  html.wl-token-detail-active .wl-td-bar[data-ssr="1"],
  html.wl-token-detail-active .wl-td-tabs[data-ssr="1"] {
    display: flex !important;
  }
  html.wl-token-detail-active .wl-td-footer[data-ssr="1"] {
    display: block !important;
  }
  html.wl-token-detail-active .wl-td-hero[data-ssr="1"] { display: grid !important; }
  html.wl-token-detail-active .wl-td-panels[data-ssr="1"] { display: block !important; }
  html.wl-token-detail-active .wl-td-capability,
  html.wl-token-detail-active .wl-td-capability[data-ssr="1"],
  html.wl-token-detail-active .wl-td-capability.is-on {
    display: none !important;
  }

  /* 鈺愨晲鈺愨晲鈺愨晲 Markets 鈺愨晲鈺愨晲鈺愨晲 */
  html[data-page="markets"] .wl-market-page > .navbar,
  html[data-page="markets"] .home-hero-section,
  html[data-page="markets"] .majors-strip,
  html[data-page="markets"] .hero-search-wrap,
  html[data-page="markets"] .wl-news-section,
  html[data-page="markets"] #refresh-btn {
    display: none !important;
  }

  /* Three compact discovery cards are normal-flow content. They always fit in
     one row at 390/414/430px; only the market controls below become sticky. */
  .wl-mk-appbar {
    display: block;
    min-height: calc(124px + env(safe-area-inset-top, 0px));
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    background: var(--wl-surface-1, #fff);
    border-bottom: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  .wl-mk-appbar h1,
  .wl-mk-appbar .wl-mk-search { display: none !important; }

  .wl-mk-theme-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 7px;
    width: 100%;
    min-width: 0;
    height: 104px;
    padding: 0;
    overflow: hidden;
    touch-action: pan-y;
  }
  .wl-mk-theme-card {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    width: 100%;
    max-width: none;
    height: 104px;
    padding: 6px 7px 7px;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 2px;
    overflow: hidden;
    border: 1px solid rgba(14, 165, 233, .25);
    border-radius: 14px;
    background:
      radial-gradient(circle at 80% 8%, rgba(56, 189, 248, .23), transparent 34%),
      linear-gradient(145deg, #F2FBFE 0%, #E9F6FB 56%, #F8FCFF 100%);
    color: #0B7A9B;
    text-align: left;
    box-sizing: border-box;
  }
  .wl-mk-theme-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .34;
    background-image:
      linear-gradient(rgba(14, 165, 233, .12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(14, 165, 233, .12) 1px, transparent 1px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 48%, transparent 100%);
    mask-image: linear-gradient(100deg, transparent 0%, #000 48%, transparent 100%);
  }
  .wl-mk-theme-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -24px;
    top: -28px;
    width: 82px;
    height: 82px;
    border: 1px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 12px rgba(14, 165, 233, .05);
    opacity: .42;
  }
  .wl-mk-theme-card.is-meme {
    border-color: rgba(244, 63, 94, .26);
    background:
      radial-gradient(circle at 82% 8%, rgba(251, 113, 133, .25), transparent 34%),
      linear-gradient(145deg, #FFF5F8 0%, #FFF0F5 56%, #FFF8F0 100%);
    color: #D33870;
  }
  .wl-mk-theme-card.is-meme::before {
    background-image:
      radial-gradient(circle, rgba(244, 63, 94, .22) 1px, transparent 1.5px),
      linear-gradient(130deg, transparent 43%, rgba(249, 115, 22, .14) 44% 46%, transparent 47%);
    background-size: 14px 14px, 100% 100%;
  }
  .wl-mk-theme-card.is-ranking {
    border-color: rgba(100, 116, 255, .28);
    background:
      radial-gradient(circle at 82% 8%, rgba(250, 204, 21, .25), transparent 32%),
      linear-gradient(145deg, #F3F7FF 0%, #F3F3FE 56%, #FFFBEA 100%);
    color: #5364C4;
  }
  .wl-mk-theme-card.is-ranking::before {
    background-image:
      linear-gradient(90deg, rgba(99, 102, 241, .12) 1px, transparent 1px),
      linear-gradient(rgba(234, 179, 8, .13) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  .wl-mk-theme-card.is-on {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor, 0 5px 12px rgba(15, 23, 42, .07);
  }
  .wl-mk-theme-art {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    min-height: 50px;
    border-radius: 10px;
    background: rgba(255,255,255,.52);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
    flex: none;
  }
  .wl-mk-theme-art svg {
    width: 88px;
    max-width: 100%;
    height: 48px;
    overflow: visible;
  }
  .wl-mk-theme-copy {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'eyebrow title'
      'subtitle subtitle';
    align-items: baseline;
    min-width: 0;
    column-gap: 4px;
    row-gap: 2px;
  }
  .wl-mk-theme-copy strong,
  .wl-mk-theme-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wl-mk-theme-eyebrow {
    grid-area: eyebrow;
    color: currentColor;
    font-size: 7px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    opacity: .78;
  }
  .wl-mk-theme-copy strong {
    grid-area: title;
    color: var(--wl-text-1, #111827);
    font-size: 12px;
    line-height: 1.08;
    font-weight: 760;
    letter-spacing: -.02em;
  }
  .wl-mk-theme-copy small {
    grid-area: subtitle;
    color: var(--wl-text-3, #7B8492);
    font-size: 8.5px;
    line-height: 1.15;
  }

  /* Unified sticky chrome: cats + filters + sort. There is exactly one instance in the DOM. */
  .wl-mk-sticky {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 28;
    isolation: isolate;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    transform: translateZ(0);
  }
  /* Shared pill system 鈥?cats + network + 24H share one height / radius / center */
  .wl-mk-cats-row {
    display: flex;
    align-items: center;
    height: var(--wl-mk-filter-h, 34px);
    padding: 2px 9px;
    box-sizing: border-box;
    background: #fff;
    gap: 5px;
    overflow: hidden;
  }
  .wl-mk-cats-track-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
  }
  .wl-mk-cats-track-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 22px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(to right, rgba(255,255,255,0), #fff 88%);
  }
  .wl-mk-cats,
  .wl-mk-filters {
    display: flex;
    align-items: center;
    gap: 5px;
    height: var(--wl-mk-filter-h, 34px);
    padding: 2px 9px;
    box-sizing: border-box;
    background: #fff;
  }
  .wl-mk-cats-row .wl-mk-cats {
    width: 100%;
    height: 100%;
    padding: 0 18px 0 0; /* keep last pill fully visible before fade / More */
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    /* Snap to whole pills so a swipe never parks a half-cut label at either
       edge, and keep scrollIntoView from tucking a pill under the fade / More. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px 22px;
  }
  .wl-mk-cats-row .wl-mk-cat[data-mk-cat] {
    scroll-snap-align: start;
  }
  .wl-mk-cats::-webkit-scrollbar { display: none; }
  .wl-mk-cat-more {
    flex: none;
    flex-shrink: 0;
    gap: 3px;
    position: relative;
    z-index: 3;
    box-shadow: -8px 0 10px -8px rgba(0,0,0,.06);
  }

  .wl-mk-cat,
  .wl-mk-filter-btn {
    box-sizing: border-box;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--wl-mk-cat-h, 29px);
    min-height: var(--wl-mk-cat-h, 29px);
    max-height: var(--wl-mk-cat-h, 29px);
    min-width: 34px;
    padding: 0 9px;
    border: 0;
    border-radius: 10px;
    background: #F5F5F5;
    color: var(--wl-text-2, #555);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }
  .wl-mk-cat.is-on,
  .wl-mk-filter-btn.is-on {
    /* Neutral selected state: one step darker than the idle chips so the
       current category/filter reads immediately without returning to green. */
    background: #DDE2E6;
    color: #111827;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .12);
  }
  .wl-mk-cat.is-planned {
    flex-direction: column;
    gap: 2px;
    padding: 4px 10px;
    background: #F0F1F3;
    color: #9CA3AF;
  }
  .wl-mk-cat.is-planned.is-on {
    background: #F0F1F3;
    color: #9CA3AF;
  }
  .wl-mk-cat-title {
    min-width: 0;
    line-height: 1.1;
  }
  /* Neutral status chip (即将开放 / 计划中) — never the brand-green
     selected treatment, so a disabled column cannot read as active. */
  .wl-mk-cat-sub {
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    color: #9CA3AF;
  }
  /* Real token count next to a column label. Rendered only when the server
     reports a positive number; disabled columns never get one. */
  .wl-mk-cat .wl-mk-cat-count {
    margin-left: 4px;
    font-size: 9px;
    font-weight: 550;
    line-height: 1;
    opacity: .68;
    font-variant-numeric: tabular-nums;
  }
  .wl-mk-cat.is-on .wl-mk-cat-count { opacity: .85; }
  .wl-mk-filter-btn .wl-mk-chev,
  .wl-mk-cat .wl-mk-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    opacity: .55;
    flex: none;
    margin: 0;
    transform: translateY(0);
  }
  .wl-mk-filter-btn {
    gap: 6px;
  }
  .wl-mk-planned-tip {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    z-index: 80;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(17,17,17,.88);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
  }
  .wl-mk-planned-tip.is-on { opacity: 1; }

  /* Closed network pill: logo + chevron only 鈥?fixed width so chain switch never resizes. */
  .wl-mk-network-btn {
    width: 48px;
    min-width: 52px;
    max-width: 48px;
    padding: 0 7px;
    gap: 4px;
    color: #1A1F2C;
  }
  .wl-mk-network-btn .wl-mk-network-ico {
    width: 18px; height: 18px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit;
  }
  .wl-mk-network-btn .wl-mk-network-ico img,
  .wl-mk-network-btn .wl-mk-network-ico .wl-mk-globe {
    width: 18px; height: 18px;
    object-fit: contain; border-radius: 50%;
    display: block;
  }
  .wl-mk-network-btn .wl-mk-network-ico .wl-mk-globe {
    border-radius: 0;
    color: inherit;
  }
  .wl-mk-network-btn .wl-mk-chev {
    color: inherit;
    opacity: .7;
  }
  #wl-mk-network-label { display: none !important; }
  #wl-mk-tf-btn {
    min-width: 49px;
  }
  .wl-mk-rank-grid .wl-sheet-chip {
    border-radius: 12px;
  }
  #wl-mk-tf-label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  .wl-mk-search-btn {
    margin-left: auto;
    width: 32px; height: 32px; min-width: 32px; min-height: 32px;
    border: 0; background: transparent; color: var(--wl-text-1, #111);
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
    align-self: center;
  }
  .wl-mk-search-btn .wl-icon { width: 18px; height: 18px; }
  /* Language / theme prefs live only on Account — no reserved gap */
  .wl-mk-lang-toggle,
  .wl-mk-lang-toggle.wl-lang-toggle { display: none !important; width: 0 !important; margin: 0 !important; padding: 0 !important; }

  .wl-mk-sort {
    display: grid;
    grid-template-columns: 54px 64px minmax(92px, 1fr) 62px;
    gap: 4px; height: var(--wl-mk-sort-h, 28px); padding: 0 12px;
    align-items: center;
    background: #fff;
    border-bottom: 0;
    font-size: var(--wl-type-meta, 12px); color: var(--wl-text-3, #999); font-weight: 500;
  }
  .wl-mk-sort button {
    border: 0; background: transparent; color: inherit;
    font: inherit; text-align: left; padding: 0;
    display: inline-flex; align-items: center; gap: 2px;
  }
  .wl-mk-sort button:nth-child(3),
  .wl-mk-sort button:last-child { justify-content: flex-end; text-align: right; }
  .wl-mk-sort button.is-on { color: var(--wl-text-1, #333); font-weight: 700; }
  .wl-mk-sort .wl-mk-arrow {
    position: relative;
    display: inline-flex;
    width: 5px;
    height: 10px;
    flex: 0 0 5px;
    opacity: .58;
  }
  .wl-mk-sort .wl-mk-arrow::before,
  .wl-mk-sort .wl-mk-arrow::after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-left: 2.5px solid transparent;
    border-right: 2.5px solid transparent;
  }
  .wl-mk-sort .wl-mk-arrow::before {
    top: 0;
    border-bottom: 3.5px solid currentColor;
  }
  .wl-mk-sort .wl-mk-arrow::after {
    bottom: 0;
    border-top: 3.5px solid currentColor;
  }
  .wl-mk-sort .wl-mk-arrow.is-asc::after,
  .wl-mk-sort .wl-mk-arrow.is-desc::before { opacity: .22; }
  .wl-mk-sort .wl-mk-arrow.is-asc::before,
  .wl-mk-sort .wl-mk-arrow.is-desc::after { opacity: 1; }

  /* No alert strip placeholder when real alerts are unavailable */
  .wl-mk-alert { display: none !important; }

  /* Hide legacy mobile chrome once redesign chrome is present */
  html[data-page="markets"] .wl-market-design-head,
  html[data-page="markets"] .wl-market-design-info,
  html[data-page="markets"] .wl-market-colhead,
  html[data-page="markets"] #mobile-market-filter-row .home-filter-bar,
  html[data-page="markets"] #mobile-market-filter-row .mobile-market-filter-divider {
    display: none !important;
  }
  html[data-page="markets"] #home-sticky-header,
  html[data-page="markets"] #mobile-market-filter-row {
    position: static !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important;
    box-shadow: none !important;
  }
  html[data-page="markets"] .page-root.wl-market-page > section.max-w-\[1600px\] {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  html[data-page="markets"] #market-table.card {
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    margin: 0 !important;
  }
  /* Keep the table wrapper visible 鈥?hiding .market-table-scroll-x blanked the whole list
     while pagination (a sibling) still rendered. Only hide desktop columns / thead. */
  html[data-page="markets"] .market-table-scroll-x {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
  }
  html[data-page="markets"] .data-table thead,
  html[data-page="markets"] .data-table .col-rank,
  html[data-page="markets"] .data-table .col-pair,
  html[data-page="markets"] .data-table .col-price,
  html[data-page="markets"] .data-table .col-5m,
  html[data-page="markets"] .data-table .col-1h,
  html[data-page="markets"] .data-table .col-24h,
  html[data-page="markets"] .data-table .col-liq,
  html[data-page="markets"] .data-table .col-mcap,
  html[data-page="markets"] .data-table .col-fdv,
  html[data-page="markets"] .data-table .col-vol,
  html[data-page="markets"] .data-table .col-txns,
  html[data-page="markets"] .data-table .col-created,
  html[data-page="markets"] .data-table .col-action {
    display: none !important;
  }
  html[data-page="markets"] .data-table,
  html[data-page="markets"] .data-table tbody,
  html[data-page="markets"] .data-table tr,
  html[data-page="markets"] .data-table td.col-m {
    display: block !important; width: 100% !important;
    min-width: 0 !important; border: 0 !important;
  }
  html[data-page="markets"] .data-table tr {
    border-bottom: 1px solid rgba(0,0,0,.045) !important;
  }
  html[data-page="markets"] #pagination-bar {
    border-top: 1px solid rgba(0,0,0,.06) !important;
    background: #fff !important;
    padding: 10px 14px 12px !important;
  }
  html[data-page="markets"] #pagination-bar .page-bar-mobile {
    width: 100%;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  html[data-page="markets"] #pagination-bar .page-btn {
    min-height: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 12px !important;
    color: #1f2937 !important;
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }
  html[data-page="markets"] #pagination-bar .page-btn--nav {
    min-width: 92px !important;
  }
  html[data-page="markets"] #pagination-bar .page-btn--active {
    color: #fff !important;
    background: var(--wl-brand, #07883B) !important;
    border-color: var(--wl-brand, #07883B) !important;
  }
  html[data-page="markets"] #pagination-bar .page-btn--disabled,
  html[data-page="markets"] #pagination-bar .page-btn:disabled {
    color: #9ca3af !important;
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
  }
  html[data-page="markets"] #pagination-bar .page-indicator {
    min-width: 72px;
    text-align: center;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
  }
  html[data-page="markets"] .wl-mk-technical-status {
    display: none !important;
  }

  /* The section owns the one and only bottom-nav reserve. Keeping the page
     root at zero prevents two independent nav paddings from creating a large
     blank band after the pager. */
  html[data-page="markets"] .wl-market-page {
    padding-bottom: 0 !important;
  }

  /* Compact token rows — full token label + 24h volume; no mobile market cap. */
  /* 2026-08-02 列宽重分配:
     旧的 1.35fr : 0.85fr + 固定 62px 胶囊, 在 390px 下价格列只剩 ~89px、
     胶囊内容区只剩 50px, 长价格与大涨跌幅同时放不下。
     现在代币名区收窄、价格列给足、涨跌幅列按内容自适应 (auto) 并有最小宽度,
     三列都靠真实内容定宽, 不再互相挤压。左右 padding 收到 10px 再让出一点。 */
  html[data-page="markets"] .wl-mrow {
    display: grid !important;
    grid-template-columns:
      var(--wl-mrow-logo, 28px)
      minmax(0, 1fr)
      var(--wl-mrow-price-min, 96px)
      var(--wl-chg-pill-min, 78px) !important;
    gap: 5px !important; align-items: center !important;
    min-height: var(--wl-mrow-h, 50px) !important; height: auto !important;
    padding: var(--wl-mrow-pad-y, 5px) var(--wl-mrow-pad-x, 8px) !important;
    background: transparent !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
  }
  /* Shared token + chain stack: markets list, detail header, K-line header */
  html[data-page="markets"] .wl-mrow-logo {
    position: relative !important;
    width: var(--wl-mrow-logo, 28px) !important; height: var(--wl-mrow-logo, 28px) !important;
    min-width: var(--wl-mrow-logo, 28px) !important; min-height: var(--wl-mrow-logo, 28px) !important;
    flex: 0 0 var(--wl-mrow-logo, 28px) !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo,
  html.wl-token-detail-active #th-logo.wl-mrow-logo,
  #th-logo.wl-mrow-logo {
    position: relative !important;
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    flex: 0 0 36px !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  /* Markets list: tight circular vessel */
  html[data-page="markets"] .wl-mrow-logo > i:first-child {
    position: absolute !important;
    top: 1px !important; left: 1px !important; right: 1px !important; bottom: 1px !important;
    width: 28px !important; height: 28px !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #F2F4F7 !important;
    border: 0 !important; box-shadow: none !important;
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    z-index: 1 !important;
  }
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo > i:first-child,
  html.wl-token-detail-active #th-logo.wl-mrow-logo > i:first-child,
  #th-logo.wl-mrow-logo > i:first-child {
    position: absolute !important;
    top: 2px !important; left: 2px !important; right: 2px !important; bottom: 2px !important;
    width: 32px !important; height: 32px !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #F2F4F7 !important;
    border: 0 !important; box-shadow: none !important;
    display: flex !important;
    align-items: center !important; justify-content: center !important;
    z-index: 1 !important;
  }
  html[data-page="markets"] .wl-mrow-logo > i:first-child > *,
  html[data-page="markets"] .wl-mrow-logo img.token-logo,
  html[data-page="markets"] .wl-mrow-logo .token-logo,
  html[data-page="markets"] .wl-mrow-logo [class*="token"] {
    width: 28px !important; height: 28px !important;
    max-width: 28px !important; max-height: 28px !important;
    min-width: 28px !important; min-height: 28px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #F2F4F7 !important;
    box-shadow: none !important;
    border: 0 !important;
    display: block !important;
  }
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo > i:first-child > *,
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo img.token-logo,
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo .token-logo,
  html.wl-token-detail-active #th-logo.wl-mrow-logo > i:first-child > *,
  html.wl-token-detail-active #th-logo.wl-mrow-logo img.token-logo,
  #th-logo.wl-mrow-logo > i:first-child > *,
  #th-logo.wl-mrow-logo img.token-logo {
    width: 32px !important; height: 32px !important;
    max-width: 32px !important; max-height: 32px !important;
    min-width: 32px !important; min-height: 32px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #F2F4F7 !important;
    box-shadow: none !important;
    border: 0 !important;
    display: block !important;
  }
  /* USDT local circular mark already fills the disc — keep teal, no grey wash */
  html[data-page="markets"] .wl-mrow-logo img.token-logo[src*="token-logos/usdt"],
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo img.token-logo[src*="token-logos/usdt"],
  html.wl-token-detail-active #th-logo.wl-mrow-logo img.token-logo[src*="token-logos/usdt"],
  #th-logo.wl-mrow-logo img.token-logo[src*="token-logos/usdt"] {
    background: #26A17B !important;
  }
  html[data-page="markets"] .wl-mrow-logo .token-logo-fb {
    width: 28px !important; height: 28px !important;
    min-width: 28px !important; min-height: 28px !important;
    border-radius: 50% !important;
    background: #ECEFF3 !important;
    color: #5A6270 !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    font-size: 11px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo .token-logo-fb,
  html.wl-token-detail-active #th-logo.wl-mrow-logo .token-logo-fb,
  #th-logo.wl-mrow-logo .token-logo-fb {
    width: 38px !important; height: 38px !important;
    min-width: 38px !important; min-height: 38px !important;
    border-radius: 50% !important;
    background: #ECEFF3 !important;
    color: #5A6270 !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    box-shadow: none !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Chain badge: the real chain mark fills the disc; no white padding ring. */
  html[data-page="markets"] .wl-mrow-logo > i:last-child {
    position: absolute !important;
    top: auto !important; left: auto !important;
    right: -2px !important; bottom: -2px !important;
    width: 14px !important; height: 14px !important;
    border-radius: 50% !important; overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06) !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo > i:last-child,
  html.wl-token-detail-active #th-logo.wl-mrow-logo > i:last-child,
  #th-logo.wl-mrow-logo > i:last-child {
    position: absolute !important;
    top: auto !important; left: auto !important;
    right: -1px !important; bottom: -1px !important;
    width: 14px !important; height: 14px !important;
    border-radius: 50% !important; overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06) !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
  html[data-page="markets"] .wl-mrow-logo > i:last-child > *,
  html[data-page="markets"] .wl-mrow-logo > i:last-child img,
  html[data-page="markets"] .wl-mrow-logo .chain-icon,
  html[data-page="markets"] .wl-mrow-logo .chain-logo-img {
    width: 14px !important; height: 14px !important;
    max-width: 14px !important; max-height: 14px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
  }
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo > i:last-child > *,
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo .chain-icon,
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo .chain-logo-img,
  html.wl-token-detail-active #th-logo.wl-mrow-logo > i:last-child > *,
  html.wl-token-detail-active #th-logo.wl-mrow-logo .chain-icon,
  html.wl-token-detail-active #th-logo.wl-mrow-logo .chain-logo-img,
  #th-logo.wl-mrow-logo > i:last-child > *,
  #th-logo.wl-mrow-logo .chain-icon,
  #th-logo.wl-mrow-logo .chain-logo-img {
    width: 14px !important; height: 14px !important;
    max-width: 14px !important; max-height: 14px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
  }
  html[data-page="markets"] .wl-mrow-logo .chain-icon {
    width: 14px !important; height: 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    color: transparent !important;
  }
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo .chain-icon,
  html.wl-token-detail-active #th-logo.wl-mrow-logo .chain-icon,
  #th-logo.wl-mrow-logo .chain-icon {
    width: 14px !important; height: 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    color: transparent !important;
  }
  html[data-page="markets"] .wl-mrow-logo .chain-icon:has(.chain-logo-img),
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo .chain-icon:has(.chain-logo-img),
  html.wl-token-detail-active #th-logo.wl-mrow-logo .chain-icon:has(.chain-logo-img),
  #th-logo.wl-mrow-logo .chain-icon:has(.chain-logo-img) {
    background: transparent !important;
    padding: 0 !important;
  }
  html[data-page="markets"] .wl-mrow-logo .chain-icon.chain-logo-fallback,
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo .chain-icon.chain-logo-fallback,
  html.wl-token-detail-active #th-logo.wl-mrow-logo .chain-icon.chain-logo-fallback,
  #th-logo.wl-mrow-logo .chain-icon.chain-logo-fallback {
    font-size: 9px !important; font-weight: 700 !important;
    color: #555 !important; background: #F0F2F5 !important;
  }
  html[data-page="markets"] .wl-mrow-main { min-width: 0 !important; }
  html[data-page="markets"] .wl-mrow-l1 {
    display: flex !important; align-items: center !important; gap: 4px !important;
    min-width: 0 !important;
  }
  html[data-page="markets"] .wl-mrow-sym {
    min-width: 0 !important;
    font-size: 13px !important; font-weight: 650 !important;
    line-height: 1.15 !important;
    color: var(--wl-text-1, #111) !important;
    overflow: visible !important; text-overflow: clip !important;
    white-space: normal !important; max-width: none !important;
    overflow-wrap: anywhere !important;
  }
  html[data-page="markets"] .wl-mrow-sym.is-long { font-size: 12px !important; }
  html[data-page="markets"] .wl-mrow-sym.is-xlong { font-size: 11px !important; }
  html[data-page="markets"] .wl-mrow-tag {
    flex: none; font-size: 10px; font-weight: 500;
    color: var(--wl-text-3, #888); background: rgba(0,0,0,.04);
    border-radius: 3px; padding: 1px 4px; line-height: 1.2;
  }
  /* The mobile row keeps only 24h volume. Market cap remains in the desktop
     table and data model but no longer consumes vertical space here. */
  html[data-page="markets"] .wl-mrow-l2 {
    margin-top: 1px !important;
    font-size: 11px !important; color: var(--wl-text-3, #888) !important;
    display: flex !important; gap: 0 !important; align-items: center !important;
    flex-wrap: nowrap !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  html[data-page="markets"] .wl-mrow-l2 > span { flex: 0 0 auto !important; min-width: 0 !important; }
  html[data-page="markets"] .wl-mrow-l2 b {
    color: var(--wl-text-3, #888) !important; font-weight: 500 !important;
  }
  html[data-page="markets"] .wl-mrow-sep { opacity: .35; }
  html[data-page="markets"] .wl-mrow-price-col {
    min-width: 0 !important;
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  html[data-page="markets"] .wl-mrow-chg-col {
    width: auto !important;
    min-width: var(--wl-chg-pill-min, 58px) !important;
    flex: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  html[data-page="markets"] .wl-mrow-right {
    text-align: right !important; display: flex !important;
    flex-direction: row !important; align-items: center !important; gap: 8px !important;
  }
  /* 2026-08-02: 最新价格永不省略。
     原来是 overflow:hidden + text-overflow:ellipsis, 而价格列在 390px 下只有
     ~89px, $0.00004821 需要 ~96px (iOS SF Pro), 于是被裁成 "$0.0000…" ——
     用户看不到真实有效数字。现在改为按长度降字号 (15 → 14 → 13px, 不低于 12px),
     宁可字小也要把有效数字显示全。 */
  html[data-page="markets"] .wl-mrow-price {
    font-size: var(--wl-type-body, 15px) !important; font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--wl-text-1, #111) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html[data-page="markets"] .wl-mrow-price.is-long { font-size: 14px !important; }
  html[data-page="markets"] .wl-mrow-price.is-xlong {
    font-size: 13px !important;
    letter-spacing: -0.3px !important;
  }
  html[data-page="markets"] .wl-mrow-price sub {
    font-size: .7em !important;
    vertical-align: baseline !important;
  }
  /* 涨跌幅胶囊: 内容自适应 + 最小安全宽度, 不再写死 62px。
     +421.40% 在 iOS 上需要约 70px 字形宽度, 旧的 width/max-width:62px 把盒子
     锁死, 而 .wl-chg 没有 overflow:hidden, 文字直接画到盒子外 ——
     再被屏幕右边裁掉, 百分号就没了。 */
  /* 胶囊填满自己那一列 (列宽 78px 已按最坏情况 +421.40% @13px 算过),
     再按内容长度降字号 14 → 13px (不低于 12px)。这样宽度是确定的,
     不依赖 grid auto 轨道的 max-content 推导, 也就不会再被右边裁掉。 */
  html[data-page="markets"] .wl-mrow .wl-chg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 4px !important;
    border-radius: 5px !important;
    font-size: var(--wl-type-control, 14px) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #fff !important;
    box-sizing: border-box !important;
  }
  html[data-page="markets"] .wl-mrow .wl-chg.is-long { font-size: 13px !important; }
  html[data-page="markets"] .wl-mrow .wl-chg.is-xlong {
    font-size: 12px !important;
    letter-spacing: -0.3px !important;
  }
  html[data-page="markets"] .wl-mrow .wl-chg-up,
  html[data-page="markets"] .wl-mrow .wl-dir-up.wl-chg-up {
    background: var(--wl-up, #0E9F52) !important;
    color: #fff !important;
  }
  html[data-page="markets"] .wl-mrow .wl-chg-down,
  html[data-page="markets"] .wl-mrow .wl-dir-down.wl-chg-down {
    background: var(--wl-down, #D93A2B) !important;
    color: #fff !important;
  }
  html[data-page="markets"] .wl-mrow .wl-chg-na {
    background: var(--wl-sunken, #F0F1F3) !important;
    color: var(--wl-text-3, #888) !important;
  }
  html[data-page="markets"] .wl-chain-tag { display: none !important; }
  html[data-page="markets"] .page-root.wl-market-page {
    background: #fff !important;
  }
  html[data-page="markets"] .wl-mk-list-skel {
    padding: 0 12px;
  }
  html[data-page="markets"] .wl-mk-list-skel > i {
    display: block; height: var(--wl-mrow-h, 54px); margin: 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
    background: linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,.06), rgba(0,0,0,.03));
    background-size: 200% 100%;
    animation: wl-mk-skel 1.1s ease-in-out infinite;
  }
  @keyframes wl-mk-skel {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

  /* 鈺愨晲鈺愨晲鈺愨晲 Token Detail 鈺愨晲鈺愨晲鈺愨晲 */
  html.wl-token-detail-active .wl-td-bar {
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px) 10px 0 6px !important;
    gap: 8px !important; align-items: center !important;
  }
  /* Detail / K-line host aligns with markets stack; never clip the chain badge */
  html.wl-token-detail-active .wl-td-idlogo.wl-mrow-logo,
  html.wl-token-detail-active #th-logo.wl-mrow-logo {
    align-self: center !important;
    overflow: visible !important;
  }
  html[data-theme="dark"].wl-token-detail-active .wl-td-idlogo.wl-mrow-logo > i:first-child,
  html[data-theme="dark"].wl-token-detail-active .wl-td-idlogo.wl-mrow-logo > i:first-child > *,
  html[data-theme="dark"].wl-token-detail-active .wl-td-idlogo.wl-mrow-logo img.token-logo,
  html[data-theme="dark"].wl-token-detail-active .wl-td-idlogo.wl-mrow-logo .token-logo,
  html[data-theme="dark"].wl-token-detail-active .wl-td-idlogo.wl-mrow-logo .token-logo-fb,
  html[data-theme="dark"].wl-token-detail-active #th-logo.wl-mrow-logo > i:first-child,
  html[data-theme="dark"].wl-token-detail-active #th-logo.wl-mrow-logo > i:first-child > *,
  html[data-theme="dark"].wl-token-detail-active #th-logo.wl-mrow-logo img.token-logo,
  html[data-theme="dark"].wl-token-detail-active #th-logo.wl-mrow-logo .token-logo-fb {
    background: #2a2f35 !important;
  }
  html[data-theme="dark"].wl-token-detail-active .wl-td-idlogo.wl-mrow-logo img.token-logo[src*="token-logos/usdt"],
  html[data-theme="dark"].wl-token-detail-active #th-logo.wl-mrow-logo img.token-logo[src*="token-logos/usdt"] {
    background: #26A17B !important;
  }
  html[data-theme="dark"].wl-token-detail-active .wl-td-idlogo.wl-mrow-logo > i:last-child,
  html[data-theme="dark"].wl-token-detail-active #th-logo.wl-mrow-logo > i:last-child,
  html[data-theme="dark"].wl-token-detail-active .wl-td-idlogo.wl-mrow-logo .chain-icon,
  html[data-theme="dark"].wl-token-detail-active #th-logo.wl-mrow-logo .chain-icon {
    border-color: #171A1D !important;
    background: #171A1D !important;
  }
  html.wl-token-detail-active .wl-td-idtext {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 1px !important;
    min-width: 0 !important; flex: 1 1 auto !important;
  }
  html.wl-token-detail-active .wl-td-idtext b {
    font-size: 15px !important; line-height: 1.15 !important;
  }
  html.wl-token-detail-active .wl-td-idsub {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--wl-text-3, #888); font-weight: 500;
  }
  html.wl-token-detail-active .wl-td-idsub button {
    border: 0; background: transparent; color: inherit;
    font: inherit; display: inline-flex; align-items: center; gap: 3px; padding: 0;
  }
  html.wl-token-detail-active .wl-td-barchg { display: none !important; }
  /* Keep wrap tag + chain short label visible so Base WETH never looks like "--". */
  html.wl-token-detail-active .wl-td-wrap:not(.is-na) {
    display: inline-flex !important;
    font-size: 11px; font-weight: 700; color: var(--wl-text-2, #555);
    padding: 1px 6px; border-radius: 6px;
    background: rgba(0,0,0,.04);
  }
  html.wl-token-detail-active .wl-td-idtext > i[data-td-chain] {
    display: inline !important;
    font-style: normal; font-size: 11px; font-weight: 700;
    color: var(--wl-text-3, #888);
  }

  html.wl-token-detail-active .wl-td-tabs {
    order: 8 !important;
    position: static !important;
    border-top: 1px solid rgba(0,0,0,.06);
    margin-top: 4px;
  }

  html.wl-token-detail-active .wl-td-capability {
    display: none;
    align-items: center; gap: 8px;
    height: 42px; min-height: 40px; max-height: 44px;
    padding: 0 12px; box-sizing: border-box;
    background: rgba(7, 136, 59, 0.08);
    color: var(--wl-brand, #07883B);
    font-size: 12px; font-weight: 600;
  }
  html.wl-token-detail-active .wl-td-capability.is-on { display: none !important; }
  html.wl-token-detail-active .wl-td-capability button { display: none !important; }

  html.wl-token-detail-active .wl-td-hero {
    display: grid !important;
    /* 2026-08-02 重新平衡: 上一轮为了长价格把左栏加到 1.3fr, 右侧 2×2 只剩
       138px (每格 64px), $4,407.21万 需要 ~89px → 被裁成 "$440…"。
       主价格已经分层且会按长度降档, 左栏不需要那么宽; 右栏给到能放下
       "$4,407.21万" 这一档的宽度。 */
    grid-template-columns: minmax(0, 1fr) minmax(178px, auto) !important;
    gap: 4px 10px !important;
    padding: 10px 14px 8px !important;
    align-items: start !important;
    /* 2026-08-02: 原本 min-height:130px + max-height:150px + overflow:hidden。
       高度被写死 → 内容少时顶部凭空空一块, 内容多时「数据源 / 实时·缓存」
       那一行直接被裁掉, 看起来像被下方周期栏盖住。价格区改为内容自适应,
       不再用 overflow:hidden 掩盖溢出。 */
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* 左列行距 2–4px: 主价格 → 涨跌幅 → 涨跌金额 → 更新时间/数据源,
     不留大段空白。 */
  html.wl-token-detail-active .wl-td-heroL {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 2px !important;
    min-width: 0 !important;
  }
  html.wl-token-detail-active .wl-td-meta { margin-top: 2px !important; }
  html.wl-token-detail-active .wl-td-heroR {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 10px !important;
    min-width: 0 !important;
    align-content: start !important;
  }
  html.wl-token-detail-active .wl-td-hero-stat {
    min-width: 0;
  }
  html.wl-token-detail-active .wl-td-hero-stat[hidden] { display: none !important; }
  /* 右侧 2×2 数据网格: 标签 12px, 数值 15px。数值已在 JS 侧做过
     K/M/B 压缩, 这里保持不换行, 也不用省略号吃掉尾数。 */
  html.wl-token-detail-active .wl-td-hero-stat i {
    display: block; font-style: normal; font-size: 12px;
    color: var(--wl-text-3, #888); margin-bottom: 1px; font-weight: 500;
    line-height: 1.2;
  }
  /* 2026-08-02: 2×2 数值同样禁止省略号。
     上一轮把 text-overflow 设成 ellipsis 当"兜底", 结果右栏只有 64px 宽时
     $4,407.21万 (需 ~89px) 直接被裁成 "$440…"。现在右栏加宽 + 按长度降字号,
     数值一律完整显示。 */
  html.wl-token-detail-active .wl-td-hero-stat b {
    display: block; font-size: 15px; font-weight: 600;
    color: var(--wl-text-1, #17202D); line-height: 1.2;
    overflow: visible; text-overflow: clip; white-space: nowrap;
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
  }
  html.wl-token-detail-active .wl-td-hero-stat b.is-long { font-size: 14px; }
  html.wl-token-detail-active .wl-td-hero-stat b.is-xlong {
    font-size: 13px;
    letter-spacing: -0.3px;
  }
  html.wl-token-detail-active .wl-td-pricelabel,
  html.wl-token-detail-active .wl-td-usd,
  html.wl-token-detail-active .wl-td-contract,
  html.wl-token-detail-active .wl-td-daystats,
  html.wl-token-detail-active .wl-td-riskbox {
    display: none !important;
  }
  /* 价格更新时间 / 数据源 / 实时·缓存 / K线更新时间。
     2026-08-02: 原来是 max-height:34px + overflow:hidden —— 三行内容只画两行,
     「数据源」「实时/缓存」被硬裁, 用户看到的就是"被周期栏遮挡"。
     这四项都是判断行情可信度的依据, 必须完整显示。 */
  html.wl-token-detail-active .wl-td-meta {
    display: flex !important; flex-wrap: wrap; align-items: center;
    gap: 2px 8px; width: 100%;
    font-size: 12px; font-weight: 400; color: var(--wl-text-3, #98A2B3);
    line-height: 1.3; max-height: none; overflow: visible;
  }
  html.wl-token-detail-active .wl-td-meta > .is-na { display: none !important; }
  /* Main price stays compact: 24-28px, never past 30px, never bold-heavy.
     Length classes step it down instead of truncating — a price is never
     rendered as "$63,771.8…". */
  /* 主价格分层: 整数 25px 主体, 小数 19px, 货币符号 20px。
     字号写在段上, .wl-td-price 只负责基线与行高。 */
  html.wl-token-detail-active .wl-td-price {
    font-size: 25px !important;
    line-height: 1.08 !important; font-weight: 600 !important;
    color: #17202D !important;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
  }
  html.wl-token-detail-active .wl-td-price .wl-td-price-cur {
    font-size: 20px;
    font-weight: 600;
    margin-right: 1px;
  }
  html.wl-token-detail-active .wl-td-price .wl-td-price-int {
    font-size: 25px;
    font-weight: 600;
  }
  html.wl-token-detail-active .wl-td-price .wl-td-price-dec {
    font-size: 19px;
    font-weight: 600;
    color: var(--wl-text-2, #5A626D);
  }
  html.wl-token-detail-active .wl-td-price .wl-td-price-tail {
    font-size: 15px;
    font-weight: 500;
    margin-left: 2px;
    color: var(--wl-text-3, #98A2B3);
  }
  /* 长价格整体降档, 各段按同一比例缩 —— 永远不用省略号截断。 */
  html.wl-token-detail-active .wl-td-price.is-mid .wl-td-price-int { font-size: 24px; }
  html.wl-token-detail-active .wl-td-price.is-mid .wl-td-price-dec { font-size: 18px; }
  html.wl-token-detail-active .wl-td-price.is-mid .wl-td-price-cur { font-size: 19px; }
  html.wl-token-detail-active .wl-td-price.is-long .wl-td-price-int { font-size: 24px; }
  html.wl-token-detail-active .wl-td-price.is-long .wl-td-price-dec { font-size: 18px; }
  html.wl-token-detail-active .wl-td-price.is-long .wl-td-price-cur { font-size: 18px; }
  html.wl-token-detail-active .wl-td-price.is-xlong .wl-td-price-int { font-size: 24px; }
  html.wl-token-detail-active .wl-td-price.is-xlong .wl-td-price-dec { font-size: 18px; }
  html.wl-token-detail-active .wl-td-price.is-xlong .wl-td-price-cur { font-size: 18px; }
  html.wl-token-detail-active .wl-td-price.is-xlong { letter-spacing: -0.4px !important; }
  /* 下标记法的极小价格保持原样, 不参与分层 */
  html.wl-token-detail-active .wl-td-price.is-sub { font-size: 24px !important; }
  html.wl-token-detail-active .wl-td-price.is-mid { font-size: 24px !important; }
  html.wl-token-detail-active .wl-td-price.is-long { font-size: 24px !important; }
  html.wl-token-detail-active .wl-td-price.is-xlong { font-size: 24px !important; }
  html.wl-token-detail-active .wl-td-price sub { font-size: 0.7em; vertical-align: baseline; }
  /* 涨跌幅 14px / 涨跌金额 13px —— 主价格之下的第二、第三层级。
     涨跌颜色仍走全站 .is-up/.is-down 规则, 这里不碰配色。 */
  html.wl-token-detail-active .wl-td-chg {
    font-size: 14px !important; font-weight: 600 !important;
    line-height: 1.2 !important;
  }
  html.wl-token-detail-active .wl-td-chgabs {
    font-size: 13px !important; font-weight: 500 !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums;
  }
  html.wl-token-detail-active .wl-td-chgabs.is-na { display: none !important; }
  html.wl-token-detail-active .wl-td-candle-time {
    font-size: 12px; font-weight: 400; color: var(--wl-text-3, #98A2B3);
  }
  /* 缓存 / 落后数据只是元信息, 用自然浅灰, 不再用醒目黄色长提示。 */
  html.wl-token-detail-active .wl-td-candle-time.is-stale { color: var(--wl-text-3, #98A2B3); }
  html.wl-token-detail-active .wl-td-candle-time.is-na { display: none; }
  html.wl-token-detail-active .wl-td-identity-error {
    grid-column: 1 / -1;
    padding: 16px 4px;
    text-align: center;
    font-size: 13px; color: var(--wl-text-2, #555);
  }
  html.wl-token-detail-active .wl-td-identity-error a {
    display: inline-flex; margin-top: 10px; padding: 8px 14px;
    border-radius: 10px; background: var(--wl-brand, #07883B); color: #fff;
    font-weight: 700; text-decoration: none;
  }

  /* Metrics strip absorbed into Market tab 2-col grid — hide duplicate density. */
  html.wl-token-detail-active .wl-td-metrics {
    display: none !important;
  }
  html.wl-token-detail-active .wl-td-metrics-legacy {
    display: flex !important; gap: 0 !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 4px 8px 10px;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }
  html.wl-token-detail-active .wl-td-metrics::-webkit-scrollbar { display: none; }
  html.wl-token-detail-active .wl-td-metric {
    flex: 0 0 auto; min-width: 88px; padding: 4px 10px;
    border-right: 1px solid rgba(0,0,0,.06);
  }
  html.wl-token-detail-active .wl-td-metric:last-child { border-right: 0; }
  html.wl-token-detail-active .wl-td-metric i {
    display: block; font-style: normal; font-size: 11px;
    color: var(--wl-text-3, #888); margin-bottom: 2px;
  }
  html.wl-token-detail-active .wl-td-metric b {
    display: block; font-size: 13px; font-weight: 700;
    color: var(--wl-text-1, #111);
  }
  html.wl-token-detail-active .wl-td-metric b.is-na { color: var(--wl-text-3, #888); }

  html.wl-token-detail-active .wl-td-market-stats {
    display: none !important;
  }
  /* Pair/provider strip stays visible on first screen (driven by final-ui). */

  /* Chart + price hero stay visible for every detail tab (never gate on data-td-tab=market). */
  html.wl-token-detail-active[data-page="swap"] .wl-td-on #swap-kline-card,
  html.wl-token-detail-active #swap-kline-card {
    display: block !important;
    position: relative !important;
    margin: 8px 0 0 !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; background: transparent !important;
  }
  html.wl-token-detail-active #swap-kline-card .kline-header,
  html.wl-token-detail-active .wl-td-on .kline-header {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    transform: none !important;
    margin: 0 !important;
    height: 44px !important; min-height: 44px !important; max-height: 46px !important;
    z-index: 1 !important;
  }
  html.wl-token-detail-active[data-page="swap"] .wl-td-on .wl-td-hero,
  html.wl-token-detail-active .wl-td-hero {
    display: grid !important;
  }
  html.wl-token-detail-active .wl-td-capability,
  html.wl-token-detail-active .wl-td-capability.is-on {
    display: none !important;
  }
  html.wl-token-detail-active #swap-kline-card .kline-header {
    height: 40px !important; min-height: 40px !important;
    padding: 0 8px !important; gap: 6px !important;
    align-items: center !important;
    display: flex !important;
  }
  /* .wl-kline-quick layout lives with the track rules further down. */
  html.wl-token-detail-active .wl-kline-tools {
    display: inline-flex !important; gap: 4px !important; flex: none !important;
  }
  html.wl-token-detail-active .wl-kline-tools .kline-terminal-icon {
    width: 32px; height: 32px; border: 0; background: transparent;
    color: var(--wl-text-2, #444); display: inline-flex;
    align-items: center; justify-content: center; border-radius: 8px;
  }
  html.wl-token-detail-active .kline-legacy-tf,
  html.wl-token-detail-active .wl-kline-legacy-tf { display: none !important; }
  html.wl-token-detail-active .kline-terminal-tools:not(.wl-kline-tools) {
    display: none !important;
  }
  html.wl-token-detail-active #swap-kline-card .kline-timeframes {
    flex: 1 1 auto !important; gap: 2px !important;
    overflow-x: auto !important; scrollbar-width: none;
  }
  html.wl-token-detail-active #swap-kline-card .kline-timeframes::-webkit-scrollbar { display: none; }
  /* ★ 2026-08-07 项目方《详情页/K线优化》第一条: 周期按钮加大 ——
     高度 ≥36px、字号 13.5px、左右留足 padding、按内容自适应宽度,
     绝不为了塞进一行而压缩按钮 (放不下由轨道横向滚动)。 */
  html.wl-token-detail-active #swap-kline-card .kline-tf-more,
  html.wl-token-detail-active .wl-kline-quick .kline-tf-more,
  html.wl-token-detail-active #swap-kline-card .kline-tf,
  html.wl-token-detail-active .wl-kline-quick .kline-tf {
    flex: 0 0 auto !important;
    height: 38px !important; min-width: 0 !important; max-width: none !important;
    padding: 0 14px !important; border-radius: 10px !important;
    border: 0 !important; background: rgba(0,0,0,.05) !important;
    font-size: 13.5px !important; font-weight: 600 !important;
    white-space: nowrap !important;
    color: var(--wl-text-3, #888) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  html.wl-token-detail-active[data-page="swap"] .wl-td-on #kline-wrap,
  html.wl-token-detail-active #kline-wrap,
  html.wl-token-detail-active .kline-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: clamp(320px, calc(100dvh - 360px), 420px) !important;
    min-height: 300px !important;
    max-height: 420px !important;
    padding: 0 2px 0 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  html.wl-token-detail-active[data-page="swap"] .wl-td-on #kline-chart,
  html.wl-token-detail-active #kline-chart {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
  html.wl-token-detail-active #swap-kline-card,
  html.wl-token-detail-active #swap-kline-card canvas {
    max-width: 100% !important;
  }
  html.wl-token-detail-active #swap-kline-card .kline-tf.active,
  html.wl-token-detail-active .wl-kline-quick .kline-tf.active {
    background: rgba(7, 136, 59, .14) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--wl-brand, #07883B) !important;
  }
  /* ── Quick period bar: scrollable track + pinned 「全部」 ───────────────
     All twelve periods live in the track so a non-quick pick (2小时 / 8小时 /
     1周 …) still shows up in the bar and can scroll itself into view. The
     track is sized so exactly five cards fit, which puts
     1分 / 5分 / 15分 / 1小时 / 4小时 on screen at rest with the rest one swipe
     away, and 「全部」 sits outside the track where it can never be scrolled
     over or covered by a label. */
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick,
  html.wl-token-detail-active .wl-kline-quick {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 4px !important;
    /* The bar must not scroll — if it did, 「全部」 would scroll away with it. */
    overflow: hidden !important;
    align-items: center !important;
  }
  html.wl-token-detail-active .wl-kline-quick-track {
    --wl-q-gap: 4px;
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: var(--wl-q-gap) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* Keep a sideways swipe inside the track instead of panning the page. */
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  html.wl-token-detail-active .wl-kline-quick-track::-webkit-scrollbar { display: none; }
  /* `#swap-kline-card` is carried here on purpose: the shared button rule above
     is written with that ID and would otherwise out-rank these overrides. */
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick-track .kline-tf,
  html.wl-token-detail-active .wl-kline-quick-track .kline-tf {
    /* 2026-08-07: 快捷行只有 1分/5分/15分/1小时 (+选中的非快捷周期),
       按钮按内容自适应, 不再强制五等分 —— 那正是文字被截成「1小时2」的根因。
       2026-08-07 二轮: final-ui 的 .wl-td-on .kline-tf 带 width:100%,
       每个按钮占满整条轨道 → 只能看见滚动到的那一个 (Production 只见
       「1小时/全部」的根因), 这里必须显式收回 width。 */
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 14px !important;
    white-space: nowrap;
  }
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick .wl-kline-q-more,
  html.wl-token-detail-active .wl-kline-quick .wl-kline-q-more {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 14px !important;
    white-space: nowrap;
  }
  html.wl-token-detail-active .wl-kline-quick-track { --wl-q-gap: 6px; }
  /* Compact status above chart — only when candles are already visible */
  html.wl-token-detail-active #kline-loading.wl-kline-status-bar,
  html.wl-token-detail-active .wl-kline-status-bar {
    position: relative !important;
    inset: auto !important;
    height: auto !important; min-height: 0 !important;
    max-height: none !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    font-size: 11px !important;
    background: rgba(0,0,0,.04) !important;
    border: 0 !important; border-radius: 0 !important;
    color: var(--wl-text-2, #555) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    pointer-events: auto !important;
  }

  /* Terminal empty / 429 / waiting-pair: centered cover, no blank white void */
  html.wl-token-detail-active #kline-wrap.is-empty-state {
    height: 240px !important;
    min-height: 220px !important;
    max-height: 280px !important;
  }
  html.wl-token-detail-active #kline-wrap.is-empty-state #kline-chart {
    min-height: 0 !important;
    height: 100% !important;
  }
  html.wl-token-detail-active #kline-loading.is-terminal-empty {
    position: absolute !important;
    inset: 0 !important;
    z-index: 14 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 220px !important;
    padding: 20px 16px !important;
    margin: 0 !important;
    background: color-mix(in srgb, var(--wl-surface, #fff) 94%, transparent) !important;
    border: 0 !important;
    pointer-events: auto !important;
  }
  html.wl-token-detail-active #kline-loading.is-terminal-empty .wl-kline-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 280px;
    text-align: center;
  }
  html.wl-token-detail-active #kline-loading.is-terminal-empty .wl-kline-empty-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--wl-text-2, #555);
  }
  html.wl-token-detail-active #kline-loading.is-terminal-empty .wl-kline-empty-retry {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid rgba(7, 136, 59, .35);
    background: rgba(7, 136, 59, .12);
    color: var(--wl-brand, #07883B);
    font-size: 13px;
    font-weight: 700;
  }
  html[data-theme="dark"].wl-token-detail-active #kline-loading.is-terminal-empty {
    background: color-mix(in srgb, var(--wl-surface, #111) 92%, transparent) !important;
  }
  html[data-theme="dark"].wl-token-detail-active #kline-loading.is-terminal-empty .wl-kline-empty-title {
    color: var(--wl-text-2, #bbb);
  }
  /* ── 门头收藏星标 ──
     视觉 27px, 点击热区 44×44 (门头总高不变: 按钮用负 margin 吃掉多出的高度,
     只放大可点范围)。未收藏 = 空心描边, 已收藏 = 品牌绿实心。
     状态由 wl-token-detail.js 依据 /api/watchlist 真实返回写在 data-watching 上。 */
  html.wl-token-detail-active .wl-td-act.wl-td-watch,
  .wl-td-bar[data-ssr="1"] .wl-td-act.wl-td-watch {
    width: 44px !important; min-width: 44px !important;
    height: 44px !important; min-height: 44px !important;
    margin-top: -2px; margin-bottom: -2px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    background: transparent !important; border: 0 !important;
    color: var(--wl-text-2, #555);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  html.wl-token-detail-active .wl-td-act.wl-td-watch .wl-icon,
  .wl-td-bar[data-ssr="1"] .wl-td-act.wl-td-watch .wl-icon {
    width: 27px !important; height: 27px !important;
    stroke-width: 1.7;
    fill: none;
    transition: fill .12s ease, stroke .12s ease;
  }
  html.wl-token-detail-active .wl-td-act.wl-td-watch[data-watching="true"],
  .wl-td-bar[data-ssr="1"] .wl-td-act.wl-td-watch[data-watching="true"] {
    color: var(--wl-brand, #07883B);
  }
  html.wl-token-detail-active .wl-td-act.wl-td-watch[data-watching="true"] .wl-icon,
  .wl-td-bar[data-ssr="1"] .wl-td-act.wl-td-watch[data-watching="true"] .wl-icon {
    fill: currentColor;
    stroke: currentColor;
  }
  html.wl-token-detail-active .wl-td-act.wl-td-watch:active {
    opacity: .6;
  }

  html.wl-token-detail-active .wl-td-pos {
    display: flex; align-items: center; justify-content: space-between;
    height: 40px; padding: 0 14px;
    background: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.05);
    font-size: 13px; color: var(--wl-text-2, #555); font-weight: 600;
  }
  html.wl-token-detail-active .wl-td-pos b {
    font-weight: 700; color: var(--wl-text-1, #111);
  }
  html.wl-token-detail-active .wl-td-pos b.is-na { color: var(--wl-text-3, #888); font-weight: 500; }
  html.wl-token-detail-active .kline-indicator-strip {
    display: none !important;
  }

  /* ── 详情页底部操作栏 ──────────────────────────────────────────────
     每条规则都同时挂 SSR 标记 (.wl-td-footer[data-ssr="1"] …): 底色 / 尺寸
     不依赖 wl-token-detail.js 才加的 html.wl-token-detail-active,
     脚本晚到或提前 return 时按钮依然是完整形态, 而不是无背景的裸元素。

     2026-08-02 第二轮 (真机 iPhone + TokenPocket 复现后):
     上一轮只解决了"样式被 JS 类把关", 没解决"定位坐标系不对"。
     移动端 (≤767px) 页面是固定外壳:
       body(height:100dvh, overflow:hidden)
         > .page-content > .page-root(display:flex; flex-direction:column; height:100%)
           > #swap-page-container(overflow-y:auto)   ← 真正的滚动容器
     100dvh 不含浏览器工具栏; 而 position:fixed 是相对「布局视口」定位的,
     布局视口把工具栏那一段也算在内。iPhone 上两者差约 100px,
     操作栏就被画到了外壳下方、工具栏背后 —— DOM 在、能命中、看不见。
     (实测: 外壳 745px / 布局视口 844px 时, 两个按钮位于 y=786–834,
      整体落在可见区之外 89px。)

     现在操作栏是外壳弹性列里的 flex:none 兄弟节点, 天然贴在可见区底部:
       · 不用 position:fixed, 不用 visualViewport 监听, 不用 JS
       · 地址栏收放 / 转屏 / 切后台由浏览器重算 dvh 自动跟随
       · 滚动容器 flex:1 收缩掉操作栏高度, 正文不会被遮, 底部也不留空白 */
  @media (max-width: 767px) {
    html[data-page="swap"] .wl-td-footer[data-ssr="1"] {
      position: static !important;
      flex: 0 0 auto !important;
      order: 99;
      width: 100%;
      z-index: 5;
      background: rgba(255,255,255,.98) !important;
      border-top: 1px solid rgba(0,0,0,.06) !important;
      /* 外壳内不需要毛玻璃: WKWebView 里 backdrop-filter 叠在滚动容器上
         会出现整条不重绘的黑/透明块。 */
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      padding-bottom: 0 !important;
      pointer-events: auto !important;
    }
    /* 滚动容器吃掉剩余高度, 不再用写死的 dvh 减法去"预留"操作栏。
       之前预留 72px, 而操作栏实际 96–107px, 本身就对不上。 */
    html[data-page="swap"] #swap-page-container[data-td-ssr="1"],
    html.wl-token-detail-active[data-page="swap"] #swap-page-container.wl-td-on {
      flex: 1 1 auto !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      padding-bottom: 12px !important;
    }
  }

  /* 768–1023px: 没有 100dvh 固定外壳, 页面是正常文档滚动,
     此时 fixed 贴底才是对的。 */
  @media (min-width: 768px) and (max-width: 1023px) {
    html.wl-token-detail-active .wl-td-footer,
    .wl-td-footer[data-ssr="1"] {
      position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 160 !important;
      background: rgba(255,255,255,.98) !important;
      border-top: 1px solid rgba(0,0,0,.06) !important;
      padding-bottom: 0 !important;
      pointer-events: auto !important;
    }
    html.wl-token-detail-active #swap-page-container.wl-td-on,
    #swap-page-container[data-td-ssr="1"] {
      padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }
  /* Override final-ui 3-col grid (50px 50px 1fr) that squeezed CTA into a green square. */
  html.wl-token-detail-active .wl-td-actions,
  html.wl-token-detail-active[data-page="swap"] .wl-td-on .wl-td-actions,
  .wl-td-footer[data-ssr="1"] .wl-td-actions {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    /* 全站唯一一处 safe-area-inset-bottom: 浏览器工具栏 / Home 指示条占位 */
    padding: 8px 12px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }
  html.wl-token-detail-active .wl-td-action-short,
  html.wl-token-detail-active[data-page="swap"] .wl-td-action-short,
  .wl-td-footer[data-ssr="1"] .wl-td-action-short {
    width: 76px !important; min-width: 76px !important; max-width: 76px !important;
    height: 46px !important; min-height: 46px !important; max-height: 46px !important;
    border: 1px solid var(--wl-cta-soft-border, #CBE8D5) !important; border-radius: 12px !important;
    background: var(--wl-cta-soft-bg, #EEF8F2) !important;
    display: inline-flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 2px !important; color: var(--wl-cta-soft-fg, #318A58) !important;
    font-size: 11px !important; font-weight: 600 !important;
    line-height: 1.1 !important; aspect-ratio: auto !important;
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important; touch-action: manipulation;
  }
  html.wl-token-detail-active .wl-td-trade,
  html.wl-token-detail-active[data-page="swap"] .wl-td-on .wl-td-trade,
  .wl-td-footer[data-ssr="1"] .wl-td-trade {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; min-width: 0 !important;
    height: 46px !important; min-height: 46px !important; max-height: 46px !important;
    line-height: 46px !important; aspect-ratio: auto !important;
    border: 0 !important; border-radius: 12px !important;
    /* 柔和品牌绿 (#15965A), 不是荧光绿; var() 解析失败时仍有字面兜底色,
       绝不会退化成 transparent。 */
    background: var(--wl-cta, #15965A) !important;
    color: var(--wl-cta-fg, #fff) !important; font-weight: 600 !important; font-size: 16px !important;
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important; touch-action: manipulation;
    cursor: pointer; text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden; white-space: nowrap; text-overflow: clip;
  }
  html.wl-token-detail-active .wl-td-pos,
  .wl-td-footer[data-ssr="1"] .wl-td-pos {
    pointer-events: none;
  }
  /* 2026-08-02: 手机端 (≤767px) 操作栏已进入外壳弹性列, 自己占真实高度,
     正文不再需要为它留 110px 假 padding —— 那正是"底部一大块空白"的来源。
     ≤767 的 padding 由上面的 App Shell 分支给 12px; 这里只留桌面左栏。 */
  html.wl-token-detail-active .swap-page-left {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.wl-token-detail-active .wl-td-pos {
    position: static !important;
    /* 让出 20 给 #ave-data-panel.wl-host-show —— order 必须是整数, 不能用 19.5 */
    order: 21 !important;
    z-index: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  html.wl-token-detail-active .wl-td-tabs {
    position: static !important;
    order: 18 !important;
    z-index: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    overflow: visible !important;
  }
  html.wl-token-detail-active .wl-td-panels {
    order: 19 !important;
    /* 2026-08-09 Production 真机: 这里原本是 96px 预留高度。
       持币页的地址表并不在 .wl-td-panels 里, 而是 #ave-data-panel (同一个 flex 列
       的兄弟节点) —— 于是「coverage 说明」和「地址表」之间硬生生垫进一块
       96px + 底部安全区的空白, 加上 #ave-data-panel 没有 order 而被排到别处,
       视觉上就是接近一屏的大留白。
       正文不需要为底栏预留 padding, 底栏间距由 --wl-nav-clearance 统一负责。 */
    padding-bottom: 0 !important;
  }
  /* 宿主面板紧跟在它所属的 pane 之后, 形成 统计卡 → coverage → 地址表 的连续信息流。
     没有 order 时它会被当作 order:0 排到最前面, 与 pane 彻底脱节。 */
  html.wl-token-detail-active #ave-data-panel.wl-host-show {
    order: 20 !important;
    margin-top: 0 !important;
  }
  /* 空的宿主占位 div 不参与布局 —— 它只是个锚点, 不该占任何高度 */
  html.wl-token-detail-active .wl-pane-host:empty {
    display: none !important;
  }

  /* Below-chart tabs */
  html.wl-token-detail-active .wl-td-tabs {
    display: flex !important; gap: 0 !important;
    height: 40px !important; padding: 0 8px !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; border-bottom: 1px solid rgba(0,0,0,.06);
    background: #fff;
  }
  html.wl-token-detail-active .wl-td-tabs::-webkit-scrollbar { display: none; }
  html.wl-token-detail-active .wl-td-tab {
    flex: 0 0 auto !important; height: 40px !important;
    padding: 0 12px !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; white-space: nowrap;
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--wl-text-3, #888) !important;
  }
  html.wl-token-detail-active .wl-td-tab.is-on {
    color: var(--wl-brand, #07883B) !important;
    box-shadow: inset 0 -2px 0 var(--wl-brand, #07883B) !important;
  }

  /* Panels — tightened under chart */
  html.wl-token-detail-active .wl-td-panels {
    padding: 4px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  html.wl-token-detail-active .wl-td-tabs {
    margin-top: 0 !important;
  }
  html.wl-token-detail-active #swap-kline-card {
    margin-bottom: 0 !important;
  }

  html.wl-token-detail-active .wl-mkt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    max-width: 100%;
  }
  html.wl-token-detail-active .wl-mkt-card {
    min-height: var(--wl-mkt-card-min-h, 52px);
    padding: 8px 10px;
    border: 1px solid var(--wl-border, rgba(0,0,0,.08));
    border-radius: 8px;
    background: var(--wl-surface, #fff);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    overflow: hidden;
  }
  html.wl-token-detail-active .wl-mkt-card i {
    font-style: normal;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--wl-text-3, #888);
  }
  html.wl-token-detail-active .wl-mkt-card b {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--wl-text, #111);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    max-width: 100%;
  }
  html.wl-token-detail-active .wl-mkt-card b.is-na {
    color: var(--wl-text-3, #888);
    font-weight: 500;
  }

  html.wl-token-detail-active .wl-ov { display: flex; flex-direction: column; }
  html.wl-token-detail-active .wl-ov-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: 14px;
  }
  html.wl-token-detail-active .wl-ov-row-compact {
    min-height: 48px;
    max-height: 56px;
    padding: 0;
    align-items: center;
  }
  html.wl-token-detail-active .wl-ov-row i {
    font-style: normal; color: var(--wl-text-3, #888); flex: none; max-width: 42%;
  }
  html.wl-token-detail-active .wl-ov-row b {
    font-weight: 650; color: var(--wl-text, #111); text-align: right;
    min-width: 0; max-width: 62%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html.wl-token-detail-active .wl-ov-row b.is-na { color: var(--wl-text-3, #888); font-weight: 500; }

  html.wl-token-detail-active .wl-addr-btn {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%;
    border: 0; background: transparent; padding: 0;
    color: inherit; font: inherit; cursor: pointer;
  }
  html.wl-token-detail-active .wl-addr-btn span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 650;
  }
  html.wl-token-detail-active .wl-addr-btn em {
    font-style: normal;
    flex: none;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(7,136,59,.08);
    color: var(--wl-brand, #07883B);
    font-size: 11px;
    font-weight: 700;
  }

  html.wl-token-detail-active .wl-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 4px;
  }
  html.wl-token-detail-active .wl-social-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--wl-border, rgba(0,0,0,.1));
    background: var(--wl-surface, #fff);
    color: var(--wl-text, #111);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
  }
  html.wl-token-detail-active .wl-copy-mini {
    border: 0; background: rgba(7,136,59,.08); color: var(--wl-brand, #07883B);
    border-radius: 6px; padding: 2px 6px; font-size: 11px; font-weight: 600;
  }
  html.wl-token-detail-active .wl-pane-note {
    margin: 0 0 10px; font-size: 12px; color: var(--wl-text-3, #888); line-height: 1.4;
  }
  html.wl-token-detail-active .wl-state {
    padding: 28px 12px; text-align: center;
  }
  html.wl-token-detail-active .wl-state-title {
    font-size: 15px; font-weight: 700; color: var(--wl-text-1, #111); margin-bottom: 6px;
  }
  html.wl-token-detail-active .wl-state-desc {
    font-size: 13px; color: var(--wl-text-3, #888); line-height: 1.5;
  }

  html.wl-token-detail-active .wl-pool-card {
    padding: 12px 0 4px; border-bottom: 1px solid rgba(0,0,0,.06);
  }
  html.wl-token-detail-active .wl-pool-card.is-main {
    background: rgba(7,136,59,.04); margin: 0 -8px; padding-left: 8px; padding-right: 8px;
    border-radius: 10px; border-bottom: 0; margin-bottom: 8px;
  }
  html.wl-token-detail-active .wl-pool-badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    color: var(--wl-brand, #07883B); margin-bottom: 4px;
  }
  html.wl-token-detail-active .wl-pool-title {
    display: flex; justify-content: space-between; gap: 8px;
    font-size: 15px; font-weight: 700; margin-bottom: 4px;
  }

  html.wl-token-detail-active .wl-sec-head h3 {
    margin: 0 0 6px; font-size: 17px; font-weight: 700;
  }
  html.wl-token-detail-active .wl-sec-disclaimer {
    margin: 0 0 10px; font-size: 12px; color: var(--wl-text-3, #888); line-height: 1.45;
  }
  html.wl-token-detail-active .wl-sec-summary {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
  }
  html.wl-token-detail-active .wl-sec-summary > div {
    background: rgba(0,0,0,.03); border-radius: 10px; padding: 12px;
  }
  html.wl-token-detail-active .wl-sec-summary span {
    display: block; font-size: 12px; color: var(--wl-text-3, #888); margin-bottom: 4px;
  }
  html.wl-token-detail-active .wl-sec-summary b { font-size: 22px; font-weight: 800; }
  html.wl-token-detail-active .wl-sec-tabs {
    display: flex; gap: 8px; margin-bottom: 10px;
  }
  html.wl-token-detail-active .wl-sec-tabs button {
    height: 32px; padding: 0 12px; border-radius: 999px; border: 0;
    background: transparent; font-size: 13px; font-weight: 600; color: var(--wl-text-3, #888);
  }
  html.wl-token-detail-active .wl-sec-tabs button.is-on {
    background: rgba(7,136,59,.10); color: var(--wl-brand, #07883B);
  }
  html.wl-token-detail-active .wl-sec-item {
    display: flex; gap: 10px; padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }
  html.wl-token-detail-active .wl-sec-dot {
    width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 2px;
    background: #c4c4c4;
  }
  html.wl-token-detail-active .wl-sec-item.is-pass .wl-sec-dot { background: #0E9F52; }
  html.wl-token-detail-active .wl-sec-item.is-risk .wl-sec-dot { background: #E5484D; }
  html.wl-token-detail-active .wl-sec-item.is-warn .wl-sec-dot { background: #E5A000; }
  html.wl-token-detail-active .wl-sec-item.is-na .wl-sec-dot { background: #b0b0b0; }
  html.wl-token-detail-active .wl-sec-item b {
    display: block; font-size: 14px; font-weight: 700; color: var(--wl-text-1, #111);
  }
  html.wl-token-detail-active .wl-sec-item p {
    margin: 3px 0 0; font-size: 12px; color: var(--wl-text-3, #888); line-height: 1.4;
  }

  /* Host panels: hide by default on mobile TD; reveal for trades/holders */
  html.wl-token-detail-active #ave-data-panel,
  html.wl-token-detail-active #swap-risk-summary,
  html.wl-token-detail-active #token-profile-card,
  html.wl-token-detail-active .wl-td-hsum,
  html.wl-token-detail-active .wl-td-feed,
  html.wl-token-detail-active #trade-tabs-card:not(.wl-trade-in-sheet) {
    display: none !important;
  }
  html.wl-token-detail-active #ave-data-panel.wl-host-show {
    display: block !important;
    margin: 0 16px 16px !important;
    border: 0 !important; box-shadow: none !important;
    background: transparent !important;
  }
  html.wl-token-detail-active #ave-data-panel.wl-host-show .ave-main-tabs {
    display: none !important;
  }
  html.wl-token-detail-active .wl-trade-in-sheet {
    display: block !important;
    border: 0 !important; box-shadow: none !important;
    background: transparent !important; margin: 0 !important;
  }
  html.wl-token-detail-active #kline-unit-mcap.is-disabled,
  html.wl-token-detail-active #kline-unit-mcap:disabled {
    opacity: .4; pointer-events: none;
  }

  /* Price/change only 鈥?never paint neutral stats with dir colors */
  html.wl-token-detail-active .wl-td-metric b,
  html.wl-token-detail-active .wl-ov-row b,
  html[data-page="markets"] .wl-mrow-l2 b {
    color: var(--wl-text-1, #111) !important;
  }
  html.wl-token-detail-active .wl-td-metric b.is-na,
  html.wl-token-detail-active .wl-ov-row b.is-na {
    color: var(--wl-text-3, #888) !important;
  }
}

@media (min-width: 1024px) {
  .wl-mk-appbar, .wl-mk-sticky, .wl-mk-cats-row, .wl-mk-cats, .wl-mk-filters, .wl-mk-sort,
  .wl-td-capability, .wl-td-metrics, .wl-td-riskbox, .wl-td-pos,
  .wl-td-panels, .wl-kline-quick, .wl-kline-tools { display: none !important; }
}



/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?   Dark theme 鈥?Markets + Token Detail
   Dedicated overrides only; light rules above stay unchanged.
   鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺?*/
@media (max-width: 1023px) {
  /* Alias legacy token names used by light rules */
  html[data-theme="dark"][data-page="markets"],
  html[data-theme="dark"].wl-token-detail-active {
    --wl-surface-1: var(--wl-surface);
    --wl-text-1: var(--wl-text);
  }

  /* Sheets opened from markets / token detail */
  html[data-theme="dark"] .wl-sheet-panel {
    background: var(--wl-surface) !important;
  }
  html[data-theme="dark"] .wl-sheet-handle {
    background: rgba(255, 255, 255, .18);
  }
  html[data-theme="dark"] .wl-sheet-toggle {
    border-bottom-color: var(--wl-border);
  }
  html[data-theme="dark"] .wl-sheet-chip {
    background: var(--wl-surface-2);
    color: var(--wl-text);
  }
  html[data-theme="dark"] .wl-sheet-chip.is-on {
    background: var(--wl-brand-tint, rgba(47, 183, 101, .14));
    border-color: var(--wl-brand);
    color: var(--wl-brand);
  }

  /* 鈹€鈹€ Markets 鈹€鈹€ */
  html[data-theme="dark"][data-page="markets"] .page-root.wl-market-page,
  html[data-theme="dark"][data-page="markets"] body,
  html[data-theme="dark"][data-page="markets"] .page-content {
    background: var(--wl-bg) !important;
    background-color: var(--wl-bg) !important;
    color: var(--wl-text);
  }

  html[data-theme="dark"][data-page="markets"] .wl-mk-appbar,
  html[data-theme="dark"][data-page="markets"] .wl-mk-sticky,
  html[data-theme="dark"][data-page="markets"] .wl-mk-cats-row,
  html[data-theme="dark"][data-page="markets"] .wl-mk-cats,
  html[data-theme="dark"][data-page="markets"] .wl-mk-filters,
  html[data-theme="dark"][data-page="markets"] .wl-mk-sort {
    background: var(--wl-surface) !important;
    color: var(--wl-text-2);
    box-shadow: none;
    border-color: var(--wl-border);
  }

  html[data-theme="dark"][data-page="markets"] .wl-mk-sticky {
    box-shadow: 0 1px 0 var(--wl-border);
  }

  html[data-theme="dark"][data-page="markets"] .wl-mk-theme-card {
    background: #10232B;
    border-color: rgba(34, 211, 238, .24);
    color: #48C7DF;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-theme-card.is-meme {
    background: #291421;
    border-color: rgba(244, 114, 182, .25);
    color: #F472B6;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-theme-card.is-ranking {
    background: #211735;
    border-color: rgba(167, 139, 250, .26);
    color: #A78BFA;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-theme-art {
    background: rgba(255,255,255,.06);
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-theme-copy strong {
    color: var(--wl-text);
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-theme-copy small {
    color: var(--wl-text-3);
  }

  /* Fade at end of category track 鈥?must not be white */
  html[data-theme="dark"][data-page="markets"] .wl-mk-cats-track-wrap::after {
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--wl-surface) 0%, transparent),
      var(--wl-surface) 88%
    ) !important;
  }

  html[data-theme="dark"][data-page="markets"] .wl-mk-cat-more {
    box-shadow: -8px 0 10px -8px rgba(0, 0, 0, .45);
  }

  /* Category / filter pills: dark gray + light gray text; selected brand green */
  html[data-theme="dark"][data-page="markets"] .wl-mk-cat,
  html[data-theme="dark"][data-page="markets"] .wl-mk-filter-btn {
    background: var(--wl-surface-2) !important;
    color: var(--wl-text-2) !important;
  }
  /* Network "All" globe + chevron: high-contrast light ink on dark pill */
  html[data-theme="dark"][data-page="markets"] .wl-mk-network-btn {
    background: var(--wl-surface-2) !important;
    color: #E8EAED !important;
    border: 1px solid var(--wl-border-2, #333941) !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-network-btn .wl-mk-network-ico,
  html[data-theme="dark"][data-page="markets"] .wl-mk-network-btn .wl-mk-chev,
  html[data-theme="dark"][data-page="markets"] .wl-mk-network-btn .wl-mk-globe {
    color: #E8EAED !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-network-btn .wl-mk-network-ico img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }
  html[data-theme="dark"] .wl-sheet-network .wl-mk-globe-host,
  html[data-theme="dark"] .wl-sheet-network .wl-mk-globe {
    color: #E8EAED !important;
  }
  html[data-theme="light"] .wl-sheet-network .wl-mk-globe-host,
  html[data-theme="light"] .wl-sheet-network .wl-mk-globe {
    color: #1A1F2C !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-cat.is-on,
  html[data-theme="dark"][data-page="markets"] .wl-mk-filter-btn.is-on {
    background: #2A2F36 !important;
    color: #F5F7FA !important;
    border-color: #3A414B !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-cat.is-planned,
  html[data-theme="dark"][data-page="markets"] .wl-mk-cat.is-planned.is-on {
    background: var(--wl-surface-2) !important;
    color: var(--wl-text-3) !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-cat-sub {
    color: var(--wl-text-3) !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-cat .wl-mk-cat-count {
    color: inherit;
    opacity: .72;
  }
  html[data-theme="dark"] .wl-sheet-chip .wl-sheet-count {
    color: var(--wl-text-3) !important;
  }
  html[data-theme="dark"] .list-tab--disabled .list-tab-status {
    background: var(--wl-surface-2, rgba(255,255,255,.08)) !important;
    color: var(--wl-text-3, #9CA3AF) !important;
  }

  /* Search icon visible on dark */
  html[data-theme="dark"][data-page="markets"] .wl-mk-search-btn {
    color: var(--wl-text) !important;
  }

  /* Column headers: dark surface, mid-gray text */
  html[data-theme="dark"][data-page="markets"] .wl-mk-sort {
    background: var(--wl-surface) !important;
    color: var(--wl-text-3) !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-sort button.is-on {
    color: var(--wl-text-2) !important;
  }

  /* Table / list chrome 鈥?no white cards */
  html[data-theme="dark"][data-page="markets"] #market-table.card,
  html[data-theme="dark"][data-page="markets"] #market-table,
  html[data-theme="dark"][data-page="markets"] .market-table-scroll-x,
  html[data-theme="dark"][data-page="markets"] .data-table,
  html[data-theme="dark"][data-page="markets"] .data-table tbody,
  html[data-theme="dark"][data-page="markets"] .data-table tr,
  html[data-theme="dark"][data-page="markets"] .data-table td.col-m {
    background: var(--wl-bg) !important;
    background-color: var(--wl-bg) !important;
    box-shadow: none !important;
    border-color: var(--wl-border) !important;
  }
  html[data-theme="dark"][data-page="markets"] .data-table tr {
    border-bottom-color: var(--wl-border) !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mrow {
    background: transparent !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mrow-sym,
  html[data-theme="dark"][data-page="markets"] .wl-mrow-price,
  html[data-theme="dark"][data-page="markets"] .wl-mrow-l2 b,
  html[data-theme="dark"][data-page="markets"] .wl-mrow-pair b {
    color: var(--wl-text) !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mrow-l2,
  html[data-theme="dark"][data-page="markets"] .wl-mrow-tag {
    color: var(--wl-text-3) !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mrow-tag {
    background: var(--wl-surface-2) !important;
  }

  /* Logo placeholder circles 鈥?not harsh white */
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo > i:first-child,
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo > i:first-child > *,
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo img.token-logo,
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo .token-logo,
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo [class*="token"],
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo .token-logo-fb {
    background: #2a2f35 !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo .token-logo-fb {
    color: var(--wl-text-2) !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo img.token-logo[src*="token-logos/usdt"] {
    background: #26A17B !important;
  }
  /* Dark mode keeps the same edge-to-edge mark and only a subtle separator. */
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo > i:last-child,
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo .chain-icon,
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo .chain-icon:has(.chain-logo-img) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35) !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mrow-logo .chain-icon.chain-logo-fallback {
    color: var(--wl-text-2) !important;
    background: #2a2f35 !important;
  }

  html[data-theme="dark"][data-page="markets"] #pagination-bar {
    background: var(--wl-surface) !important;
    border-top-color: var(--wl-border) !important;
    color: var(--wl-text-2);
  }
  html[data-theme="dark"][data-page="markets"] #market-status {
    color: var(--wl-text-3) !important;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-list-skel > i {
    border-bottom-color: var(--wl-border);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, .03),
      rgba(255, 255, 255, .07),
      rgba(255, 255, 255, .03)
    );
    background-size: 200% 100%;
  }

  /* 鈹€鈹€ Token Detail 鈹€鈹€ */
  html[data-theme="dark"].wl-token-detail-active,
  html[data-theme="dark"].wl-token-detail-active[data-page="swap"],
  html[data-theme="dark"].wl-token-detail-active body,
  html[data-theme="dark"].wl-token-detail-active .page-content,
  html[data-theme="dark"].wl-token-detail-active .page-root,
  html[data-theme="dark"].wl-token-detail-active .swap-page,
  html[data-theme="dark"].wl-token-detail-active #swap-page-container.wl-td-on,
  html[data-theme="dark"].wl-token-detail-active .swap-page-left {
    background: var(--wl-bg) !important;
    background-color: var(--wl-bg) !important;
    color: var(--wl-text);
  }

  html[data-theme="dark"].wl-token-detail-active .wl-td-bar,
  html[data-theme="dark"].wl-token-detail-active .wl-td-hero,
  html[data-theme="dark"].wl-token-detail-active .wl-td-metrics,
  html[data-theme="dark"].wl-token-detail-active .wl-td-tabs {
    background: var(--wl-surface) !important;
    border-color: var(--wl-border) !important;
    color: var(--wl-text);
  }

  html[data-theme="dark"].wl-token-detail-active .wl-td-tabs {
    border-top-color: var(--wl-border);
    border-bottom-color: var(--wl-border);
  }

  html[data-theme="dark"].wl-token-detail-active .wl-td-tab {
    color: var(--wl-text-3) !important;
  }
  html[data-theme="dark"].wl-token-detail-active .wl-td-tab.is-on {
    color: var(--wl-brand) !important;
    box-shadow: inset 0 -2px 0 var(--wl-brand) !important;
  }

  html[data-theme="dark"].wl-token-detail-active .wl-td-footer {
    /* 先给一条老 WebView 也认的不透明底色: color-mix() 需要 Safari 16.2+,
       TokenPocket 里的旧 WKWebView 解析失败会整条丢弃, 那样操作栏会退回
       上面的浅色底 —— 深色模式下按钮就糊成一片。 */
    background: var(--wl-surface, #12152a) !important;
    background: color-mix(in srgb, var(--wl-surface) 96%, transparent) !important;
    border-top-color: var(--wl-border) !important;
  }

  html[data-theme="dark"].wl-token-detail-active .wl-td-action-short,
  html[data-theme="dark"].wl-token-detail-active .wl-kline-tools .kline-terminal-icon {
    color: var(--wl-text-2) !important;
  }

  html[data-theme="dark"].wl-token-detail-active .wl-td-metric,
  html[data-theme="dark"].wl-token-detail-active .wl-td-metrics {
    border-color: var(--wl-border) !important;
  }
  html[data-theme="dark"].wl-token-detail-active .wl-td-metric b,
  html[data-theme="dark"].wl-token-detail-active .wl-ov-row b,
  html[data-theme="dark"].wl-token-detail-active .wl-td-pos b,
  html[data-theme="dark"].wl-token-detail-active .wl-state-title,
  html[data-theme="dark"].wl-token-detail-active .wl-sec-item b {
    color: var(--wl-text) !important;
  }
  html[data-theme="dark"].wl-token-detail-active .wl-td-socials a {
    background: var(--wl-surface-2);
    color: var(--wl-text-2);
  }

  /* K-line status / header bar 鈥?not white */
  html[data-theme="dark"].wl-token-detail-active #swap-kline-card,
  html[data-theme="dark"].wl-token-detail-active #swap-kline-card .kline-header,
  html[data-theme="dark"].wl-token-detail-active .wl-td-pos {
    background: var(--wl-surface) !important;
    border-color: var(--wl-border) !important;
    color: var(--wl-text-2);
  }
  html[data-theme="dark"].wl-token-detail-active .wl-td-pos {
    background: var(--wl-surface-2) !important;
  }

  /* Period buttons adapt; selected = brand green */
  html[data-theme="dark"].wl-token-detail-active #swap-kline-card .kline-tf {
    color: var(--wl-text-3) !important;
    background: transparent !important;
  }
  html[data-theme="dark"].wl-token-detail-active #swap-kline-card .kline-tf.active {
    background: var(--wl-brand) !important;
    color: #fff !important;
    border-radius: 999px !important;
  }

  html[data-theme="dark"].wl-token-detail-active .wl-ov-row,
  html[data-theme="dark"].wl-token-detail-active .wl-pool-card,
  html[data-theme="dark"].wl-token-detail-active .wl-sec-item {
    border-bottom-color: var(--wl-border);
  }
  html[data-theme="dark"].wl-token-detail-active .wl-sec-summary > div {
    background: var(--wl-surface-2);
  }
  html[data-theme="dark"].wl-token-detail-active .wl-pool-card.is-main {
    background: var(--wl-brand-tint, rgba(47, 183, 101, .12));
  }
  html[data-theme="dark"].wl-token-detail-active .wl-sec-tabs button.is-on {
    background: var(--wl-brand-tint, rgba(47, 183, 101, .14));
    color: var(--wl-brand);
  }

  /* K-line failure: compact height, keep retry, no huge empty jump. */
  html.wl-token-detail-active #kline-wrap.is-empty-state,
  html.wl-token-detail-active #kline-loading.is-terminal-empty {
    min-height: 220px !important;
    max-height: 280px !important;
    height: 240px !important;
  }
  html.wl-token-detail-active #kline-loading.is-terminal-empty {
    display: flex !important;
    align-items: center; justify-content: center;
  }

  /* /swap chain card: a single real button, whole card is the hit target */
  html[data-page="swap"] #open-chain-selector {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Account: connected wallet → soft green activation (not harsh solid green). */
  html[data-page="account"] .wl-account-design.is-wallet-connected .wl-account-design-avatar {
    color: var(--wl-brand, #07883B) !important;
    background: rgba(7, 136, 59, 0.12) !important;
    border: 1px solid rgba(7, 136, 59, 0.28) !important;
  }
  html[data-page="account"] .wl-account-design.is-wallet-connected .wl-account-design-asset-actions button:not(:disabled) {
    color: #065f2e !important;
    background: rgba(7, 136, 59, 0.12) !important;
    border-color: rgba(7, 136, 59, 0.35) !important;
    min-height: 46px !important;
    font-weight: 700 !important;
  }
  html[data-page="account"] .wl-account-design:not(.is-wallet-connected) .wl-account-design-asset-actions button {
    color: var(--wl-text-3, #888) !important;
    background: var(--wl-sunken, #f3f4f6) !important;
  }
}

/* ===== Mobile closeout 2026-08-02: swap density + quote fold + slip modal ===== */
@media (max-width: 767px) {
  html[data-page="swap"][data-theme="light"]:not(.wl-token-detail-active) {
    --wl-text: #17202D;
    --wl-text-2: #667085;
    --wl-text-3: #98A2B3;
    --wl-border: #E8ECF0;
    --wl-sunken: #F6F8FA;
  }

  /* Compress duplicate page heads on /swap execution */
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-page-appbar {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-page-appbar .wl-appbar-title {
    font-size: 17px !important;
    font-weight: 600 !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-swap-execution-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 0 6px !important;
    padding: 0 2px !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-swap-execution-head small {
    display: none !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-swap-execution-head h1 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-swap-execution-head > span {
    margin-left: auto;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #667085 !important;
  }

  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-swap-modebar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    max-height: 48px !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-swap-mode-tabs {
    flex: 1 1 auto;
    min-height: 38px !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #slippage-btn,
  html[data-page="swap"]:not(.wl-token-detail-active) #refresh-quote {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
  }

  /* Chain state card: one button, every pixel of it opens the network sheet.
     Children are inert so logo / name / badge / label / arrow / blank space
     all resolve to the same target. */
  html[data-page="swap"]:not(.wl-token-detail-active) #open-chain-selector.wl-final-current-chain {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 48px !important;
    max-height: 52px !important;
    margin: 0 0 6px !important;
    padding: 7px 12px !important;
    text-align: left !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #open-chain-selector.wl-final-current-chain > * {
    pointer-events: none !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #open-chain-selector .wl-final-chain-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #open-chain-selector:active {
    filter: brightness(0.97);
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-chain-list {
    display: none !important;
  }

  /* Module rhythm on the first screen is 6-8px; nothing exceeds 10px. */
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-swap-card {
    margin: 0 !important;
    padding: 4px !important;
    border-radius: 14px !important;
  }
  /* Pay 125-138 / Receive 96-108: no dead vertical padding above the fold. */
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-pay-card {
    min-height: 125px !important;
    max-height: 138px !important;
    padding: 10px 12px !important;
    margin: 0 0 0 !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-receive-card {
    min-height: 96px !important;
    max-height: 108px !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    padding: 10px 12px !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-pay-card > div:first-child,
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-receive-card > div:first-child {
    margin-bottom: 6px !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-pay-card > div:last-child,
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-receive-card > div:last-child {
    margin-top: 6px !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-pay-card input,
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-receive-card input {
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-pay-card .quick-amount-btn,
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-pay-card .pct-btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-swap-reverse {
    margin: -5px 0 !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-swap-reverse button,
  html[data-page="swap"]:not(.wl-token-detail-active) #swap-reverse {
    width: 38px !important;
    height: 38px !important;
  }

  html[data-page="swap"]:not(.wl-token-detail-active) #token-route-status:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    max-height: 40px !important;
    margin: 8px 0 0 !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #token-route-status:not(.hidden)::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--wl-cta);
    flex: 0 0 auto;
  }

  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-swap-card + * {
    margin-top: 7px !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #swap-wallet-indicator.wl-final-wallet-row {
    min-height: 54px !important;
    max-height: 60px !important;
    margin: 7px 0 0 !important;
    padding: 8px 12px !important;
    order: 7 !important;
  }
  /* Address stays on one elided line — never wraps the wallet card taller. */
  html[data-page="swap"]:not(.wl-token-detail-active) #swap-wallet-indicator .wl-final-wallet-addr,
  html[data-page="swap"]:not(.wl-token-detail-active) #swap-wallet-indicator [id*="addr"] {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #swi-switch {
    width: 38px !important;
    height: 38px !important;
  }

  html[data-page="swap"]:not(.wl-token-detail-active) #swap-btn.wl-final-swap-button,
  html[data-page="swap"]:not(.wl-token-detail-active) #swap-btn {
    order: 8 !important;
    min-height: 46px !important;
    max-height: 50px !important;
    height: 48px !important;
    margin-top: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--wl-cta-fg) !important;
    background: var(--wl-cta) !important;
    border-color: var(--wl-cta) !important;
    border-radius: 15px !important;
    box-shadow: none !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #swap-btn:active {
    background: var(--wl-cta-active) !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #swap-btn:disabled {
    background: var(--wl-cta-disabled) !important;
    color: #FFFFFF !important;
  }

  /* Respect .hidden — do not force empty fee rows above the fold */
  html[data-page="swap"]:not(.wl-token-detail-active) #quote-details.wl-final-fee-details.hidden,
  html[data-page="swap"]:not(.wl-token-detail-active) #quote-details.hidden {
    display: none !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #quote-details.wl-final-fee-details:not(.hidden) {
    display: block !important;
    order: 9 !important;
    margin-top: 8px !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #quote-details-extra.hidden {
    display: none !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #quote-details-extra:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) #quote-details-toggle {
    display: flex !important;
    min-height: 36px !important;
    align-items: center !important;
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-fee-total,
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-fee-row,
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-runtime-rate,
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-fee-runtime-only {
    min-height: 32px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-swap-note {
    order: 10 !important;
    margin-top: 8px !important;
  }

  html[data-page="swap"]:not(.wl-token-detail-active) .swap-panel.wl-final-swap-panel {
    padding: 6px 10px 10px !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .swap-page-root.wl-swap-execution {
    padding-top: 6px !important;
    padding-bottom: calc(var(--wl-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
  /* MEV / route notices are secondary — they never push the CTA below the fold. */
  html[data-page="swap"]:not(.wl-token-detail-active) #mev-shield.mev-shield-box,
  html[data-page="swap"]:not(.wl-token-detail-active) #route-availability-notice:not(.hidden) {
    order: 11 !important;
    margin: 7px 0 0 !important;
  }
  html[data-page="swap"]:not(.wl-token-detail-active) .wl-final-swap-note {
    font-size: 10px !important;
    margin-top: 6px !important;
  }
}

/* Slippage settings modal — soft greens, white on selected */
.wl-slip-modal {
  padding: 20px 22px 18px;
  color: #17202D;
}
.wl-slip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.wl-slip-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #17202D;
}
.wl-slip-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #98A2B3;
  font-size: 16px;
}
.wl-slip-label,
.wl-slip-section {
  font-size: 16px;
  font-weight: 600;
  color: #17202D;
  margin-bottom: 8px;
}
.wl-slip-label { font-size: 14px; font-weight: 500; color: #667085; }
.wl-slip-opts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.wl-slip-opt {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--wl-cta-soft-border);
  background: var(--wl-cta-soft-bg);
  color: var(--wl-cta-soft-fg);
  font-size: 14px;
  font-weight: 600;
}
.wl-slip-opt.is-on {
  background: var(--wl-cta);
  border-color: var(--wl-cta);
  color: #fff;
}
.wl-slip-input {
  width: 100%;
  height: 48px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid #E8ECF0;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 500;
  color: #17202D;
  background: #fff;
  box-sizing: border-box;
}
.wl-slip-input:focus {
  outline: none;
  border-color: #8FD0A8;
  box-shadow: 0 0 0 3px rgba(46, 155, 87, 0.12);
}
.wl-slip-tip {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: #667085;
  margin-bottom: 14px;
}
.wl-slip-approve {
  border-top: 1px solid #E8ECF0;
  padding-top: 14px;
  margin-bottom: 14px;
}
.wl-slip-approve-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--wl-cta);
}
.wl-slip-am-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.wl-slip-am {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--wl-cta-soft-border);
  background: var(--wl-cta-soft-bg);
  color: var(--wl-cta-soft-fg);
  text-align: left;
}
.wl-slip-am strong {
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}
.wl-slip-am small {
  font-size: 11px;
  font-weight: 400;
  color: #667085;
}
.wl-slip-am.is-on {
  background: var(--wl-cta);
  border-color: var(--wl-cta);
  color: #fff;
}
.wl-slip-am.is-on strong { color: #fff; }
.wl-slip-am.is-on small { color: rgba(255, 255, 255, 0.82); }
.wl-slip-am-desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wl-slip-am-desc p {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: #667085;
}
.wl-slip-am-desc p i {
  margin-right: 6px;
  font-size: 14px;
  color: #667085;
}
.wl-slip-am-desc p.is-warn { color: #C47B1A; }
.wl-slip-am-desc p.is-warn i { color: #D0922A; }
.wl-slip-save {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 15px;
  background: var(--wl-cta);
  color: var(--wl-cta-fg);
  font-size: 17px;
  font-weight: 600;
}
.wl-slip-save:active { background: var(--wl-cta-active); }
/* Approve Amount was removed from the dialog. */
.wl-slip-approve { display: none; }
.wl-slip-modal-host {
  border-radius: 20px !important;
}
.wl-slip-modal-host .modal-backdrop,
.modal-backdrop:has(+ .wl-slip-modal),
.wd-modal-mask:has(.wl-slip-modal) {
  background: rgba(15, 23, 32, 0.38) !important;
}

/* Detail hero: compact density without clipping the data-source line */
@media (max-width: 767px) {
  html.wl-token-detail-active .wl-td-hero {
    max-height: none !important;
    overflow: visible !important;
  }
  html.wl-token-detail-active .wl-td-symbol {
    font-size: 18px !important;
    font-weight: 600 !important;
  }
  /* 主价格分层: 整数 25px / 小数 19px / 货币符号 20px, 长价格整体降一档。
     字号落在段上, 容器只保留基线与行高; 永远 clip 不省略。 */
  html.wl-token-detail-active[data-page="swap"] .wl-td-price {
    font-size: 25px !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;
  }
  html.wl-token-detail-active[data-page="swap"] .wl-td-price.is-mid,
  html.wl-token-detail-active[data-page="swap"] .wl-td-price.is-long,
  html.wl-token-detail-active[data-page="swap"] .wl-td-price.is-sub { font-size: 24px !important; }
  html.wl-token-detail-active[data-page="swap"] .wl-td-price.is-xlong {
    font-size: 24px !important;
    letter-spacing: -0.4px !important;
  }
  /* 手机端最终形态。每条同样带 SSR 变体, 不依赖 .wl-td-on / JS 类。 */
  html.wl-token-detail-active[data-page="swap"] .wl-td-on .wl-td-actions,
  .wl-td-footer[data-ssr="1"] .wl-td-actions {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding: 8px 12px max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }
  html.wl-token-detail-active[data-page="swap"] .wl-td-action-short,
  .wl-td-footer[data-ssr="1"] .wl-td-action-short {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 48px !important;
    max-height: 48px !important;
    border-radius: 14px !important;
    background: var(--wl-cta-soft-bg, #EEF8F2) !important;
    border: 1px solid var(--wl-cta-soft-border, #CBE8D5) !important;
    color: var(--wl-cta-soft-fg, #318A58) !important;
    font-weight: 600 !important;
  }
  html.wl-token-detail-active[data-page="swap"] .wl-td-on .wl-td-trade,
  .wl-td-footer[data-ssr="1"] .wl-td-trade {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 48px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    background: var(--wl-cta, #15965A) !important;
    border-color: var(--wl-cta, #15965A) !important;
    color: var(--wl-cta-fg, #fff) !important;
    box-shadow: none !important;
  }
  html.wl-token-detail-active[data-page="swap"] .wl-td-on .wl-td-trade:active,
  .wl-td-footer[data-ssr="1"] .wl-td-trade:active {
    background: var(--wl-cta-active, #10804C) !important;
  }
}

/* ── K-line 全部周期 sheet ──────────────────────────────────────────────
   Twelve periods laid out as a fixed 4 columns × 3 rows. The column count is
   fixed rather than auto-fit so the last row is full and no gap is left: 12
   periods / 4 columns divides exactly. `1fr` columns keep every card the same
   width, and a shared min-height keeps every card the same height, so the grid
   reads as one block instead of a ragged list. */
.wl-kline-tf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 0 12px;
}
.wl-kline-tf-grid .wl-sheet-chip {
  display: flex;
  min-height: 44px;
  padding: 8px 2px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, .04);
  color: var(--wl-text-1, #111);
  font-weight: 600;
}
.wl-kline-tf-grid .wl-sheet-chip.is-on {
  border-color: var(--wl-brand, #07883B);
  background: rgba(7, 136, 59, .08);
  color: var(--wl-brand, #07883B);
}
.wl-kline-tf-grid .wl-sheet-chip-title {
  font-size: 13px;
  line-height: 1.2;
}
/* 390px is the narrowest phone we support: 4 columns of ~79px still hold
   「1小时」 without clipping, but the label gets no spare room, so shave the
   font rather than let the text wrap onto a second line. */
@media (max-width: 400px) {
  .wl-kline-tf-grid { gap: 6px; }
  .wl-kline-tf-grid .wl-sheet-chip-title { font-size: 12.5px; }
}
/* Desktop quick row only — the mobile detail layout owns its own grid, so this
   must not set flex properties that would fight it. */
.kline-timeframes .kline-tf,
.kline-timeframes .kline-tf-more {
  white-space: nowrap;
}
/* Outside the mobile detail layout the track carries no layout of its own: the
   period buttons stay direct flex items of .kline-timeframes exactly as they
   were before the wrapper existed. The detail media query above turns it into a
   real horizontal scroller. */
.kline-timeframes > .wl-kline-quick-track {
  display: contents;
}
.kline-timeframes .kline-tf-more .wl-mk-chev {
  margin-left: 2px;
  font-size: 10px;
  opacity: .6;
}

/* ════════════════════════════════════════════════════════════════════
   17.2 / 17.13 / 17.14 (2026-08-07): 详情页顶部三行分层 + safe-area + 密度统一
   —— 追加块, 类选择器特异性高于旧 .wl-td-hero 两栏规则, 不删旧规则。
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* 17.2 三行分层: 覆盖旧两栏 grid。 */
  html.wl-token-detail-active .wl-td-hero.wl-td-hero--rows {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px 14px 8px !important;
    min-height: 0 !important; max-height: none !important; height: auto !important;
    overflow: visible !important;
  }
  /* 第一行: 主价格最高视觉级别, 涨跌紧跟基线。 */
  html.wl-token-detail-active .wl-td-hero--rows .wl-td-hero-row1 {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap;
    min-width: 0;
  }
  html.wl-token-detail-active .wl-td-hero--rows .wl-td-chg {
    font-size: 15px; font-weight: 600; line-height: 1.2;
  }
  html.wl-token-detail-active .wl-td-hero--rows .wl-td-chgabs {
    font-size: 13px; font-weight: 500;
  }
  /* 第二行: 三格二级数据, 各占 1/3, 数值不截断 (沿用长度降字号)。 */
  html.wl-token-detail-active .wl-td-hero--rows .wl-td-hero-row2 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
    width: 100%;
  }
  html.wl-token-detail-active .wl-td-hero--rows .wl-td-hero-row2 .wl-td-hero-stat[hidden] {
    /* 三行结构里隐藏格保占位, 相邻格不横向漂移 */
    display: block !important;
    visibility: hidden;
  }
  /* 第三行: DEX/数据源/更新时间, 三级中性文字, 换行不裁切。 */
  html.wl-token-detail-active .wl-td-hero--rows .wl-td-hero-row3 {
    display: flex !important; flex-wrap: wrap; align-items: center;
    gap: 2px 10px; width: 100%;
    font-size: 12px; font-weight: 400; color: var(--wl-text-3, #98A2B3);
    line-height: 1.35; max-height: none; overflow: visible;
    margin-top: 0 !important;
  }
  html.wl-token-detail-active .wl-td-hero--rows .wl-td-hero-row3 > .is-na { display: none !important; }

  /* 17.4: 终态空层高度稳定已有 (240px); 未支持网络态同样吃这套稳定高度。 */
  html.wl-token-detail-active #kline-loading.is-terminal-empty[data-reason="chain-unsupported"] .wl-kline-empty-title {
    color: var(--wl-text-2, #5A626D);
  }

  /* 17.14 密度统一: 390/414/430 三档宽度同一节奏。
     - Tab: 高度 40px, 字号 14px
     - 地址/标签 chip: 12px, 行高 1.3, 触控高度 ≥28px
     - 卡片/分组的纵向间距统一 10px, 不再 6/8/12 混用 */
  html.wl-token-detail-active .wl-td-tabs [data-td-tabbtn],
  html.wl-token-detail-active .wl-td-tabs button {
    min-height: 40px;
    font-size: 14px;
    line-height: 1.2;
  }
  html.wl-token-detail-active .wl-td-addr,
  html.wl-token-detail-active [data-td-addr],
  html.wl-token-detail-active .wl-td-tagchip {
    font-size: 12px; line-height: 1.3; min-height: 28px;
    display: inline-flex; align-items: center;
  }
  html.wl-token-detail-active .wl-td-panels > section,
  html.wl-token-detail-active .wl-td-panels .wl-td-block {
    margin-bottom: 10px;
  }
}

/* 17.13: ≤767px 固定外壳里, 滚动容器底部给 safe-area 余量 ——
   Tab 列表最后一行 / K线 X 轴在 Home 指示条机型上不贴死底栏。 */
@media (max-width: 767px) {
  html[data-page="swap"] #swap-page-container[data-td-ssr="1"],
  html.wl-token-detail-active[data-page="swap"] #swap-page-container.wl-td-on {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   2026-08-07 Production 详情页回归修复 (二轮):
   final-ui 的 ID 级选择器 (#swap-page-container.wl-td-on .wl-td-hero) 带
   grid !important, 特异性压过 #99 的 .wl-td-hero--rows 三行结构 → 首屏
   价格/指标互相覆盖、第三行纵向断裂省略号。此处用同级 ID 选择器夺回。
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  html.wl-token-detail-active[data-page="swap"] #swap-page-container.wl-td-on .wl-td-hero.wl-td-hero--rows,
  html.wl-token-detail-active[data-page="swap"] #swap-page-container.wl-td-on[data-td-tab="market"] .wl-td-hero.wl-td-hero--rows,
  html.wl-token-detail-active[data-page="swap"] #swap-page-container.wl-td-on[data-td-tab="overview"] .wl-td-hero.wl-td-hero--rows,
  html.wl-token-detail-active .wl-td-hero.wl-td-hero--rows {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    padding: 10px 14px 8px !important;
    width: 100% !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important;
    align-items: stretch !important;
    position: relative !important;
  }
  /* 三行全部占满整行, 互相独立, 禁止 absolute/负 margin 叠层 */
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-hero-row1,
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-hero-row2,
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-hero-row3 {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-hero-row1 {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  /* 涨跌幅/涨跌额完整显示, 不被裁切 */
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-chg,
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-chgabs {
    display: inline-flex !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-hero-row2 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
  }
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-hero-row2 .wl-td-hero-stat[hidden] {
    display: block !important;
    visibility: hidden !important;
  }
  /* 第三行: 横向 wrap 的中性状态区; 能完整显示时禁止「价格…」「K线更…」 */
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-hero-row3 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px 10px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-hero-row3 > span,
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-meta > span {
    display: inline !important;
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  html.wl-token-detail-active #swap-page-container.wl-td-on .wl-td-hero--rows .wl-td-hero-row3 > .is-na {
    display: none !important;
  }

  /* OHLC / MA 防裁切: 图例容器允许换行, 右侧留出内边距, 不再吃掉尾数 */
  html.wl-token-detail-active #swap-kline-card .kline-legend,
  html.wl-token-detail-active #swap-kline-card .kline-ohlc,
  html.wl-token-detail-active #swap-kline-card [class*="legend"] {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding-right: 8px !important;
    row-gap: 2px !important;
    white-space: normal !important;
  }

  /* 持币表移动端: 表格占满内容宽, 不再超宽出横向滚动条;
     地址列缩略 (行内已是 6+4 缩略), 状态提示行允许换行完整显示 */
  html.wl-token-detail-active .wl-td-on #ave-holders-tbody,
  html.wl-token-detail-active .wl-td-on #ave-lp-tbody {
    width: 100%;
  }
  html.wl-token-detail-active .wl-td-on [data-host="holders"] table,
  html.wl-token-detail-active .wl-td-on .ave-tab-pane table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  html.wl-token-detail-active .wl-td-on [data-host="holders"] table td,
  html.wl-token-detail-active .wl-td-on .ave-tab-pane table td,
  html.wl-token-detail-active .wl-td-on [data-host="holders"] table th,
  html.wl-token-detail-active .wl-td-on .ave-tab-pane table th {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  /* 状态行 (加载失败/暂不可用/空) 横跨整表且完整换行显示 */
  html.wl-token-detail-active .wl-td-on .ave-tab-pane table td[colspan] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html.wl-token-detail-active .wl-td-on [data-host="holders"] {
    overflow-x: hidden !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   2026-08-07 指令《修复移动端 DApp 底部五导航位置》:
   旧实现是「悬浮胶囊」—— 外层 bottom: calc(8px 浮动间隙 + env(safe-area)),
   整条导航被抬离视口底部, DApp WebView 里下方出现明显空隙。
   要求: 外层 fixed 且 bottom:0/left:0/right:0 贴死视口底,
   safe-area 只作为导航内部 padding-bottom, 不再抬升整条导航。
   只改定位, 不动图标/文字/玻璃样式。此文件全站最后加载, 覆盖
   main.css / whaleland-final-ui.css / whaleland-mobile.css 三处旧定位。
   ════════════════════════════════════════════════════════════════════ */
:root {
  --wl-nav-float-gap: 0px;
  --wl-nav-float-x: 0px;
}
.mobile-tabbar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  /* safe-area 只在导航内部占位: 主体 → padding → 视口最底 */
  padding: 0 0 env(safe-area-inset-bottom, 0px) 0 !important;
}
/* 内层保持原玻璃样式与高度; 贴底后占满宽度, 不再留两侧 10px 浮动边距 */
.mobile-tabbar .mobile-tabbar-inner {
  max-width: none !important;
  margin: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   2026-08-07 K线周期栏交易所风格小型化 (指令二/十三):
   高度 32-34px / 字号 12.5-13px / padding 10-12px / gap 5-6px / 圆角小 /
   无厚重背景 / 当前周期轻量高亮 / 未选中中性灰 / All 权重更低。
   覆盖 final-ui 的 width:100%/五等分/大卡片。此文件全站最后加载。
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick {
    gap: 6px !important;
    padding: 4px 8px !important;
  }
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick-track {
    gap: 5px !important;
  }
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick-track .kline-tf,
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick .wl-kline-q-more,
  html.wl-token-detail-active .wl-kline-quick-track .kline-tf,
  html.wl-token-detail-active .wl-kline-quick .wl-kline-q-more {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 33px !important;
    min-height: 33px !important;
    line-height: 33px !important;
    padding: 0 11px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    border-radius: 7px !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    /* 未选中: 中性灰, 无厚重背景 */
    color: var(--wl-text-3, #98A2B3) !important;
    background: transparent !important;
  }
  /* 当前周期: 轻量高亮 (淡底 + 品牌色文字), 不是厚重卡片 */
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick-track .kline-tf.active,
  html.wl-token-detail-active .wl-kline-quick-track .kline-tf.active {
    color: var(--wl-brand, #0E9F6E) !important;
    background: color-mix(in srgb, var(--wl-brand, #0E9F6E) 12%, transparent) !important;
    font-weight: 600 !important;
  }
  /* All: 权重比当前周期更低 (更淡的中性色, 不高亮) */
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick .wl-kline-q-more,
  html.wl-token-detail-active .wl-kline-quick .wl-kline-q-more {
    color: var(--wl-text-3, #98A2B3) !important;
    opacity: .85;
    font-weight: 500 !important;
  }
  html.wl-token-detail-active .wl-kline-quick .wl-kline-q-more .wl-mk-chev {
    font-size: 9px !important;
    opacity: .55;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-09 Production 真机复检批次
   一、成交明细列表 (此前只有一句提示语, 没有任何列表组件)
   二、移动端空状态统一收紧 —— 有内容正常显示, 没内容紧凑收缩,
       不靠大白块撑页面高度
   ══════════════════════════════════════════════════════════════════════════ */

.wl-trade-list {
  display: flex; flex-direction: column;
  font-variant-numeric: tabular-nums;
}
.wl-trade-row {
  display: grid;
  grid-template-columns: 52px 28px minmax(60px, 1fr) minmax(56px, 1fr) minmax(60px, 1fr) 64px 64px;
  align-items: center; gap: 6px;
  padding: 7px 0; font-size: 12px;
  border-bottom: 1px solid var(--wl-border, rgba(0, 0, 0, .06));
  white-space: nowrap;
}
.wl-trade-row:last-child { border-bottom: 0; }
.wl-trade-time { color: var(--wl-text-3, #888); }
.wl-trade-side { font-weight: 700; }
.wl-trade-side.is-buy { color: var(--wl-up, #16a34a); }
.wl-trade-side.is-sell { color: var(--wl-down, #dc2626); }
.wl-trade-price, .wl-trade-amount, .wl-trade-value {
  overflow: hidden; text-overflow: ellipsis;
}
.wl-trade-who, .wl-trade-tx {
  color: var(--wl-text-3, #888);
  overflow: hidden; text-overflow: ellipsis;
}
a.wl-trade-tx { color: var(--wl-brand, #07883B); text-decoration: none; }
.wl-trade-tx.is-na { opacity: .6; }
/* 窄屏收掉信息密度最低的两列, 而不是让整行横向溢出 */
@media (max-width: 400px) {
  .wl-trade-row { grid-template-columns: 48px 26px minmax(56px, 1fr) minmax(56px, 1fr) 60px; }
  .wl-trade-who, .wl-trade-row > .wl-trade-tx { display: none; }
}

/* 空状态: 只保留 图标 / 标题 / 一两行说明 + 合理间距, 页面自然结束。
   此前 Smart Money / Trade 的空状态下方都留着接近一屏的白区。 */
html.wl-token-detail-active .wl-td-panels .wl-state {
  padding: 20px 12px !important;
  min-height: 0 !important;
}
html.wl-token-detail-active .wl-td-panels .wl-state-desc {
  max-width: 34em; margin-left: auto; margin-right: auto;
}
/* 任何为「将来可能有内容」预留的空容器都不该占高度 */
html.wl-token-detail-active .wl-td-panels > *:empty,
html.wl-token-detail-active .wl-pane:empty { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   2026-08-11 K-line timeframe neutral segmented navigation
   Reference: one quiet rail, compact labels and a neutral selected pill.
   The active period intentionally does not use the WhaleLand green.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* One shared geometry for every token detail: a wide, tall price pane with
     a shorter volume pane below it. The empty/error state keeps its compact
     rules from the earlier block and is intentionally not stretched. */
  html.wl-token-detail-active[data-page="swap"] .wl-td-on #kline-wrap:not(.is-empty-state),
  html.wl-token-detail-active #kline-wrap:not(.is-empty-state),
  html.wl-token-detail-active .kline-wrap:not(.is-empty-state) {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(480px, 68dvh, 600px) !important;
    min-height: 480px !important;
    max-height: 600px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html.wl-token-detail-active #swap-kline-card .kline-header {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 6px !important;
    gap: 6px !important;
  }

  html.wl-token-detail-active #swap-kline-card .kline-timeframes,
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick {
    height: 36px !important;
    min-height: 36px !important;
    padding: 3px !important;
    gap: 2px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #f3f5f7 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html.wl-token-detail-active #swap-kline-card .wl-kline-quick-track {
    gap: 2px !important;
    align-items: center !important;
  }

  html.wl-token-detail-active #swap-kline-card .wl-kline-quick-track .kline-tf,
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick .wl-kline-q-more,
  html.wl-token-detail-active #swap-kline-card .kline-timeframes .kline-tf,
  html.wl-token-detail-active #swap-kline-card .kline-timeframes .kline-tf-more {
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    line-height: 30px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: #697386 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  html.wl-token-detail-active #swap-kline-card .wl-kline-quick-track .kline-tf.active,
  html.wl-token-detail-active #swap-kline-card .kline-timeframes .kline-tf.active {
    color: #26313d !important;
    background: #e3e8ec !important;
    font-weight: 650 !important;
    box-shadow: none !important;
  }

  html.wl-token-detail-active #swap-kline-card .wl-kline-q-more,
  html.wl-token-detail-active #swap-kline-card .kline-tf-more {
    color: #697386 !important;
    opacity: 1 !important;
  }

  html.wl-token-detail-active #swap-kline-card .wl-mk-chev {
    margin-left: 3px !important;
    font-size: 8px !important;
    opacity: .62 !important;
  }

  /* Price stays on the left; the percentage and absolute move use the empty
     right side as one aligned cluster instead of crowding the main price. */
  html.wl-token-detail-active #swap-page-container.wl-td-on
    .wl-td-hero--rows .wl-td-hero-row1 {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  html.wl-token-detail-active #swap-page-container.wl-td-on
    .wl-td-hero--rows .wl-td-change-cluster {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  html[data-theme="dark"].wl-token-detail-active #swap-kline-card .kline-timeframes,
  html[data-theme="dark"].wl-token-detail-active #swap-kline-card .wl-kline-quick {
    background: rgba(255, 255, 255, .065) !important;
  }

  html[data-theme="dark"].wl-token-detail-active #swap-kline-card
    .wl-kline-quick-track .kline-tf.active,
  html[data-theme="dark"].wl-token-detail-active #swap-kline-card
    .kline-timeframes .kline-tf.active {
    color: #f3f4f6 !important;
    background: rgba(255, 255, 255, .13) !important;
  }
}

@media (max-width: 359px) {
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick-track .kline-tf,
  html.wl-token-detail-active #swap-kline-card .wl-kline-quick .wl-kline-q-more {
    padding: 0 6px !important;
    font-size: 11.5px !important;
  }
  html.wl-token-detail-active #swap-page-container.wl-td-on
    .wl-td-hero--rows .wl-td-change-cluster {
    gap: 5px !important;
  }
  html.wl-token-detail-active #swap-page-container.wl-td-on
    .wl-td-hero--rows .wl-td-chg { font-size: 13px !important; }
  html.wl-token-detail-active #swap-page-container.wl-td-on
    .wl-td-hero--rows .wl-td-chgabs { font-size: 12px !important; }
}