/**
 * Light mode tokens for /markets/overview only.
 * Follows `html.light` via `data-zs-theme` synced from `theme` (ThemeToggle).
 * Does not affect /crypto — requires `data-zs-page="markets-overview"` on the route root.
 */

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] {
  --crypto-canvas: #f5f7f4;

  --zs-text-primary: #0f172a;
  --zs-text-secondary: #475569;
  --zs-text-muted: #64748b;

  --zs-surface-1: #ffffff;
  --zs-surface-2: #f5f7f4;
  --zs-surface-3: #e8ede9;

  --zs-border-subtle: rgba(15, 23, 42, 0.06);
  --zs-border-soft: rgba(15, 23, 42, 0.08);
  --zs-border-mid: rgba(15, 23, 42, 0.1);
  --zs-border-strong: rgba(15, 23, 42, 0.16);

  --crypto-row-divider: rgba(15, 23, 42, 0.08);
  --crypto-row-zebra: rgba(15, 23, 42, 0.02);
  --crypto-row-hover-bg: rgba(15, 23, 42, 0.04);
  --crypto-row-hover-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);

  /* Cards — spec; no green tint */
  --crypto-card-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  --crypto-card-shadow-hover: 0 22px 52px rgba(15, 23, 42, 0.1);

  /* Kill route-wide green glow */
  --zs-green-glow: transparent;
  --zs-shadow-green: 0 4px 16px rgba(15, 23, 42, 0.06);

  /**
   * Accent slots: subtle slate for bars / chrome; small UI accents only elsewhere.
   * (CryptoPerformance uses these for gradients and selection chrome.)
   */
  --zs-green-dark: #475569;
  --zs-green-primary: #64748b;
  --zs-green-hover: #334155;
  --zs-green-light: #94a3b8;
  --zs-green-soft: rgba(15, 23, 42, 0.06);
  --zs-green-border: rgba(15, 23, 42, 0.12);
  --zs-green-on: #f5f7f4;

  --zs-dark: #e2e8f0;
}

/* Card border + surface (class added on overview cards only) */
[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-overview-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-overview-card:hover {
  background: #fafbfc;
  border-color: rgba(15, 23, 42, 0.13);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

/* View mode + pill strip — inactive / active (no green glow) */
[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-view-mode {
  background: transparent !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-vm-idle {
  background: transparent !important;
  color: #475569 !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-vm-active {
  background: #0f172a !important;
  color: #f5f7f4 !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-vm-idle:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-pill-idle {
  background: transparent !important;
  color: #475569 !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-pill-idle:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-pill-active {
  background: #0f172a !important;
  color: #f5f7f4 !important;
}

/* MarketsViewSwitcher (/crypto | نظرة السوق) */
[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-mvs-idle {
  background: transparent !important;
  color: #475569 !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-mvs-idle:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-mvs-active {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #16a34a !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

/* Title dropdown */
[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-dd-idle {
  color: #0f172a !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] .mo-dd-active {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

/* CryptoPerformance — tabs + link */
[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"]
  [data-zs-perf-crypto="1"]
  .zs-perf-tab[data-active="false"] {
  background: transparent !important;
  color: #475569 !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"]
  [data-zs-perf-crypto="1"]
  .zs-perf-tab[data-active="true"] {
  background: #0f172a !important;
  color: #f5f7f4 !important;
  border: none !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"]
  [data-zs-perf-crypto="1"]
  .zs-perf-tab[data-active="false"]:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"]
  [data-zs-perf-crypto="1"]
  .zs-perf-tab[data-active="true"]:hover {
  background: #0f172a !important;
  color: #f5f7f4 !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] a.zs-perf-link[data-zs-perf-crypto="1"] {
  color: #475569 !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="light"] a.zs-perf-link[data-zs-perf-crypto="1"]:hover {
  color: #0f172a !important;
  opacity: 1 !important;
}

/* ─── Dark mode — premium surfaces: no harsh white/slate wireframes (/markets/overview only) ─── */

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="dark"] {
  --zs-border-subtle: rgba(255, 255, 255, 0.04);
  --zs-border-soft: rgba(255, 255, 255, 0.05);
  --zs-border-mid: rgba(255, 255, 255, 0.06);
  --zs-border-strong: rgba(255, 255, 255, 0.08);

  --crypto-row-divider: rgba(255, 255, 255, 0.04);
  --crypto-row-zebra: rgba(255, 255, 255, 0.02);
  --crypto-row-hover-bg: rgba(255, 255, 255, 0.035);
  --crypto-row-hover-shadow: none;

  --crypto-card-shadow: none;
  --crypto-card-shadow-hover: none;

  --zs-green-primary: #8cff5a;
  --zs-green-border: rgba(140, 255, 90, 0.16);
  --zs-green-soft: #151515;
  --zs-shadow-green: none;

  /* Inline-style hooks in shared market components (overview subtree only) */
  --mo-divider-color: rgba(255, 255, 255, 0.04);
  --mo-chart-grid-stroke: rgba(255, 255, 255, 0.03);
  --mo-chart-line-up: #8cff5a;
  --mo-chart-line-down: rgba(239, 68, 68, 0.75);
  --mo-chart-area-opacity-up: 0.28;
  --mo-chart-area-opacity-down: 0.14;
  --mo-bar-fill: rgba(255, 255, 255, 0.16);
  --mo-skeleton-bg: rgba(255, 255, 255, 0.06);
  --mo-line-fade-mid: rgba(255, 255, 255, 0.06);
  --mo-dropdown-border: rgba(255, 255, 255, 0.08);
  --mo-coin-hover-border: rgba(255, 255, 255, 0.08);
  --mo-hover-row-bg: rgba(255, 255, 255, 0.035);
  --mo-placeholder-soft: rgba(255, 255, 255, 0.08);
  --mo-empty-chart-bg: rgba(255, 255, 255, 0.02);
  --mo-bar-empty: rgba(255, 255, 255, 0.06);
  --mo-badge-bg-subtle: rgba(255, 255, 255, 0.05);
  --mo-crosshair: rgba(255, 255, 255, 0.12);
  --mo-selected-row-bg: #151515;
  --mo-selected-row-border: rgba(140, 255, 90, 0.16);
  --mo-icon-ring-bg: rgba(255, 255, 255, 0.04);
  --mo-icon-ring-border: rgba(255, 255, 255, 0.08);
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="dark"] .mo-overview-card {
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, border-color 180ms ease;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="dark"] .mo-overview-card:hover {
  background: #101010;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: none !important;
}

/* CryptoSummaryCard — neutral chrome; green accent on active range text only */
[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="dark"] .zs-cc--dark .zs-rb {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="dark"] .zs-cc--dark .zs-rbn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="dark"] .zs-cc--dark .zs-ra {
  color: #8cff5a !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="dark"] .zs-tp--dark {
  background: rgba(11, 11, 11, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="dark"] .zs-cc--dark .zs-coin-opt:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* CryptoPerformance — active period tab: green text only, neutral chip (no solid green fill) */
[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="dark"]
  [data-zs-perf-crypto="1"]
  .zs-perf-tab[data-active="true"] {
  background: rgba(255, 255, 255, 0.045) !important;
  color: #8cff5a !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

[data-zs-crypto-root][data-zs-page="markets-overview"][data-zs-theme="dark"]
  [data-zs-perf-crypto="1"]
  .zs-perf-tab[data-active="true"]:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #8cff5a !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Cap-rank spotlight cards — soften terminal glow on overview */
[data-zs-crypto-root][data-zs-page="markets-overview"] .mo-crypto-table-section .all-coins-terminal-card::before {
  opacity: 0.25;
}

/* ─── Phone ≤767: touch targets (/markets/overview only; desktop/tablet nav unchanged) ─── */
@media (max-width: 767px) {
  [data-zs-crypto-root][data-zs-page='markets-overview'] .mo-view-mode button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
  }

  [data-zs-crypto-root][data-zs-page='markets-overview'] [data-zs-perf-crypto='1'] .zs-perf-tab {
    min-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
  }

  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-cc--dark .zs-rbn,
  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-cc--dark .zs-rb button {
    min-height: 40px;
    min-width: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
  }
}

/* ─── Tablet 768–1023: touch targets only (/markets/overview). Desktop ≥1280 unchanged ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  [data-zs-crypto-root][data-zs-page='markets-overview'] .mo-view-mode {
    gap: 4px;
    padding: 4px;
  }

  [data-zs-crypto-root][data-zs-page='markets-overview'] .mo-view-mode button,
  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-mkt-scroll-row nav a,
  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-mkt-pills button,
  [data-zs-crypto-root][data-zs-page='markets-overview'] .mo-dd-idle,
  [data-zs-crypto-root][data-zs-page='markets-overview'] .mo-dd-active {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
  }

  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-mkt-scroll-row {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-mkt-scroll-row::-webkit-scrollbar {
    display: none;
  }

  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-mkt-scroll-row nav,
  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-mkt-pills {
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 4px;
  }

  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-mkt-pills button {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* Crypto performance period tabs (inline styles — min-height via !important) */
  [data-zs-crypto-root][data-zs-page='markets-overview'] [data-zs-perf-crypto='1'] .zs-perf-tab {
    min-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
  }

  /* Chart range buttons inside spotlight sections */
  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-cc--dark .zs-rbn,
  [data-zs-crypto-root][data-zs-page='markets-overview'] .zs-cc--dark .zs-rb button {
    min-height: 40px;
    min-width: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
  }
}

/**
 * Phase 17.UI.1 — Institutional light-mode polish for /markets/overview.
 * Typography, hero, chart chrome, metrics — scoped; dark mode preserved via theme tokens.
 */

[data-zs-page='markets-overview'] .marketOverviewPage {
  font-synthesis: none;
  background: var(--mo-page-bg, var(--crypto-canvas));
}

/* ─── Hero ─── */
[data-zs-page='markets-overview'] .mo-overview-title {
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 600;
  letter-spacing: 0;
}

[data-zs-page='markets-overview'] .mo-overview-subtitle {
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--zs-text-secondary);
}

[data-zs-page='markets-overview'][data-zs-theme='dark'] .mo-overview-subtitle {
  color: rgba(255, 255, 255, 0.65);
}

/* ─── Tabs — dark defaults (light overrides in mobile.css) ─── */
[data-zs-page='markets-overview'][data-zs-theme='dark'] .mo-section-tabs {
  border-top-color: rgba(255, 255, 255, 0.055);
  border-bottom-color: rgba(255, 255, 255, 0.055);
}

[data-zs-page='markets-overview'][data-zs-theme='dark'] .mo-section-tab {
  color: rgba(255, 255, 255, 0.72);
}

[data-zs-page='markets-overview'][data-zs-theme='dark'] .mo-section-tab:hover {
  color: rgba(255, 255, 255, 0.92);
}

[data-zs-page='markets-overview'][data-zs-theme='dark'] .mo-section-tab--active,
[data-zs-page='markets-overview'][data-zs-theme='dark'] .mo-section-tab--active:hover {
  color: #8cff5a;
}

[data-zs-page='markets-overview'][data-zs-theme='dark'] .mo-section-tab--active::after {
  background: #8cff5a;
}

/* ─── Typography — Radar-aligned, no mono leak ─── */
[data-zs-page='markets-overview'] .zs-cc,
[data-zs-page='markets-overview'] .zs-cc *:not(svg):not(path) {
  font-family: var(--zs-route-font-family, var(--zs-font-body)) !important;
  letter-spacing: 0;
}

[data-zs-page='markets-overview'] .tabular-nums,
[data-zs-page='markets-overview'] .mo-cc-price,
[data-zs-page='markets-overview'] .mo-cc-change,
[data-zs-page='markets-overview'] .zs-cc .tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ─── Light chart card — timeframe segmented control ─── */
[data-zs-page='markets-overview'][data-zs-theme='light'] .zs-cc:not(.zs-cc--dark) .zs-rb {
  background: var(--mo-surface-raised, #f8fafc) !important;
  border: 1px solid var(--mo-border-subtle) !important;
}

[data-zs-page='markets-overview'][data-zs-theme='light'] .zs-cc:not(.zs-cc--dark) .zs-rbn {
  color: var(--mo-text-secondary) !important;
}

[data-zs-page='markets-overview'][data-zs-theme='light'] .zs-cc:not(.zs-cc--dark) .zs-rbn:hover {
  color: var(--mo-text-primary) !important;
  background: var(--mo-hover) !important;
}

[data-zs-page='markets-overview'][data-zs-theme='light'] .zs-cc:not(.zs-cc--dark) .zs-ra {
  color: var(--mo-text-primary) !important;
  background: #ffffff !important;
  border: 1px solid var(--mo-border) !important;
  box-shadow: var(--mo-shadow) !important;
}

/* ─── Crypto list — light row typography ─── */
[data-zs-page='markets-overview'][data-zs-theme='light'] .mo-spotlight section div[role='button'] > div:first-child span:first-child {
  font-size: 13.5px;
  font-weight: 600;
}

[data-zs-page='markets-overview'][data-zs-theme='light'] .mo-spotlight section div[role='button'] > div:first-child span:last-child {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mo-text-muted);
}

/* ─── Lower metrics (CryptoIndicators) ─── */
[data-zs-page='markets-overview'][data-zs-theme='light'] .mo-metrics-strip,
[data-zs-page='markets-overview'][data-zs-theme='light'] .mo-spotlight .mo-overview-card > div:last-child {
  border-top: 1px solid var(--mo-border-subtle);
}

[data-zs-page='markets-overview'][data-zs-theme='light'] .mo-indicator-card {
  background: var(--mo-surface);
  border: 1px solid var(--mo-border-subtle);
  box-shadow: none;
}

/**
 * Phase 17.UI.2 — Markets Overview unified design system.
 * ONE semantic token layer → light + dark. All tabs consume these tokens.
 * Scope: [data-zs-page="markets-overview"] only.
 */

/* ═══════════════════════════════════════════════════════════════
   LEVEL 0–3 SURFACE ARCHITECTURE — LIGHT (primary)
   ═══════════════════════════════════════════════════════════════ */

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] {
  /* Level 0 — page canvas */
  --mo-page: #ffffff;
  --mo-page-bg: var(--mo-page);
  --mo-page-subtle: #eef1f4;
  --crypto-canvas: var(--mo-page);

  /* Level 1 — primary section / card */
  --mo-surface: #ffffff;
  --mo-surface-raised: #fafbfc;

  /* Level 2 — inner data surface */
  --mo-surface-muted: #f6f8fa;
  --mo-surface-selected: rgba(22, 163, 74, 0.06);

  /* Borders & dividers */
  --mo-border: rgba(15, 23, 42, 0.1);
  --mo-border-strong: rgba(15, 23, 42, 0.14);
  --mo-divider: rgba(15, 23, 42, 0.08);

  /* Text */
  --mo-text-primary: #0f172a;
  --mo-text-secondary: #475569;
  --mo-text-muted: #64748b;

  /* Semantic colors */
  --mo-positive: #16a34a;
  --mo-negative: #dc2626;
  --mo-warning: #d97706;
  --mo-accent: #16a34a;

  /* Chart */
  --mo-chart-grid: rgba(15, 23, 42, 0.06);
  --mo-chart-axis: #64748b;

  /* Interaction */
  --mo-row-hover: rgba(15, 23, 42, 0.03);
  --mo-row-selected: rgba(22, 163, 74, 0.06);
  --mo-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);

  /* Bridge to existing zs/crypto vars */
  --zs-text-primary: var(--mo-text-primary);
  --zs-text-secondary: var(--mo-text-secondary);
  --zs-text-muted: var(--mo-text-muted);
  --zs-surface-1: var(--mo-surface);
  --zs-surface-2: var(--mo-surface-muted);
  --zs-surface-3: var(--mo-page-subtle);
  --zs-border-subtle: var(--mo-divider);
  --zs-border-soft: var(--mo-border);
  --zs-success: var(--mo-positive);
  --zs-red: var(--mo-negative);
  --zs-green-primary: var(--mo-accent);
  --zs-green-soft: var(--mo-surface-selected);
  --crypto-card-shadow: var(--mo-shadow-sm);
  --crypto-card-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08);
  --crypto-row-divider: var(--mo-divider);
  --crypto-row-hover-bg: var(--mo-row-hover);
  --crypto-row-zebra: rgba(15, 23, 42, 0.02);

  /* Market movers hub — light institutional */
  --mo-mv-bg: transparent;
  --mo-mv-card: var(--mo-surface);
  --mo-mv-border: var(--mo-border);
  --mo-mv-radius: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   LEVEL 0–3 — DARK (preserved, same hierarchy)
   ═══════════════════════════════════════════════════════════════ */

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='dark'] {
  --mo-page: #050505;
  --mo-page-subtle: #0a0a0a;
  --mo-surface: #0b0b0b;
  --mo-surface-raised: #101010;
  --mo-surface-muted: #151515;
  --mo-surface-selected: #151515;
  --mo-border: rgba(255, 255, 255, 0.06);
  --mo-border-strong: rgba(255, 255, 255, 0.09);
  --mo-divider: rgba(255, 255, 255, 0.04);
  --mo-text-primary: #f4f4f4;
  --mo-text-secondary: rgba(255, 255, 255, 0.65);
  --mo-text-muted: rgba(255, 255, 255, 0.5);
  --mo-positive: #8cff5a;
  --mo-negative: #ef4444;
  --mo-warning: #f59e0b;
  --mo-accent: #8cff5a;
  --mo-chart-grid: rgba(255, 255, 255, 0.03);
  --mo-chart-axis: rgba(255, 255, 255, 0.5);
  --mo-row-hover: rgba(255, 255, 255, 0.035);
  --mo-row-selected: #151515;
  --mo-shadow-sm: none;

  --mo-mv-bg: #0f0f0f;
  --mo-mv-card: #111111;
  --mo-mv-border: rgba(255, 255, 255, 0.06);
  --mo-mv-radius: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   CARD SYSTEM — PRIMARY / SECONDARY / STAT
   ═══════════════════════════════════════════════════════════════ */

[data-zs-page='markets-overview'] .mo-overview-card,
[data-zs-page='markets-overview'] .mo-card-primary {
  background: var(--mo-surface);
  border: 1px solid var(--mo-border);
  border-radius: var(--mo-card-radius, 10px);
  box-shadow: var(--mo-shadow-sm);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-overview-card,
[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-card-primary {
  background: var(--mo-surface);
  border-color: var(--mo-border);
  box-shadow: var(--mo-shadow-sm);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='dark'] .mo-overview-card,
[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='dark'] .mo-card-primary {
  background: var(--mo-surface);
  border-color: var(--mo-border);
  box-shadow: none;
}

/* Section wrappers — transparent pass-through (inner cards carry surface) */
[data-zs-page='markets-overview'] .zs-mkt-section-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Performance tab — single primary card shell */
[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .zs-mkt-section-card:has([data-zs-perf-crypto='1']) {
  background: var(--mo-surface) !important;
  border: 1px solid var(--mo-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--mo-shadow-sm) !important;
  padding: 24px !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='dark']
  .zs-mkt-section-card:has([data-zs-perf-crypto='1']) {
  background: var(--mo-surface) !important;
  border: 1px solid var(--mo-border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════
   TAB 2 — MARKET MOVERS (mo-mv-*)
   ═══════════════════════════════════════════════════════════════ */

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-hub {
  background: transparent;
  padding: 0;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-featured {
  background: var(--mo-mv-card) !important;
  border: 1px solid var(--mo-mv-border) !important;
  box-shadow: var(--mo-shadow-sm);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-card,
[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-featured {
  background: var(--mo-surface) !important;
  border-color: var(--mo-border) !important;
  color: var(--mo-text-primary);
  box-shadow: var(--mo-shadow-sm);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-widget-row:hover {
  background: var(--mo-row-hover);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-spark-ph {
  background: var(--mo-surface-muted);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-hover:hover {
  transform: translateY(-1px);
  border-color: var(--mo-border-strong);
  box-shadow: var(--mo-shadow-sm);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-coin-logo,
[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-featured-logo,
[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-opp-logo {
  background: var(--mo-surface-muted);
  border-color: var(--mo-border);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-strip {
  background: var(--mo-surface);
  border: 1px solid var(--mo-border);
  border-radius: 16px;
  border-bottom: 1px solid var(--mo-divider);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-insight {
  background: var(--mo-surface);
  border: 1px solid var(--mo-border);
  border-radius: 16px;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-mv-cta {
  background: var(--mo-surface-muted);
  border: 1px solid var(--mo-border);
  color: var(--mo-text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   TAB 3 — CRYPTO PERFORMANCE
   ═══════════════════════════════════════════════════════════════ */

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  [data-zs-perf-crypto='1'] .zs-perf-tab[data-active='true'] {
  background: var(--mo-surface) !important;
  color: var(--mo-text-primary) !important;
  border: 1px solid var(--mo-border) !important;
  box-shadow: var(--mo-shadow-sm) !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  [data-zs-perf-crypto='1'] .zs-perf-tab[data-active='false'] {
  color: var(--mo-text-secondary) !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  [data-zs-perf-crypto='1'] .zs-perf-row {
  border-bottom: 1px solid var(--mo-divider);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  [data-zs-perf-crypto='1'] .zs-perf-link {
  color: var(--mo-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TAB 4 — MARKET CAP (all-coins-terminal on overview)
   ═══════════════════════════════════════════════════════════════ */

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-card {
  background: var(--mo-surface) !important;
  border: 1px solid var(--mo-border) !important;
  box-shadow: var(--mo-shadow-sm) !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-card::before {
  opacity: 0 !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-table-wrap {
  background: var(--mo-surface) !important;
  border: 1px solid var(--mo-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--mo-shadow-sm) !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-grid-row--header .all-coins-terminal-grid-cell {
  background: var(--mo-surface-muted) !important;
  color: var(--mo-text-muted) !important;
  border-bottom: 1px solid var(--mo-divider);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-grid-row--data {
  background: var(--mo-surface) !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-grid-row--data:nth-child(even) {
  background: var(--mo-surface-muted) !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-grid-row--data:hover {
  background: var(--mo-row-hover) !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-tab {
  color: var(--mo-text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-tab[aria-selected='true'],
[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-tab.active {
  color: var(--mo-text-primary) !important;
  background: var(--mo-surface) !important;
  border-color: var(--mo-border) !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-search {
  background: var(--mo-surface) !important;
  border: 1px solid var(--mo-border) !important;
  color: var(--mo-text-primary) !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light']
  .mo-crypto-table-section .all-coins-terminal-card-go {
  background: var(--mo-surface-muted) !important;
  border: 1px solid var(--mo-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TAB 5 — TVL RANKING (mo-tvl-*)
   ═══════════════════════════════════════════════════════════════ */

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-tvl-summary,
[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-tvl-card {
  background: var(--mo-surface) !important;
  border: 1px solid var(--mo-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--mo-shadow-sm) !important;
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-tvl-head {
  opacity: 1;
  color: var(--mo-text-muted);
  border-bottom-color: var(--mo-divider);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-tvl-row {
  border-bottom-color: var(--mo-divider);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-tvl-row:hover {
  background: var(--mo-row-hover);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-tvl-summary-label {
  opacity: 1;
  color: var(--mo-text-muted);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-tvl-bar-track {
  background: var(--mo-surface-muted);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-tvl-footer-link {
  color: var(--mo-accent);
}

/* ═══════════════════════════════════════════════════════════════
   TAB 6 — GAINERS / LOSERS
   ═══════════════════════════════════════════════════════════════ */

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-density-row {
  border-bottom: 1px solid var(--mo-divider);
}

[data-zs-crypto-root][data-zs-page='markets-overview'][data-zs-theme='light'] .mo-density-row:hover {
  background: var(--mo-row-hover);
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY SCALE (all tabs)
   ═══════════════════════════════════════════════════════════════ */

[data-zs-page='markets-overview'] .marketOverviewPage {
  font-synthesis: none;
}

[data-zs-page='markets-overview'] .mo-overview-title {
  font-size: clamp(38px, 2.8vw, 42px);
  font-weight: 600;
  letter-spacing: 0;
}

[data-zs-page='markets-overview'] .mo-tvl-title,
[data-zs-page='markets-overview'] .mo-crypto-table-section .all-coins-terminal-page-title,
[data-zs-page='markets-overview'] [data-zs-perf-crypto='1'] h2 {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: 0;
}

[data-zs-page='markets-overview'] .mo-mv-widget-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

[data-zs-page='markets-overview'] .tabular-nums,
[data-zs-page='markets-overview'] .mo-cc-price,
[data-zs-page='markets-overview'] .mo-mv-num,
[data-zs-page='markets-overview'] .mo-tvl-num,
[data-zs-page='markets-overview'] .mo-gl-num,
[data-zs-page='markets-overview'] .all-coins-terminal-col-price {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ═══════════════════════════════════════════════════════════════
   SPACING — tab content rhythm
   ═══════════════════════════════════════════════════════════════ */

[data-zs-page='markets-overview'] .zs-mkt-section-card,
[data-zs-page='markets-overview'] .mo-mv-hub,
[data-zs-page='markets-overview'] .mo-tvl-panel,
[data-zs-page='markets-overview'] .mo-crypto-table-section {
  margin-bottom: 32px;
}

[data-zs-page='markets-overview'] .mo-mv-hub {
  gap: 24px;
}

[data-zs-page='markets-overview'] .mo-mv-widget-grid {
  gap: 16px;
}

/* Container parity — same horizontal bounds for every tab (fluid on desktop) */
[data-zs-page='markets-overview'] .zs-mkt-page-inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--mo-gutter, 24px);
  box-sizing: border-box;
}

@media (max-width: 767px) {
  [data-zs-page='markets-overview'] .zs-mkt-page-inner {
    padding-inline: 16px;
  }
}