/* ============================================================
   FAcoin — Global Styles
   Palette inspired by ju.com (light, clean) + Binance-style gold
   ============================================================ */

/* A11y: visible focus outline for keyboard users on all interactive elements
   (we keep mouse-only :focus rules untouched via :focus-visible only) */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold, #F5B824);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Screen-reader-only utility, keeps content available to AT but visually hidden */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip-to-content link — invisible until keyboard focus, then anchored top-left. */
.fa-skip-link {
  position: fixed;
  top: -40px;
  left: 8px;
  z-index: 100000;
  background: var(--gold, #F5B824);
  color: #1E2329;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-size: 14px;
  transition: top 0.18s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.fa-skip-link:focus,
.fa-skip-link:focus-visible {
  top: 0;
  outline: 2px solid #1E2329;
  outline-offset: -2px;
}
/* Provide a safety net: when focus lands on a synthetic #main-content
   anchor that has tabindex="-1", suppress the outline since it's not
   a real interactive element — the page just scrolled to it. */
#main-content[tabindex="-1"]:focus { outline: none; }

:root {
  /* color-scheme hints the UA to pick correct form-control / scrollbar
     palette automatically — important for native <select>, <input type=date>
     and scrollbar tracks under dark mode.                                */
  color-scheme: light;

  --gold: #F5B824;
  --gold-dark: #D69B0F;
  --gold-soft: #FFF6DD;

  --ink: #1E2329;
  --ink-2: #474D57;
  --ink-3: #707A8A;
  --line: #EAECEF;
  --bg: #FFFFFF;
  --bg-soft: #F8FAFC;
  --bg-soft-2: #F5F5F5;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --header-bg: rgba(255,255,255,0.85);
  /* Chart / sparkline tokens — used by lightweight-charts / KLineChart /
     inline SVG sparklines so colors track the active theme. JS reads
     them via getComputedStyle on theme change.                          */
  --chart-bg: #FFFFFF;
  --chart-text: #1E2329;
  --chart-grid: #EAECEF;
  --chart-border: #EAECEF;
  --chart-cross: #707A8A;
  --spark-up: #02C076;
  --spark-down: #F84960;
  --hero-bg:
    radial-gradient(ellipse 800px 400px at 80% 20%, rgba(245,184,36,0.12), transparent 60%),
    radial-gradient(ellipse 700px 380px at 10% 80%, rgba(255,138,0,0.08), transparent 60%),
    linear-gradient(180deg, #FFFCF3 0%, #FFFFFF 100%);
  --download-bg: linear-gradient(180deg, #FFFCF3 0%, #FFFFFF 100%);
  --skeleton-1: #EEF1F4;
  --skeleton-2: #F7F9FB;

  --up: #02C076;
  --down: #F84960;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 8px rgba(20, 30, 50, 0.04);
  --shadow-md: 0 10px 30px rgba(20, 30, 50, 0.08);
  --shadow-lg: 0 24px 60px rgba(20, 30, 50, 0.12);

  --transition: 200ms cubic-bezier(.4,0,.2,1);

  /* Aliases for inline <style> blocks that grew organically across pages.
     These map to canonical tokens so dark mode flips correctly. */
  --card: var(--surface);
  --card-bg: var(--surface);
  --bg-card: var(--surface);
  --bg-elev: var(--bg-soft);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --border: var(--line);
  --text: var(--ink);
  --muted: var(--ink-3);
  --muted-2: var(--ink-2);
  --ink-sub: var(--ink-3);
  --brand: var(--gold-dark);
}

/* ===== Dark theme overrides =====
   Applied when:
   - user explicitly chose dark (data-theme="dark"), OR
   - user chose auto AND the system prefers dark (handled by JS
     resolving the auto choice to a concrete data-theme value).
   We keep a CSS-only @media fallback below for users hitting a page
   before JS runs with no stored preference.                          */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink: #EAECEF;
  --ink-2: #B7BDC6;
  --ink-3: #848E9C;
  --line: #2B3139;
  --bg: #0B0E11;
  --bg-soft: #161A1E;
  --bg-soft-2: #1E2329;
  --surface: #161A1E;
  --surface-2: #1E2329;
  --gold-soft: rgba(245,184,36,0.14);
  --header-bg: rgba(11,14,17,0.85);
  --chart-bg: #0B0E11;
  --chart-text: #EAECEF;
  --chart-grid: #2B3139;
  --chart-border: #2B3139;
  --chart-cross: #848E9C;
  --spark-up: #02C076;
  --spark-down: #F84960;
  --hero-bg:
    radial-gradient(ellipse 800px 400px at 80% 20%, rgba(245,184,36,0.10), transparent 60%),
    radial-gradient(ellipse 700px 380px at 10% 80%, rgba(255,138,0,0.06), transparent 60%),
    linear-gradient(180deg, #0B0E11 0%, #161A1E 100%);
  --download-bg: linear-gradient(180deg, #0B0E11 0%, #161A1E 100%);
  --skeleton-1: #1E2329;
  --skeleton-2: #2B3139;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
}

/* CSS-only fallback for visitors hitting a page before JS resolves the
   stored "auto" preference (or before market.js loads). We only apply
   when there is no explicit data-theme attribute, so an explicit
   light/dark choice always wins.                                       */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --ink: #EAECEF;
    --ink-2: #B7BDC6;
    --ink-3: #848E9C;
    --line: #2B3139;
    --bg: #0B0E11;
    --bg-soft: #161A1E;
    --bg-soft-2: #1E2329;
    --surface: #161A1E;
    --surface-2: #1E2329;
    --gold-soft: rgba(245,184,36,0.14);
    --header-bg: rgba(11,14,17,0.85);
    --chart-bg: #0B0E11;
    --chart-text: #EAECEF;
    --chart-grid: #2B3139;
    --chart-border: #2B3139;
    --chart-cross: #848E9C;
    --hero-bg:
      radial-gradient(ellipse 800px 400px at 80% 20%, rgba(245,184,36,0.10), transparent 60%),
      radial-gradient(ellipse 700px 380px at 10% 80%, rgba(255,138,0,0.06), transparent 60%),
      linear-gradient(180deg, #0B0E11 0%, #161A1E 100%);
    --download-bg: linear-gradient(180deg, #0B0E11 0%, #161A1E 100%);
    --skeleton-1: #1E2329;
    --skeleton-2: #2B3139;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.45);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  }
}

/* Smooth color transition when user toggles theme. Keep it cheap —
   only transition the body-level paint surfaces; deep transitions
   on every element cause jank on heavy market pages. We disable
   the transition entirely when the user prefers-reduced-motion.       */
body, .header, .footer, .trade-panel, .auth-card, .card, .surface {
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .header, .footer, .trade-panel, .auth-card, .card, .surface {
    transition: none;
  }
}

/* ===== High-contrast (prefers-contrast: more) =====
   Bump foreground / border tokens toward maximum legibility while
   keeping the active theme's polarity. We override the resolved
   tokens, not the raw palette, so dark + high-contrast still renders
   light text on dark and vice versa.                                  */
@media (prefers-contrast: more) {
  :root {
    --ink: #000000;
    --ink-2: #1A1A1A;
    --ink-3: #333333;
    --line: #000000;
    --muted: #1A1A1A;
    --text: #000000;
  }
  :root[data-theme="dark"] {
    --ink: #FFFFFF;
    --ink-2: #F0F0F0;
    --ink-3: #D8D8D8;
    --line: #FFFFFF;
    --muted: #F0F0F0;
    --text: #FFFFFF;
  }
  a, .btn, .icon-btn, input, select, textarea {
    outline-width: 2px;
  }
}

/* ===== Forced colors (Windows High Contrast) =====
   Surrender colors to the system palette and only assert structure.
   Borders use CanvasText so frames stay visible; gold accents become
   AccentColor where supported. We must keep transparent backgrounds
   to avoid clobbering the system canvas.                              */
@media (forced-colors: active) {
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --gold: AccentColor;
    --gold-dark: AccentColor;
    --gold-soft: Canvas;
    --ink: CanvasText;
    --ink-2: CanvasText;
    --ink-3: GrayText;
    --line: CanvasText;
    --bg: Canvas;
    --bg-soft: Canvas;
    --bg-soft-2: Canvas;
    --surface: Canvas;
    --surface-2: Canvas;
    --header-bg: Canvas;
    --chart-bg: Canvas;
    --chart-text: CanvasText;
    --chart-grid: GrayText;
    --chart-border: CanvasText;
    --up: LinkText;
    --down: VisitedText;
    --border: CanvasText;
    --text: CanvasText;
    --muted: GrayText;
    --brand: AccentColor;
  }
  .btn, .icon-btn, .card, .surface, .panel, .auth-card, .trade-panel,
  .fa-modal, .fa-toast, input, select, textarea {
    border: 1px solid CanvasText !important;
    forced-color-adjust: none;
  }
  a:focus-visible, button:focus-visible,
  [role="tab"]:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
  /* System paints these regions, don't fight it */
  body { background: Canvas; color: CanvasText; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4, h5 { font-family: 'Manrope', 'Inter', sans-serif; color: var(--ink); margin: 0; line-height: 1.2; letter-spacing: -0.01em; }

.text-gradient {
  background: linear-gradient(135deg, #F5B824 0%, #FF8A00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: var(--gold);
  color: #1E2329;
  box-shadow: 0 6px 16px rgba(245, 184, 36, 0.35);
}
.btn--primary:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(245,184,36,0.45); }
.btn--ghost { color: var(--ink); }
.btn--ghost:hover { background: var(--bg-soft); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; background: var(--bg-soft);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.icon-btn:hover { background: var(--gold-soft); }

/* ===== Language toggle (header) ===== */
.lang-toggle {
  appearance: none; -webkit-appearance: none;
  height: 36px; padding: 0 28px 0 12px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--bg-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23707A8A' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 10px center;
  color: var(--ink); font-size: 13px; font-weight: 500;
  cursor: pointer; outline: none;
}
.lang-toggle:hover { background-color: var(--gold-soft); }
.lang-toggle:focus { border-color: var(--gold); }

/* ===== Topbar ===== */
.topbar {
  background: linear-gradient(90deg, #1E2329 0%, #2B3139 100%);
  color: #E9EEF5;
  font-size: 13px;
}
.topbar__inner {
  display: flex; align-items: center; gap: 12px; padding: 10px 24px;
  flex-wrap: wrap;
}
.topbar__text { opacity: .9; }
.topbar__text strong { color: var(--gold); }
.topbar__link { color: var(--gold); font-weight: 600; margin-left: auto; }
.topbar__link:hover { text-decoration: underline; }
.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(245,184,36,0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,184,36,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(245,184,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,184,36,0); }
}

/* ===== Header ===== */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; gap: 28px;
  height: 68px;
}
.logo { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.logo__mark {
  background: linear-gradient(135deg, #F5B824 0%, #FF8A00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo__text { color: var(--ink); }
.logo--light .logo__text { color: #fff; }

.nav { display: flex; gap: 4px; flex: 1; }
.nav__item {
  position: relative;
  padding: 8px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.nav__item:hover { color: var(--ink); background: var(--bg-soft); }
.nav__item--active,
a.nav__item--active { color: var(--ink); font-weight: 600; }
.nav__item--active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -2px;
  height: 2px; background: var(--gold); border-radius: 2px;
}
.nav__dropdown { display: inline-flex; align-items: center; gap: 6px; }
.caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); display: inline-block; margin-top: -3px; opacity: .65; }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--transition);
}
.nav__dropdown:hover .dropdown,
.nav__dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: 12px 14px; border-radius: 10px;
  transition: background var(--transition);
}
.dropdown a:hover { background: var(--bg-soft); }
.dropdown strong { display: block; color: var(--ink); font-weight: 600; }
.dropdown small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }

.header__actions { display: flex; align-items: center; gap: 8px; }

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 80px 0 100px;
  background: var(--hero-bg);
  overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center;
}
.hero__chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-soft); color: var(--gold);
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 24px;
}
[data-theme="light"] .hero__chip { color: #8A6300; }
.hero__title { font-size: clamp(40px, 5vw, 64px); font-weight: 800; }
.hero__sub { font-size: 17px; color: var(--ink-2); margin: 22px 0 28px; max-width: 540px; }

.hero__signup {
  display: flex; gap: 10px; align-items: stretch;
  max-width: 480px;
  background: var(--surface);
  padding: 6px; border-radius: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.hero__signup input {
  flex: 1; border: 0; outline: 0;
  padding: 0 14px; font-size: 15px; color: var(--ink);
  background: transparent;
}
.hero__signup .btn { border-radius: 8px; padding: 11px 22px; }

.hero__trust {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.hero__trust > div { display: flex; flex-direction: column; gap: 4px; }
.hero__trust strong {
  font-size: 24px; font-weight: 800; color: var(--ink); font-family: 'Manrope', sans-serif;
  line-height: 1.1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Any inline span injected inside <strong> (e.g. `$<span data-fa-stat>`)
   must inherit the same large font; without this it picks up `.hero__trust span`
   (12px) and currency symbols tower over digits. */
.hero__trust strong * {
  font: inherit !important;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
/* Only the direct label sibling under each item gets the small style. */
.hero__trust > div > span { font-size: 12px; color: var(--ink-3); }

/* Hero floating cards */
.hero__visual { position: relative; height: 460px; }
.card-float {
  position: absolute;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  padding: 18px;
  display: flex; gap: 14px; align-items: center;
}
.card-float--lg {
  top: 60px; left: 30px;
  width: 360px;
  flex-direction: column; align-items: stretch;
  animation: floatA 6s ease-in-out infinite;
}
.card-float--lg .card-float__head { display: flex; gap: 14px; align-items: center; }
.card-float--sm {
  width: 220px;
  animation: floatB 7s ease-in-out infinite;
}
.card-float--shift1 { top: 20px; right: 20px; }
.card-float--shift2 { bottom: 30px; left: 0; animation-delay: -2s; }

@keyframes floatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* Brand gradients — applied to the inner .coin__txt (the fallback glyph),
   so they only show when the real logo fails to load. Real SVG sits on top
   via .coin__img above. */
.coin--btc .coin__txt { background: linear-gradient(135deg, #F7931A, #FFB347); }
.coin--eth .coin__txt { background: linear-gradient(135deg, #627EEA, #8AA0FF); }
.coin--sol .coin__txt { background: linear-gradient(135deg, #9945FF, #14F195); }
.coin--bnb .coin__txt { background: linear-gradient(135deg, #F0B90B, #F5B824); }
.coin--xrp .coin__txt { background: linear-gradient(135deg, #23292F, #4A535C); }
.coin--doge .coin__txt { background: linear-gradient(135deg, #C2A633, #E0C046); }
.coin--ada .coin__txt { background: linear-gradient(135deg, #0033AD, #4E7BFF); }
.coin--avax .coin__txt { background: linear-gradient(135deg, #E84142, #FF6B6B); }
.coin--matic .coin__txt { background: linear-gradient(135deg, #8247E5, #B58AFF); }
.coin--ton .coin__txt { background: linear-gradient(135deg, #0098EA, #4FBFFF); }

.card-float__name { font-weight: 700; font-size: 15px; }
.card-float__sub { font-size: 12px; color: var(--ink-3); }
.card-float__price { margin-left: auto; text-align: right; font-weight: 700; }
.card-float__price em { font-style: normal; display: block; font-size: 12px; font-weight: 600; }
.card-float__price.small { display: flex; align-items: baseline; gap: 8px; }
.card-float__price.small em { display: inline; }

.up { color: var(--up); }
.down { color: var(--down); }

.spark { width: 100%; height: 80px; margin-top: 14px; }

/* ===== Ticker ===== */
.ticker-section { background: var(--ink); padding: 14px 0; overflow: hidden; }
.ticker { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker__track {
  display: flex; gap: 40px; white-space: nowrap;
  animation: ticker 60s linear infinite;
}
.ticker-item { display: inline-flex; gap: 10px; align-items: center; color: #E9EEF5; font-size: 14px; font-weight: 500; }
.ticker-item strong { color: #fff; }
.ticker-item .up, .ticker-item .down { font-weight: 600; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== Sections / Section Head ===== */
section { padding: 80px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; gap: 24px; flex-wrap: wrap; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-title { font-size: clamp(28px, 3vw, 38px); font-weight: 800; }
.section-sub { color: var(--ink-3); margin: 8px 0 0; font-size: 15px; }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 6px; background: var(--bg-soft); padding: 4px; border-radius: 10px; }
.tab {
  padding: 8px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: all var(--transition);
}
.tab:hover { color: var(--ink); }
.tab--active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ===== Markets table ===== */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.market-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.market-table thead th {
  text-align: left; color: var(--ink-3); font-weight: 500;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  font-size: 13px; background: var(--bg-soft);
}
.market-table tbody td {
  padding: 18px 20px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.market-table tbody tr:last-child td { border-bottom: 0; }
.market-table tbody tr { transition: background var(--transition); }
.market-table tbody tr:hover { background: var(--bg-soft); }
.market-table .symbol { display: flex; gap: 12px; align-items: center; }
.market-table .symbol .coin { width: 36px; height: 36px; font-size: 16px; }
.market-table .symbol strong { display: block; font-weight: 700; }
.market-table .symbol small { display: block; color: var(--ink-3); font-size: 12px; }
.market-table .price { font-weight: 700; font-family: 'Manrope', sans-serif; }
.market-table .change { font-weight: 700; padding: 4px 8px; border-radius: 6px; display: inline-block; }
.market-table .change.up { background: rgba(2,192,118,0.1); }
.market-table .change.down { background: rgba(248,73,96,0.1); }
.market-table .trade-btn {
  padding: 8px 18px; background: var(--gold-soft); color: var(--gold);
  border-radius: 8px; font-weight: 600; transition: all var(--transition);
}
[data-theme="light"] .market-table .trade-btn { color: #8A6300; }
.market-table .trade-btn:hover { background: var(--gold); color: #181a20; }
.mini-spark { width: 100px; height: 36px; }

/* Live status indicator */
.live-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  margin-left: 12px; vertical-align: middle;
  background: var(--bg-soft); color: var(--ink-3);
  font-family: 'Inter', sans-serif; letter-spacing: 0;
}
.live-status__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3);
}
.live-status[data-state="live"] {
  background: rgba(2,192,118,0.1); color: var(--up);
}
.live-status[data-state="live"] .live-status__dot {
  background: var(--up);
  box-shadow: 0 0 0 0 rgba(2,192,118,0.6);
  animation: livedot 1.6s infinite;
}
.live-status[data-state="offline"] {
  background: rgba(248,73,96,0.1); color: var(--down);
}
.live-status[data-state="offline"] .live-status__dot { background: var(--down); }
.live-status[data-state="connecting"] .live-status__dot { background: var(--gold); animation: livedot 1s infinite; }
@keyframes livedot {
  0%   { box-shadow: 0 0 0 0 rgba(2,192,118,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(2,192,118,0); }
  100% { box-shadow: 0 0 0 0 rgba(2,192,118,0); }
}

/* Price flash animation */
@keyframes flashUp {
  0%   { background-color: rgba(2,192,118,0.22); color: var(--up); }
  100% { background-color: transparent; }
}
@keyframes flashDown {
  0%   { background-color: rgba(248,73,96,0.22); color: var(--down); }
  100% { background-color: transparent; }
}
.flash-up   { animation: flashUp   0.7s ease-out; }
.flash-down { animation: flashDown 0.7s ease-out; }

/* Skeleton loading shimmer */
.skeleton {
  display: inline-block; min-width: 64px;
  color: transparent !important;
  background: linear-gradient(90deg, var(--skeleton-1) 0%, var(--skeleton-2) 50%, var(--skeleton-1) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.4s linear infinite;
  user-select: none;
}
.mini-spark-ph {
  display: inline-block; width: 100px; height: 36px; border-radius: 4px;
  background: linear-gradient(90deg, var(--skeleton-1) 0%, var(--skeleton-2) 50%, var(--skeleton-1) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.markets__more { text-align: center; margin-top: 28px; }
.link-more { color: var(--ink-2); font-weight: 600; font-size: 15px; }
.link-more:hover { color: var(--gold-dark); }

/* ===== Products ===== */
.products { background: var(--bg-soft); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-card {
  position: relative; overflow: hidden;
  background: var(--surface); border-radius: 18px; padding: 32px;
  border: 1px solid var(--line);
  transition: all var(--transition);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(245,184,36,0.5); }
.product-card--gold {
  background: linear-gradient(135deg, #FFF6DD 0%, #FFE9B0 100%);
  border-color: rgba(245,184,36,0.4);
}
.product-card__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.product-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.product-card p { color: var(--ink-2); margin: 0 0 24px; font-size: 14px; }
.product-card__cta { color: var(--gold-dark); font-weight: 600; font-size: 14px; }
.product-card:hover .product-card__cta { color: var(--ink); }

/* ===== Promo ===== */
.promo { background: var(--bg-soft); padding-top: 0; }
.promo__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px;
}
.promo__card {
  background: var(--surface); border-radius: 18px; padding: 28px;
  border: 1px solid var(--line);
  transition: transform var(--transition), box-shadow var(--transition);
}
.promo__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.promo__card--big {
  background:
    radial-gradient(ellipse at top right, rgba(245,184,36,0.18), transparent 60%),
    linear-gradient(135deg, #1E2329 0%, #2B3139 100%);
  color: #fff; border: 0;
}
.promo__card--big h3, .promo__card--big p { color: #fff; }
.promo__card--big p { opacity: .8; margin: 14px 0 22px; }
.promo__tag {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(245,184,36,0.15); color: var(--gold);
  margin-bottom: 14px;
}
.promo__card h3 { font-size: 28px; line-height: 1.25; }
.promo__card h4 { font-size: 18px; margin-bottom: 8px; }
.promo__card p { color: var(--ink-3); font-size: 14px; margin: 0 0 16px; }

/* ===== Trust ===== */
.trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: 16px;
}
.trust__item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; text-align: center;
  transition: all var(--transition);
}
.trust__item:hover { transform: translateY(-4px); border-color: rgba(245,184,36,0.5); box-shadow: var(--shadow-md); }
.trust__icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--gold-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 16px;
}
.trust__item h4 { font-size: 17px; margin-bottom: 8px; }
.trust__item p { color: var(--ink-3); font-size: 14px; margin: 0; }

/* ===== Download ===== */
.download { background: var(--download-bg); }
.download__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.download__btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0; }
.dl-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: #1E2329; color: #fff;
  padding: 10px 18px; border-radius: 12px;
  transition: transform var(--transition);
}
.dl-btn:hover { transform: translateY(-2px); }
.dl-btn span { font-size: 22px; }
.dl-btn small { display: block; font-size: 11px; opacity: .9; }
.dl-btn strong { display: block; font-size: 14px; }

.qr-row { display: flex; gap: 24px; align-items: center; }
.qr { text-align: center; }
.qr__box {
  width: 120px; height: 120px; border-radius: 12px;
  background:
    linear-gradient(45deg, transparent 48%, var(--ink) 48%, var(--ink) 52%, transparent 52%) 0 0 / 12px 12px,
    linear-gradient(-45deg, transparent 48%, var(--ink) 48%, var(--ink) 52%, transparent 52%) 0 0 / 12px 12px,
    #fff;
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.qr span { font-size: 12px; color: var(--ink-3); }
.dl-meta { list-style: none; padding: 0; margin: 0; }
.dl-meta li { padding: 6px 0; color: var(--ink-2); font-size: 14px; }

.download__visual { display: flex; justify-content: center; }
.phone {
  width: 260px; height: 520px;
  border-radius: 40px;
  background: #1E2329;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.phone__notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 22px; background: #000; border-radius: 0 0 14px 14px;
}
.phone__screen {
  background: var(--surface); border-radius: 28px;
  height: 100%; padding: 50px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.phone__row {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 600;
}
.phone__chart { margin-top: auto; height: 80px; }
.phone__chart svg { width: 100%; height: 100%; }

/* ===== FAQ ===== */
.faq { background: var(--bg-soft); }
.faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 22px;
  transition: border-color var(--transition);
}
.faq details[open] { border-color: rgba(245,184,36,0.5); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 0; font-weight: 600; font-size: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 22px; color: var(--gold-dark); font-weight: 400;
  transition: transform var(--transition);
}
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--ink-2); padding: 0 0 18px; margin: 0; font-size: 14px; }

/* ===== Footer ===== */
.footer { background: #1E2329; color: #B7BDC6; padding: 64px 0 0; font-size: 14px; }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 48px;
}
.footer__brand .logo__text { color: #fff; }
.footer__tag { margin: 12px 0 20px; font-size: 13px; color: #848E9C; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: all var(--transition);
}
.footer__socials a:hover { background: var(--gold); color: var(--ink); }
.footer__col h3,
.footer__col h4,
.footer__col h5 { color: #fff; font-size: 14px; margin-bottom: 18px; font-weight: 600; }
.footer__col a { display: block; padding: 6px 0; color: #B7BDC6; transition: color var(--transition); }
.footer__col a:hover { color: var(--gold); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 18px 0; }
.footer__bottom-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px; color: #848E9C; }
.footer__warn { color: #B7BDC6; }

/* ===== Responsive ===== */
/* ============================================================
   Markets toolbar (search + tabs)
   ============================================================ */
.markets-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.search {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  min-width: 240px;
  transition: border-color var(--transition);
}
.search:focus-within { border-color: var(--gold); }
.search__icon { font-size: 14px; color: var(--ink-3); margin-right: 8px; }
.search input {
  border: 0; outline: 0; background: transparent;
  padding: 10px 0; font-size: 14px; color: var(--ink);
  width: 200px;
}
.search input::placeholder { color: var(--ink-3); }

/* Coin icon — base shared by JS-generated and class-overridden variants.
   Renders a real SVG logo (spothq/cryptocurrency-icons via jsDelivr) inside
   .coin__img; on network/404 error iconHTML() flips the parent to .coin--text
   which reveals the gradient glyph .coin__txt as a graceful fallback. */
.coin {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
  flex: 0 0 auto;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
  /* 渐变兜底:img 加载中或被移除时,父层始终有底色,避免一片空白 */
  background: linear-gradient(135deg, var(--coin-c1, #777), var(--coin-c2, #444));
}
.coin__img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
  z-index: 1;
}
.coin__txt {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  color: #fff; font-weight: 800; line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  font-size: 14px;
  letter-spacing: -0.02em;
  z-index: 0;
}
.coin.coin--text .coin__img { display: none; }
.coin.coin--text .coin__txt { display: flex; }
/* 当 symLc 为空时,文字层永远显示(无 img 可加载) */
.coin__txt--always { display: flex !important; }
.coin--sm { width: 28px; height: 28px; font-size: 13px; }
.coin--lg { width: 44px; height: 44px; font-size: 20px; }
.coin--xl { width: 56px; height: 56px; font-size: 24px; }
.coin--sm .coin__txt { font-size: 13px; }
.coin--lg .coin__txt { font-size: 20px; }
.coin--xl .coin__txt { font-size: 24px; }

/* ============================================================
   Trade page
   ============================================================ */
body.trade {
  background: var(--bg);
  color: var(--ink);
}
.trade-shell {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 12px;
  padding: 12px;
  min-height: calc(100vh - 68px);
}
.trade-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Pair sidebar */
.pair-sidebar { min-height: 600px; }
.pair-sidebar .search { margin: 12px; }
.pair-list {
  flex: 1; overflow-y: auto;
  font-size: 13px;
  max-height: calc(100vh - 200px);
}
.pair-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--transition);
}
.pair-row:hover { background: var(--bg-soft); }
.pair-row.active {
  background: var(--gold-soft);
  border-left-color: var(--gold);
}
.pair-row__sym { font-weight: 600; }
.pair-row__sym small { color: var(--ink-2); font-weight: 400; margin-left: 4px; }
.pair-row__price { font-variant-numeric: tabular-nums; font-weight: 600; }
.pair-row__chg { font-size: 12px; font-weight: 600; min-width: 56px; text-align: right; }

/* Main column */
.trade-main { gap: 0; }
.trade-head {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.trade-head__pair { display: flex; gap: 10px; align-items: center; }
.trade-head__pair strong { font-size: 18px; font-weight: 700; }
.trade-head__price {
  font-family: 'Manrope', sans-serif;
  font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 140px;
}
.trade-head__stats { display: flex; gap: 22px; }
.trade-head__stats > div { display: flex; flex-direction: column; gap: 2px; }
.trade-head__stats small { color: var(--ink-3); font-size: 11px; }
.trade-head__stats span { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.intervals {
  display: flex; gap: 4px; padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}
.intervals button {
  font-size: 12px; font-weight: 600;
  color: var(--ink-3);
  padding: 6px 12px; border-radius: 6px;
  transition: all var(--transition);
}
.intervals button:hover { background: var(--bg-soft); color: var(--ink); }
.intervals button.active { background: var(--gold-soft); color: var(--gold-dark); }

.indicators {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.indicators__label {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  margin-right: 4px; letter-spacing: 0.5px;
}
.ind-chip {
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
}
.ind-chip:hover { color: var(--ink); border-color: var(--ink-3); }
.ind-chip.active {
  color: #fff;
  background: var(--chip-color, var(--gold-dark));
  border-color: var(--chip-color, var(--gold-dark));
  box-shadow: 0 0 0 1px var(--chip-color, var(--gold-dark)) inset;
}

.chart-wrap {
  flex: 1 1 auto;
  /* Self-adapting K-line height: never below 380px on small screens,
     scales to ~60% of viewport on desktop, capped at 720px so the page
     stays comfortable on ultra-tall monitors. Sub-panes (RSI/MACD/KDJ)
     subtract their own fixed heights from the main chart via flex. */
  height: clamp(380px, 60vh, 720px);
  min-height: 320px;
  position: relative;
  background: var(--surface);
}
.chart-wrap.chart-sub {
  flex: 0 0 auto;
  height: auto;
  border-top: 1px solid var(--line);
}
/* When any sub-pane is visible the main chart gives up a bit of space so
   the indicator strip doesn't push the order panel below the fold.
   Sub-panes are toggled via inline style.display = 'block'/'none' by trade.js. */
.trade-main:has(#chart-rsi[style*="block"]) .chart-wrap:not(.chart-sub),
.trade-main:has(#chart-macd[style*="block"]) .chart-wrap:not(.chart-sub),
.trade-main:has(#chart-kdj[style*="block"]) .chart-wrap:not(.chart-sub) {
  height: clamp(320px, 48vh, 560px);
}

.trade-form {
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 16px;
  /* Hold a stable height across kind tab switches (basic 2-col vs stop 1-col)
     so the layout below (orders panel) doesn't jump when the user toggles
     between limit/market and stop/oco/iceberg. */
  min-height: 360px;
}
/* Single-col advanced forms (stop / oco / iceberg) — centre the side and
   keep the same baseline footprint so flipping tabs is flicker-free. */
#trade-form-stop,
#trade-form-oco,
#trade-form-iceberg { grid-template-columns: minmax(0, 480px); justify-content: center; }
.trade-side { display: flex; flex-direction: column; gap: 10px; }
.trade-side h4 { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.trade-input {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px;
  background: var(--bg-soft);
}
.trade-input input {
  flex: 1; border: 0; outline: 0;
  background: transparent; color: var(--ink);
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.trade-input span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.trade-percent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.trade-percent button {
  padding: 6px 0; font-size: 12px; color: var(--ink-2);
  background: var(--bg-soft); border-radius: 6px;
  transition: all var(--transition);
}
.trade-percent button:hover { background: var(--gold-soft); color: var(--gold-dark); }
.trade-submit {
  padding: 12px; border-radius: 8px;
  font-weight: 700; font-size: 14px; color: #fff;
  transition: opacity var(--transition);
}
.trade-submit:hover { opacity: 0.9; }
.trade-submit--buy  { background: #0e7d4d; }
.trade-submit--sell { background: #b32a3c; }

/* Right rail: Orderbook + Trades */
.trade-rail { display: flex; flex-direction: column; gap: 12px; }
.book-panel, .trades-panel {
  flex: 1; padding: 12px 14px;
  display: flex; flex-direction: column;
  min-height: 280px;
}
.panel-title {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.book-list {
  flex: 1 1 0;
  min-height: 0;
  font-size: 11.5px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  /* Each list holds 20 levels: compact rows + scroll when overflow. */
  overflow-y: auto;
  scrollbar-width: thin;
}
.book-list::-webkit-scrollbar { width: 4px; }
.book-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.book-head, .book-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; padding: 1px 6px;
  align-items: center;
}
.book-head {
  color: var(--ink-3);
  padding: 4px 6px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
  font-size: 11px;
}
.book-row {
  position: relative;
  cursor: pointer;
  border-radius: 0;
  border-bottom: 1px solid rgba(127,127,127,0.06);
  transition: background 90ms ease;
}
.book-row:last-child { border-bottom: 0; }
.book-row:hover { background: var(--bg-soft); }
.book-row:hover .col-px { text-decoration: underline; text-underline-offset: 2px; }
.book-row.ask:hover { background: rgba(248,73,96,0.10); }
.book-row.bid:hover { background: rgba(2,192,118,0.10); }
.book-row:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.book-row--flash {
  animation: fa-book-row-flash 360ms ease-out 1;
}
@keyframes fa-book-row-flash {
  0%   { background: var(--gold-soft); }
  100% { background: transparent; }
}
.book-row .col-px { font-weight: 600; }
.book-row .col-sz, .book-row .col-tot { color: var(--ink-2); text-align: right; }
.book-row__bar {
  position: absolute; right: 0; top: 0; bottom: 0;
  z-index: 0; opacity: 0.18;
  border-radius: 4px;
  pointer-events: none;
}
.book-row > span { position: relative; z-index: 1; }
.book-row.ask .col-px { color: var(--down); }
.book-row.ask .book-row__bar { background: var(--down); }
.book-row.bid .col-px { color: var(--up); }
.book-row.bid .book-row__bar { background: var(--up); }
.book-row__own {
  position: absolute; left: 1px; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent, #F0B90B);
  box-shadow: 0 0 0 1px var(--surface);
  transform: translateY(-50%);
  pointer-events: none;
}
.book-row__sz { cursor: pointer; }
.book-row__sz:hover { text-decoration: underline; }
.book-skeleton {
  position: relative; padding: 8px 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.book-skeleton__row {
  height: 12px; border-radius: 3px;
  background: linear-gradient(90deg, var(--bg-soft) 0%, var(--line) 50%, var(--bg-soft) 100%);
  background-size: 200% 100%;
  animation: fa-book-skel 1.2s linear infinite;
}
.book-skeleton__msg {
  text-align: center; padding-top: 6px;
  font-size: 11px; color: var(--ink-3);
}
@keyframes fa-book-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.book-mid {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 6px; margin: 2px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: 'Manrope', sans-serif;
  background: var(--bg-soft);
}
.book-mid strong { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; }
.book-mid small { color: var(--ink-3); font-size: 11px; }

/* L2 orderbook: tabs, spread row, depth chart */
.book-tabs { display: inline-flex; gap: 2px; background: var(--bg-soft); padding: 3px; border-radius: 8px; }
.book-tab {
  border: 0; background: transparent;
  padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-3); cursor: pointer;
}
.book-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.book-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* In the L2 view both bid + ask lists share remaining height equally so
   the mid price sits centered and neither side overflows below the fold. */
#book-view-list { gap: 0; }
#book-view-list .book-list { flex: 1 1 0; }
.book-view--depth { position: relative; min-height: 240px; }
.depth-canvas { width: 100%; flex: 1; min-height: 220px; display: block; }
.depth-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-3);
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--line);
  align-items: center;
}
.depth-legend__sw {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 4px; vertical-align: -1px;
}
.depth-legend__sw--bid { background: rgba(2,192,118,0.45); border: 1px solid var(--up); }
.depth-legend__sw--ask { background: rgba(248,73,96,0.45); border: 1px solid var(--down); }

.book-spread {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 8px; align-items: baseline;
  padding: 6px 6px 0;
  margin-top: 4px;
  border-top: 1px dashed var(--line);
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.book-spread__label { font-weight: 600; }
.book-spread__val { color: var(--ink); font-weight: 600; text-align: center; }
.book-spread__pct { color: var(--ink-3); text-align: right; }

.trades-list { flex: 1; font-size: 12px; font-variant-numeric: tabular-nums; }
.trades-head, .trade-tick {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; padding: 3px 6px;
}
.trades-head { color: var(--ink-3); padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.trade-tick .col-px { font-weight: 600; }
.trade-tick.buy  .col-px { color: var(--up); }
.trade-tick.sell .col-px { color: var(--down); }
.trade-tick .col-sz { text-align: right; color: var(--ink-2); }
.trade-tick .col-time { color: var(--ink-3); text-align: right; }

/* "Data from OKX" footer under the orderbook / recent trades panels */
.data-source-footer {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-size: 11px; color: var(--ink-3);
  font-weight: 500; letter-spacing: 0.2px;
}
.data-source-footer__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 3px rgba(2,192,118,0.18);
  animation: data-source-pulse 1.6s ease-in-out infinite;
}
@keyframes data-source-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(2,192,118,0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(2,192,118,0.05); }
}

/* ============================================================
   Open Orders panel (below K-line on trade page)
   ============================================================ */
.orders-panel { border-top: 1px solid var(--line); background: var(--surface); }
.orders-tabs {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
}
.orders-tab {
  position: relative;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-3);
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 6px;
}
.orders-tab:hover { color: var(--ink); }
.orders-tab.active { color: var(--ink); background: var(--bg-soft); }
.orders-tab.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -9px;
  height: 2px; background: var(--gold);
}
.badge {
  display: inline-block; padding: 2px 8px;
  background: var(--gold-soft); color: var(--gold-dark);
  border-radius: 999px; font-size: 11px; font-weight: 600;
}
.badge--circle {
  background: var(--bg-soft); color: var(--ink-3);
  min-width: 18px; padding: 2px 6px; text-align: center;
}
.orders-body { padding: 0; min-height: 140px; }
.orders-body .orders-empty { padding: 28px 16px; }
.orders-empty { text-align: center; color: var(--ink-3); }
.orders-empty__icon { font-size: 28px; margin-bottom: 8px; opacity: 0.6; }
.orders-empty p { margin: 4px 0; font-size: 13px; }

/* Order rows: row-hover reveal action buttons (cancel / share / details).
   The row container is added by trade.html renderMyOrders() with the
   .my-order-row class. */
.my-order-row {
  transition: background 90ms ease;
}
.my-order-row:hover { background: var(--bg-soft); }
.my-order-row .row-actions {
  display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.my-order-row:hover .row-actions,
.my-order-row:focus-within .row-actions {
  opacity: 1; transform: translateX(0);
}
/* Touch / small screens — always show actions (no hover). */
@media (hover: none), (max-width: 640px) {
  .my-order-row .row-actions { opacity: 1; transform: none; }
}
.row-action-btn {
  padding: 3px 9px; font-size: 11px;
  border: 1px solid var(--line); background: transparent;
  border-radius: 6px; cursor: pointer; color: var(--ink-2);
  transition: background 90ms ease, border-color 90ms ease, color 90ms ease;
}
.row-action-btn:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--ink-3); }
.row-action-btn--danger { color: var(--down); border-color: rgba(248,73,96,0.45); }
.row-action-btn--danger:hover { background: rgba(248,73,96,0.10); border-color: var(--down); color: var(--down); }

/* ============================================================
   CEX / DEX mode pill + wallet chip + connect modal
   ============================================================ */
.mode-pill {
  display: inline-flex; align-items: stretch;
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 3px;
  margin-right: 6px;
}
.mode-pill button {
  padding: 5px 11px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border-radius: 999px;
  transition: all var(--transition);
}
.mode-pill button:hover { color: var(--ink); }
.mode-pill button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.mode-pill button[data-mode="dex"].active {
  background: linear-gradient(135deg, #F5B824, #FF8A00); color: var(--ink);
}

.wallet-area { display: inline-flex; }
.connect-wallet-btn { font-size: 13px; padding: 8px 14px; }

.wallet-chip {
  position: relative;
  display: inline-flex; align-items: stretch;
  background: var(--bg-soft);
  border-radius: 10px;
  overflow: visible;
  border: 1px solid var(--line);
  transition: border-color var(--transition);
}
.wallet-chip:hover { border-color: var(--gold); }
.wallet-chip__chain {
  display: inline-flex; align-items: center; padding: 4px 8px 4px 6px;
  border-right: 1px solid var(--line);
  cursor: pointer;
}
.wallet-chip__addr {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-family: 'Manrope', monospace;
  font-size: 13px; color: var(--ink);
  cursor: pointer;
}
.wallet-chip__addr .caret { opacity: .6; }

.wallet-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 60;
}
.wallet-menu[hidden] { display: none; }
.wallet-menu__head {
  padding: 8px 10px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.wallet-menu__head strong { display: block; font-size: 14px; }
.wallet-menu__head small { color: var(--ink-3); font-size: 12px; }
.wallet-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px; border-radius: 8px;
  font-size: 13px; color: var(--ink);
  background: transparent; border: 0; cursor: pointer;
  transition: background var(--transition);
}
.wallet-menu button .fa-ic { color: var(--ink-3); flex: 0 0 auto; }
.wallet-menu button:hover .fa-ic { color: var(--gold-dark); }
.wallet-menu button:hover { background: var(--bg-soft); }
.wallet-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.wallet-menu__danger { color: var(--down) !important; }

/* Logged-in account chip in header */
.account-chip { position: relative; display: inline-flex; }
.account-chip__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-soft); border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: border-color var(--transition);
}
.account-chip__btn:hover { border-color: var(--gold); }
.account-chip__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #F5B824, #FF8A00);
  color: #1E2329; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.account-chip__email {
  font-size: 13px; font-weight: 600; color: var(--ink);
  max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 60;
}
.account-menu[hidden] { display: none; }
.account-menu__head {
  padding: 8px 10px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.account-menu__head strong { display: block; font-size: 14px; }
.account-menu__head small { color: var(--ink-3); font-size: 12px; }
.account-menu a, .account-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; color: var(--ink);
  transition: background var(--transition);
  border: 0; background: transparent; cursor: pointer;
}
.account-menu a .fa-ic, .account-menu button .fa-ic { color: var(--ink-3); flex: 0 0 auto; }
.account-menu a:hover .fa-ic, .account-menu button:hover .fa-ic { color: var(--gold-dark); }
.account-menu a:hover, .account-menu button:hover { background: var(--bg-soft); }
.account-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.account-menu__danger { color: var(--down) !important; }

@media (max-width: 720px) {
  .account-chip__email { display: none; }
}

/* Built-in wallet auth modal */
.wa-panel { width: 460px; max-width: 92vw; }
.wa-body { padding: 14px 22px 22px; }
.wa-choice {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-soft); border: 1px solid transparent;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer; transition: all var(--transition);
  text-align: left;
}
.wa-choice:hover { border-color: var(--gold); background: var(--surface); }
.wa-choice__ic { font-size: 26px; }
.wa-choice strong { display: block; font-size: 15px; color: var(--ink); }
.wa-choice small  { display: block; color: var(--ink-3); font-size: 12px; }
.wa-choice .caret { margin-left: auto; opacity: 0.4; }

.mnemonic-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: var(--bg-soft); border: 2px dashed var(--line);
  padding: 14px; border-radius: 12px;
}
.mword {
  position: relative;
  padding: 10px 8px 10px 26px;
  background: var(--surface); border-radius: 8px;
  font-family: 'Manrope', monospace;
  font-size: 14px; color: var(--ink);
}
.mword-i {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--ink-3); font-weight: 700;
}

/* Connect wallet modal (deprecated, kept for fallback) */
.cw-panel { width: 480px; max-width: 92vw; }
.cw-body { padding: 14px 22px 22px; }
.cw-chains {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px;
}
.cw-chain {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px;
  background: var(--bg-soft); border: 2px solid transparent;
  border-radius: 12px;
  font-size: 11px; color: var(--ink-2); font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.cw-chain:hover { background: var(--surface); }
.cw-chain.active { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
.cw-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cw-wallet {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px; color: var(--ink); font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.cw-wallet:hover { border-color: var(--gold); background: var(--surface); }
.cw-wallet__icon { font-size: 22px; }
.cw-wallet__name { flex: 1; text-align: left; }
.cw-wallet__detected {
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: rgba(2,192,118,0.12); color: var(--up); font-weight: 700;
}
.cw-wallet.connecting { opacity: 0.6; pointer-events: none; }
.cw-foot { font-size: 12px; margin: 18px 0 0; line-height: 1.5; }

/* DEX mode global tweaks */
:root[data-mode="dex"] .topbar { background: linear-gradient(90deg, #1E2329 0%, #2B1A4D 100%); }
:root[data-mode="dex"] .pulse { background: #9945FF; box-shadow: 0 0 0 0 rgba(153,69,255,0.6); }
:root[data-mode="dex"] body::before {
  content: '🌐 DEX 模式 — 完全自托管,资产由你的钱包控制';
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, rgba(245,184,36,0.95), rgba(255,138,0,0.95));
  color: #1E2329;
  font-size: 11px; font-weight: 700; text-align: center;
  padding: 4px;
  z-index: 60;
  letter-spacing: 0.04em;
}
:root[data-mode="dex"] body { padding-top: 22px; }
:root[data-mode="dex"] .header { top: 22px; }

@media (max-width: 720px) {
  .mode-pill button { padding: 5px 9px; font-size: 10px; }
  .wallet-chip__addr { padding: 5px 8px; font-size: 12px; }
  .cw-chains { grid-template-columns: repeat(4, 1fr); }
  .cw-wallets { grid-template-columns: 1fr; }
}

/* ============================================================
   Hamburger button + mobile drawer
   ============================================================ */
.icon-btn--menu { display: none; }
@media (max-width: 1024px) {
  .icon-btn--menu { display: inline-flex; }
}
.drawer {
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
}
.drawer.open { pointer-events: auto; }
.drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0; transition: opacity var(--transition);
}
.drawer.open .drawer__backdrop { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 320px; max-width: 86vw;
  background: var(--surface);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition);
  box-shadow: -10px 0 30px rgba(0,0,0,0.2);
}
.drawer.open .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px;
  border-bottom: 1px solid var(--line);
}
.drawer__nav { display: flex; flex-direction: column; padding: 8px; flex: 1; overflow-y: auto; }
.drawer__nav a {
  padding: 10px 16px; border-radius: 10px;
  color: var(--ink); font-weight: 500;
  font-size: 14px;
  transition: background var(--transition);
}
.drawer__nav a:hover { background: var(--bg-soft); }
.drawer__group {
  display: block;
  padding: 14px 16px 6px;
  font-size: 11px; color: var(--ink-3);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.drawer__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 16px; border-top: 1px solid var(--line);
}
.btn--block { display: flex; width: 100%; }
.btn--ghost-bordered { border: 1px solid var(--line); }
.btn--ghost-bordered:hover { border-color: var(--gold); color: var(--gold-dark); }
.drawer__theme {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 13px;
}

/* ============================================================
   Auth pages (login.html, register.html)
   ============================================================ */
.auth-body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 600px 300px at 80% 0%, rgba(245,184,36,0.10), transparent 60%),
    radial-gradient(ellipse 500px 280px at 5% 100%, rgba(245,184,36,0.06), transparent 60%),
    var(--bg);
  display: flex; flex-direction: column;
}
.auth-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 36px;
}
.auth-header__right { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 14px; }
.auth-shell {
  flex: 1;
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px;
  padding: 32px 36px 60px;
  align-items: start;
}
.auth-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 36px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.auth-title { font-size: 28px; font-weight: 800; }
.auth-sub { color: var(--ink-3); margin: 6px 0 24px; font-size: 14px; }

.auth-tabs { display: flex; gap: 4px; background: var(--bg-soft); padding: 4px; border-radius: 10px; margin-bottom: 22px; width: fit-content; }
.auth-tab {
  padding: 8px 16px; font-size: 14px; font-weight: 600;
  color: var(--ink-3); border-radius: 8px; transition: all var(--transition);
}
.auth-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.field input {
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink); font-size: 14px;
  outline: 0;
  transition: border-color var(--transition);
}
.field input:focus { border-color: var(--gold); background: var(--surface); }
.field__inner { position: relative; display: flex; align-items: stretch; }
.field__inner input { flex: 1; padding-right: 90px; }
.field__eye, .field__send {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; color: var(--ink-3);
  padding: 4px 10px; font-size: 13px;
  border-radius: 6px;
}
.field__send { color: var(--gold-dark); font-weight: 600; }
.field__send:disabled { color: var(--ink-3); cursor: default; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.auth-row-between { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.checkbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink-2); }
.checkbox input { width: 14px; height: 14px; accent-color: var(--gold); }
.checkbox--block { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }

.slider-captcha {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  height: 40px;
  overflow: hidden;
  user-select: none;
}
.slider-captcha__bar {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 13px;
}
.slider-captcha__bar span {
  position: absolute; left: 4px; top: 4px; bottom: 4px;
  background: var(--gold); color: var(--ink);
  padding: 0 18px; border-radius: 8px; cursor: grab;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px;
  transition: background var(--transition);
}
.slider-captcha.verified { background: rgba(2,192,118,0.12); border-color: var(--up); }
.slider-captcha.verified .slider-captcha__bar span { background: var(--up); color: #fff; }

.auth-submit { padding: 14px; font-size: 15px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-3); font-size: 12px;
  margin: 4px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.auth-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 10px;
  background: var(--bg-soft); color: var(--ink); font-weight: 600; font-size: 13px;
  border: 1px solid transparent;
  transition: all var(--transition);
}
.social-btn:hover { border-color: var(--gold); background: var(--surface); }
.social-btn span {
  display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-dark);
  align-items: center; justify-content: center; font-weight: 800;
}
.auth-foot { color: var(--ink-3); font-size: 12px; margin: 18px 0 0; text-align: center; }

.auth-side { display: flex; flex-direction: column; gap: 18px; padding-top: 12px; }
.auth-gift {
  border-radius: 18px; padding: 28px;
  background:
    radial-gradient(ellipse at top right, rgba(245,184,36,0.25), transparent 60%),
    linear-gradient(135deg, #1E2329 0%, #2B3139 100%);
  color: #fff;
}
.auth-gift__tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(245,184,36,0.18); color: var(--gold); font-weight: 600; font-size: 12px; margin-bottom: 14px; }
.auth-gift h2 { font-size: 28px; line-height: 1.25; color: #fff; }
.auth-gift p { opacity: 0.8; margin: 14px 0 0; font-size: 14px; }
.auth-gift__list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.auth-gift__list li { font-size: 14px; opacity: .9; }
.auth-gift__list strong { color: var(--gold); }

.auth-bullets { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; }
.auth-bullets li { padding: 6px 0; color: var(--ink-2); font-size: 14px; }
.auth-trust { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.auth-trust__row { text-align: center; }
.auth-trust__row strong { display: block; font-family: 'Manrope', sans-serif; font-size: 18px; }
.auth-trust__row span { font-size: 11px; color: var(--ink-3); }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; gap: 28px; padding: 24px 18px 40px; }
  .auth-card { padding: 24px; }
  .auth-side { order: -1; padding-top: 0; }
}

/* ============================================================
   Account dashboard
   ============================================================ */
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--bg-soft);
  cursor: pointer;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #F5B824, #FF8A00);
  color: #1E2329; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-meta strong { font-size: 13px; font-weight: 600; }
.user-meta small { color: var(--ink-3); font-size: 11px; }

.account-shell { padding: 32px 24px 80px; }
.muted { color: var(--ink-3); font-size: 13px; }
.balance { font-family: 'Manrope', sans-serif; font-size: 36px; font-weight: 800; margin: 6px 0 4px; display: flex; align-items: center; gap: 10px; }
.balance-sub { color: var(--ink-3); font-size: 13px; }
.account-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#pl-chart { width: 100%; height: 120px; display: block; }

#donut { width: 160px; height: 160px; }
.donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  pointer-events: none;
}
.donut-center small { color: var(--ink-3); font-size: 11px; }
.donut-center strong { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 700; }
.donut-legend { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; font-size: 12px; }
.donut-legend li { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; }
.legend-sym { flex: 1; font-weight: 600; }
.legend-pct { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.activity-tab { padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink-3); border-radius: 8px; transition: all var(--transition); }
.activity-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.activity-list { display: flex; flex-direction: column; }
.activity-row {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr;
  gap: 12px;
  padding: 14px 0; border-bottom: 1px dashed var(--line);
  align-items: center;
}
.activity-row:last-child { border-bottom: 0; }
.activity-row strong { font-size: 13px; }
.activity-row small { font-size: 12px; color: var(--ink-2); display: block; }
.activity-row .muted { color: var(--ink-3); }
.activity-row .ar-mid { text-align: left; }
.activity-row .ar-time { text-align: right; }
.activity-row .ar-time .badge { background: rgba(2,192,118,0.12); color: var(--up); }
.empty { padding: 40px; text-align: center; color: var(--ink-3); font-size: 13px; }
.blurred { filter: blur(6px); transition: filter var(--transition); }

@media (max-width: 980px) {
  .user-chip .user-meta { display: none; }
}

/* ============================================================
   Launchpad
   ============================================================ */
.lp-hero {
  padding: 60px 0 40px;
  background:
    radial-gradient(ellipse 700px 300px at 80% 30%, rgba(245,184,36,0.18), transparent 60%),
    radial-gradient(ellipse 500px 220px at 5% 70%, rgba(255,138,0,0.08), transparent 60%),
    var(--bg);
}
.lp-hero__chip { display: inline-flex; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-dark); font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.lp-hero__title { font-size: clamp(36px, 4vw, 56px); font-weight: 800; }
.lp-hero__sub { color: var(--ink-2); font-size: 17px; max-width: 600px; margin: 18px 0 32px; }
.lp-hero__stats { display: grid; grid-template-columns: repeat(4, auto); gap: 36px; }
.lp-hero__stats strong { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; display: block; }
.lp-hero__stats span { color: var(--ink-3); font-size: 13px; }

.lp-section { padding: 56px 0; }
.lp-section__head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.lp-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-3); font-size: 12px; font-weight: 600; }
.lp-badge--live { background: rgba(2,192,118,0.12); color: var(--up); animation: livePulse 1.6s infinite; }
@keyframes livePulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.6; }
}

.lp-active {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
}
.lp-coin {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, #7B2BF9, #4D8AFF);
  color: #fff; font-size: 28px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.lp-coin--sm { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }
.lp-active h3 { font-size: 26px; }
.lp-active h3 small { color: var(--ink-3); font-size: 14px; font-weight: 500; margin-left: 8px; }

.lp-progress { padding: 4px 0; }
.lp-progress__head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-2); }
.lp-progress__head strong { font-size: 18px; color: var(--gold-dark); font-family: 'Manrope', sans-serif; }
.lp-progress__bar { background: var(--bg-soft); height: 10px; border-radius: 999px; margin: 10px 0; overflow: hidden; }
.lp-progress__bar span { display: block; height: 100%; background: linear-gradient(90deg, #F5B824, #FF8A00); border-radius: 999px; transition: width .6s ease; }
.lp-progress__foot { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12px; }

.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px;
  transition: all var(--transition);
}
.lp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(245,184,36,0.5); }
.lp-card__head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 16px; }
.lp-card__head strong { display: block; font-size: 16px; }
.lp-card__head small { display: block; color: var(--ink-3); font-size: 12px; }
.lp-card__meta { list-style: none; padding: 0; margin: 0 0 16px; }
.lp-card__meta li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.lp-card__meta li:last-child { border-bottom: 0; }
.lp-card__meta span { color: var(--ink-3); }
.lp-card__meta strong { font-weight: 600; }

.lp-how { background: var(--bg-soft); }
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-step {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px;
  position: relative;
}
.lp-step__n {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: var(--ink); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.lp-step h4 { font-size: 15px; margin-bottom: 6px; }
.lp-step p { color: var(--ink-3); font-size: 13px; margin: 0; }

@media (max-width: 980px) {
  .lp-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .lp-active { grid-template-columns: 1fr; }
  .lp-grid, .lp-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   Auth: stepper, OTP, password meter, verify banner, success
   ============================================================ */
.stepper {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--ink-3); font-weight: 500;
}
.step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
.step:not(:last-child)::after {
  content: ''; display: inline-block; width: 24px; height: 1px;
  background: var(--line); margin-left: 8px;
}
.step__n {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-soft); color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.step.active { color: var(--ink); }
.step.active .step__n { background: var(--gold); color: var(--ink); }
.step.done .step__n { background: var(--up); color: #fff; }
.step.done .step__n::before { content: '✓'; }
.step.done .step__n { font-size: 0; }
.step.done .step__n::before { font-size: 12px; }

.field__hint { color: var(--ink-3); font-size: 12px; line-height: 1.5; }

/* OTP 6 格输入:统一桌面/平板/手机/超小屏尺寸,grid + minmax(0,1fr) 防溢出 */
.otp-input {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.otp-input input {
  width: 100%;
  min-width: 0; /* 关键:允许在 grid 内收缩,避免 320px 屏幕溢出 */
  height: 56px;
  padding: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}
.otp-input input:focus {
  outline: 0;
  border: 2px solid var(--gold);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(245, 184, 36, 0.18);
}
@media (max-width: 767px) and (min-width: 481px) {
  .otp-input { gap: 8px; }
  .otp-input input { height: 52px; font-size: 24px; }
}
@media (max-width: 480px) and (min-width: 361px) {
  .otp-input { gap: 6px; }
  .otp-input input { height: 48px; font-size: 22px; }
}
@media (max-width: 360px) {
  .otp-input { gap: 4px; }
  .otp-input input { height: 44px; font-size: 20px; }
}

.verify-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--gold-soft); color: var(--ink-2);
  font-size: 13px;
}
.verify-banner strong { color: var(--ink); }
.verify-banner .link-more { margin-left: auto; cursor: pointer; }
.verify-banner .link-more.cooldown { color: var(--ink-3); cursor: default; }

.pw-meter { margin-top: 6px; }
.pw-meter__bar { height: 4px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.pw-meter__bar span { display: block; height: 100%; width: 0; transition: all var(--transition); }
.pw-rules { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; color: var(--ink-3); }
.pw-rules li::before { content: '○ '; color: var(--ink-3); }
.pw-rules li.ok { color: var(--up); }
.pw-rules li.ok::before { content: '✓ '; color: var(--up); }

.success-card { text-align: center; padding: 20px 8px 8px; }
.success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(2,192,118,0.12); color: var(--up);
  font-size: 32px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.success-card h2 { font-size: 22px; margin-bottom: 8px; }
.success-card p { margin: 4px 0; color: var(--ink-2); }
.success-card .muted { font-size: 13px; }
.success-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }

.auth-shell--narrow { grid-template-columns: 1fr; max-width: 720px; }

/* ============================================================
   Wallet (deposit / withdraw) shared
   ============================================================ */
.wallet-shell { padding: 32px 24px 80px; }
.wallet-subnav {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg-soft); border-radius: 10px;
  margin-bottom: 24px; width: fit-content;
}
.wallet-subnav a {
  padding: 8px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-3);
  transition: all var(--transition);
}
.wallet-subnav a:hover { color: var(--ink); }
.wallet-subnav a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.wallet-title { font-size: 24px; font-weight: 800; margin-bottom: 20px; }
.wallet-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }

.coin-select {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: var(--bg-soft); border: 1px solid var(--line);
  transition: border-color var(--transition); cursor: pointer; color: var(--ink);
}
.coin-select:hover { border-color: var(--gold); }
.coin-select .cs-info { display: flex; flex-direction: column; line-height: 1.2; flex: 1; align-items: flex-start; }
.coin-select strong { font-size: 16px; font-weight: 700; }
.coin-select small { font-size: 12px; color: var(--ink-3); }

.network-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.net-tab {
  padding: 8px 14px; border-radius: 10px;
  background: var(--bg-soft); color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
  transition: all var(--transition);
}
.net-tab:hover { color: var(--ink); }
.net-tab.active { background: var(--gold-soft); color: var(--gold-dark); border-color: var(--gold); }

.deposit-address {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-soft); border: 1px dashed var(--line);
  font-family: 'Manrope', 'Inter', monospace;
  word-break: break-all;
  font-size: 13px;
}
.deposit-address span { flex: 1; }
.deposit-warn {
  margin-top: 18px; padding: 14px 16px;
  border-radius: 10px;
  background: rgba(248,73,96,0.06);
  border: 1px solid rgba(248,73,96,0.2);
}
.deposit-warn strong { color: var(--down); font-size: 13px; }
.deposit-warn ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.deposit-warn li { padding: 3px 0; }

.qr-card { background: var(--bg-soft); border-radius: 14px; padding: 18px; text-align: center; margin-bottom: 18px; }
.qr-card__qr {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--surface); padding: 16px; border-radius: 12px;
  position: relative;
  margin-bottom: 12px;
}
.qr-svg-wrap { display: block; }
.qr-coin-tag {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--line);
}
.qr-coin-tag .coin { width: 18px; height: 18px; font-size: 10px; }
.qr-coin-tag strong { font-size: 13px; }

.bal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.bal-card h4 { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.bal-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.bal-row strong { font-family: 'Manrope', sans-serif; font-weight: 700; }
.bal-row span { color: var(--ink-3); }

.amount-input {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px;
}
.amount-input input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.amount-input span { color: var(--ink-3); font-weight: 600; font-size: 13px; }
.amount-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.amount-meta strong { color: var(--ink-2); }

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { padding: 6px 0; font-size: 13px; color: var(--ink-2); border-bottom: 1px dashed var(--line); }
.info-list li:last-child { border-bottom: 0; }
.info-list strong { color: var(--ink); }
.info-warn { margin-top: 14px; padding: 12px 14px; background: rgba(245,184,36,0.08); border: 1px solid rgba(245,184,36,0.3); border-radius: 10px; }
.info-warn strong { display: block; margin-bottom: 4px; color: var(--gold-dark); font-size: 13px; }
.info-warn p { margin: 0; font-size: 12px; color: var(--ink-2); }

/* Coin select modal */
.modal { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.modal.open { pointer-events: auto; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity var(--transition); }
.modal.open .modal__backdrop { opacity: 1; }
.modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96);
  width: 420px; max-width: 92vw; max-height: 80vh;
  background: var(--surface); border-radius: 16px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  opacity: 0; transition: all var(--transition);
}
.modal.open .modal__panel { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.coin-list { overflow-y: auto; flex: 1; padding-bottom: 12px; }
.coin-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; cursor: pointer;
  transition: background var(--transition);
}
.coin-list-item:hover { background: var(--bg-soft); }
.coin-list-item strong { display: block; }
.coin-list-item small { color: var(--ink-3); font-size: 12px; }

@media (max-width: 980px) {
  .wallet-grid { grid-template-columns: 1fr; }
}

/* Toast — stacked container (FA.toast) */
.fa-toast-host {
  position: fixed;
  top: calc(var(--safe-top, 0px) + 16px);
  right: 16px;
  z-index: 9500;
  display: flex;
  flex-direction: column-reverse; /* newest on bottom, stack rises upward */
  gap: 10px;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 32px));
}
@media (max-width: 720px) {
  .fa-toast-host {
    top: auto;
    bottom: calc(var(--safe-bottom, 0px) + 18px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-direction: column-reverse;
    max-width: calc(100vw - 24px);
    width: 100%;
    align-items: center;
  }
}
.fa-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--ink, #111);
  border: 1px solid var(--line, #e6e6e6);
  border-left: 4px solid var(--ink-2, #666);
  box-shadow: 0 10px 30px rgba(15, 17, 26, 0.18), 0 2px 6px rgba(15, 17, 26, 0.08);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-10px);
  /* slide-out animation kept under 200ms to feel snappy on rapid stacks */
  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  word-break: break-word;
}
@media (max-width: 720px) {
  .fa-toast { transform: translateY(12px); }
}
.fa-toast--show { opacity: 1; transform: translateY(0); }
.fa-toast--leave { opacity: 0; transform: translateY(-8px); }
.fa-toast__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  color: #fff;
  background: var(--ink-2, #666);
  flex-shrink: 0;
}
.fa-toast__msg { color: var(--ink, #111); }
.fa-toast__action {
  border: 0; background: transparent;
  color: var(--gold, #d4a93a); font-weight: 700;
  font-size: 13px; padding: 4px 8px;
  cursor: pointer; border-radius: 6px;
  white-space: nowrap;
}
.fa-toast__action:hover { background: rgba(212, 169, 58, 0.12); }
.fa-toast__close {
  border: 0; background: transparent;
  color: var(--ink-3, #999);
  font-size: 18px; line-height: 1;
  width: 24px; height: 24px;
  cursor: pointer; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fa-toast__close:hover { background: var(--bg-soft-2, #f0f0f0); color: var(--ink, #111); }

.fa-toast--success { border-left-color: #02C076; }
.fa-toast--success .fa-toast__icon { background: linear-gradient(135deg, #02C076, #00A267); }
.fa-toast--error   { border-left-color: #F84960; }
.fa-toast--error   .fa-toast__icon { background: linear-gradient(135deg, #F84960, #D63648); }
.fa-toast--warn    { border-left-color: #F0B90B; }
.fa-toast--warn    .fa-toast__icon { background: linear-gradient(135deg, #F0B90B, #C99700); color: #1a1a1a; }
.fa-toast--info    { border-left-color: #4B7BEC; }
.fa-toast--info    .fa-toast__icon { background: linear-gradient(135deg, #4B7BEC, #2D5FCB); }

/* Nav notification badge (paints next to "通知" link) */
.fa-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #F84960; color: #fff;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0;
  vertical-align: middle;
  box-shadow: 0 0 0 2px var(--bg, #fff);
}

/* ============================================================
   Mobile bottom tab-bar — injected by market.js. Visible only at
   < 768px. Touch targets are 56px tall (>= 44px iOS HIG). Active
   tab gets gold accent on the icon + label.
   ============================================================ */
.fa-mobile-tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 180;
  background: var(--surface, #fff);
  border-top: 1px solid var(--line, #e6e6e6);
  box-shadow: 0 -6px 20px rgba(13, 16, 28, 0.06);
  padding-bottom: calc(var(--safe-bottom, 0px) + 4px);
}
.fa-mobile-tabbar__item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  /* 整体内容上移 — 上方 padding 小,下方 padding 大,
     视觉上 icon 紧贴顶部、底部留更多空白 */
  justify-content: flex-start;
  gap: 4px;
  min-height: 60px;
  padding: 4px 4px 12px;
  color: var(--ink-3, #94929E);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition, 0.15s ease);
}
/* 去掉点击 / hover 的灰底阴影框 — 用户要求 */
.fa-mobile-tabbar__item:hover,
.fa-mobile-tabbar__item:focus,
.fa-mobile-tabbar__item:focus-visible,
.fa-mobile-tabbar__item:active {
  color: var(--ink, #111);
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.fa-mobile-tabbar__item.is-active {
  color: var(--gold, #F5B824);
  font-weight: 700;
}
.fa-mobile-tabbar__icon {
  font-size: 28px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px;
}
.fa-mobile-tabbar__icon .fa-ic { width: 28px; height: 28px; }

/* === 底部 tab 进入 active 时的微动画 ===
   首页:无特效
   行情(K 线):整体上下脉冲
   广场(地球):360 度旋转一圈
   资产(手提包):上方 "$" 从上往下钻进图标
   动画只在 is-active 切到当前 tab 时触发一次。 */
@keyframes fa-tabbar-bars-pulse {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-3px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(2px); }
}
@keyframes fa-tabbar-globe-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fa-tabbar-dollar-drop {
  0%   { opacity: 0; transform: translate(-50%, -22px) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, 4px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, 12px) scale(0.6); }
}
.fa-mobile-tabbar__item[href="markets.html"].is-active .fa-mobile-tabbar__icon svg {
  animation: fa-tabbar-bars-pulse 0.7s ease-out;
}
.fa-mobile-tabbar__item[href="square.html"].is-active .fa-mobile-tabbar__icon svg {
  transform-origin: center center;
  animation: fa-tabbar-globe-spin 0.8s ease-out;
}
.fa-mobile-tabbar__item[href="account.html"] {
  position: relative;
  overflow: visible;
}
.fa-mobile-tabbar__item[href="account.html"].is-active::before {
  content: "$";
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -22px);
  font-size: 16px;
  font-weight: 900;
  color: var(--gold, #F5B824);
  pointer-events: none;
  animation: fa-tabbar-dollar-drop 0.9s ease-in forwards;
}
/* Inline lucide-style SVG icon — used by header dropdowns, mobile tabbar
   and reusable across pages via FA.svgIcon(). */
.fa-ic {
  display: inline-block;
  width: 16px; height: 16px;
  flex: 0 0 auto;
  vertical-align: -2px;
}
.fa-mobile-tabbar__label { line-height: 1.1; }
.fa-mobile-tabbar .fa-nav-badge {
  position: absolute;
  top: 4px;
  right: 22%;
  margin: 0;
  box-shadow: 0 0 0 2px var(--surface, #fff);
}
@media (max-width: 767px) {
  .fa-mobile-tabbar { display: flex; }
  body.fa-has-mobile-tabbar {
    padding-bottom: calc(56px + var(--safe-bottom, 0px) + 8px);
  }
  /* When a page already has its own fixed bottom action bar
     (trade-submit-bar / bottom-toolbar) push it above our tabbar
     so they never overlap. */
  body.fa-has-mobile-tabbar .trade-submit-bar,
  body.fa-has-mobile-tabbar .bottom-toolbar {
    bottom: calc(56px + var(--safe-bottom, 0px) + 4px);
  }
}
/* Hide on print and inside admin / auth shells (defensive) */
@media print {
  .fa-mobile-tabbar { display: none !important; }
}
body[data-adm-page] .fa-mobile-tabbar,
body.auth-body .fa-mobile-tabbar { display: none !important; }
body[data-adm-page].fa-has-mobile-tabbar,
body.auth-body.fa-has-mobile-tabbar { padding-bottom: 0; }

/* FA Modal — accessible alert/confirm/prompt replacement */
.fa-modal-overlay {
  position: fixed; inset: 0;
  z-index: 9700;
  background: rgba(13, 16, 28, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.fa-modal-overlay--open { opacity: 1; pointer-events: auto; }
.fa-modal {
  width: min(440px, 100%);
  background: var(--surface, #fff);
  color: var(--ink, #111);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line, #e6e6e6);
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fa-modal-overlay--open .fa-modal { transform: translateY(0) scale(1); }
.fa-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  gap: 10px;
}
.fa-modal__head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink, #111); }
.fa-modal__x {
  border: 0; background: transparent;
  color: var(--ink-3, #999);
  font-size: 22px; line-height: 1;
  width: 30px; height: 30px;
  cursor: pointer; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fa-modal__x:hover { background: var(--bg-soft-2, #f0f0f0); color: var(--ink, #111); }
.fa-modal__body {
  padding: 4px 20px 18px;
  font-size: 14px;
  color: var(--ink-2, #444);
  line-height: 1.6;
}
.fa-modal__input {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line, #ddd);
  border-radius: 10px;
  font-size: 14px;
  background: var(--bg, #fff);
  color: var(--ink, #111);
  box-sizing: border-box;
}
.fa-modal__input:focus { outline: 2px solid var(--gold, #d4a93a); outline-offset: 1px; border-color: transparent; }
.fa-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px 18px;
  background: var(--bg-soft, transparent);
  border-top: 1px solid var(--line, transparent);
}
.fa-modal__btn { min-width: 88px; }
.fa-modal__btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.fa-modal__btn--danger { background: #F84960 !important; border-color: #F84960 !important; color: #fff !important; }
.fa-modal__btn--danger:hover:not([disabled]) { background: #D63648 !important; border-color: #D63648 !important; }
.fa-modal__btn--warning { background: #E6A23C !important; border-color: #E6A23C !important; color: #fff !important; }
.fa-modal__btn--warning:hover:not([disabled]) { background: #C88A2E !important; border-color: #C88A2E !important; }
.fa-modal__btn--confirm { background: var(--gold, #d4a93a) !important; border-color: var(--gold, #d4a93a) !important; color: #1a1a1a !important; }
.fa-modal--danger .fa-modal__head h3 { color: #D63648; }
.fa-modal--warning .fa-modal__head h3 { color: #C88A2E; }
.fa-modal__spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -2px;
  animation: fa-modal-spin 0.7s linear infinite;
  margin-right: 6px;
}
@keyframes fa-modal-spin { to { transform: rotate(360deg); } }

/* Structured details block (FA.modal.confirmAction) */
.fa-modal__details {
  background: var(--bg-soft, #f7f7f7);
  border: 1px solid var(--line, #e6e6e6);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0 4px;
  display: flex; flex-direction: column; gap: 8px;
}
.fa-modal__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.fa-modal__row-label { color: var(--ink-3, #888); flex-shrink: 0; }
.fa-modal__row-val { color: var(--ink, #111); font-weight: 600; text-align: right; word-break: break-all; }
.fa-modal__row-val--mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; }
.fa-modal__row-val--hi { color: var(--gold, #d4a93a); background: rgba(212, 169, 58, 0.12); padding: 2px 6px; border-radius: 4px; }
.fa-modal__row-val--big { font-size: 20px; font-weight: 700; letter-spacing: 0.2px; }

.fa-modal__msg { margin: 12px 0 0; }
.fa-modal__banner {
  border-radius: 8px; padding: 10px 12px;
  font-size: 13px; line-height: 1.5;
  margin-bottom: 12px;
}
.fa-modal__banner--warn {
  background: rgba(248, 73, 96, 0.10);
  border: 1px solid rgba(248, 73, 96, 0.32);
  color: #C0354A;
}
.fa-modal__challenge { margin-top: 14px; }
.fa-modal__challenge label { display: block; font-size: 13px; color: var(--ink-2, #444); margin-bottom: 6px; }
.fa-modal__challenge code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--bg-soft-2, #f0f0f0); border-radius: 4px;
  padding: 1px 6px; font-size: 12px; color: #D63648;
}
.fa-modal__challenge-input {
  display: block; width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line, #ddd);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg, #fff); color: var(--ink, #111);
  box-sizing: border-box;
}
.fa-modal__challenge-input:focus { outline: 2px solid #F84960; outline-offset: 1px; border-color: transparent; }
.fa-modal__err {
  margin-top: 12px;
  background: rgba(248, 73, 96, 0.10);
  border: 1px solid rgba(248, 73, 96, 0.32);
  color: #C0354A;
  border-radius: 8px; padding: 9px 12px;
  font-size: 13px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .fa-toast { background: var(--surface); color: var(--ink); border-color: var(--line); }
  :root:not([data-theme]) .fa-toast__msg { color: var(--ink); }
}
[data-theme="dark"] .fa-toast { background: var(--surface); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .fa-toast__msg { color: var(--ink); }
[data-theme="dark"] .fa-modal { background: var(--surface); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .fa-modal__body { color: var(--ink-2); }
[data-theme="dark"] .fa-modal__input { background: var(--bg); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .fa-modal__foot { background: transparent; border-top-color: var(--line); }
[data-theme="dark"] .fa-modal__details { background: var(--bg); border-color: var(--line); }
[data-theme="dark"] .fa-modal__row-label { color: var(--ink-3); }
[data-theme="dark"] .fa-modal__row-val { color: var(--ink); }
[data-theme="dark"] .fa-modal__challenge label { color: var(--ink-2); }
[data-theme="dark"] .fa-modal__challenge code { background: var(--line); color: var(--down); }
[data-theme="dark"] .fa-modal__challenge-input { background: var(--bg); color: var(--ink); border-color: var(--line); }

/* Legacy single-toast class (older inline toast()s) — re-route the visual
   to match FA.toast styling so pages we haven't migrated still look right. */
.toast {
  /* hidden by default until JS shows it via inline style or .show */
  position: fixed;
  top: calc(var(--safe-top, 0px) + 16px);
  right: 16px;
  z-index: 9400;
  padding: 11px 14px;
  background: var(--surface, #fff);
  color: var(--ink, #111);
  border: 1px solid var(--line, #e6e6e6);
  border-left: 4px solid var(--ink-2, #666);
  border-radius: 10px;
  font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(15, 17, 26, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.2s ease;
}
.toast.show, .toast[style*="display: block"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 720px) {
  .toast { top: auto; bottom: calc(var(--safe-bottom, 0px) + 18px); left: 50%; right: auto; transform: translate(-50%, 8px); }
  .toast.show, .toast[style*="display: block"] { transform: translate(-50%, 0); }
}

/* ============================================================
   Announcements
   ============================================================ */
.ann-shell { padding: 36px 24px 60px; }
.ann-hero { margin-bottom: 28px; }
.ann-hero h1 { font-size: 30px; font-weight: 800; }

.ann-tag {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  background: var(--bg-soft); color: var(--ink-2);
  align-self: flex-start;
}
.tag--listing,   .tag--event   { background: rgba(245,184,36,0.15); color: var(--gold-dark); }
.tag--maint                    { background: rgba(112,122,138,0.15); color: var(--ink-2); }
.tag--security                 { background: rgba(248,73,96,0.12); color: var(--down); }
.tag--policy                   { background: rgba(2,192,118,0.12); color: var(--up); }

.ann-list { display: flex; flex-direction: column; gap: 14px; }
.ann-row {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 16px;
  align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px;
  transition: all var(--transition);
}
.ann-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(245,184,36,0.4); }
.ann-row h3 { font-size: 15px; line-height: 1.4; }
.ann-row p { color: var(--ink-3); font-size: 13px; margin: 6px 0 0; }
.ann-row__date { color: var(--ink-3); font-size: 12px; white-space: nowrap; }

@media (max-width: 860px) {
  .ann-row { grid-template-columns: 80px 1fr; }
  .ann-row__date { grid-column: 2; }
}

/* ============================================================
   Help center
   ============================================================ */
.help-hero {
  padding: 50px 0 40px;
  background:
    radial-gradient(ellipse 600px 280px at 80% 30%, rgba(245,184,36,0.15), transparent 60%),
    var(--bg);
  text-align: center;
}
.help-hero h1 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; }
.help-search { margin: 18px auto 0; }
.help-hotkeys { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; font-size: 13px; color: var(--ink-3); justify-content: center; }
.help-tag { padding: 6px 12px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); font-size: 13px; transition: all var(--transition); }
.help-tag:hover { background: var(--gold-soft); color: var(--gold-dark); }

.help-shell { padding: 40px 24px 60px; }
.help-cats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-bottom: 40px;
}
.help-cat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px;
  transition: all var(--transition);
}
.help-cat:hover { transform: translateY(-3px); border-color: rgba(245,184,36,0.4); box-shadow: var(--shadow-sm); }
.help-cat__icon { font-size: 28px; margin-bottom: 8px; }
.help-cat h3 { font-size: 17px; margin-bottom: 12px; }
.help-cat ul { list-style: none; padding: 0; margin: 0; }
.help-cat li { padding: 6px 0; font-size: 13px; }
.help-cat li a { color: var(--ink-2); transition: color var(--transition); }
.help-cat li a:hover { color: var(--gold-dark); }

.help-bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-bottom: 50px; }
.popular-list { list-style: none; padding: 0; margin: 0; counter-reset: r; }
.popular-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.popular-list li:last-child { border-bottom: 0; }
.popular-list li > span {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.popular-list a { color: var(--ink); transition: color var(--transition); }
.popular-list a:hover { color: var(--gold-dark); }
.popular-list time { color: var(--ink-3); font-size: 12px; }

.help-contact { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.help-contact__row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 12px;
  background: var(--bg-soft);
  transition: all var(--transition);
}
.help-contact__row:hover { background: var(--gold-soft); }
.help-contact__row span {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.help-contact__row strong { display: block; font-size: 14px; }
.help-contact__row small { color: var(--ink-3); font-size: 12px; }

.help-faq { padding: 30px 0 50px; }

@media (max-width: 860px) {
  .help-cats { grid-template-columns: 1fr; }
  .help-bottom { grid-template-columns: 1fr; }
}

/* ============================================================
   404 page
   ============================================================ */
.nf-body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 700px 350px at 50% 0%, rgba(245,184,36,0.10), transparent 60%),
    var(--bg);
  display: flex; flex-direction: column;
  overflow-x: hidden;
}
.nf-main {
  flex: 1; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px 80px;
}
.nf-coins { position: absolute; inset: 0; pointer-events: none; }
.nf-coins .coin {
  position: absolute;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
  animation: float 5s ease-in-out infinite;
  opacity: 0.85;
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}
.nf-coins .coin--lg { width: 50px; height: 50px; font-size: 24px; }
.nf-coins .coin--xl { width: 64px; height: 64px; font-size: 30px; }
@keyframes float {
  0%,100% { transform: translateY(0)    rotate(-4deg); }
  50%     { transform: translateY(-18px) rotate(4deg); }
}
.nf-hero { position: relative; text-align: center; max-width: 640px; }
.nf-num {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(80px, 14vw, 160px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
  display: inline-flex; gap: 6px;
}
.nf-num span { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-3) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* .nf-zero raised to (0,2,0) specificity so the gold gradient wins over .nf-num span without !important */
.nf-num .nf-zero {
  background: linear-gradient(135deg, #F5B824 0%, #FF8A00 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: spin 6s linear infinite;
  display: inline-block;
}
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.nf-hero h1 { font-size: 28px; font-weight: 800; margin: 20px 0 8px; }
.nf-search { display: flex; max-width: 420px; margin: 24px auto 18px; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); padding: 8px 14px; border-radius: 12px; }
.nf-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.nf-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nf-popular { margin-top: 26px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: 13px; align-items: center; }

/* ============================================================
   Download
   ============================================================ */
.dl-hero {
  padding: 60px 0 80px;
  background: var(--hero-bg);
}
.dl-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.dl-hero h1 { font-size: clamp(36px, 4vw, 56px); font-weight: 800; line-height: 1.1; margin-top: 16px; }
.dl-qr-row { display: flex; gap: 18px; margin: 8px 0 28px; }
.dl-qr-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 168px;
}
.dl-qr-card strong { font-size: 14px; }
.dl-qr-card small { color: var(--ink-3); font-size: 11px; }
.dl-platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 560px; }

.phone--lg { width: 290px; height: 560px; }
.dl-phone-screen { gap: 10px; }
.dl-phone-head { display: flex; justify-content: space-between; align-items: center; }
.dl-phone-head strong { font-size: 18px; font-family: 'Manrope', sans-serif; }
.dl-tile { padding: 16px 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; }
.dl-tile--gold { background: linear-gradient(135deg, #FFF6DD, #FFE9B0); }
.dl-tile strong { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; color: var(--ink); }
.dl-tile small { color: var(--ink-3); font-size: 12px; }
:root[data-theme="dark"] .dl-tile--gold { background: linear-gradient(135deg, rgba(245,184,36,0.18), rgba(255,138,0,0.12)); }
:root[data-theme="dark"] .dl-tile strong { color: var(--ink); }
:root[data-theme="dark"] .dl-tile small  { color: var(--ink-3); }

.dl-req { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.dl-req > div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--bg-soft); }
.dl-req strong { font-size: 14px; }
.dl-req small  { color: var(--ink-3); font-size: 12px; }

@media (max-width: 980px) {
  .dl-hero__grid { grid-template-columns: 1fr; }
  .dl-platforms { grid-template-columns: repeat(2, 1fr); }
  .dl-req { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Transfer
   ============================================================ */
.transfer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.swap-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-dark);
  font-size: 18px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--transition);
  margin-bottom: 2px;
}
.swap-arrow:hover { transform: rotate(180deg); background: var(--gold); color: var(--ink); }

@media (max-width: 720px) {
  .transfer-grid { grid-template-columns: 1fr; }
  .swap-arrow { justify-self: center; transform: rotate(90deg); }
  .swap-arrow:hover { transform: rotate(270deg); }
}

/* ============================================================
   API key management
   ============================================================ */
.api-shell { padding: 32px 24px 80px; }
.api-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
.api-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.api-stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px;
}
.api-stat small { display: block; color: var(--ink-3); font-size: 12px; margin-bottom: 4px; }
.api-stat strong { font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; }

.api-table .mono { font-family: 'Manrope', monospace; font-size: 12px; color: var(--ink-2); }
.api-table .ann-tag { padding: 2px 8px; font-size: 11px; }

.perms { display: flex; flex-direction: column; gap: 6px; }
.perm {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-soft); border: 1px solid transparent;
  cursor: pointer; transition: all var(--transition);
}
.perm:hover { border-color: var(--line); }
.perm input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--gold); }
.perm strong { display: block; font-size: 14px; font-weight: 600; }
.perm small { color: var(--ink-3); font-size: 12px; display: block; margin-top: 2px; }
.perm em { font-style: normal; font-size: 11px; }
.perm input:checked ~ span strong { color: var(--gold-dark); }

@media (max-width: 980px) {
  .api-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Futures-specific (kept: .fut-mode/.lev-val/.lev-presets used in JS)
   ============================================================ */
.fut-mode { display: inline-flex; background: var(--bg-soft); border-radius: 8px; padding: 3px; }
.fut-mode button {
  padding: 6px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  transition: all var(--transition);
}
.fut-mode button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.lev-val { background: var(--gold-soft); padding: 4px 12px; border-radius: 8px; color: var(--gold-dark); font-family: 'Manrope', sans-serif; font-weight: 800; }
.lev-val small { font-size: 10px; margin-left: 1px; }
.lev-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.lev-presets button {
  padding: 4px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  background: var(--bg-soft);
  transition: all var(--transition);
}
.lev-presets button:hover { color: var(--ink); }
.lev-presets button.active { background: var(--gold); color: var(--ink); }

/* ============================================================
   Shared form helpers
   ============================================================ */
.select-input {
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink); font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  outline: 0;
}
.select-input:focus { border-color: var(--gold); }

/* ============================================================
   KYC
   ============================================================ */
.kyc-shell { padding: 32px 24px 80px; }
.kyc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.kyc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.kyc-stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px;
}
.kyc-stat small { display: block; color: var(--ink-3); font-size: 12px; }
.kyc-stat strong { display: block; font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; margin: 4px 0 2px; }
.kyc-stat span { color: var(--ink-3); font-size: 12px; }

.kyc-level {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: all var(--transition);
}
.kyc-level:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kyc-level--current { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.kyc-level__head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.kyc-num {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--gold-soft); color: var(--gold-dark);
  font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.kyc-level__head h3 { font-size: 18px; }
.kyc-level__head small { color: var(--ink-3); font-size: 12px; }
.kyc-perms { list-style: none; padding: 0; margin: 0; }
.kyc-perms li { padding: 6px 0; font-size: 13px; color: var(--ink-2); border-bottom: 1px dashed var(--line); }
.kyc-perms li:last-child { border-bottom: 0; }

@media (max-width: 980px) {
  .kyc-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Referral
   ============================================================ */
.ref-hero { padding: 60px 0 30px; background: var(--hero-bg); }
.ref-hero__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }
.ref-hero h1 { font-size: clamp(36px, 4vw, 56px); font-weight: 800; line-height: 1.1; }

.ref-code-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-soft); border-radius: 10px;
  padding: 10px 14px;
  margin: 6px 0 14px;
}
.ref-code {
  flex: 1; font-family: 'Manrope', sans-serif;
  font-size: 24px; font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold-dark);
}
.ref-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ref-stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px;
}
.ref-stat small { display: block; color: var(--ink-3); font-size: 12px; }
.ref-stat strong { display: block; font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800; margin: 6px 0 4px; }
.ref-stat strong em { font-style: normal; font-size: 14px; color: var(--ink-3); font-weight: 600; }
.ref-stat span { font-size: 12px; }

.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tier-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px;
  position: relative; display: flex; flex-direction: column; gap: 8px;
  transition: all var(--transition);
}
.tier-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tier-card strong { font-family: 'Manrope', sans-serif; font-size: 36px; font-weight: 800; line-height: 1; color: var(--gold-dark); }
.tier-card > small { color: var(--ink-3); font-size: 12px; margin-top: -4px; }
.tier-card ul { list-style: none; padding: 12px 0; margin: 0; border-top: 1px dashed var(--line); }
.tier-card li { padding: 4px 0; font-size: 13px; color: var(--ink-2); }

@media (max-width: 980px) {
  .ref-hero__grid { grid-template-columns: 1fr; }
  .ref-stats, .tier-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Proof of Reserves
   ============================================================ */
.por-hero {
  padding: 60px 0;
  background:
    radial-gradient(ellipse 600px 280px at 80% 30%, rgba(2,192,118,0.10), transparent 60%),
    radial-gradient(ellipse 500px 240px at 10% 80%, rgba(245,184,36,0.08), transparent 60%),
    var(--bg);
}
.por-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 30px;
}
.por-stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px;
}
.por-stat small { display: block; color: var(--ink-3); font-size: 12px; }
.por-stat strong { display: block; font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; margin: 6px 0 4px; }
.por-stat span { font-size: 12px; }
.por-stat--gold { background: linear-gradient(135deg, rgba(245,184,36,0.18), rgba(255,138,0,0.06)); border-color: rgba(245,184,36,0.5); }
.por-stat--gold strong { color: var(--gold-dark); }

.por-verify {
  display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px;
  margin-bottom: 14px;
}
.por-verify input {
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--ink); outline: 0; font-size: 14px;
}
.por-verify input:focus { border-color: var(--gold); }
.por-result {
  margin-top: 12px; padding: 16px;
  background: rgba(2,192,118,0.06); border: 1px solid rgba(2,192,118,0.3); border-radius: 12px;
  font-size: 13px;
}
.por-row { display: flex; gap: 8px; margin-top: 6px; align-items: baseline; }
.por-row small { color: var(--ink-3); white-space: nowrap; }
.por-row code { font-family: 'Manrope', monospace; font-size: 12px; color: var(--ink-2); word-break: break-all; }
.por-merkle {
  margin-top: 14px; padding: 12px 14px;
  background: var(--bg-soft); border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
}
.por-merkle small { color: var(--ink-3); }
.por-merkle code { flex: 1; font-family: 'Manrope', monospace; font-size: 13px; color: var(--ink-2); word-break: break-all; }

@media (max-width: 980px) {
  .por-summary { grid-template-columns: repeat(2, 1fr); }
  .por-verify { grid-template-columns: 1fr; }
}

/* ============================================================
   C2C
   ============================================================ */
.c2c-shell { padding: 32px 24px 80px; }
.c2c-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.c2c-toolbar { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg-soft); border-radius: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.c2c-coin-tabs { display: flex; gap: 4px; }
.c2c-coin-tabs button {
  padding: 6px 14px; border-radius: 8px;
  background: transparent; color: var(--ink-3);
  font-size: 13px; font-weight: 700;
  transition: all var(--transition);
}
.c2c-coin-tabs button:hover { color: var(--ink); }
.c2c-coin-tabs button.active { background: var(--gold-soft); color: var(--gold-dark); }
.c2c-filters { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.c2c-filters .search { min-width: 160px; }
.c2c-filters .search input { width: 140px; }

.c2c-table {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden;
}
.c2c-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1.4fr 1.2fr auto;
  gap: 16px; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.c2c-row:last-child { border-bottom: 0; }
.c2c-row--head {
  background: var(--bg-soft);
  font-size: 12px; color: var(--ink-3); font-weight: 600;
  padding: 12px 20px;
}
.c2c-merchant-cell { display: flex; gap: 12px; align-items: center; }
.c2c-merchant-cell strong { display: block; font-size: 14px; }
.c2c-merchant-cell small { font-size: 12px; }
.c2c-price strong { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800; display: block; }
.c2c-price small { font-size: 11px; }
.c2c-pays { display: flex; flex-wrap: wrap; gap: 4px; }
.pay-chip { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }

.c2c-merchant {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  background: var(--bg-soft); border-radius: 12px;
}
.c2c-merchant strong { display: block; font-size: 15px; }
.c2c-merchant small  { font-size: 12px; }
.ml-auto { margin-left: auto; text-align: right; }

@media (max-width: 980px) {
  .c2c-row { grid-template-columns: 1fr; gap: 6px; }
  .c2c-row--head { display: none; }
}

/* ============================================================
   Earn
   ============================================================ */
.earn-hero {
  padding: 60px 0 40px;
  background:
    radial-gradient(ellipse 600px 280px at 80% 30%, rgba(245,184,36,0.16), transparent 60%),
    radial-gradient(ellipse 500px 250px at 10% 70%, rgba(2,192,118,0.10), transparent 60%),
    var(--bg);
}
.earn-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.earn-hero__stats { display: grid; grid-template-columns: repeat(4, auto); gap: 26px; }
.earn-hero__stats strong { display: block; font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; }
.earn-hero__stats span { color: var(--ink-3); font-size: 12px; }

.earn-hot {
  background:
    radial-gradient(ellipse at top right, rgba(245,184,36,0.25), transparent 60%),
    linear-gradient(135deg, #1E2329 0%, #2B3139 100%);
  color: #fff;
  border-radius: 18px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.earn-hot__head { display: flex; justify-content: space-between; align-items: center; }
.earn-hot__head .muted { color: #B7BDC6; }
.earn-hot__rate { padding: 12px 0; display: flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); margin: 8px 0; }
.earn-hot__rate strong { font-family: 'Manrope', sans-serif; font-size: 42px; font-weight: 800; color: var(--gold); }
.earn-hot__rate small  { color: #B7BDC6; }
.earn-hot__list { list-style: none; padding: 0; margin: 0; }
.earn-hot__list li { padding: 4px 0; color: #B7BDC6; font-size: 13px; }

.earn-tab {
  padding: 8px 18px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-3);
  transition: all var(--transition);
}
.earn-tab:hover { color: var(--ink); }
.earn-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.earn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.earn-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: all var(--transition);
}
.earn-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(245,184,36,0.4); }
.earn-card__head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.earn-card__head strong { display: block; font-size: 16px; }
.earn-card__head small { color: var(--ink-3); font-size: 12px; }
.earn-card__apr {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
}
.earn-card__apr strong { font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800; color: var(--up); }
.earn-card__apr small  { color: var(--ink-3); font-size: 11px; }
.earn-card__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.earn-card__meta small  { display: block; color: var(--ink-3); font-size: 11px; }
.earn-card__meta strong { display: block; font-size: 12px; font-weight: 700; margin-top: 2px; }

@media (max-width: 980px) {
  .earn-hero__grid { grid-template-columns: 1fr; }
  .earn-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .earn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .earn-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Convert
   ============================================================ */
.conv-shell { padding: 50px 24px 80px; }
.conv-grid { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: 28px; align-items: start; max-width: 1000px; margin: 0 auto; }
.conv-card { padding: 28px; }
.conv-card__head { display: flex; justify-content: space-between; align-items: center; }

.conv-box {
  background: var(--bg-soft); border: 1px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 14px;
  transition: border-color var(--transition);
}
.conv-box:focus-within { border-color: var(--gold); background: var(--surface); }
.conv-box__head { display: flex; justify-content: space-between; align-items: center; }
.conv-box__head small { color: var(--ink-3); font-size: 12px; }
.conv-box__row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.conv-box__row input {
  flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--ink); font-family: 'Manrope', sans-serif;
  font-size: 28px; font-weight: 700;
}
.coin-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px; font-weight: 700; color: var(--ink);
  transition: border-color var(--transition);
}
.coin-pill:hover { border-color: var(--gold); }
.coin-pill .coin { width: 26px; height: 26px; font-size: 14px; }

.conv-percent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.conv-percent button {
  padding: 6px 0; font-size: 12px; color: var(--ink-2);
  background: var(--surface);
  border-radius: 6px;
  transition: all var(--transition);
}
.conv-percent button:hover { background: var(--gold-soft); color: var(--gold-dark); }

.conv-arrow-wrap { display: flex; justify-content: center; margin: -10px 0; position: relative; z-index: 2; }
.conv-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 18px; font-weight: 700;
  transition: all var(--transition);
}
.conv-arrow:hover { transform: rotate(180deg); border-color: var(--gold); color: var(--gold-dark); }

.conv-quote { background: var(--bg-soft); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.conv-quote__row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.conv-quote__row small { color: var(--ink-3); }

.conv-history { display: flex; flex-direction: column; gap: 4px; }
.conv-hist-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.conv-hist-row:last-child { border-bottom: 0; }
.conv-hist-row small { color: var(--ink-3); font-size: 11px; }

@media (max-width: 900px) {
  .conv-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Security center
   ============================================================ */
.sec-shell { padding: 32px 24px 80px; }
.sec-meter-card {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px;
  align-items: center;
}
.sec-level { font-size: 30px; font-weight: 800; display: flex; align-items: baseline; gap: 10px; margin: 6px 0; }
.sec-level small { font-family: 'Manrope', sans-serif; font-size: 18px; color: var(--gold-dark); }
.sec-meter { background: var(--bg-soft); height: 8px; border-radius: 999px; overflow: hidden; margin: 14px 0; }
.sec-meter span { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }
.sec-tips { list-style: none; padding: 0; margin: 0; }
.sec-tips li { padding: 4px 0; font-size: 13px; color: var(--up); }
.sec-tips li.todo { color: var(--ink-3); }
.sec-ring { position: relative; display: flex; justify-content: center; align-items: center; }
.sec-ring__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.sec-ring__center strong { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; }
.sec-ring__center small { color: var(--ink-3); font-size: 11px; }

.sec-list { display: flex; flex-direction: column; gap: 8px; }
.sec-item {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px;
  transition: border-color var(--transition);
}
.sec-item:hover { border-color: rgba(245,184,36,0.4); }
.sec-item__icon { font-size: 22px; }
.sec-item__body strong { display: block; font-size: 14px; }
.sec-item__body small  { color: var(--ink-3); font-size: 12px; }
.sec-item__status .change { font-size: 12px; padding: 4px 10px; }

@media (max-width: 760px) {
  .sec-meter-card { grid-template-columns: 1fr; }
  .sec-item { grid-template-columns: auto 1fr; }
  .sec-item__status, .sec-item .btn { grid-column: 2; justify-self: start; }
}

/* ============================================================
   Fees / VIP
   ============================================================ */
.fees-hero {
  padding: 60px 0 40px;
  background:
    radial-gradient(ellipse 600px 280px at 80% 30%, rgba(245,184,36,0.16), transparent 60%),
    var(--bg);
}
.fees-tabs { width: fit-content; margin-bottom: 18px; }
.vip-current { background: var(--gold-soft); }
.vip-current td { font-weight: 700; }

.fees-bonus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.fees-bonus__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px;
  transition: all var(--transition);
}
.fees-bonus__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(245,184,36,0.4); }
.fees-bonus__icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--gold-soft); color: var(--gold-dark);
  font-size: 22px; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.fees-bonus__card h3 { font-size: 17px; margin-bottom: 6px; }
.fees-bonus__card p { color: var(--ink-3); font-size: 13px; margin: 0; }

@media (max-width: 760px) {
  .fees-bonus { grid-template-columns: 1fr; }
}


/* ============================================================
   Academy
   ============================================================ */
.ac-hero {
  padding: 60px 0 40px;
  background:
    radial-gradient(ellipse 600px 280px at 50% 30%, rgba(245,184,36,0.12), transparent 60%),
    var(--bg);
  text-align: center;
}

.ac-featured {
  display: grid; grid-template-columns: 320px 1fr; gap: 30px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px;
  margin-bottom: 30px;
  align-items: center;
}
.ac-cover {
  border-radius: 14px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ac-cover--featured { aspect-ratio: 16 / 10; }
.ac-cover__icon { font-size: 64px; opacity: 0.9; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.2)); }
.ac-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.ac-meta small { color: var(--ink-3); font-size: 12px; }

.ac-tabs { display: flex; gap: 8px; padding: 6px; background: var(--bg-soft); border-radius: 12px; margin-bottom: 22px; width: fit-content; flex-wrap: wrap; }
.ac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ac-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: all var(--transition);
}
.ac-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(245,184,36,0.4); }
.ac-card .ac-cover { aspect-ratio: 16 / 9; border-radius: 0; }
.ac-card strong { padding: 14px 18px 4px; font-size: 15px; line-height: 1.4; }
.ac-card__meta { padding: 4px 18px 16px; display: flex; justify-content: space-between; }
.ac-card__meta small { color: var(--ink-3); font-size: 12px; }

.ac-videos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ac-video {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; transition: all var(--transition);
}
.ac-video:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ac-video .ac-cover { aspect-ratio: 16 / 9; border-radius: 0; position: relative; }
.ac-play {
  position: absolute; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.85); color: #1E2329;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
}
.ac-duration {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0,0,0,0.6); color: #fff;
  padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
}
.ac-video strong { display: block; padding: 12px 14px 4px; font-size: 13px; line-height: 1.4; }
.ac-video small  { padding: 0 14px 12px; display: block; }

.ac-newsletter {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center;
  background:
    radial-gradient(ellipse at top right, rgba(245,184,36,0.22), transparent 60%),
    linear-gradient(135deg, #1E2329 0%, #2B3139 100%);
  color: #fff; border-radius: 22px;
  padding: 36px;
  margin-top: 50px;
}
.ac-newsletter__form { display: flex; gap: 8px; background: var(--surface); padding: 6px; border-radius: 12px; }
.ac-newsletter__form input { flex: 1; border: 0; outline: 0; padding: 0 12px; font-size: 14px; color: var(--ink); background: transparent; }

@media (max-width: 980px) {
  .ac-featured { grid-template-columns: 1fr; }
  .ac-grid { grid-template-columns: repeat(2, 1fr); }
  .ac-videos { grid-template-columns: repeat(2, 1fr); }
  .ac-newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ac-grid, .ac-videos { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .trade-shell { grid-template-columns: 220px 1fr 280px; }
}
@media (max-width: 980px) {
  .trade-shell { grid-template-columns: 1fr; padding: 8px; }
  .pair-sidebar, .trade-rail { max-height: 60vh; }
}

@media (max-width: 1024px) {
  .nav { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { height: 380px; max-width: 520px; margin: 0 auto; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .promo__grid { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .download__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* 通用全局 section padding,但排除各 shell 内的 mobile section 与列表/卡片 section */
  section:not(.acct-mobile):not(.okx-m):not(.mk-table-section):not(.sq-mobile):not([class*="-shell"] *):not(.mk-mlist):not(.okx-m-list) {
    padding: 60px 0;
  }
  .hero { padding: 50px 0 60px; }
  .hero__trust { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: 1fr; gap: 12px; }
  .trust__grid { grid-template-columns: 1fr; }
  .header__inner { height: 60px; gap: 12px; }
  .header__actions .btn--ghost { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .hero__signup { flex-direction: column; padding: 10px; }
  .hero__signup input { padding: 12px 14px; }
  .card-float--lg { width: 92%; left: 4%; top: 30px; }
  .card-float--shift1, .card-float--shift2 { display: none; }
  .topbar__link { display: none; }
}

/* ============================================================
   FAcoin share cards (html2canvas-friendly).
   These cards are rendered off-screen at fixed pixel sizes so
   html2canvas produces pixel-precise output independent of the
   viewport / device pixel ratio.
   ============================================================ */
.fa-share-stage {
  position: fixed;
  left: -10000px;
  top: 0;
  z-index: -1;
  pointer-events: none;
}
.fa-share-card {
  width: 720px;
  height: 1280px;
  box-sizing: border-box;
  padding: 56px 56px 48px;
  font-family: 'Inter', 'Manrope', system-ui, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(720px 360px at 18% 12%, rgba(245,184,36,0.25), transparent 60%),
    radial-gradient(620px 420px at 88% 88%, rgba(91,141,239,0.20), transparent 60%),
    linear-gradient(160deg, #0B0E11 0%, #1A1F27 55%, #0F141B 100%);
  display: flex;
  flex-direction: column;
}
.fa-share-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  opacity: 0.4;
  pointer-events: none;
}
.fa-share-card > * { position: relative; z-index: 1; }
.fa-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.fa-share-logo {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: 'Manrope', sans-serif;
  font-size: 36px; font-weight: 800;
  letter-spacing: -0.02em;
}
.fa-share-logo b {
  background: linear-gradient(135deg, #F5B824, #FF8A00);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.fa-share-head__tag {
  font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #FFE298;
}
.fa-share-meta {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.fa-share-pair {
  font-family: 'Manrope', sans-serif;
  font-size: 44px; font-weight: 800;
  letter-spacing: -0.01em;
}
.fa-share-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 700;
  padding: 8px 16px; border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
}
.fa-share-chip--long  { background: rgba(2,192,118,0.22);  border-color: rgba(2,192,118,0.45);  color: #6FE5B0; }
.fa-share-chip--short { background: rgba(248,73,96,0.22); border-color: rgba(248,73,96,0.45); color: #FFA7B3; }
.fa-share-roi {
  font-family: 'Manrope', sans-serif;
  font-size: 132px;
  font-weight: 800;
  line-height: 1;
  margin: 24px 0 18px;
  letter-spacing: -0.03em;
}
.fa-share-roi--up   { color: #02C076; }
.fa-share-roi--down { color: #F84960; }
.fa-share-roi-label { font-size: 18px; color: rgba(255,255,255,0.6); font-weight: 600; margin-bottom: 18px; }
.fa-share-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 22px 24px;
  font-size: 18px;
}
.fa-share-rows .lbl { color: rgba(255,255,255,0.55); font-weight: 500; }
.fa-share-rows .val { font-weight: 700; font-family: 'Manrope', sans-serif; text-align: right; }
.fa-share-foot {
  margin-top: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
}
.fa-share-foot__txt { display: flex; flex-direction: column; gap: 6px; }
.fa-share-foot__slogan {
  font-size: 22px; font-weight: 700;
  background: linear-gradient(135deg, #F5B824, #FF8A00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fa-share-foot__hint { font-size: 14px; color: rgba(255,255,255,0.55); }
.fa-share-qr {
  width: 168px; height: 168px;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
  display: grid; place-items: center;
}
.fa-share-qr canvas, .fa-share-qr img { width: 100%; height: 100%; display: block; }
.fa-share-qr__cap { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 6px; text-align: center; }

/* Trader card (slightly different layout) */
.fa-share-card--trader .fa-share-roi { font-size: 116px; }
.fa-share-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Manrope', sans-serif;
  font-size: 44px; font-weight: 800;
  color: #1A1F27;
  background: linear-gradient(135deg, #F5B824, #FF8A00);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.18);
  margin-right: 18px;
}

/* Referral poster has a different vibe */
.fa-share-card--ref {
  background:
    radial-gradient(720px 360px at 18% 12%, rgba(245,184,36,0.35), transparent 60%),
    radial-gradient(620px 420px at 88% 88%, rgba(255,138,0,0.25), transparent 60%),
    linear-gradient(160deg, #1A0F00 0%, #2A1810 55%, #0F141B 100%);
}
.fa-share-card--ref .fa-share-code {
  font-family: 'Manrope', monospace;
  font-size: 84px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  background: rgba(0,0,0,0.30);
  border: 1px dashed rgba(245,184,36,0.50);
  border-radius: 18px;
  padding: 28px 12px;
  margin: 32px 0;
  background-clip: padding-box;
  color: #FFE298;
}
.fa-share-card--ref .fa-share-bonus {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 22px 0 0;
}
.fa-share-card--ref .fa-share-bonus div {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 18px 8px;
  text-align: center;
}
.fa-share-card--ref .fa-share-bonus strong {
  display: block; font-family: 'Manrope', sans-serif;
  font-size: 32px; color: #FFE298; font-weight: 800; line-height: 1;
}
.fa-share-card--ref .fa-share-bonus span {
  font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 6px; display: block;
}
.fa-share-card--ref .fa-share-headline {
  font-family: 'Manrope', sans-serif;
  font-size: 56px; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 14px 0 4px;
}
.fa-share-card--ref .fa-share-sub {
  font-size: 18px; color: rgba(255,255,255,0.7); margin-bottom: 10px;
}

/* Share preview modal */
.fa-share-mask {
  position: fixed; inset: 0;
  background: rgba(8,10,14,0.74);
  display: flex; align-items: center; justify-content: center;
  z-index: 9998;
  backdrop-filter: blur(6px);
  padding: 20px;
}
.fa-share-modal {
  background: var(--surface, #15181d);
  color: var(--ink, #fff);
  border: 1px solid var(--line, #2B3139);
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  padding: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.45);
}
.fa-share-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.fa-share-modal__head h3 { font-size: 16px; font-weight: 800; margin: 0; }
.fa-share-modal__close {
  background: transparent; border: 0; color: var(--ink-3, #888);
  font-size: 22px; cursor: pointer; padding: 0 4px;
}
.fa-share-modal__preview {
  display: grid; place-items: center;
  background: var(--bg-soft, #0f1217);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.fa-share-modal__preview img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}
.fa-share-modal__actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.fa-share-modal__actions button {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line, #2B3139);
  background: var(--bg-soft, #0f1217);
  color: var(--ink, #fff);
  font-weight: 600; font-size: 13px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.fa-share-modal__actions button:hover {
  border-color: var(--gold, #F5B824);
  background: rgba(245,184,36,0.08);
}
.fa-share-modal__actions button.is-primary {
  background: linear-gradient(135deg, #F5B824, #FF8A00);
  color: #1A1F27; border-color: transparent;
}
.fa-share-modal__actions button[disabled] { opacity: .5; cursor: not-allowed; }
.fa-share-modal__ipfs {
  font-size: 12px; color: var(--ink-3, #aaa);
  margin-top: 12px; word-break: break-all;
  background: var(--bg-soft, #0f1217);
  padding: 10px 12px; border-radius: 8px;
  border: 1px dashed var(--line, #2B3139);
  display: none;
}
.fa-share-modal__ipfs.is-on { display: block; }
.fa-share-modal__ipfs a { color: var(--gold, #F5B824); text-decoration: none; }
@media (max-width: 480px) {
  .fa-share-modal__actions { grid-template-columns: 1fr; }
}

/* ============================================================
   FAcoin — Global responsive + a11y + dark-mode audit patch
   Added 2026-05.  Scoped at the very end so existing rules win
   except where explicitly overridden via media queries.
   Targets: trade.html, deposit.html, withdraw.html, myWallet.html,
            account.html, futures.html, markets.html, admin-*.html
   ============================================================ */

/* --- Global anti-overflow + iOS-safe input zoom ---------------------- */
html, body { max-width: 100%; }
body { overflow-x: hidden; }

/* iOS Safari auto-zooms inputs < 16px when focused.  Bump baseline. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }
  /* OTP / cell-style 6-digit inputs keep their bigger font; the rule above is
     a floor only — pages with explicit larger sizes are unaffected.        */
}

/* Touch targets: WCAG 2.5.5 recommends >= 44x44px for primary tap zones.
   We bump only the global .btn floor.  Icon/ghost variants in dense UIs
   keep their tighter sizes (admin tables etc.) because the user has to
   precisely target a row anyway.                                       */
@media (max-width: 768px) {
  .btn { min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
}

/* Respect prefers-reduced-motion across all decorative animations.     */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track,
  .card-float--lg, .card-float--sm,
  .data-source-footer__dot { animation: none !important; }
}

/* Ensure tables always allow horizontal scrolling on narrow viewports.
   Some pages wrap tables in custom containers that set overflow:hidden;
   the rule below converts that to auto when the viewport is mobile.   */
@media (max-width: 768px) {
  .mk-table-wrap,
  .table-wrap,
  .ops-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Only apply min-width when the table sits inside a horizontally
     scrollable wrapper — otherwise it would force the page itself to
     scroll horizontally.                                              */
  .mk-table-wrap   .market-table,
  .table-wrap      .market-table,
  .ops-table-wrap  .ops-table,
  .table-wrap      .adm,
  .table-wrap      .tx-table,
  .mw-section      .tx-table { min-width: 560px; }
}

/* --- Header / global chrome ----------------------------------------- */
@media (max-width: 640px) {
  .header__inner { gap: 10px; padding: 0 12px; }
  .header__actions { gap: 6px; }
  /* Smaller theme toggle on phones to free horizontal space */
  .header__actions .icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 14px; }
  /* Language selector shrinks; keep readable */
  .lang-toggle { font-size: 12px; padding-right: 22px; }
}

/* --- Trade page (trade.html) ---------------------------------------- *
   The existing rules collapse the 3-col shell to 1 col at 980px.
   We add tighter breakpoints below to stop chart / forms / book from
   overflowing on phones.                                              */
@media (max-width: 980px) {
  .trade-shell { gap: 8px; padding: 8px; min-height: auto; }
  .pair-sidebar { min-height: auto; max-height: 50vh; }
  .pair-list { max-height: 44vh; }
  .trade-rail { max-height: none; }
  .book-panel, .trades-panel { min-height: 220px; }
  .chart-wrap { height: 55vh; min-height: 320px; max-height: 540px; }
  .chart-wrap.chart-sub { height: auto; }
}

/* Mobile section-tabs: collapse K-line / orderbook / order-form into a
   tab-switcher so each occupies the full viewport. Default desktop is
   `display:none` (the bar is added inline in trade.html). */
#mobile-section-tabs { display: none; }
@media (max-width: 980px) {
  #mobile-section-tabs {
    display: flex; gap: 4px; padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    position: sticky; top: 0; z-index: 5;
  }
  #mobile-section-tabs button {
    flex: 1; min-height: 40px;
    background: transparent; border: 1px solid transparent;
    color: var(--ink-3); font-size: 13px; font-weight: 600;
    border-radius: 8px; cursor: pointer;
    transition: background 90ms ease, color 90ms ease, border-color 90ms ease;
  }
  #mobile-section-tabs button.active {
    background: var(--bg-soft); color: var(--ink); border-color: var(--line);
  }
  /* Hide-by-section: body[data-mobile-view=X] only shows X.
     The .orders-panel (委托/仓位/资产 tabs) stays visible across all views
     so it acts as the OKX bottom strip. */
  body[data-mobile-view="chart"] .trade-rail,
  body[data-mobile-view="chart"] .trade-form,
  body[data-mobile-view="chart"] .order-kind-tabs,
  body[data-mobile-view="chart"] #lev-bar { display: none !important; }
  body[data-mobile-view="book"] #chart-wrap,
  body[data-mobile-view="book"] .chart-sub,
  body[data-mobile-view="book"] .intervals,
  body[data-mobile-view="book"] .indicators,
  body[data-mobile-view="book"] .trade-form,
  body[data-mobile-view="book"] .order-kind-tabs,
  body[data-mobile-view="book"] #lev-bar { display: none !important; }
  body[data-mobile-view="form"] #chart-wrap,
  body[data-mobile-view="form"] .chart-sub,
  body[data-mobile-view="form"] .intervals,
  body[data-mobile-view="form"] .indicators,
  body[data-mobile-view="form"] .trade-rail { display: none !important; }
}
@media (max-width: 640px) {
  .trade-head { gap: 12px; padding: 12px 14px; }
  .trade-head__stats { gap: 14px; flex-wrap: wrap; }
  .trade-head__price { font-size: 22px; min-width: 0; }
  .intervals, .indicators { padding: 8px 12px; overflow-x: auto; flex-wrap: nowrap; }
  .intervals::-webkit-scrollbar, .indicators::-webkit-scrollbar { display: none; }
  .intervals button, .ind-chip { flex-shrink: 0; }
  /* Buy / Sell forms stack vertically on phones so each side has full width */
  .trade-form { grid-template-columns: 1fr; gap: 18px; padding: 12px; }
  .trade-percent button { padding: 10px 0; font-size: 13px; }
  .trade-submit { padding: 14px; font-size: 15px; }
  .chart-wrap { height: 50vh; min-height: 280px; max-height: 460px; }
  .chart-wrap.chart-sub { height: auto; min-height: 90px; max-height: 110px; }
  /* Orders panel: tabs scroll horizontally instead of wrapping awkwardly */
  .orders-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .orders-tabs::-webkit-scrollbar { display: none; }
  .orders-tab { flex-shrink: 0; }
  /* Order-kind tabs in trade.html top of form */
  .order-kind-tabs { overflow-x: auto; flex-wrap: nowrap !important; }
  .order-kind-tabs::-webkit-scrollbar { display: none; }
  .order-kind-tabs .okt { flex-shrink: 0; }
  /* Book / trades grid uses 3 fixed columns; ensure no minimum width forces overflow */
  .book-head, .book-row, .trades-head, .trade-tick { padding: 4px 4px; gap: 4px; font-size: 11.5px; }
}
@media (max-width: 360px) {
  .trade-head__pair strong { font-size: 16px; }
  .trade-head__price { font-size: 18px; }
  .trade-head__stats { gap: 10px; }
  .pair-row { padding: 8px 10px; }
  .pair-row__chg { min-width: 44px; }
}

/* ============================================================
   OKX-style mobile trade page (<=767px) — rebuilt from spec.
   Adds: top category strip, compact pair bar, OKX section tabs,
   pill buy/sell buttons, refreshed orderbook layout.
   Desktop layout above is untouched.
   ============================================================ */
.okx-top-cats { display: none; }
.okx-pair-bar { display: none; }
@media (max-width: 767px) {
  /* Hide bulky desktop sub-header bits on phones */
  .trade .header .nav,
  .trade .header__actions { display: none !important; }
  .trade .header__inner { padding: 0 12px !important; min-height: 44px; }
  .trade .header .logo { font-size: 16px; }

  /* OKX horizontal category strip — sticky under header */
  .okx-top-cats {
    display: flex; align-items: center;
    gap: 0; padding: 0 12px;
    overflow-x: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 12;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .okx-top-cats::-webkit-scrollbar { display: none; }
  .okx-top-cat {
    flex: 0 0 auto;
    padding: 12px 14px 10px;
    font-size: 14px; font-weight: 500;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s ease;
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
  .okx-top-cat.is-active {
    color: var(--ink);
    font-weight: 700;
    border-bottom-color: var(--ink);
  }

  /* Compact pair bar above section tabs */
  .okx-pair-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .okx-pair-bar__pair {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0; padding: 4px 0;
    color: var(--ink); cursor: pointer;
    min-height: 36px;
  }
  .okx-pair-bar__pair strong {
    font-size: 18px; font-weight: 700; letter-spacing: 0.2px;
  }
  .okx-pair-bar__lev {
    margin-left: 4px; padding: 2px 6px;
    font-size: 11px; font-weight: 700;
    color: var(--gold-dark);
    background: var(--gold-soft);
    border-radius: 4px;
  }
  .okx-pair-bar__icons { margin-left: auto; display: flex; gap: 4px; }
  .okx-icon-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: var(--ink);
    border-radius: 8px; cursor: pointer;
  }
  .okx-icon-btn:active { background: var(--bg-soft); }

  /* Hide desktop wide trade-head on mobile (replaced by okx-pair-bar) */
  .trade-head { display: none !important; }

  /* OKX-styled section tabs (K线 / 订单簿 / 下单) */
  #mobile-section-tabs {
    display: flex !important; gap: 0;
    padding: 0 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 44px; z-index: 11;
  }
  #mobile-section-tabs button {
    flex: 0 0 auto;
    padding: 10px 14px;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-size: 14px; font-weight: 500;
    color: var(--ink-3);
    min-height: 44px;
  }
  #mobile-section-tabs button.active {
    color: var(--ink); font-weight: 700;
    border-bottom-color: var(--ink) !important;
    background: transparent !important;
  }

  /* Mobile shell: single column, no gaps */
  .trade-shell {
    grid-template-columns: 1fr !important;
    gap: 0 !important; padding: 0 !important;
    min-height: auto;
  }
  .trade-panel {
    border-radius: 0;
    border-left: 0; border-right: 0;
  }
  .trade-main { border-top: 0; }

  /* Pair sidebar as slide-in drawer (triggered by tapping symbol) */
  .pair-sidebar {
    position: fixed; top: 0; left: 0;
    width: 86vw; max-width: 360px; height: 100vh;
    background: var(--surface);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,0.2);
    max-height: none !important;
    border-right: 1px solid var(--line);
  }
  body.okx-pair-drawer-open .pair-sidebar { transform: translateX(0); }
  body.okx-pair-drawer-open::before {
    content: ''; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 199;
  }
  .pair-list { max-height: calc(100vh - 140px) !important; }

  /* K-line chart: full-width, no chrome around */
  .intervals {
    padding: 8px 12px; border-bottom: 1px solid var(--line);
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .intervals::-webkit-scrollbar { display: none; }
  .intervals button {
    flex: 0 0 auto; min-height: 32px;
    padding: 4px 10px; font-size: 13px;
    border-radius: 16px;
    background: transparent; color: var(--ink-3);
  }
  .intervals button.active {
    background: var(--bg-soft); color: var(--ink); font-weight: 700;
  }
  /* Hide the desktop draw-tools row contents (kept for desktop) */
  .intervals .draw-tool,
  .intervals #draw-clear,
  .intervals #btn-chart-fullscreen,
  .intervals #btn-share-screenshot,
  .intervals #chart-type-sel { display: none !important; }

  /* Indicators: scroll horizontally, no label */
  .indicators {
    padding: 6px 12px; border-bottom: 1px solid var(--line);
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .indicators::-webkit-scrollbar { display: none; }
  .indicators__label { display: none; }
  .ind-chip { flex: 0 0 auto; padding: 4px 10px; }

  .chart-wrap {
    height: 56vh !important;
    min-height: 320px !important;
    max-height: 540px !important;
  }

  /* === Order form: OKX-style buy/sell card === */
  .order-kind-tabs {
    padding: 8px 12px !important; gap: 6px !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .order-kind-tabs::-webkit-scrollbar { display: none; }
  #voice-trade-btn { display: none !important; }
  #lev-bar { padding: 8px 12px !important; }
  #lev-bar a[href="margin.html"] { display: none; }

  /* Stack buy/sell vertically; pad like OKX. */
  .trade-form {
    grid-template-columns: 1fr !important;
    gap: 14px !important; padding: 12px !important;
    min-height: auto !important;
  }
  .trade-side { gap: 8px; }
  .trade-side h4 { font-size: 13px; color: var(--ink-3); font-weight: 500; }

  /* Limit / Market segmented switcher */
  #buy-type-tabs, #sell-type-tabs {
    grid-template-columns: 1fr 1fr;
    background: var(--bg-soft); border-radius: 8px;
    padding: 3px; gap: 0;
  }
  #buy-type-tabs button, #sell-type-tabs button {
    background: transparent; border-radius: 6px;
    font-size: 13px; min-height: 36px;
    color: var(--ink-3); font-weight: 500;
  }
  #buy-type-tabs button.active, #sell-type-tabs button.active {
    background: var(--surface); color: var(--ink); font-weight: 700;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }

  /* Inputs: tall, rounded */
  .trade-input {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    min-height: 48px;
  }
  .trade-input input { font-size: 16px !important; min-height: 28px; }

  /* Percent quick-set as chip row */
  .trade-percent button {
    min-height: 36px; padding: 6px 0; font-size: 13px;
    background: var(--bg-soft); border-radius: 8px;
  }

  /* Submit buttons: pill, full-width, OKX-style */
  .trade-submit {
    min-height: 52px; padding: 14px;
    font-size: 16px; font-weight: 700;
    border-radius: 999px;
    margin-top: 6px;
  }
  .trade-submit--buy  { background: #02C076 !important; color: #fff; }
  .trade-submit--sell { background: #F84960 !important; color: #fff; }

  /* === Orderbook (mobile) === */
  .book-panel, .trades-panel { padding: 10px 12px; min-height: auto; }
  .book-panel { border-top: 1px solid var(--line); }
  .book-head, .book-row {
    grid-template-columns: 1fr 1fr !important;
    padding: 4px 4px !important;
    gap: 8px !important;
    font-size: 12px;
  }
  /* Drop trailing 累计 column on mobile to match OKX 2-col layout */
  .book-head > *:nth-child(3),
  .book-row  > *:nth-child(3) { display: none !important; }
  .book-list { font-size: 12.5px; line-height: 1.75; }
  .book-mid {
    padding: 8px 6px !important;
    background: var(--bg-soft);
    border-radius: 6px; margin: 4px 0;
    font-size: 16px; font-weight: 700;
  }
  /* Hide recent-trades sub-panel on mobile */
  .trades-panel { display: none !important; }
  /* Hide the OKX-data footer note on mobile */
  .data-source-footer { display: none !important; }

  /* === Orders panel bottom tabs === */
  .orders-panel { border-top: 8px solid var(--bg-soft); }
  .orders-tabs {
    padding: 6px 12px !important;
    overflow-x: auto; flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .orders-tabs::-webkit-scrollbar { display: none; }
  .orders-tab {
    flex: 0 0 auto;
    padding: 8px 10px !important;
    font-size: 14px !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--ink-3) !important;
    border-bottom: 2px solid transparent;
  }
  .orders-tab.active {
    color: var(--ink) !important;
    font-weight: 700;
    background: transparent !important;
    border-bottom: 2px solid var(--ink);
  }
  .orders-tab.active::after { display: none; }
  #orders-pair-only { display: none !important; }
  .orders-tabs label.checkbox { display: none !important; }
  #btn-cancel-all { display: none !important; }

  /* Reserve room for global mobile tabbar */
  body.fa-has-mobile-tabbar .trade-shell { padding-bottom: 0 !important; }

  /* Don't show the onboarding panel on mobile — covers content */
  #fa-onboarding { display: none !important; }
}

/* --- Futures page (futures.html) ------------------------------------ *
   Futures uses an inline 1fr 360px grid that breaks on phones.        */
@media (max-width: 980px) {
  body main .trade-panel + .trade-panel,
  #fut-root > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* The right-side order panel is sticky on desktop; un-stick on mobile so
     it doesn't sit on top of the K-line and trap scroll.                 */
  #fut-root > div > div[style*="sticky"] { position: static !important; }
  #fut-chart { height: 280px !important; }
}
@media (max-width: 640px) {
  #fut-chart { height: 240px !important; }
}

/* --- Wallet pages (deposit / withdraw / transfer) ------------------- */
@media (max-width: 640px) {
  .wallet-shell { padding: 20px 14px 60px; }
  .wallet-title { font-size: 20px; }
  .wallet-subnav { overflow-x: auto; flex-wrap: nowrap; width: 100%; -webkit-overflow-scrolling: touch; }
  .wallet-subnav::-webkit-scrollbar { display: none; }
  .wallet-subnav a { flex-shrink: 0; padding: 8px 14px; }
  /* deposit-page-only inline coin grid: tighten cell size so 320px viewports
     fit three columns without horizontal scroll. */
  .dep-coin-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; }
  .dep-addr-row { font-size: 12px; padding: 10px; }
  .qr-card { padding: 14px; }
  .qr-card__qr { padding: 12px; }
}

/* --- Account page (account.html) ------------------------------------ */
@media (max-width: 640px) {
  .account-shell { padding: 20px 12px 60px; }
  .balance { font-size: 28px; }
  .account-actions { gap: 6px; }
  .account-actions .btn { padding: 10px 14px; font-size: 13px; flex: 1 1 auto; min-width: 0; }
}

/* --- myWallet page (myWallet.html) ---------------------------------- *
   The scoped block in myWallet.html already collapses .mw-overview /
   .mw-grid-2 / .mw-row at 720px; we just polish the table and chain   *
   tabs for sub-360px screens.                                         */
@media (max-width: 640px) {
  .tx-table { font-size: 11.5px; }
  .tx-table th, .tx-table td { padding: 8px 8px; }
  .tx-toolbar { flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
  .tx-toolbar small { margin-left: 0; flex-basis: 100%; }
}

/* --- Markets page (markets.html) ------------------------------------ *
   The page sets .mk-table-wrap { overflow: hidden; } which traps the
   table; the global rule above flips it to auto on mobile, but we also
   widen the touch-friendly star/trade buttons.                         */
@media (max-width: 640px) {
  .market-table thead th, .market-table tbody td { padding: 12px 12px; font-size: 13px; }
  .market-table .symbol .coin { width: 28px; height: 28px; font-size: 12px; }
  .market-table .spark-mini { width: 80px; height: 28px; }
  .market-table .trade-btn { padding: 6px 12px; font-size: 12px; }
}

/* --- Admin pages (styles-admin.css + admin-finance inline) ---------- *
   styles-admin.css already collapses the side-nav at 980px.  Below we
   add overflow-x guards on table containers.                          */
@media (max-width: 760px) {
  .adm-main { padding: 16px 14px 40px; }
  .adm-page-title { font-size: 18px; }
  .adm-card { padding: 14px 14px; }
  .adm-side { padding: 8px 10px; }
  .adm-side__group { padding: 8px 8px 4px; }
  .adm-side__link { padding: 8px 8px; }
  /* Force admin table wrappers to scroll horizontally */
  .adm-card { overflow-x: auto; }
}

/* --- Dark mode: tighten a few low-contrast surfaces ----------------- */
:root[data-theme="dark"] .dep-banner {
  background: linear-gradient(90deg, rgba(245,184,36,0.18), rgba(245,184,36,0.04));
  border-color: rgba(245,184,36,0.40);
  color: var(--ink);
}
:root[data-theme="dark"] .dep-banner code { background: rgba(255,255,255,0.10); color: var(--ink); }
:root[data-theme="dark"] .info-warn {
  background: rgba(245,184,36,0.10);
  border-color: rgba(245,184,36,0.35);
}
:root[data-theme="dark"] .deposit-warn {
  background: rgba(248,73,96,0.10);
  border-color: rgba(248,73,96,0.35);
}
/* Admin pills (success / warn / err) — already overridden via dark
   selectors in styles-admin.css; we additionally tighten admin-finance
   .badge variants here so the dark scheme matches.                     */
:root[data-theme="dark"] .badge.open    { background: rgba(245,184,36,0.20); color: #F5C748; }
:root[data-theme="dark"] .badge.filled  { background: rgba(2,192,118,0.20);  color: #4FE3A0; }
:root[data-theme="dark"] .badge.pending { background: rgba(184,194,210,0.18); color: var(--ink-2); }
:root[data-theme="dark"] .badge.canceled,
:root[data-theme="dark"] .badge.cancelled,
:root[data-theme="dark"] .badge.rejected { background: rgba(248,73,96,0.20); color: #FF6B9C; }

/* Theme toggle button glyph should pick up var color reliably; the .icon-btn
   bg-soft swap already handles surface color, this just keeps the icon legible. */
:root[data-theme="dark"] [data-theme-toggle] { color: var(--ink); }

/* Hero floating cards: shadow on dark looks like a halo — soften.       */
:root[data-theme="dark"] .card-float { box-shadow: 0 18px 40px rgba(0,0,0,0.45); }

/* --- Generic scrollable-tabs helper for narrow screens -------------- *
   Apply to any horizontal tab strip via the existing .tabs etc.       */
@media (max-width: 640px) {
  .tabs, .activity-tabs, .auth-tabs, .book-tabs, .dep-cat-tabs, .ftab-bar, .chain-tabs, .ops-tabs, .ops-sub-tabs {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar, .activity-tabs::-webkit-scrollbar,
  .auth-tabs::-webkit-scrollbar, .book-tabs::-webkit-scrollbar,
  .dep-cat-tabs::-webkit-scrollbar, .ftab-bar::-webkit-scrollbar,
  .chain-tabs::-webkit-scrollbar, .ops-tabs::-webkit-scrollbar,
  .ops-sub-tabs::-webkit-scrollbar { display: none; }
  .tabs > *, .activity-tabs > *, .auth-tabs > *, .book-tabs > *,
  .dep-cat-tabs > *, .ftab-bar > *, .chain-tabs > *,
  .ops-tabs > *, .ops-sub-tabs > * { flex-shrink: 0; }
}

/* Make any element marked with data-overflow-scroll behave safely */
[data-overflow-scroll] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
[data-overflow-scroll]::-webkit-scrollbar { height: 6px; }
[data-overflow-scroll]::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

/* Print styles — keep things sane if someone prints account/history.   */
@media print {
  .header, .footer, .topbar, .drawer, .nav, .header__actions,
  .live-status, .auth-side, .ticker-section, [data-theme-toggle],
  .lang-toggle, .icon-btn { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .trade-panel, .auth-card, .adm-card, .panel, .mw-section {
    border: 1px solid #ccc !important; box-shadow: none !important;
    page-break-inside: avoid;
  }
  a { color: #000 !important; text-decoration: none !important; }
}

/* ============================================================
   FAcoin — Mobile touch / gesture audit patch (2026-05)
   Goals: WCAG 2.5.5 target size, kill 300ms tap delay, prevent
   iOS double-tap zoom, respect notch / home-bar safe areas,
   lock body scroll while modal is open, allow inputs to clear
   the virtual keyboard via visualViewport (see script.js).
   ============================================================ */

/* B + I.  Eliminate the legacy 300ms click delay AND the iOS
   double-tap-to-zoom behaviour on every interactive control.
   `manipulation` keeps pan + pinch on scroll containers while
   removing the synthetic-click latency.                       */
button, a, .btn, .icon-btn, .okt, .tab, [role="button"],
input[type="button"], input[type="submit"], input[type="reset"],
select, summary, label[for] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(245,184,36,0.18);
}

/* A.  Touch target floor on phones — apply to *all* primary
   tap targets, not only `.btn`.  Links inside dense tables
   keep their tight sizes by being explicitly excluded.        */
@media (max-width: 768px) {
  button,
  a.btn, a.cta, a.nav__item, .okt, .orders-tab,
  input[type="button"], input[type="submit"] {
    min-height: 44px;
  }
  /* Dense admin tables opt out — preserve compact row controls. */
  .adm-row-actions button,
  .adm-row-actions a.btn,
  .tx-table button,
  table.adm button { min-height: 0; }
  /* Links inside nav strips and footer get a generous hit area
     even when their visible text is small.                    */
  .nav__list a, .footer a, .auth-tabs a, .header__actions a {
    padding-top: 10px; padding-bottom: 10px;
  }
  /* Adjacent links must have >= 8px breathing room.            */
  .nav__list { gap: max(8px, .5em); }
  .footer__col a + a { margin-top: 8px; display: inline-block; }
}

/* C.  Final safety net: textarea baseline >= 16px so iOS does
   not auto-zoom on focus.  (Existing rule already covered
   input/select; textarea is now explicit at every width.)     */
textarea { font-size: 16px; }

/* D + E.  Safe-area insets for iPhone notch + home-bar and for
   PWA standalone display.  Pages that opt-in via .has-fixed-
   header / .has-fixed-bottom inherit the proper padding.
   NOTE: requires `viewport-fit=cover` in the <meta viewport>
   — pwa-core.js patches this at runtime for every page.       */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}
body { padding-left: var(--safe-left); padding-right: var(--safe-right); }
.header, .topbar { padding-top: var(--safe-top); }
.footer, .bottom-toolbar, .trade-submit-bar, .mobile-tabbar {
  padding-bottom: calc(var(--safe-bottom) + 8px);
}

/* F.  Landscape on phones: K-line / chart needs more vertical
   room — collapse decorative spacing and hide non-essentials. */
@media (max-width: 900px) and (orientation: landscape) {
  .header { min-height: 48px; }
  .ticker-section, .promo, .data-source-footer { display: none; }
  .chart-wrap, #fut-chart { min-height: 60vh !important; }
}

/* G.  PWA standalone (installed app): no browser chrome means
   no back button — surface our in-app back affordance and
   add extra top padding so content clears the iOS status bar. */
@media (display-mode: standalone) {
  body { padding-top: var(--safe-top); }
  [data-pwa-back] { display: inline-flex !important; }
  /* Disable text selection on chrome to feel more app-like.   */
  .header, .footer, .nav, .topbar { user-select: none; -webkit-user-select: none; }
}
@media not all and (display-mode: standalone) {
  [data-pwa-back] { display: none !important; }
}

/* H.  Modal scroll lock.  JS toggles `body.modal-open` when
   any `.modal.open` exists.  Position-fixed body trick keeps
   the underlying scroll position on iOS.                      */
body.modal-open {
  overflow: hidden !important;
  touch-action: none;
}
.modal.open { overscroll-behavior: contain; }
.modal__panel { overscroll-behavior: contain; max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 32px); }

/* J. Smooth keyboard-driven scroll — visualViewport JS uses
   this class to highlight the focused input briefly.          */
.is-kbd-focused {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 80px;
}

/* ============================================================
   A11y — additional defensive rules (audit pass).
   - Restore visible focus on any element that aggressively
     zeroed `outline` (we keep designs with custom focus rings
     intact, but guarantee keyboard focus is always visible).
   - Bump muted-text contrast in dark mode for WCAG AA.
   - Forced-colors / high-contrast mode tweaks (Windows).
   - Reduced-motion safety net for any leftover animations.
   ============================================================ */

/* Universal keyboard focus fallback — wins over inline `outline:0`
   because :focus-visible is more specific (pseudo-class). Real CSS
   wins via cascade order: this rule is later in the file. */
:focus-visible {
  outline: 2px solid var(--gold, #F5B824) !important;
  outline-offset: 2px;
}
/* But form fields with their own border-color treatment shouldn't
   get a doubled ring — they already pass AA. We keep the outline,
   just adjust offset to align flush.                             */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 1px;
}

/* Dark-theme muted text: 0B0E11 background + #848E9C foreground
   passes ~4.96:1 but borderline. Strengthen for prefers-contrast. */
@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --ink-3: #B7BDC6;
    --ink-2: #D7DCE0;
    --line:  #4A535C;
  }
  :root:not([data-theme="dark"]) {
    --ink-3: #4F5660;
    --ink-2: #2B3139;
    --line:  #B7BDC6;
  }
}

/* Windows high-contrast mode — make sure interactive borders survive
   even when the browser flattens custom colors.                    */
@media (forced-colors: active) {
  .btn, .btn--primary, .btn--ghost, .btn--ghost-bordered,
  .icon-btn, .auth-tab, .nav__item, input, select, textarea {
    border: 1px solid CanvasText !important;
  }
  a, button, [role="button"], [role="tab"], [role="radio"] {
    forced-color-adjust: none;
  }
  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
  }
}

/* Reduced-motion: cover any [data-anim] / .pulse / .spin / .shimmer
   patterns that we may have missed in the earlier blanket rule.  */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .pulse, .spin, .shimmer, .wl-skel,
  .ticker, .ticker__track,
  .marquee, .marquee__track,
  .toast--enter, .toast--leave,
  .modal__panel { animation: none !important; transition: none !important; }
  /* Disable smooth scroll for screen readers / vestibular safety. */
  html { scroll-behavior: auto !important; }
}

/* Touch-target safety: ensure all focusable inline buttons meet a
   reasonable hit area on touch viewports — already handled for
   `.btn`/`.icon-btn`, this catches generic <button> tags too.   */
@media (pointer: coarse) {
  button:not(.btn):not(.icon-btn):not(.ind-chip):not(.orders-tab):not(.auth-tab):not(.nav__item) {
    min-height: 32px;
  }
}

/* Skip link visible when focused AND when JS hasn't run yet (no
   .fa-skip-link injected) — pages without a11y-helpers still get
   focus visibility for any in-page anchor.                       */
a[href^="#"]:focus-visible {
  outline-offset: 3px;
}

/* Visually-hidden but focusable (for skip anchors in-page).      */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   Theme switcher (settings.html three-way radio + navbar icon)
   ============================================================ */
.theme-switcher {
  display: inline-flex;
  gap: 0;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  align-items: center;
}
.theme-switcher__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition), color var(--transition);
  min-height: 32px;
}
.theme-switcher__opt:hover { color: var(--ink); }
.theme-switcher__opt input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.theme-switcher__opt input:checked + span {
  /* the visual chip is whole label background — handled by parent state */
}
.theme-switcher__opt[data-active="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .theme-switcher__opt[data-active="true"] {
  background: var(--surface-2);
}
.theme-switcher__opt:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Dark-mode polish for organically-grown markdown / code / pre / kbd
   blocks across announcement / help / academy pages — these often
   hardcoded a near-white background that read terribly under dark.   */
:root[data-theme="dark"] code,
:root[data-theme="dark"] kbd,
:root[data-theme="dark"] samp {
  background: rgba(255,255,255,0.06);
  color: #F0B90B;
  border-color: rgba(255,255,255,0.12);
}
:root[data-theme="dark"] pre {
  background: #14171C;
  color: #EAECEF;
  border-color: var(--line);
}
:root[data-theme="dark"] pre code {
  background: transparent;
  color: inherit;
}
:root[data-theme="dark"] blockquote {
  border-left-color: var(--line);
  color: var(--ink-2);
}
:root[data-theme="dark"] hr { border-color: var(--line); }

/* Logo: footer / promo cards use white logo text on a dark hero —
   keep that, but the standalone .logo--auto-invert class lets pages
   swap to a CSS filter under dark for raster logos.                  */
:root[data-theme="dark"] .logo--auto-invert img,
:root[data-theme="dark"] img.logo-mark--auto-invert {
  filter: brightness(0) invert(1);
}

/* ============================================================
   Unified empty / loading / error state (used by every list view)
   Replaces the dozens of ad-hoc .empty / .nt-empty / .wl-empty /
   .orders-empty / inline-styled empty rows scattered across pages.

   Usage:
     <div class="empty-state" role="status">
       <svg class="empty-state__icon">…</svg>
       <h2 class="empty-state__title">暂无委托</h2>
       <p class="empty-state__desc">…</p>
       <div class="empty-state__actions">
         <a href="trade.html" class="btn btn--primary">去交易</a>
       </div>
     </div>

   Or call FAa11y.emptyState(container, { variant, title, desc, actions })
   which renders the same structure with an icon picked from a small
   bundled SVG set.
   ============================================================ */
.empty-state {
  padding: 64px 24px;
  text-align: center;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.empty-state--inline { padding: 32px 16px; }
.empty-state--card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.empty-state--dashed {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.empty-state__icon {
  width: 56px; height: 56px;
  color: var(--ink-3);
  opacity: 0.55;
  margin-bottom: 8px;
  display: block;
}
.empty-state--error .empty-state__icon { color: var(--down); opacity: 0.7; }
.empty-state__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 0 4px;
  line-height: 1.4;
}
.empty-state__desc {
  font-size: 13px;
  margin: 0 0 14px;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 420px;
}
.empty-state__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}
.empty-state__actions .btn,
.empty-state__actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Wrap an empty-state inside a <td colspan="…"> table cell. */
td > .empty-state,
tr > td > .empty-state { padding: 48px 16px; }

/* Skeleton row utilities — extend the existing .skeleton shimmer
   to a structured list/table loader. */
.skeleton-list { padding: 8px 0; }
.skeleton-list .fa-skel-row { padding: 10px 14px; }
.skeleton-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.skeleton-row:last-child { border-bottom: 0; }
.skeleton-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--skeleton-1) 0%,
    var(--skeleton-2) 50%,
    var(--skeleton-1) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  flex: 1;
}
.skeleton-bar--sm  { max-width: 40%; }
.skeleton-bar--md  { max-width: 60%; }
.skeleton-bar--lg  { max-width: 80%; }
.skeleton-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(90deg,
    var(--skeleton-1) 0%,
    var(--skeleton-2) 50%,
    var(--skeleton-1) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  flex: 0 0 auto;
}

/* Button busy / loading state */
.btn--busy { position: relative; pointer-events: none; opacity: 0.75; }
.btn--busy::after {
  content: '';
  width: 12px; height: 12px;
  margin-left: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  display: inline-block;
  vertical-align: -2px;
  animation: fa-spin 0.8s linear infinite;
}
@keyframes fa-spin { to { transform: rotate(360deg); } }

/* Reduced-motion: stop shimmer / progress animations for users
   who request less motion (prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  .skeleton, .skeleton-bar, .skeleton-circle, .mini-spark-ph,
  .fa-skel-bar, .btn--busy::after {
    animation: none !important;
  }
}

/* ===== Skip link (a11y) ===== */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--gold, #F5B824); color: #1E2329;
  padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; outline: 2px solid #1E2329; }

/* ===== Hot leaderboard cards ===== */
.hot-cards { padding: 36px 0 12px; }
.hot-cards__grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hot-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e8ecf2);
  border-radius: 16px; padding: 18px 18px 8px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hot-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 18px 40px rgba(0,0,0,.08)); border-color: rgba(245,184,36,0.4); }
.hot-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid var(--line, #e8ecf2);
}
.hot-card__head h3 { font-size: 16px; font-weight: 700; margin: 0; }
.hot-card__tag {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: var(--bg-soft, #f7f8fa); color: var(--ink-3, #6b7280);
}
.hot-card__tag.up   { color: #02C076; background: rgba(2,192,118,.1); }
.hot-card__tag.down { color: #F84960; background: rgba(248,73,96,.1); }
.hot-card__list { list-style: none; padding: 0; margin: 0; }
.hot-card__list li { border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.04)); }
.hot-card__list li:last-child { border-bottom: 0; }
.hc-link {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px; padding: 10px 4px; color: inherit; text-decoration: none;
  transition: background .15s ease;
}
.hc-link:hover { background: var(--bg-soft, rgba(245,184,36,.05)); border-radius: 8px; }
.hc-sym { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hc-sym strong { font-size: 13px; font-weight: 700; }
.hc-spark { display: flex; align-items: center; justify-content: center; min-height: 28px; }
.hc-spark svg { width: 80px; height: 28px; }
.hc-px { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; text-align: right; }
.hc-chg { font-weight: 700; font-size: 12px; padding: 3px 7px; border-radius: 6px; text-align: right; min-width: 62px; }
.hc-chg.up   { color: #02C076; background: rgba(2,192,118,.08); }
.hc-chg.down { color: #F84960; background: rgba(248,73,96,.08); }
.hc-vol { font-size: 12px; color: var(--ink-3, #6b7280); text-align: right; min-width: 62px; }
.hc-empty { padding: 24px 0; text-align: center; color: var(--ink-3, #6b7280); font-size: 13px; }
@media (max-width: 960px) {
  .hot-cards__grid { grid-template-columns: 1fr; }
}

/* ===== Portfolio overview (logged-in) ===== */
.portfolio-overview { padding: 36px 0 12px; }
.po__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.po__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.po__grid {
  display: grid; gap: 16px;
  grid-template-columns: 1.2fr 1fr 1fr;
}
.po__card {
  background: var(--surface, #fff); border: 1px solid var(--line, #e8ecf2);
  border-radius: 16px; padding: 18px 20px;
}
.po__card--total {
  background: linear-gradient(135deg, rgba(245,184,36,.18), rgba(255,138,0,.08));
  border-color: rgba(245,184,36,.35);
}
.po__label { font-size: 12px; color: var(--ink-3, #6b7280); margin-bottom: 6px; }
.po__big { font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800; line-height: 1.15; }
.po__sub { font-size: 12.5px; color: var(--ink-3, #6b7280); margin-top: 4px; }
.po__chg.up   { color: var(--up); font-weight: 700; }
.po__chg.down { color: var(--down); font-weight: 700; }
.po__list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.po__list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.04)); }
.po__list li:last-child { border-bottom: 0; }
.po__list strong { font-family: 'Manrope', sans-serif; font-weight: 700; }
.po__list--trades li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; }
.po__amt { font-family: 'Manrope', sans-serif; font-size: 12px; color: var(--ink-2, #4b5563); }
.po__ts  { font-size: 11.5px; color: var(--ink-3, #6b7280); }
.po__empty { color: var(--ink-3, #6b7280); font-size: 13px; padding: 12px 0; }
@media (max-width: 960px) {
  .po__grid { grid-template-columns: 1fr; }
}

/* ===== Stats strip (animated) ===== */
.stats-strip { padding: 36px 0 8px; }
.stats-strip__grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  text-align: center;
}
.stats-strip__item {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 6px;
  padding: 16px 12px;
  min-height: 92px;
  border-radius: 12px;
  background: var(--card, rgba(255,255,255,0.02));
  border: 1px solid var(--line-soft, rgba(0,0,0,0.04));
}
.stats-strip__item strong {
  display: block; font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: clamp(22px, 1.8vw + 10px, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  word-break: keep-all;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #F5B824, #FF8A00);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Any inline span injected inside <strong> (e.g. `$<span data-fa-stat>`)
   must inherit the same font so the currency symbol doesn't tower over the
   digits. Without this it picks up `.stats-strip__item span` (12.5px). */
.stats-strip__item strong * {
  font: inherit !important;
  color: inherit;
  background: inherit;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: inherit;
  line-height: inherit;
}
/* Only the direct label sibling under .stats-strip__item gets the small style. */
.stats-strip__item > span { color: var(--ink-3, #6b7280); font-size: 12.5px; line-height: 1.3; font-weight: 500; }
@media (max-width: 768px) {
  .stats-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stats-strip__item { min-height: 80px; padding: 14px 10px; }
  .stats-strip__item strong { font-size: 22px; }
  .stats-strip__item > span { font-size: 12px; }
}
@media (max-width: 480px) {
  .stats-strip__item strong { font-size: 20px; }
}

/* ===== Footer legal grid ===== */
.footer__legal { display: flex; flex-direction: column; gap: 4px; }
.footer__icp { font-size: 12px; color: var(--ink-3, #6b7280); }
.footer__legal-links { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
.footer__legal-links a { color: var(--ink-3, #6b7280); }
.footer__legal-links a:hover { color: var(--gold, #F5B824); }
.footer__bottom-inner { flex-wrap: wrap; gap: 12px; }
.footer__warn { width: 100%; font-size: 12px; color: var(--ink-3, #6b7280); line-height: 1.6; }

/* Sparkline auto-themes via stroke set inline; ensure container is theme-safe */
.mini-spark, .hc-spark svg { display: block; }

/* ===== Input helpers (FA.input) ===== */
input[aria-invalid="true"] {
  border-color: var(--down, #F6465D) !important;
  box-shadow: 0 0 0 1px rgba(246, 70, 93, 0.18);
}
.fa-pct-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.fa-pct-btn {
  appearance: none;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--card, transparent);
  color: var(--ink-2, #374151);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fa-pct-btn:hover {
  border-color: var(--gold, #F5B824);
  color: var(--gold, #F5B824);
}
.fa-pct-btn:active { transform: translateY(1px); }

/* ===== Perf: image CLS guards ===== */
img[loading="lazy"] { background: transparent; }
img:not([width]):not([height]) { aspect-ratio: attr(data-aspect); }

/* Content-visibility for very long, off-screen sections — opt-in via .cv-auto */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* ===== Settings page (settings.html) — production-grade exchange polish ===== */
.set-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}
.set-icon--lg { width: 22px; height: 22px; flex-basis: 22px; }
.set-icon--sm { width: 14px; height: 14px; flex-basis: 14px; }

.set-page-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 24px; font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.set-page-title .set-icon { width: 22px; height: 22px; color: var(--gold); }

.set-user-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  margin: 16px 0 22px;
  flex-wrap: wrap;
}
.set-user-card__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
  color: #111; background: var(--gold);
  flex: 0 0 48px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.set-user-card__meta { flex: 1 1 200px; min-width: 0; }
.set-user-card__email {
  font-weight: 700; font-size: 15px;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  word-break: break-all;
}
.set-user-card__badges {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.set-user-card__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; line-height: 1; padding: 5px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink-2, var(--ink));
  font-weight: 600;
}
.set-user-card__badge--gold {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold-dark, var(--gold));
}
.set-user-card__badge--ok {
  background: rgba(46,160,67,0.08);
  border-color: rgba(46,160,67,0.4);
  color: var(--up);
}
.set-user-card__logout {
  flex: 0 0 auto;
  white-space: nowrap;
}

.set-section-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-3, var(--muted));
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  line-height: 1;
}
.set-section-status--ok {
  color: var(--up);
  background: rgba(46,160,67,0.08);
  border-color: rgba(46,160,67,0.3);
}
.set-section-status--warn {
  color: var(--gold-dark, var(--gold));
  background: var(--gold-soft);
  border-color: var(--gold);
}
.set-section-status--off {
  color: var(--ink-3, var(--muted));
}

.set-section-h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 18px; font-weight: 700;
  margin: 0 0 6px;
}

/* danger zone header tint */
.set-danger-h2 { color: var(--down); }
.set-danger-h2 .set-icon { color: var(--down); }

/* details summary marker hide (we use our own caret) */
details.set-details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
details.set-details > summary::-webkit-details-marker { display: none; }
details.set-details > summary::marker { content: ''; }

@media (max-width: 640px) {
  .set-section-h2 { font-size: 16px; }
  .set-page-title { font-size: 21px; }
  .set-user-card__email { font-size: 14px; }
}

/* ============================================================
   Mobile responsive QA fixes — covers SE 320 / 12 mini 375 /
   14 Pro Max 414 / iPad mini 768. Identified via
   tests/responsive-smoke.node.js. Touch targets >= 44px via
   padding (not height) where possible; input font-size >= 16px
   to suppress iOS auto-zoom; horizontal overflow fixes.
   ============================================================ */

/* ---- Tabs / pair-cat / mk-filter / mode-pill touch targets ---- */
@media (max-width: 768px) {
  .tab {
    min-height: 44px !important;
    height: auto !important;
    padding: 11px 16px !important;
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box;
  }
  .pair-cat,
  .mk-filter {
    min-height: 44px !important;
    height: auto !important;
    padding-top: 11px !important; padding-bottom: 11px !important;
    box-sizing: border-box;
  }
  .mode-pill {
    align-items: center;
    padding: 4px;
  }
  .mode-pill button {
    min-height: 44px !important;
    padding: 11px 12px !important;
    line-height: 1.1 !important;
    position: relative;
    box-sizing: border-box;
  }
  /* Invisible hit-slop extends real click target to 44px on touch */
  .mode-pill button::after {
    content: '';
    position: absolute; left: 0; right: 0;
    top: -6px; bottom: -6px;
  }
  /* Password-eye / field-action button — expand hit region */
  .field__eye, .field__send {
    min-height: 44px !important;
    height: 44px !important;
    padding: 12px 10px !important;
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Header icon-btn — bump to 44 */
  .header__actions .icon-btn,
  .header .icon-btn {
    width: 44px !important; height: 44px !important;
    min-width: 44px; min-height: 44px;
  }
  /* Any standalone icon-btn outside header (e.g. withdraw QR scan trigger).
     Use flex-shrink:0 so parent flex containers don't squeeze it below 44. */
  .icon-btn {
    min-width: 44px !important; min-height: 44px !important;
    flex: 0 0 44px !important;
  }
  .icon-btn:not(.icon-btn--menu) {
    width: 44px !important; height: 44px !important;
  }
  /* Balance-mask 'eye' button used as inline "隐藏余额" toggle */
  button.fa-mask-btn,
  button[data-mask-btn],
  [data-mask-toggle],
  button[aria-label*="隐藏"],
  button[aria-label*="显示余额"] {
    min-height: 44px !important;
    padding-top: 11px !important; padding-bottom: 11px !important;
    line-height: 1.2 !important;
  }

  /* Trade-form action buttons (.okt) — 32-tall pills become 44 */
  .okt {
    min-height: 44px !important;
    padding-top: 11px !important; padding-bottom: 11px !important;
  }

  /* Generic 'small pill' buttons on trade/markets/index that don't share
     a single class. We target buttons inside common trade widgets so
     they reach the 44px touch target. Visible padding stays mild via
     box-sizing border-box + line-height adjustment. */
  .pair-cat-tabs button,
  .mk-filter-bar button,
  .timeframe-tabs button,
  .tf-tab,
  .hot-tabs button,
  .ob-overlay__btn {
    min-height: 44px;
    padding-top: 11px; padding-bottom: 11px;
    box-sizing: border-box;
  }

  /* Favorite-star toggles in markets table */
  .star, .market-table .star {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px;
    box-sizing: border-box;
  }

  /* trade.html inline-styled pair-meta buttons (price alert / fav) — the
     inline style sets padding:4px 10px which is too small on touch.
     We override with !important and equal padding so the existing
     border-radius / gold accent are preserved. */
  #trade-alert-btn,
  #trade-fav-btn {
    padding: 11px 12px !important;
    min-height: 44px !important;
    line-height: 1.1 !important;
  }
  /* trade.html chart-type select (#chart-type-sel) and book-grouping
     select (#book-grouping) carry inline font-size: 11-12px. Bump
     them to >= 16px to prevent iOS auto-zoom when focused. */
  #chart-type-sel,
  #book-grouping {
    font-size: 16px !important;
    padding: 6px 10px !important;
  }
  /* Onboarding overlay action buttons (trade.html #fa-ob-dismiss /
     index.html #fa-onboard-skip / #fa-onboard-go etc) have small
     inline padding. Promote to 44px via min-height. */
  #fa-ob-dismiss,
  #fa-onboard-skip,
  #fa-onboard-go,
  #fa-ob-close,
  #fa-onboard-close,
  [id^="fa-ob-"][type="button"],
  [id^="fa-onboard-"] {
    min-height: 44px !important;
    padding-top: 10px !important; padding-bottom: 10px !important;
  }
  /* Timeframe buttons (1m / 5m / 15m / 1h ...) in trade-chart toolbar */
  .tf-btn,
  [data-tf],
  [data-bar],
  .intervals button,
  .chart-toolbar button,
  .trade-chart__tfs button {
    min-height: 44px !important;
    padding-top: 11px !important; padding-bottom: 11px !important;
  }

  /* trade form quick-percent / limit-market toggles */
  .trade-percent button {
    min-height: 44px !important;
    padding: 12px 0 !important;
    line-height: 1.1 !important;
  }
  .okt {
    min-height: 44px !important;
    padding: 12px 12px !important;
    line-height: 1.2 !important;
  }
  /* Pagination buttons (markets / orders) */
  .fa-pager__btn,
  .fa-pager__num {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
  }
  /* Order-book panel tabs (订单簿 / 深度图) */
  .book-tab {
    min-height: 44px !important;
    padding: 11px 12px !important;
    line-height: 1.1 !important;
  }

  /* Token page chips & meta buttons (token.html) */
  .tk-pill,
  .tk-hero__meta button {
    min-height: 44px !important;
    padding: 11px 14px !important;
    line-height: 1.1 !important;
  }
  /* Watchlist group chips */
  .wl-chip,
  .wl-chip__del {
    min-height: 44px !important;
    padding-top: 11px !important; padding-bottom: 11px !important;
  }
  .wl-chip__del {
    min-width: 44px !important;
    padding-left: 10px !important; padding-right: 10px !important;
  }
  /* Watchlist toolbar buttons */
  .wl-btn {
    min-height: 44px !important;
    height: auto !important;
    padding: 11px 16px !important;
  }
  /* Watchlist card icon buttons & star */
  .wl-card__star,
  .wl-card__btn,
  .wl-card__btn--icon {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }
  /* Watchlist sort/order toggle row (button.active/inactive pair) */
  .wl-sort button,
  .wl-tabs button,
  .wl-toolbar button {
    min-height: 44px !important;
    padding-top: 11px !important; padding-bottom: 11px !important;
  }
}

/* ---- Input font-size >= 16px (anti iOS auto-zoom) ---- */
@media (max-width: 768px) {
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px !important;
  }
  /* lang-toggle keeps compact visual but accessible font-size */
  .lang-toggle {
    font-size: 16px !important;
    height: 40px;
    padding: 0 24px 0 10px;
  }
}

/* ---- Header overflow on small phones ---- */
@media (max-width: 480px) {
  /* Hide register/primary CTA in header; users access via hamburger drawer */
  .header__actions .btn--primary { display: none; }
  /* Hide CEX/DEX mode-pill in header on tiny screens (still reachable via drawer) */
  .header .header__actions .mode-pill { display: none; }
  /* Hide language toggle in header; settings page exposes language */
  .header .header__actions .lang-toggle { display: none; }
  /* Tighten header spacing */
  .header__inner { gap: 8px; padding: 0 10px; }
  .header__actions { gap: 4px; }
  /* Logo a touch smaller to free room */
  .header .logo { font-size: 20px; }
  /* Auth pages (login / register / forgot / 404) use a separate
     .auth-header__right cluster — same treatment as the main header */
  .auth-header { padding: 14px 14px; }
  .auth-header__right { gap: 6px; font-size: 12px; }
  /* Hide the "还没有账号?" intro text and language toggle on small
     phones — the inline link + theme button still convey the CTA */
  .auth-header__right > span,
  .auth-header__right .lang-toggle { display: none; }
}

/* ---- Hard cap for fixed-position mobile tabbar so a body wider than
       the viewport (caused by transient injected widgets) never makes
       the tabbar itself overflow ---- */
@media (max-width: 768px) {
  .fa-mobile-tabbar {
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .fa-mobile-tabbar__item {
    min-width: 0; /* allow flex children to shrink below content size */
  }
  .fa-mobile-tabbar__label {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* ---- Auth shell overflow on SE 320 (auth-card padding 24 + side gap) ---- */
@media (max-width: 480px) {
  /* Prevent auth-shell main from forcing a horizontal scroll when an
     inner card hits its content-min-size on tiny phones */
  .auth-shell {
    max-width: 100%;
    min-width: 0;
  }
}
@media (max-width: 360px) {
  .auth-shell {
    padding-left: 12px; padding-right: 12px;
  }
  .auth-card,
  .auth-side {
    padding: 18px 14px;
    min-width: 0;
  }
}

/* ---- Footer brand logo size cap on small screens ---- */
@media (max-width: 768px) {
  .footer .logo--light {
    font-size: 22px;
    line-height: 1.05;
  }
  /* gradient text-fill on logo__mark causes vertical bleed; clip to text */
  .footer .logo--light .logo__mark,
  .footer .logo--light .logo__text {
    line-height: 1;
  }
}

/* ---- Onboarding overlay text wrap (trade.html #fa-ob-title) ---- */
@media (max-width: 480px) {
  #fa-ob-title, #fa-ob-desc {
    max-width: calc(100vw - 32px);
    word-break: break-word;
  }
}

/* ---- iOS 100vh -> dynamic viewport for full-screen overlays ---- */
@supports (height: 100dvh) {
  .fa-modal-overlay { min-height: 100dvh; }
}

/* =============================================================
   Performance: CLS prevention + lazy paint cost reduction
   ============================================================= */

/* aspect-ratio fallback for coin logos / sparkline / hero visuals.
   width/height are already set on .coin (36px square) and .spark (height:80px)
   so this section ensures intrinsic sizing if a .coin loses its inline size. */
.coin,
.coin--sm,
.coin--lg,
.coin--xl { aspect-ratio: 1 / 1; }

/* Sparkline container: keep aspect-ratio stable while SVG loads */
.spark { aspect-ratio: 300 / 80; }

/* Hero visual block: reserves space, prevents below-fold reflow */
.hero__visual { aspect-ratio: 1 / 1; }

/* Hero img / coin imgs: explicit object-fit + aspect ratio */
.coin__img { aspect-ratio: 1 / 1; }

/* Content visibility on long market tables — paints only when near viewport.
   contain-intrinsic-size hint keeps scrollbar height correct. */
.market-table tbody,
#orders-tbody,
#hist-tbody,
#mk-tbody,
#wl-tbody,
.data-table tbody,
#nt-list,
#wl-cards {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* News / portfolio long lists below the fold also benefit.
   ticker__track intentionally excluded — marquee animation needs full layout. */
.mk-news-grid,
#mk-news-grid,
.news-aggregator-list {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* Skeleton placeholder to mitigate CLS for live-updating widgets */
[data-fa-live]:empty::before,
[data-fa-stat]:empty::before {
  content: '';
  display: inline-block;
  width: 3em;
  height: 0.9em;
  vertical-align: middle;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(127,127,127,0.10) 0%,
    rgba(127,127,127,0.22) 50%,
    rgba(127,127,127,0.10) 100%);
  background-size: 200% 100%;
  animation: fa-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes fa-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-fa-live]:empty::before,
  [data-fa-stat]:empty::before { animation: none; }
}

/* Make sure font swap doesn't blow up monospaced number columns.
   Inter has tabular figures via OpenType, opt in globally. */
.market-table .price,
.card-float__price,
.po__big,
[data-fa-live] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CLS isolation: contain layout shifts inside known dynamic panels.
   These panels render placeholders -> real content, which used to push the
   page. `contain: layout` keeps reflow inside the box so the rest of the
   viewport stays put.
   ============================================================ */
.trade-main,
.book-panel,
.trades-panel,
.pair-sidebar,
.market-table tbody,
.header__actions,
.hero__signup,
.hero__trust,
.hero__visual {
  contain: layout style;
}

/* Reserve min-width on header action cluster so i18n text swap
   (e.g. "Login" -> "登录") doesn't reflow the row mid-paint.
   The min-width matches the rendered translated width in zh-CN. */
.header__actions { min-width: 240px; justify-content: flex-end; }
.auth-header__right { min-width: 200px; justify-content: flex-end; }
@media (max-width: 720px) {
  .header__actions { min-width: 0; }
  .auth-header__right { min-width: 0; }
}
.lang-toggle { min-width: 72px; }

/* Hero copy block: lock min-height so multi-line i18n swap doesn't push */
.hero__copy { min-height: 380px; }
.hero__sub { min-height: 48px; }
.hero__title { min-height: 1.1em; }
@media (max-width: 720px) {
  .hero__copy { min-height: 0; }
}

/* ============================================================
   News banner CLS fix.
   news-banner.js does `body.insertBefore(banner, body.firstChild)` AFTER
   load fires, which pushes every below-fold element down and triggers a
   large layout-shift. Pinning the banner to the bottom of the viewport
   keeps it visible without disturbing the initial layout. Behaviour
   (dismiss / link / theme) is untouched.
   ============================================================ */
body > .fa-news-banner:first-child {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
/* Reserve space at the bottom of the page so fixed banner never overlaps
   final CTA / footer when present. */
body:has(> .fa-news-banner:first-child) {
  padding-bottom: 64px;
}

/* ============================================================
   Error banner + skeleton shimmer polish — paired with
   FAa11y.errorState / FAa11y.skeletonList in a11y-helpers.js.
   ============================================================ */
.empty-state--error.empty-state--card,
.empty-state--error.empty-state--inline {
  background: linear-gradient(180deg, rgba(248,73,96,0.08), rgba(248,73,96,0.03));
  border: 1px solid rgba(248,73,96,0.32);
  border-radius: 12px;
  color: var(--ink-2);
}
.empty-state--error .empty-state__title { color: var(--down); }
.empty-state--error .empty-state__actions .btn--primary {
  background: var(--down);
  color: #fff;
  border-color: var(--down);
}
.empty-state--error .empty-state__actions .btn--primary:hover {
  background: #d83b3b;
  border-color: #d83b3b;
}
/* Skeleton bar — uses currentColor-friendly shimmer that already exists. */
.skeleton-bar {
  display: inline-block;
  height: 12px;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--line) 0%,
    var(--bg-soft) 50%,
    var(--line) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  /* Reserve space so the loading state doesn't shift layout (CLS guard). */
  min-height: 12px;
  vertical-align: middle;
}
.skeleton-bar + .skeleton-bar { margin-left: 8px; }
.skeleton-bar--sm { height: 10px; }
.skeleton-bar--md { height: 12px; }
.skeleton-bar--lg { height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .skeleton-bar { animation: none; background: var(--line); }
}

/* ============================================================
   Unified Micro-interactions (inputs / buttons / links)
   Consistent focus rings, hover lift, loading + disabled states.
   ============================================================ */
input, textarea, select {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, outline-color 0.18s ease;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--gold, #F5B824);
  outline-offset: 2px;
}

button, .btn {
  transition: background-color 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
button:not(:disabled):hover,
.btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
button:not(:disabled):active,
.btn:not(:disabled):active {
  transform: none;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

button:disabled,
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--bg-soft, #EAECEF) !important;
  color: var(--ink-3, #848E9C) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.7;
}

.btn--loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}
.btn--loading::after {
  content: '';
  width: 12px; height: 12px;
  margin-left: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  display: inline-block;
  vertical-align: -2px;
  animation: fa-spin 0.8s linear infinite;
}

a {
  transition: color 0.18s ease, opacity 0.18s ease;
}
a:hover {
  text-decoration: underline;
  color: var(--gold, #F5B824);
}

@media (prefers-reduced-motion: reduce) {
  input, textarea, select,
  button, .btn, a {
    transition: none !important;
  }
  button:not(:disabled):hover,
  .btn:not(:disabled):hover {
    transform: none !important;
  }
  .btn--loading::after {
    animation: none !important;
  }
}

/* ============================================================
   Table interactions — unified hover / sticky / numerics / responsive
   Applies to .market-table, .ord-tbl, .hist-table, generic .data-table
   ============================================================ */
.market-table, .ord-tbl, .hist-table, .data-table {
  font-variant-numeric: tabular-nums;
}
.market-table tbody td,
.ord-tbl tbody td,
.hist-table tbody td,
.data-table tbody td {
  font-variant-numeric: tabular-nums;
}
.ord-tbl, .hist-table, .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ord-tbl thead th,
.hist-table thead th,
.data-table thead th {
  text-align: left;
  padding: 12px 16px;
  color: var(--ink-3);
  font-weight: 600;
  font-size: 13px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.ord-tbl tbody td,
.hist-table tbody td,
.data-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.ord-tbl tbody tr,
.hist-table tbody tr,
.data-table tbody tr {
  transition: background var(--transition);
}
.ord-tbl tbody tr:hover,
.hist-table tbody tr:hover,
.data-table tbody tr:hover {
  background: var(--bg-soft);
}
.ord-tbl tbody tr:last-child td,
.hist-table tbody tr:last-child td,
.data-table tbody tr:last-child td { border-bottom: 0; }

/* Row inline action buttons — fade in on row hover (site-wide) */
.market-table tbody tr .row-action,
.market-table tbody tr .act-btn,
.market-table tbody tr .row-action-btn,
.ord-tbl tbody tr .row-action,
.ord-tbl tbody tr .act-btn,
.ord-tbl tbody tr .row-action-btn,
.hist-table tbody tr .row-action,
.hist-table tbody tr .act-btn,
.hist-table tbody tr .row-action-btn,
.data-table tbody tr .row-action,
.data-table tbody tr .act-btn,
.data-table tbody tr .row-action-btn {
  opacity: 0;
  transition: opacity var(--transition);
}
.market-table tbody tr:hover .row-action,
.market-table tbody tr:hover .act-btn,
.market-table tbody tr:hover .row-action-btn,
.market-table tbody tr:focus-within .row-action,
.market-table tbody tr:focus-within .act-btn,
.market-table tbody tr:focus-within .row-action-btn,
.ord-tbl tbody tr:hover .row-action,
.ord-tbl tbody tr:hover .act-btn,
.ord-tbl tbody tr:hover .row-action-btn,
.ord-tbl tbody tr:focus-within .row-action,
.ord-tbl tbody tr:focus-within .act-btn,
.ord-tbl tbody tr:focus-within .row-action-btn,
.hist-table tbody tr:hover .row-action,
.hist-table tbody tr:hover .act-btn,
.hist-table tbody tr:hover .row-action-btn,
.hist-table tbody tr:focus-within .row-action,
.hist-table tbody tr:focus-within .act-btn,
.hist-table tbody tr:focus-within .row-action-btn,
.data-table tbody tr:hover .row-action,
.data-table tbody tr:hover .act-btn,
.data-table tbody tr:hover .row-action-btn,
.data-table tbody tr:focus-within .row-action,
.data-table tbody tr:focus-within .act-btn,
.data-table tbody tr:focus-within .row-action-btn {
  opacity: 1;
}

/* Sticky thead inside scrollable .data-card containers */
.data-card { position: relative; }
.data-card .market-table thead th,
.data-card .ord-tbl thead th,
.data-card .hist-table thead th,
.data-card .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-soft);
}

/* Keyboard focus affordance for interactive rows */
.market-table tbody tr:focus-visible,
.ord-tbl tbody tr:focus-visible,
.hist-table tbody tr:focus-visible,
.data-table tbody tr:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* Responsive: collapse rows to grid cards on ≤640 (uses data-label) */
@media (max-width: 640px) {
  .market-table, .ord-tbl, .hist-table, .data-table,
  .market-table tbody, .ord-tbl tbody, .hist-table tbody, .data-table tbody,
  .market-table tr, .ord-tbl tr, .hist-table tr, .data-table tr,
  .market-table td, .ord-tbl td, .hist-table td, .data-table td {
    display: block;
  }
  .market-table thead,
  .ord-tbl thead,
  .hist-table thead,
  .data-table thead { display: none; }
  .market-table tbody tr,
  .ord-tbl tbody tr,
  .hist-table tbody tr,
  .data-table tbody tr {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px;
    background: var(--bg);
  }
  .market-table tbody td,
  .ord-tbl tbody td,
  .hist-table tbody td,
  .data-table tbody td {
    padding: 4px 0;
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .market-table tbody td[data-label]::before,
  .ord-tbl tbody td[data-label]::before,
  .hist-table tbody td[data-label]::before,
  .data-table tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 600;
  }
  /* Row actions always visible on touch — no hover available */
  .market-table tbody tr .row-action,
  .market-table tbody tr .act-btn,
  .market-table tbody tr .row-action-btn,
  .ord-tbl tbody tr .row-action,
  .ord-tbl tbody tr .act-btn,
  .ord-tbl tbody tr .row-action-btn,
  .hist-table tbody tr .row-action,
  .hist-table tbody tr .act-btn,
  .hist-table tbody tr .row-action-btn,
  .data-table tbody tr .row-action,
  .data-table tbody tr .act-btn,
  .data-table tbody tr .row-action-btn { opacity: 1; }
}

/* ============================================================
   List skeleton fade-in / WS reconnect banner / CDN retry banner
   Paired with FAa11y.fadeInOnLoad / wsStatusBanner / cdnRetry.
   ============================================================ */
.fa-fade-in { animation: faFadeIn 150ms ease-out both; }
@keyframes faFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-fade-in { animation: none; }
}

.fa-ws-banner {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 8px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(245, 184, 36, 0.10);
  color: var(--gold-dark, #b88500);
  border: 1px solid rgba(245, 184, 36, 0.35);
}
.fa-ws-banner.is-visible { display: inline-flex; }
.fa-ws-banner__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold, #F5B824);
  animation: livedot 1s infinite;
}
.fa-ws-banner[data-state="offline"] {
  background: rgba(248,73,96,0.10);
  color: var(--down);
  border-color: rgba(248,73,96,0.32);
}
.fa-ws-banner[data-state="offline"] .fa-ws-banner__dot { background: var(--down); animation: none; }

.fa-cdn-error {
  display: none;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  margin: 12px 0;
  border-radius: 10px;
  font-size: 13px;
  background: rgba(248,73,96,0.08);
  color: var(--down);
  border: 1px solid rgba(248,73,96,0.32);
  cursor: pointer;
}
.fa-cdn-error.is-visible { display: inline-flex; }
.fa-cdn-error:hover { background: rgba(248,73,96,0.14); }
.fa-cdn-error__retry { font-weight: 700; text-decoration: underline; }

/* ============================================================
   OKX-style mobile home (index.html only, <= 767px)
   Replaces .hero + .portfolio-overview + .hot-cards + .ticker-section
   on small screens. Desktop layout is untouched.
   ============================================================ */
.okx-m { display: none; }
.sq-mobile-search { display: none; }

@media (max-width: 767px) {
  /* Hide desktop hero blocks on mobile, show OKX-style block.
     Also hide every remaining desktop home section + announcement bar +
     footer + onboarding banner + 桌面顶部 header(后者就是用户看到的
     "上面一大片黑色空白":68px sticky header 在 dark theme 下变成黑色块,
     底部 tabbar 已经承担导航,顶部 header 在移动端完全多余). */
  body > .header,
  .hero,
  .portfolio-overview,
  .ticker-section,
  .hot-cards,
  body > .topbar,
  main > section.markets,
  main > section.products,
  main > section.stats-strip,
  main > section.trust,
  main > section.download,
  main > section.faq,
  body > footer.footer,
  #fa-onboarding-banner { display: none !important; }

  /* 头部 header 隐藏后,各页面自己的 shell 负责 safe-area-inset-top buffer。
     绝对不能在 <main> / #main-content 加全局 padding,否则会和 shell 自己的
     safe-area 双倍叠加 — 那就是用户看到"大量黑色空白"的根因(44px main +
     44px okx-m__inner = 88-96px 真空)。 */
  body > #main-content,
  body > main { padding-top: 0 !important; }

  .okx-m { display: block; background: var(--bg, #fff); }
  .okx-m__inner {
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 16px;
    display: flex; flex-direction: column; gap: 12px;
  }

  /* === markets.html: 没有 <main>,顶部 hero/widgets/sector 全 hidden,
        只剩 .mk-table-section 直接在 body 下面 — 给它注入 safe-area buffer
        + 清掉无条件的 36px margin-top(在 dark theme 下显示为黑条) === */
  .mk-table-section {
    margin-top: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  }

  /* === trade.html / futures.html: .okx-top-cats 是 sticky 顶部 tab,
        负责自己的 safe-area buffer。 === */
  .okx-top-cats {
    padding-top: env(safe-area-inset-top, 0px);
    top: 0;
  }

  /* === account.html / wallet / deposit / withdraw / transfer:
        顶部 24px,和首页 .okx-m__inner / 行情 .mk-table-section / 广场 .sq-shell 一致 */
  .account-shell,
  .wallet-shell,
  main.account-shell,
  main.wallet-shell,
  main.container.account-shell,
  main.container.wallet-shell {
    padding-top: 24px !important;
  }
  /* 资产页 .acct-m-topbar 内的 clock 圆圈 (36×36) 会撑高 topbar,导致
     "总资产估值"文字上方有 ~11px 额外留白。把 clock 绝对定位脱离 flow,
     topbar 只由文字决定高度,顶部总留白 = 24px。 */
  .acct-m-topbar {
    position: relative !important;
    padding: 0 2px !important;
    min-height: 0 !important;
  }
  .acct-m-clock {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
  }
  /* 兜底:全局 section { padding: 60px 0 } 不要影响这些 mobile shell 内的 section */
  .acct-mobile,
  .acct-desktop,
  .account-shell section,
  .wallet-shell section,
  .auth-shell section,
  .tk-shell section,
  .c2c-shell section,
  .kyc-shell section,
  .trade-shell section,
  .sq-shell section,
  .mk-table-section,
  .okx-m {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* === login.html / register.html: 用 <header class="auth-header">,
        全局 body > .header 不命中 — 单独隐藏,给 .auth-shell 加 safe-area。
        顶部留白和首页 (.okx-m__inner) 一致 24px。 === */
  body > .auth-header { display: none !important; }
  .auth-shell {
    padding-top: 24px !important;
  }

  /* === token.html / c2c.html / kyc.html / 其他 shell — 通用 fallback:
        任何直接在 body 下的 main / section 顶级 shell 都给一份 safe-area buffer。
        这是个非破坏性的兜底,如果页面 shell 自己已经处理过 padding-top,
        不会和其他规则冲突。 === */
  .tk-shell,
  .c2c-shell,
  .kyc-shell {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  }

  /* Search — full width, 22px radius, #f5f5f5 bg, 14px padding */
  .okx-m-search {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: #f5f5f5;
    border-radius: 22px;
    color: var(--ink-2, #707a8a);
    text-decoration: none;
    font-size: 14px;
  }
  .okx-m-search__ic { color: var(--ink-2, #707a8a); flex-shrink: 0; }
  .okx-m-search__ph { flex: 1; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2, #707a8a); font-weight: 500; }
  .okx-m-search__fire {
    display: inline-flex; align-items: center; justify-content: center;
    background: #f0b90b;
    color: #1e2329; font-size: 10px; font-weight: 800;
    padding: 1px 5px; border-radius: 4px; letter-spacing: 0.3px;
  }
  .okx-m-search__qr { color: var(--ink-2, #707a8a); flex-shrink: 0; }

  /* Asset card — no background, prominent 32px tabular total */
  .okx-m-asset {
    display: flex; align-items: stretch; justify-content: space-between;
    gap: 12px;
    padding: 4px 2px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .okx-m-asset__head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .okx-m-asset__label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 15px; color: var(--ink-2, #707a8a); font-weight: 500;
  }
  .okx-m-asset__eye {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--ink-2, #707a8a); display: inline-flex; align-items: center;
  }
  .okx-m-asset__big {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 32px; font-weight: 700; color: var(--ink, #1e2329);
    letter-spacing: -0.02em; line-height: 1.15;
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: baseline; gap: 6px;
    white-space: nowrap;
  }
  .okx-m-asset__unit { font-size: 13px; font-weight: 500; color: var(--ink-2, #707a8a); }
  .okx-m-asset__sub {
    font-size: 14px; font-weight: 500;
    color: var(--ink-2, #707a8a);
    font-variant-numeric: tabular-nums;
  }
  .okx-m-asset__sub.up { color: var(--up, #02C076); font-weight: 600; }
  .okx-m-asset__sub.down { color: var(--down, #F84960); font-weight: 600; }
  .okx-m-asset__sub--muted { color: var(--ink-2, #707a8a); font-weight: 500; }
  .okx-m-asset__spark {
    flex-shrink: 0; width: 96px; align-self: center;
    position: relative;
  }
  .okx-m-asset__spark svg { width: 100%; height: 36px; display: block; }
  .okx-m-asset__sparklbl {
    position: absolute; right: 0; bottom: -14px;
    font-size: 10px; color: var(--ink-3, #b0b6c1);
    font-variant-numeric: tabular-nums;
  }

  /* CTA buttons — 999px radius, 14px padding, brand green */
  .okx-m-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .okx-m-cta__btn {
    display: flex; align-items: center; justify-content: center;
    padding: 14px 0;
    border-radius: 999px;
    font-size: 16px; font-weight: 700;
    text-decoration: none;
  }
  .okx-m-cta__btn--primary { background: #1b6f3e; color: #fff; }
  .okx-m-cta__btn--primary:active { background: #155730; }
  .okx-m-cta__btn--ghost {
    background: #f5f5f5;
    color: var(--ink, #1e2329);
    border: 0;
  }
  .okx-m-cta__btn--ghost:active { background: #ececec; }

  /* Banner — 14px radius, 14px padding, light surface */
  .okx-m-banner {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    background: #f8f8f8;
    border-radius: 14px;
    text-decoration: none;
    color: var(--ink, #1e2329);
    overflow: hidden;
  }
  .okx-m-banner__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .okx-m-banner__txt small { font-size: 11px; color: var(--ink-2, #707a8a); font-weight: 500; }
  .okx-m-banner__txt strong { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink, #1e2329); }
  .okx-m-banner__art { flex-shrink: 0; width: 64px; }
  .okx-m-banner__art svg { width: 100%; height: 40px; display: block; }
  .okx-m-banner__pg {
    position: absolute; right: 10px; bottom: 8px;
    font-size: 10px; font-weight: 600;
    color: var(--ink-2, #707a8a);
    background: rgba(0,0,0,0.04);
    padding: 2px 7px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
  }

  /* Tabs — horizontal scroll pills, dark active pill */
  .okx-m-tabs {
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 8px -16px 0;
    padding: 0 16px;
    scrollbar-width: none;
  }
  .okx-m-tabs::-webkit-scrollbar { display: none; }
  .okx-m-tab {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2, #707a8a);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .okx-m-tab.is-active {
    background: #1e2329;
    color: #fff;
    font-weight: 700;
  }
  .okx-m-tab--more { color: var(--ink-2, #707a8a); font-size: 18px; padding: 0 10px; }

  /* Sub-tabs */
  .okx-m-subtabs {
    display: flex; align-items: center; gap: 4px;
    margin-top: 2px;
  }
  .okx-m-subtab {
    background: transparent;
    border: 0;
    padding: 4px 10px 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2, #707a8a);
    cursor: pointer;
  }
  .okx-m-subtab.is-active { color: var(--ink, #1e2329); font-weight: 700; }

  /* Coin list — 10px row padding, 36px logo, tighter typography */
  .okx-m-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
  }
  .okx-m-row { border-bottom: 0; }
  .okx-m-row + .okx-m-row { border-top: 1px solid var(--line, #eef0f3); }
  .okx-m-row__a {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    color: var(--ink, #1e2329);
  }
  .okx-m-row__ico {
    grid-row: 1 / span 2;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f5f5f5;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
  }
  .okx-m-row__ico img { width: 36px; height: 36px; display: block; border-radius: 50%; }
  .okx-m-row__icofb {
    display: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--gold, #f0b90b);
    color: #1e2329;
    font-weight: 700; font-size: 13px;
    align-items: center; justify-content: center;
  }
  .okx-m-row__name {
    grid-column: 2;
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0;
  }
  .okx-m-row__name strong {
    font-size: 15px; font-weight: 700; color: var(--ink, #1e2329);
    line-height: 1.2;
  }
  .okx-m-row__name strong small {
    font-size: 11px; color: var(--ink-2, #707a8a); font-weight: 500;
  }
  .okx-m-row__name > small {
    font-size: 11px; color: var(--ink-2, #707a8a);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
  }
  .okx-m-row__price {
    grid-column: 3; grid-row: 1;
    text-align: right;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px; font-weight: 600; color: var(--ink, #1e2329);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .okx-m-row__chg {
    grid-column: 3; grid-row: 2;
    justify-self: end;
    min-width: 62px;
    text-align: center;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
  }
  .okx-m-row__chg.up { background: var(--up, #02C076); color: #fff; }
  .okx-m-row__chg.down { background: var(--down, #F84960); color: #fff; }

  .okx-m-list__skel {
    height: 68px;
    position: relative; overflow: hidden;
  }
  .okx-m-list__skel span {
    position: absolute; inset: 14px;
    background: linear-gradient(90deg, #f5f5f5 0%, #fafafa 50%, #f5f5f5 100%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: okxSkel 1.2s ease-in-out infinite;
  }
  @keyframes okxSkel {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
  }
  .okx-m-more {
    display: block;
    text-align: center;
    padding: 16px 0 4px;
    font-size: 13px; font-weight: 500;
    color: var(--ink-2, #707a8a);
    text-decoration: none;
  }

  /* Dark theme tuning */
  [data-theme="dark"] .okx-m-search { background: #1e2329; color: var(--ink-3, #b0b6c1); }
  [data-theme="dark"] .okx-m-search__ic,
  [data-theme="dark"] .okx-m-search__ph,
  [data-theme="dark"] .okx-m-search__qr { color: var(--ink-3, #b0b6c1); }
  [data-theme="dark"] .okx-m-asset { background: transparent; border: 0; }
  [data-theme="dark"] .okx-m-asset__big { color: #f0f0f0; }
  [data-theme="dark"] .okx-m-cta__btn--primary { background: #0d8a4a; color: #fff; }
  [data-theme="dark"] .okx-m-cta__btn--ghost { background: #1e2329; border: 0; color: #f0f0f0; }
  [data-theme="dark"] .okx-m-banner { background: #1e2329; color: #f0f0f0; }
  [data-theme="dark"] .okx-m-banner__txt strong { color: #f0f0f0; }
  [data-theme="dark"] .okx-m-tab { color: var(--ink-3, #b0b6c1); }
  [data-theme="dark"] .okx-m-tab.is-active { background: #f0f0f0; color: #1e2329; }
  [data-theme="dark"] .okx-m-row__ico { background: #1e2329; }
  [data-theme="dark"] .okx-m-row__name strong { color: #f0f0f0; }
  [data-theme="dark"] .okx-m-row__price { color: #f0f0f0; }
  [data-theme="dark"] .okx-m-list__skel span {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
  }

  /* Tighten the top notice bar + header for OKX-feel */
  .topbar { font-size: 11px; padding: 4px 0; }

  /* ===== Mobile tabbar — raised center "交易" CTA =====
     market.js injects 5 items: 首页 / 行情 / 交易 / 广场 / 资产
     The 交易 item is marked with .is-center for the raised pill. */
  .fa-mobile-tabbar { padding-top: 4px; }
  .fa-mobile-tabbar__item.is-center {
    position: relative;
  }
  .fa-mobile-tabbar__item.is-center .fa-mobile-tabbar__icon {
    position: absolute;
    top: -22px;
    left: 50%; transform: translateX(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #1e2329;
    color: #fff;
    box-shadow: 0 6px 16px rgba(13,16,28,0.25);
    border: 4px solid var(--surface, #fff);
  }
  .fa-mobile-tabbar__item.is-center .fa-mobile-tabbar__icon .fa-ic {
    width: 22px; height: 22px;
    color: #fff;
  }
  .fa-mobile-tabbar__item.is-center .fa-mobile-tabbar__label {
    margin-top: 28px;
    color: var(--ink-2, #4b5563);
    font-weight: 700;
  }
  .fa-mobile-tabbar__item.is-center.is-active .fa-mobile-tabbar__icon {
    background: var(--gold, #F5B824);
  }
  .fa-mobile-tabbar__item.is-center.is-active .fa-mobile-tabbar__label {
    color: var(--gold, #F5B824);
  }
  [data-theme="dark"] .fa-mobile-tabbar__item.is-center .fa-mobile-tabbar__icon {
    background: #f1f3f6; color: #1e2329;
    border-color: var(--surface, #0B0E11);
  }
  [data-theme="dark"] .fa-mobile-tabbar__item.is-center .fa-mobile-tabbar__icon .fa-ic { color: #1e2329; }
}

/* ============================================================
   Account page · OKX-style mobile (<= 767px) layout
   桌面端保持原 7 桶 grid;移动端单列竖排:hero / 4 圆按钮 /
   组合 3 卡 / 代币列表。tabbar 由 market.js 自动注入。
   ============================================================ */
.acct-mobile { display: none; }
@media (max-width: 767px) {
  .acct-desktop { display: none !important; }
  .acct-mobile  { display: block; }

  /* container 紧贴左右边,移除默认 18px */
  .account-shell {
    padding-left: 12px;
    padding-right: 12px;
    max-width: 100%;
  }

  .acct-m-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 2px 12px;
  }
  .acct-m-topbar__title {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; color: var(--ink-2, #707A8A); font-weight: 500;
  }
  .acct-m-eye {
    background: transparent; border: 0; padding: 4px;
    color: var(--ink-3, #94929E); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
  }
  .acct-m-eye:hover { background: var(--bg-soft, rgba(0,0,0,0.04)); }
  .acct-m-clock {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    color: var(--ink, #1e2329); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .acct-m-clock:active { background: var(--bg-soft, rgba(0,0,0,0.05)); }

  /* Hero — 总资产 + 7d sparkline */
  .acct-m-hero {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 2px 2px 20px;
  }
  .acct-m-hero__left { flex: 1; min-width: 0; }
  .acct-m-hero__total {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 700; font-size: 32px; line-height: 1.15;
    color: var(--ink, #1e2329);
    letter-spacing: -0.02em;
  }
  .acct-m-hero__unit {
    font-size: 14px; font-weight: 500; color: var(--ink-2, #707A8A);
    letter-spacing: 0;
  }
  .acct-m-hero__caret {
    display: inline-flex; align-items: center;
    color: var(--ink-2, #707A8A); margin-left: 2px;
  }
  .acct-m-hero__pnl {
    margin-top: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    color: var(--up, #02C076);
    font-variant-numeric: tabular-nums;
  }
  .acct-m-hero__pnl.is-down { color: var(--down, #F84960); }
  .acct-m-hero__pnl svg { opacity: 0.85; }
  .acct-m-hero__spark {
    flex-shrink: 0; width: 120px; padding-top: 6px;
  }
  .acct-m-hero__spark svg { display: block; }

  /* 4 圆形快捷按钮 */
  .acct-m-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 4px 0 24px;
  }
  .acct-m-quick__item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-decoration: none; color: var(--ink, #1e2329);
    -webkit-tap-highlight-color: transparent;
  }
  .acct-m-quick__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: #1b6f3e;
    color: #fff;
  }
  .acct-m-quick__item:active .acct-m-quick__btn { background: #155730; }
  .acct-m-quick__lbl {
    font-size: 12px; font-weight: 500;
    color: var(--ink-2, #707a8a);
  }
  [data-theme="dark"] .acct-m-quick__btn {
    background: #0d8a4a;
  }

  /* 资产组合 3 张卡 */
  .acct-m-section { margin-bottom: 24px; }
  .acct-m-section__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 2px 12px;
  }
  .acct-m-section__head h2 {
    font-size: 16px; font-weight: 700; margin: 0;
    color: var(--ink, #1e2329);
  }
  .acct-m-section__sub {
    font-size: 12px; color: var(--ink-2, #707a8a);
    padding-bottom: 1px;
  }
  .acct-m-section__act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    color: var(--ink-2, #707a8a); text-decoration: none;
  }
  .acct-m-section__act:active { background: #f5f5f5; }

  .acct-m-portfolio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .acct-m-port-card {
    display: block;
    padding: 14px;
    border-radius: 14px;
    background: #f8f8f8;
    color: var(--ink, #1e2329);
    text-decoration: none;
    min-height: 72px;
  }
  [data-theme="dark"] .acct-m-port-card {
    background: #1e2329;
  }
  .acct-m-port-card__lbl {
    font-size: 12px; color: var(--ink-2, #707A8A);
    margin-bottom: 6px;
  }
  .acct-m-port-card__val {
    font-size: 16px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink, #1e2329);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  [data-theme="dark"] .acct-m-port-card__val { color: #f0f0f0; }

  /* 代币列表 */
  .acct-m-tokens { display: flex; flex-direction: column; }
  .acct-m-empty {
    padding: 24px 12px; text-align: center;
    color: var(--ink-2, #707a8a); font-size: 13px;
    border: 1px dashed var(--line, #e6e6e6); border-radius: 12px;
  }
  .acct-m-empty a { color: var(--up, #02C076); font-weight: 600; }
  .acct-m-token {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 2px;
    text-decoration: none; color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .acct-m-token:active { background: #fafafa; }
  .acct-m-token__icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .acct-m-token__icon .coin {
    width: 40px !important; height: 40px !important;
    font-size: 13px !important;
  }
  .acct-m-token__icon img,
  .acct-m-token__icon .coin img {
    width: 40px; height: 40px; border-radius: 50%;
  }
  .acct-m-token__main { flex: 1; min-width: 0; }
  .acct-m-token__row1 {
    display: flex; align-items: center; gap: 6px;
    font-size: 16px; font-weight: 700;
    color: var(--ink, #1e2329);
    margin-bottom: 2px;
  }
  .acct-m-token__row2 {
    font-size: 12px; color: var(--ink-2, #707a8a);
    font-variant-numeric: tabular-nums;
  }
  .acct-m-apy {
    display: inline-block;
    padding: 1px 6px; border-radius: 4px;
    font-size: 10.5px; font-weight: 600;
    background: rgba(2, 192, 118, 0.12);
    color: #02A05A;
    line-height: 1.5;
  }
  [data-theme="dark"] .acct-m-apy {
    background: rgba(2, 192, 118, 0.18);
    color: #3ddc97;
  }
  .acct-m-token__right {
    text-align: right; flex-shrink: 0;
  }
  .acct-m-token__val {
    font-size: 16px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink, #1e2329);
  }
  [data-theme="dark"] .acct-m-token__row1,
  [data-theme="dark"] .acct-m-token__val { color: #f0f0f0; }
  .acct-m-token__ch {
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
}

/* ============================================================
   Mobile (<=767px) · Hide viewport-occupying chrome & floats
   仅在移动端隐藏顶部 banner / 公告 / Copilot 浮窗 / 语音 fab,
   桌面端 (>=768px) 保留。不影响 JS 注入逻辑,仅 CSS 隐藏。
   ============================================================ */
@media (max-width: 767px) {
  /* 1. market.js 注入的"欢迎来到 FAcoin"渐变 onboarding banner */
  #fa-onboarding-banner {
    display: none !important;
  }

  /* 2. 顶部公告条 "CEX + DEX 双模式" */
  body > .topbar {
    display: none !important;
  }

  /* 3. AI Copilot 圆球浮窗(挤压 tabbar 区域) */
  .fa-cop-fab {
    display: none !important;
  }

  /* 4. Copilot 遮罩(残留时不再拦截手势) */
  .fa-cop-mask {
    display: none !important;
    pointer-events: none !important;
  }

  /* 5. 语音按钮 fab(已停用,清理残留 DOM) */
  #fa-voice-fab {
    display: none !important;
  }

  /* 6. trade 页面内 onboarding 提示 */
  #fa-onboarding {
    display: none !important;
  }

  /* 6a. futures.html 顶部营销话术卡 — "永续 U 本位 · 杠杆 100x · 自动结算与强平"
        + 隐藏余额按钮在 mobile 无价值,合约交易页直接进入 #fut-root */
  main#main-content > div:has(#fut-balance-pill) {
    display: none !important;
  }

  /* 6b. deposit.html / withdraw.html / transfer / history 顶部 .wallet-subnav
        6 项横滚 tab 与底部 tabbar 功能重叠,移动端隐藏 */
  .wallet-subnav {
    display: none !important;
  }

  /* 6c. myWallet.html #back-banner — 仅在 from=register / from=login 由 JS 取消 hidden,
        语义保留(注册流程必要引导),但移动端压缩到 56px 高度内,避免占位过大 */
  #back-banner {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
  }
  #back-banner > * { font-size: 12.5px !important; }

  /* 7. markets.html 移动端精简 — 删桌面式 hero / 装饰区,
        主表格改单列卡片(列顺序:1 star · 2 rank · 3 name · 4 price ·
        5 chg · 6 vol · 7 spark · 8 trade-btn) */
  body[data-page="markets"] section.mk-hero,
  section.mk-hero,
  .mk-metrics,
  .mk-widgets,
  .mk-widgets-wrap,
  .mk-sector,
  .mk-news,
  .mk-news-wrap,
  .mk-widget,
  .mk-cdn-error,
  .fa-cdn-error {
    display: none !important;
  }

  /* 主表格 → 单列卡片 */
  .market-table {
    border: none !important;
    table-layout: auto !important;
  }
  .market-table thead {
    display: none !important;
  }
  .market-table tbody tr {
    display: grid !important;
    grid-template-columns: 28px 1fr auto !important;
    grid-template-areas:
      "star name price"
      "star name change" !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    padding: 12px 16px !important;
    align-items: center !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .market-table tbody tr td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  /* 1. ★ 收藏 */
  .market-table tbody tr td:nth-child(1) {
    grid-area: star;
    font-size: 18px;
  }
  /* 2. # rank — 移动端隐藏(节省宽度) */
  .market-table tbody tr td:nth-child(2) {
    display: none !important;
  }
  /* 3. 名称 + logo(已含币符号 + 全名) */
  .market-table tbody tr td:nth-child(3) {
    grid-area: name;
    font-size: 15px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
  }
  /* 4. 价格 */
  .market-table tbody tr td:nth-child(4) {
    grid-area: price;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: 'Manrope', sans-serif;
  }
  /* 5. 涨跌幅 */
  .market-table tbody tr td:nth-child(5) {
    grid-area: change;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  /* 6. 24h 成交额 · 7. 7d 走势 · 8. 交易按钮 — 移动端隐藏 */
  .market-table tbody tr td:nth-child(n+6) {
    display: none !important;
  }
  /* "未找到"占位行允许跨列显示 */
  .market-table tbody tr td[colspan] {
    display: block !important;
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
}

/* ============================================================
   移动端 auth-shell 修复 (login/register/forgot 等)
   桌面营销侧栏在移动端会被 order:-1 推到首屏顶部,
   挤掉登录表单 — 移动端必须隐藏并收紧顶栏。
   ============================================================ */
@media (max-width: 767px) {
  /* 1. 隐藏桌面营销 aside */
  .auth-shell .auth-side,
  aside.auth-side {
    display: none !important;
  }

  /* 2. auth-shell grid 改单列,padding 收紧 */
  .auth-shell {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    gap: 0 !important;
  }

  /* 3. auth-card 全宽 + 圆角小一点 */
  .auth-card {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }

  /* 4. auth-header 顶栏收紧到 56px */
  .auth-header {
    height: 56px !important;
    padding: 0 12px !important;
  }
  .auth-header .auth-header__right {
    gap: 8px !important;
  }
  .auth-header__right .lang-toggle,
  .auth-header__right > a:not([href*="login"]):not([href*="register"]) {
    display: none !important;
  }
}

/* ============================================================
   P1: trade.html pair-sidebar 抽屉化 + square.html sq-aside 隐藏
   - 桌面 pair-sidebar 在 mobile 必须默认隐藏(translateX(-100%)),
     只有 body.okx-pair-drawer-open 时滑入,不能再常驻挤压主区。
   - square sq-aside 移动端直接 display:none,sq-grid 回归单列。
   放在文件末尾以覆盖前面 980px / 767px 区间的 max-height/min-height 等残留。
   ============================================================ */
@media (max-width: 767px) {
  /* trade 抽屉:默认完全在屏外 */
  .pair-sidebar {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    height: calc(100vh - 56px - 65px) !important;
    width: 88vw !important;
    max-width: 360px !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    z-index: 60 !important;
    background: var(--bg) !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18) !important;
  }
  body.okx-pair-drawer-open .pair-sidebar {
    transform: translateX(0) !important;
  }
  /* 抽屉打开时的背景遮罩 */
  body.okx-pair-drawer-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 59;
  }

  /* square 桌面右侧栏隐藏,主网格回归单列 */
  .sq-aside,
  aside.sq-aside {
    display: none !important;
  }
  .sq-shell .sq-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   Mobile nuclear reset — placed at file END so cascade order wins
   over every earlier rule. Strips ALL top space from every page on
   <=767px so content sits directly under iOS Safari URL bar.
   ================================================================ */
@media (max-width: 767px) {
  /* Kill every desktop chrome / banner / floating element that
     could occupy space at the top of body. */
  html body > header.header,
  html body > .auth-header,
  html body > .topbar,
  html body > #fa-onboarding-banner,
  html body > #fa-config-banners,
  html body > .fa-cop-fab,
  html body > .fa-cop-mask,
  html body > #fa-voice-fab,
  html body > .news-banner {
    display: none !important;
    height: 0 !important;
  }

  html, body { margin: 0 !important; }
  html body { padding: 0 !important; }

  /* Zero out <main> / #main-content padding-top — each shell
     (.okx-m__inner / .mk-table-section / .account-shell etc.)
     handles its own minimal top buffer below. */
  html body > main,
  html body > #main-content,
  html body > section {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Hide desktop-only shells when their mobile sibling exists.
     account.html ships both .acct-desktop + .acct-mobile, we keep
     only the mobile one on small screens. */
  html body .acct-desktop { display: none !important; }

  /* Single small buffer (8px) at the top of every page shell —
     no env() reliance; works on every browser. notch buffer is
     provided by viewport-fit=cover + iOS Safari handling URL bar
     above the viewport. */
  html body .okx-m__inner,
  html body .mk-table-section,
  html body .account-shell,
  html body .wallet-shell,
  html body .auth-shell,
  html body .tk-shell,
  html body .c2c-shell,
  html body .kyc-shell,
  html body .trade-shell {
    /* 顶部留白匹配下方搜索栏-tab 的视觉间距 ≈ 24px */
    padding-top: 24px !important;
    margin-top: 0 !important;
  }
  /* 广场页 .sq-shell 顶部留白对齐首页(.okx-m__inner 的 24px) */
  html body main.sq-shell,
  html body .sq-shell {
    padding-top: 24px !important;
    padding-bottom: 80px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 防止 .container 默认 max-width / margin auto 在窄屏下挤出灰边 */
  html body main.container.sq-shell {
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 广场页顶部搜索栏(参考首页 .okx-m-search 样式),只在 mobile 显示
     直接给 margin-top 让它与首页搜索栏顶部留白一致(24px) */
  .sq-mobile-search {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 24px 0 14px 0 !important;
    text-decoration: none;
  }
  /* 同时强行给广场 main 也保底 padding-top,防止 box-sizing/container 干扰 */
  html body main.container.sq-shell {
    padding-top: 24px !important;
  }

  /* === 自选页 .wl-grid / .wl-card 调整为列表样式,行间距与首页 .okx-m-row 一致 === */
  .wl-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
    /* 突破父 .container 16px 内边距,行铺满到屏幕边缘 */
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
  .wl-card {
    padding: 8px 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .wl-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* 首页 .okx-m-tab — padding 控制尺寸,不用 height,避免被字宽撑成圆 */
  .okx-m-tab {
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 14px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    /* 关掉点击瞬间的黄色 focus outline + tap highlight */
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    /* 切换 active 时背景颜色平滑过渡 */
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s ease !important;
  }
  .okx-m-tab:focus,
  .okx-m-tab:focus-visible,
  .okx-m-tab:active {
    outline: none !important;
    box-shadow: none !important;
  }
  /* 选中态:浅灰透明底 + 深字 */
  .okx-m-tab.is-active {
    background: #F0F1F2 !important;
    color: var(--ink, #1E2329) !important;
    font-weight: 700 !important;
  }
  .okx-m-tabs {
    gap: 4px !important;
    padding-right: 0 !important;
  }
  .okx-m-tab--more {
    margin-left: auto !important;
    padding: 0 8px !important;
  }

  /* 首页 CTA 按钮(链上充币 / C2C 买币)— pill 圆角,扁高,颜色不变 */
  .okx-m-cta__btn {
    padding: 10px 0 !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  /* 兜底:所有 -shell / mobile 容器最外层 main / section 顶部 margin/padding 清零 */
  html body main.sq-shell,
  html body main.account-shell,
  html body main.wallet-shell,
  html body main.auth-shell,
  html body main.kyc-shell,
  html body main.tk-shell,
  html body main.c2c-shell,
  html body main.trade-shell {
    margin-top: 0 !important;
  }
  /* 广场页 grid + tabs 顶部空隙清零 */
  .sq-shell .sq-grid { margin-top: 0 !important; padding-top: 0 !important; }
  .sq-shell .sq-grid > section { margin-top: 0 !important; padding-top: 0 !important; }
  .sq-shell .sq-grid > section > .tabs:first-child {
    margin-top: 0 !important;
  }

  /* 广场页 tab — 紧凑 pill,左对齐(同首页 .okx-m-tabs),不用 space-between
     避免 4 个 tab 平均分到屏宽导致间距过大 */
  .sq-shell .tabs {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    /* 覆盖全局 .tabs 的灰底 + 圆角容器 — 不要那个外框 */
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .sq-shell .tabs::-webkit-scrollbar { display: none; }
  .sq-shell .tab {
    flex-shrink: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    color: var(--ink-2, #707A8A) !important;
    padding: 7px 14px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin: 0 !important;
    /* 必须显式覆盖,styles.css:5061 在 (max-width: 768px) 给 .tab 设了
       min-height: 44px !important + padding: 11px 16px !important — 不覆盖
       的话 active "推荐" 会被撑成 ~50px 高的胶囊/正圆 */
    min-height: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .sq-shell .tab:focus,
  .sq-shell .tab:focus-visible,
  .sq-shell .tab:active {
    outline: none !important;
    box-shadow: none !important;
  }
  /* 切换 active 时背景颜色平滑过渡 */
  .sq-shell .tab {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s ease !important;
  }
  .sq-shell .tab--active,
  .sq-shell .tab.is-active {
    background: #F0F1F2 !important;
    color: var(--ink, #1E2329) !important;
    font-weight: 700 !important;
    /* 覆盖全局 .tab--active 的 box-shadow,否则 active 看起来像浮起的圆 */
    box-shadow: none !important;
    border: 0 !important;
  }

  /* trade/futures sticky tab — pinned to top:0, no extra padding above */
  html body .okx-top-cats {
    top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Diagnostic banner removed. */

/* ============================================================
   Mobile global polish (2026-05-27, rev 2)
   桌面 HTML 在 ≤767 直接展示;以下规则:
   1. 全局隐藏滚动条 + 防溢出
   2. 全局删除所有 sparkline / mini chart(用户要求不要 K 线)
   3. 横向 tab list 改横向滚动而不是换行
   4. 重新规划所有代币行 4 信息布局:icon | 名称+成交量 | 价格+涨幅
   ============================================================ */
@media (max-width: 767px) {
  /* — 1. 隐藏滚动条 — */
  html, body { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar { width: 0; height: 0; display: none; }
  *::-webkit-scrollbar { width: 0; height: 0; }
  * { scrollbar-width: none; -ms-overflow-style: none; }

  /* — 2a. 防横向溢出 — */
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  body > * { max-width: 100%; }

  /* — 2b. 全局删除所有 sparkline / mini K 线 —
     用户要求:代币行只显示「代币 / 价格 / 成交量 / 涨幅」,不要迷你 K 线 */
  .spark, .spark-mini, .wl-spark, .wl-spark--empty,
  .mini-spark, .mini-spark-ph,
  .acct-m-hero__spark, .okx-m-asset__spark, .okx-m-asset__sparklbl,
  .tk-rel__spark, .tk-spark-row,
  .copy-spark, .hc-spark, .lp-spark,
  .trader-card__spark, .wl-card__spark,
  svg[class*="spark"], svg[class*="-spark"],
  [class*="sparkline"], [class*="-sparkline"] {
    display: none !important;
  }
  /* spark 列被隐藏后,table cell 也不要留空白 */
  td:has(> .spark-mini),
  td:has(> .spark),
  td:has(> svg[class*="spark"]) {
    display: none !important;
  }

  /* — 3. 横向 tab list 改横向滚动 — */
  [role="tablist"],
  .tab-list,
  .tabs,
  .filter-row,
  .chip-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [role="tablist"]::-webkit-scrollbar,
  .tab-list::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar,
  .chip-row::-webkit-scrollbar { display: none; }

  /* — 4. 代币行布局,精准对齐用户提供的首页/行情截图参数 —
     行结构: [icon 48px] [名字+成交量] [价格+涨幅] */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .okx-m__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .mk-table-wrap {
    padding: 0 !important;
  }
  .okx-m-list,
  .mk-mlist {
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    list-style: none !important;
  }
  /* 行间分割线 — 用户要求删除 */
  .okx-m-row,
  .mk-mlist .okx-m-row,
  .okx-m-row + .okx-m-row,
  .mk-mlist .okx-m-row + .okx-m-row {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  /* 行本身 — 紧凑参数:padding 上下 8,icon 36,字号 15/12 */
  .okx-m-row__a {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto 28px !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
    padding: 8px 16px !important;
  }
  /* ⭐ 自选按钮 — grid 第 4 列,跨 2 行居中 */
  .okx-m-row__star {
    grid-column: 4 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: center !important;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-3, #94929E);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    padding: 6px;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .okx-m-row__star.is-on {
    color: var(--gold, #F5B824);
  }
  .okx-m-row__star:active {
    background: rgba(0,0,0,0.05);
  }
  .okx-m-row__ico {
    grid-row: 1 / span 2 !important;
    width: 36px !important; height: 36px !important;
    align-self: center !important;
  }
  .okx-m-row__ico img,
  .okx-m-row__ico .coin { width: 36px !important; height: 36px !important; }

  /* 名字列 */
  .okx-m-row__name {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important; flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  .okx-m-row__name strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--ink, #1E2329) !important;
  }
  .okx-m-row__name strong small {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--ink-3, #707A8A) !important;
    margin-left: 4px !important;
  }
  .okx-m-row__name > small {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--ink-3, #707A8A) !important;
    line-height: 1.2 !important;
  }

  /* 价格(右上) */
  .okx-m-row__price {
    grid-column: 3 !important; grid-row: 1 !important;
    text-align: right !important;
    font-size: 15px !important; font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--ink, #1E2329) !important;
    margin: 0 !important;
  }

  /* 涨幅默认(首页 — 浅底药丸,深字,紧凑) */
  .okx-m-row__chg {
    grid-column: 3 !important; grid-row: 2 !important;
    justify-self: end !important;
    min-width: 62px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 12px !important; font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .okx-m-row__chg.up {
    background: rgba(2, 192, 118, 0.12) !important;
    color: var(--up, #02C076) !important;
  }
  .okx-m-row__chg.down {
    background: rgba(248, 73, 96, 0.12) !important;
    color: var(--down, #F84960) !important;
  }

  /* 行情页(纯文字版,无药丸) */
  .mk-mlist .okx-m-row__chg {
    background: transparent !important;
    padding: 0 !important;
    min-width: auto !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  .mk-mlist .okx-m-row__chg.up {
    background: transparent !important;
    color: var(--up, #02C076) !important;
  }
  .mk-mlist .okx-m-row__chg.down {
    background: transparent !important;
    color: var(--down, #F84960) !important;
  }

  /* === markets 顶部:搜索栏置顶 + tab 单行折叠 === */
  .mk-table-head { width: 100% !important; box-sizing: border-box !important; }
  .mk-table-head h2 { display: none !important; }
  .mk-table-head > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  /* 搜索栏置顶,全宽,box-sizing 防溢出 */
  .mk-search {
    width: 100% !important;
    max-width: 100% !important;
    order: 0 !important;
    box-sizing: border-box !important;
  }
  .mk-search input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 14px 11px 38px !important;
    border-radius: 10px !important;
    background: var(--bg-soft, #F5F5F5) !important;
    border: 0 !important;
    font-size: 14px !important;
  }
  .mk-search__icon { left: 14px !important; }

  /* tab 单行 + 横向滚动 + 末尾 › 按钮 — 套首页 .okx-m-tab 黑色 pill 风格 */
  .mk-filters {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    border-bottom: 0 !important;
    position: relative !important;
    scrollbar-width: none;
  }
  .mk-filters::-webkit-scrollbar { display: none; }
  .mk-filter {
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    color: var(--ink-2, #707A8A) !important;
    padding: 7px 14px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mk-filter:hover,
  .mk-filter:focus,
  .mk-filter:focus-visible,
  .mk-filter:active {
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }
  /* 切换 active 时背景颜色平滑过渡 */
  .mk-filter {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s ease !important;
  }
  /* active 态用浅灰透明底 + 深字(代替纯黑底白字) */
  .mk-filter.active {
    background: #F0F1F2 !important;
    color: var(--ink, #1E2329) !important;
    font-weight: 700 !important;
    border-bottom: 0 !important;
  }

  /* › 按钮:粘性贴右,白底渐变压住溢出 */
  .mk-filter--more {
    margin-left: auto !important;
    padding: 0 12px !important;
    font-size: 18px !important;
    color: var(--ink-2, #474D57) !important;
    font-weight: 400 !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    right: 0 !important;
    background: linear-gradient(to right, transparent 0, var(--bg, #fff) 30%) !important;
    padding-left: 24px !important;
    border-radius: 0 !important;
  }
  .mk-filter--more.active,
  .mk-filter--more:hover { background: linear-gradient(to right, transparent 0, var(--bg, #fff) 30%) !important; color: var(--ink, #1E2329) !important; }

  /* 展开模式:flex-wrap 显示全部 tab */
  .mk-filters.is-expanded {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .mk-filters.is-expanded .mk-filter--more {
    position: static !important;
    background: transparent !important;
    padding-left: 12px !important;
  }

  /* 隐藏分页器 / footer */
  .mk-footer, #mk-pager { display: none !important; }

  /* 移除全局 button hover 提升阴影 — 否则 tab 按下时会出现"白色长方形阴影" */
  button:hover,
  button:active,
  button:focus,
  .btn:hover,
  .btn:active,
  .btn:focus {
    box-shadow: none !important;
    transform: none !important;
  }

  /* 屏蔽 PWA 安装/状态相关的顶部 banner / ios overlay */
  .fa-pwa-banner,
  .fa-pwa-net-banner,
  .fa-pwa-ios-overlay,
  .fa-pwa-ios-sheet,
  [class*="install-banner"],
  [class*="pwa-banner"] {
    display: none !important;
  }

  /* ===== 全站 .tabs / .tab 统一 fa 风格 mobile 样式 =====
     首页/行情/广场已验证,推广到 account/wallet/trade/deposit/withdraw 等全部页面 */
  .tabs {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 0 14px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .tabs::-webkit-scrollbar { display: none !important; }
  .tab {
    flex-shrink: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    color: var(--ink-2, #707A8A) !important;
    padding: 7px 14px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s ease !important;
  }
  .tab:hover,
  .tab:focus,
  .tab:focus-visible,
  .tab:active {
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }
  .tab--active,
  .tab.is-active {
    background: #F0F1F2 !important;
    color: var(--ink, #1E2329) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* ===== 全站 .btn 在 mobile 扁高 pill 圆角 =====
     不影响 icon-btn / link 类的按钮 */
  .btn,
  .btn--primary,
  .btn--ghost,
  .btn--ghost-bordered {
    padding: 10px 20px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }
  .btn:hover,
  .btn:active,
  .btn:focus {
    transform: none !important;
    box-shadow: none !important;
  }

  /* ===== 表单 input mobile 同款灰底圆角 ===== */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    border-radius: 10px !important;
    background: var(--bg-soft, #F5F5F5) !important;
    border: 0 !important;
    font-size: 14px !important;
  }
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  input[type="search"]:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid var(--gold, #F5B824) !important;
    outline-offset: -2px !important;
  }

  /* 隐藏桌面 nav .header / .topbar — mobile 用 .okx-m 顶部搜索栏 + 底部 tab,
     桌面 sticky header(高 68px)在 mobile 留下大片白空 */
  body > header.header,
  body > .header,
  .header,
  .topbar,
  body > footer.footer,
  body > .footer {
    display: none !important;
  }

  /* nuke 规则已移除 — 它会把 markets.html 的 <section class="mk-table-section">
     也隐藏(它是 body 直接子但不是 main),导致行情页空白 */

  /* 强制从 body 一路到 .okx-m__inner 顶部 0 padding/margin —
     任何祖先链上的 padding-top / margin-top 都被清零,确保第一个可见
     元素(搜索栏)真正贴顶 */
  html, body {
    margin: 0 !important;
    padding-top: 0 !important;
  }
  body > main,
  body > #main-content,
  main#main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  section.okx-m,
  body > main > section.okx-m,
  main > section.okx-m {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .okx-m__inner {
    padding-top: 8px !important;
  }
}