/* 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: 80; 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;
}
.wl-sheet-section {
  margin: 8px 0 6px; font-size: 12px; font-weight: 600;
  color: var(--wl-text-3, #888);
}

/* 鈹€鈹€ 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) {
  /* 鈺愨晲鈺愨晲鈺愨晲 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;
  }

  /* Light back only 鈥?no Markets title doorhead */
  .wl-mk-appbar {
    display: flex; align-items: center; gap: 4px;
    height: 36px; padding: 0 8px;
    background: var(--wl-surface-1, #fff);
    border-bottom: 0;
  }
  .wl-mk-appbar .wl-mk-back {
    width: 36px; height: 36px; border: 0; background: transparent;
    color: var(--wl-text-2, #555); display: inline-flex;
    align-items: center; justify-content: center; flex: none;
  }
  .wl-mk-appbar h1,
  .wl-mk-appbar .wl-mk-search { display: none !important; }

  /* Unified sticky chrome: cats + filters + sort */
  .wl-mk-sticky {
    position: sticky; top: 0; z-index: 28;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
  }

  /* Shared pill system 鈥?cats + network + 24H share one height / radius / center */
  .wl-mk-cats-row {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 4px 12px;
    box-sizing: border-box;
    background: #fff;
    gap: 8px;
    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: 8px;
    height: 52px;
    padding: 4px 12px;
    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;
  }
  .wl-mk-cats::-webkit-scrollbar { display: none; }
  .wl-mk-cat-more {
    flex: none;
    flex-shrink: 0;
    gap: 4px;
    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: 44px;
    min-height: 44px;
    max-height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 16px;
    background: #F5F5F5;
    color: var(--wl-text-2, #555);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }
  .wl-mk-cat.is-on,
  .wl-mk-filter-btn.is-on {
    background: rgba(7, 136, 59, 0.12);
    color: var(--wl-brand, #07883B);
  }
  .wl-mk-cat.is-planned {
    flex-direction: column;
    gap: 2px;
    padding: 5px 12px;
    background: #F0F1F3;
    color: #9CA3AF;
  }
  .wl-mk-cat.is-planned.is-on {
    background: #F0F1F3;
    color: #9CA3AF;
  }
  .wl-mk-cat-title { line-height: 1.15; }
  .wl-mk-cat-sub {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: #9CA3AF;
  }
  .wl-mk-filter-btn .wl-mk-chev,
  .wl-mk-cat .wl-mk-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    opacity: .55;
    flex: none;
    margin: 0;
    transform: translateY(0);
  }
  .wl-mk-filter-btn {
    gap: 8px;
  }
  .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: 62px;
    min-width: 62px;
    max-width: 62px;
    padding: 0 10px;
    gap: 8px;
    color: #1A1F2C;
  }
  .wl-mk-network-btn .wl-mk-network-ico {
    width: 24px; height: 24px; 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: 24px; height: 24px;
    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: 64px;
  }
  .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: 44px; height: 44px; min-width: 44px; min-height: 44px;
    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-lang-toggle.wl-lang-toggle {
    margin: 0;
    width: auto;
    min-width: 40px;
    height: 36px;
    padding: 0 6px;
    gap: 2px;
    border: 1px solid var(--wl-border, rgba(15, 23, 42, .1));
    border-radius: 10px;
    background: var(--wl-surface, #fff);
    color: var(--wl-text-1, #111);
    box-shadow: none;
    align-self: center;
    flex: none;
  }
  html[data-theme="dark"][data-page="markets"] .wl-mk-lang-toggle.wl-lang-toggle {
    color: #E8EAED;
    background: transparent;
    border-color: rgba(232, 234, 237, .18);
  }

  .wl-mk-sort {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 1.2fr 1fr;
    gap: 4px; height: 40px; padding: 0 12px;
    align-items: center;
    background: #fff;
    border-bottom: 0;
    font-size: 11px; 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: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 { font-size: 8px; opacity: .65; }

  /* 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;
  }
  html[data-page="markets"] #market-status {
    padding: 8px 14px 16px !important;
    font-size: 12px !important;
    color: var(--wl-text-3, #888) !important;
  }

  /* Dense token rows 鈥?~72鈥?0px; logo slot 42px */
  html[data-page="markets"] .wl-mrow {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 10px !important; align-items: center !important;
    min-height: 72px !important; height: auto !important;
    padding: 12px 14px !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,
  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: 42px !important; height: 42px !important;
    min-width: 42px !important; min-height: 42px !important;
    flex: 0 0 42px !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  /* Uniform circular token vessel — logo / letter placeholder share the same size */
  html[data-page="markets"] .wl-mrow-logo > i:first-child,
  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: 38px !important; height: 38px !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"],
  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: 38px !important; height: 38px !important;
    max-width: 38px !important; max-height: 38px !important;
    min-width: 38px !important; min-height: 38px !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,
  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 — smaller, tucked to BR, must not cover main mark center */
  html[data-page="markets"] .wl-mrow-logo > i:last-child,
  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: 1.5px solid #fff !important;
    background: #fff !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,
  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: 10px !important; height: 10px !important;
    max-width: 10px !important; max-height: 10px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
  }
  html[data-page="markets"] .wl-mrow-logo .chain-icon,
  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: #fff !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: #fff !important;
    padding: 1px !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: 6px !important;
    min-width: 0 !important;
  }
  html[data-page="markets"] .wl-mrow-sym {
    font-size: 16px !important; font-weight: 600 !important;
    color: var(--wl-text-1, #111) !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    white-space: nowrap !important; max-width: 46vw !important;
  }
  html[data-page="markets"] .wl-mrow-tag {
    flex: none; font-size: 10px; font-weight: 600;
    color: var(--wl-text-3, #888); background: rgba(0,0,0,.04);
    border-radius: 4px; padding: 1px 5px;
  }
  html[data-page="markets"] .wl-mrow-l2 {
    margin-top: 4px !important;
    font-size: 12px !important; color: var(--wl-text-3, #888) !important;
    display: flex !important; gap: 6px !important; align-items: center !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-right {
    text-align: right !important; display: flex !important;
    flex-direction: column !important; align-items: flex-end !important; gap: 4px !important;
  }
  html[data-page="markets"] .wl-mrow-price {
    font-size: 16px !important; font-weight: 600 !important;
    color: var(--wl-text-1, #111) !important;
  }
  html[data-page="markets"] .wl-mrow .wl-chg {
    font-size: 13px !important; font-weight: 600 !important;
    background: transparent !important; padding: 0 !important; border-radius: 0 !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 14px;
  }
  html[data-page="markets"] .wl-mk-list-skel > i {
    display: block; height: 72px; 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: 62px !important; padding: 0 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; }
  html.wl-token-detail-active .wl-td-wrap,
  html.wl-token-detail-active .wl-td-idtext > i[data-td-chain] {
    display: none !important;
  }

  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;
    min-height: 32px; padding: 6px 12px;
    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: flex; }
  html.wl-token-detail-active .wl-td-capability button {
    margin-left: auto; border: 0; background: transparent;
    color: inherit; font-size: 16px; line-height: 1; padding: 0 2px;
  }

  html.wl-token-detail-active .wl-td-hero {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 12px !important;
    padding: 10px 14px 6px !important;
    align-items: start !important;
  }
  html.wl-token-detail-active .wl-td-heroL { gap: 2px !important; }
  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-price-time,
  html.wl-token-detail-active .wl-td-daystats {
    display: none !important;
  }
  html.wl-token-detail-active .wl-td-price {
    font-size: 28px !important; line-height: 1.1 !important; font-weight: 800 !important;
  }
  html.wl-token-detail-active .wl-td-chg {
    font-size: 13px !important; font-weight: 700 !important;
  }
  html.wl-token-detail-active .wl-td-candle-time {
    grid-column: 1 / -1;
    font-size: 11px; color: #c47b00; margin-top: 2px;
  }
  html.wl-token-detail-active .wl-td-candle-time.is-na { display: none; }
  html.wl-token-detail-active .wl-td-riskbox {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  }
  html.wl-token-detail-active .wl-td-risk {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; color: var(--wl-brand, #07883B);
  }
  html.wl-token-detail-active .wl-td-risk.is-na { display: none; }
  html.wl-token-detail-active .wl-td-socials {
    display: flex; gap: 8px; align-items: center;
  }
  html.wl-token-detail-active .wl-td-socials a {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.05); color: var(--wl-text-2, #444); font-size: 11px;
  }

  html.wl-token-detail-active .wl-td-metrics {
    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,
  html.wl-token-detail-active .wl-td-source,
  html.wl-token-detail-active .wl-td-pool {
    display: none !important;
  }

  /* 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;
    margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; background: transparent !important;
  }
  html.wl-token-detail-active[data-page="swap"] .wl-td-on .wl-td-hero,
  html.wl-token-detail-active .wl-td-hero,
  html.wl-token-detail-active .wl-td-metrics,
  html.wl-token-detail-active .wl-td-capability.is-on {
    display: grid !important;
  }
  html.wl-token-detail-active .wl-td-capability.is-on { display: flex !important; }
  html.wl-token-detail-active .wl-td-hero { display: grid !important; }
  html.wl-token-detail-active #swap-kline-card .kline-header {
    height: 50px !important; min-height: 50px !important;
    padding: 0 8px !important; gap: 6px !important;
    align-items: center !important;
    display: flex !important;
  }
  html.wl-token-detail-active .wl-kline-quick {
    display: flex !important; flex: 1 1 auto !important;
    gap: 2px !important; overflow-x: auto !important; scrollbar-width: none;
  }
  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; }
  html.wl-token-detail-active #swap-kline-card .kline-tf,
  html.wl-token-detail-active .wl-kline-quick .kline-tf {
    flex: 1 1 0 !important;
    height: 28px !important; min-width: 0 !important; max-width: none !important;
    padding: 0 4px !important; border-radius: 8px !important;
    border: 0 !important; background: rgba(0,0,0,.05) !important;
    font-size: 12px !important; font-weight: 600 !important;
    color: var(--wl-text-3, #888) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  html.wl-token-detail-active #kline-wrap,
  html.wl-token-detail-active .kline-wrap {
    height: min(52dvh, 460px) !important;
    min-height: 340px !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;
  }
  html.wl-token-detail-active .wl-kline-quick {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  /* Compact status above chart 鈥?never covers candles / MA */
  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;
  }
  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;
  }

  html.wl-token-detail-active .wl-td-footer {
    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;
    backdrop-filter: blur(8px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    pointer-events: auto !important;
  }
  html.wl-token-detail-active .wl-td-actions {
    display: flex !important; align-items: center;
    gap: 8px !important;
    padding: 8px 12px 10px !important;
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: auto !important;
  }
  html.wl-token-detail-active .wl-td-action-short {
    min-width: 52px; min-height: 44px; border: 0; background: transparent;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: var(--wl-text-2, #444); font-size: 11px; font-weight: 600;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
  html.wl-token-detail-active .wl-td-trade {
    flex: 1 1 auto !important; min-height: 44px !important;
    border: 0 !important; border-radius: 12px !important;
    background: var(--wl-brand, #07883B) !important;
    color: #fff !important; font-weight: 700 !important; font-size: 16px !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    cursor: pointer;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  html.wl-token-detail-active .wl-td-pos {
    pointer-events: none;
  }
  html.wl-token-detail-active #swap-page-container.wl-td-on,
  html.wl-token-detail-active .swap-page-left {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Below-chart tabs */
  html.wl-token-detail-active .wl-td-tabs {
    display: flex !important; gap: 0 !important;
    height: 46px !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: 46px !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 */
  html.wl-token-detail-active .wl-td-panels { padding: 8px 16px 24px; }
  html.wl-token-detail-active .wl-ov { display: flex; flex-direction: column; }
  html.wl-token-detail-active .wl-ov-row {
    display: flex; align-items: flex-start; 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 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: 600; color: var(--wl-text-1, #111); text-align: right; word-break: break-all;
  }
  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-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);
  }

  /* 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: var(--wl-brand) !important;
    color: #fff !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;
  }

  /* Search icon visible on dark */
  html[data-theme="dark"][data-page="markets"] .wl-mk-search-btn,
  html[data-theme="dark"][data-page="markets"] .wl-mk-appbar .wl-mk-back {
    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;
  }
  /* Chain badge ring matches page, not white */
  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-color: var(--wl-bg) !important;
    background: var(--wl-surface-2) !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 {
    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);
  }
}