/* ==========================================================================
   REBRAND GUIDE (edita solo estos valores para cambiar paleta global)
   - Color principal marca: --rb-primary
   - Hover principal: --rb-primary-hover
   - Fondo app: --rb-bg / --app-bg
   - Fondo sidebar: --rb-sidebar
   - Fondo cards: --rb-card
   ========================================================================== */
:root,
.dark {
    /* Brand colors */
    --rb-primary: #0781FECC; /* rgba(7, 129, 254, 0.8) */
    --rb-primary-hover: #066ED7CC;
    --rb-secondary: #00C7B4CC; /* rgba(0, 199, 180, 0.8) */
    --rb-primary-soft: rgba(7, 129, 254, 0.15);
    --rb-border: rgba(255, 255, 255, 0.1);
    --rb-sidebar: oklch(0.1 0 0);
    --rb-bg: oklch(0.12 0 0);
    --rb-card: oklch(0.15 0 0);

    /* Igual a www/trader */
    --background: oklch(0.12 0 0);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.15 0 0);
    --popover: oklch(0.15 0 0);
    /* Tie shadcn/tailwind primary tokens to brand color */
    --primary: var(--rb-primary);
    --primary-foreground: oklch(0.98 0 0);
    --secondary: oklch(0.25 0 0);
    --muted: oklch(0.25 0 0);
    --accent: var(--rb-primary);
    --destructive: oklch(0.6 0.25 25);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 12%);
    --ring: var(--rb-primary);
    --sidebar: oklch(0.1 0 0);
    --app-bg: radial-gradient(circle at 50% 50%, #111111 0%, #0b0b0b 60%, #050505 100%);
}

html,
body,
#app {
    background-color: #111111 !important;
}

/* ==========================================================================
   iOS / Mobile: prevent horizontal overflow (screen shifts sideways)
   - Common offender: fixed/absolute panels with w-[380px] on 375px devices.
   ========================================================================== */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

#app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Tailwind arbitrary width class used by dropdown panels, etc. */
.w-\[380px\] {
    width: min(380px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
}

@media (max-width: 420px) {
    /* If positioned at right:0, avoid pushing outside viewport */
    .w-\[380px\] {
        right: 12px !important;
        left: 12px !important;
    }
}

/* Fondo dinámico inyectado por JS en layout principal */
.relative.flex.min-h-screen.w-full.overflow-x-hidden.transition-all.duration-700[style*="background"] {
    background: var(--app-bg) !important;
}

/* Neutraliza fondos azules hardcoded del build */
.bg-\[\#05061b\],
.bg-\[\#07081b\] {
    background-color: #111111 !important;
}

.bg-\[\#070821\],
.bg-\[\#0f112a\],
.bg-\[\#0b0c2a\],
.bg-\[\#1e293b\],
.bg-\[\#0f1221\],
.bg-\[\#0b0e1e\],
.dark\:bg-\[\#1b2e4b\],
.bg-\[\#1b2e4b\],
.dark\:bg-\[\#1b2e4b60\] {
    background-color: #111111 !important;
}

.bg-\[\#0f112a\]\/40,
.bg-\[\#0f1221\]\/50 {
    background-color: #171717 !important;
}

.text-indigo-300,
.text-indigo-400,
.text-indigo-500,
.text-blue-400,
.text-blue-500,
.text-\[\#0061ff\],
.text-\[\#0051d4\],
.text-\[\#10207c\],
.text-\[\#2946e6\] {
    color: #9ca3af !important;
}

.from-indigo-500,
.from-indigo-600,
.to-indigo-200,
.to-indigo-500,
.to-indigo-600,
.from-\[\#10207c\],
.from-\[\#2946e6\],
.to-\[\#10207c\],
.to-\[\#2946e6\] {
    --tw-gradient-from: var(--rb-primary) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: var(--rb-secondary) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Sidebar (panel conectado) */
aside,
aside.bg-sidebar {
    background-color: var(--rb-sidebar) !important;
}

aside a,
aside [role="link"] {
    color: #9ca3af;
}

aside a:hover,
aside [role="link"]:hover {
    color: #ffffff;
}

/* Item activo sidebar sólido */
aside .bg-primary,
aside .bg-\[\#0061ff\],
aside .bg-\[\#0051d4\],
aside .bg-blue-500,
aside .bg-blue-600,
aside .bg-indigo-500,
aside .bg-indigo-600 {
    background: var(--rb-primary) !important;
    background-image: none !important;
    color: #ffffff !important;
}

aside .bg-primary *,
aside .bg-\[\#0061ff\] *,
aside .bg-\[\#0051d4\] *,
aside .bg-blue-500 *,
aside .bg-blue-600 *,
aside .bg-indigo-500 *,
aside .bg-indigo-600 * {
    color: #ffffff !important;
}

/* Utilidades primarias globales (botones/etiquetas) */
.bg-primary,
button.bg-primary,
[data-slot="button"].bg-primary {
    background: var(--rb-primary) !important;
    color: #ffffff !important;
}

.hover\:bg-primary\/90:hover,
button.bg-primary:hover,
[data-slot="button"].bg-primary:hover {
    background: var(--rb-primary-hover) !important;
}

.text-primary {
    color: var(--rb-primary) !important;
}

.border-primary {
    border-color: var(--rb-primary) !important;
}

/* Tailwind-ish utilities used by compiled KYC stepper */
.bg-primary\/5 {
    background-color: rgba(7, 129, 254, 0.05) !important;
}

.hover\:bg-primary\/5:hover {
    background-color: rgba(7, 129, 254, 0.05) !important;
}

.hover\:border-primary\/50:hover {
    border-color: rgba(7, 129, 254, 0.5) !important;
}

.shadow-primary\/30 {
    --tw-shadow-color: rgba(7, 129, 254, 0.3) !important;
}

.from-primary {
    --tw-gradient-from: var(--rb-primary) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(7, 129, 254, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-primary {
    --tw-gradient-to: var(--rb-primary) var(--tw-gradient-to-position) !important;
}

.bg-primary\/10 {
    background-color: rgba(7, 129, 254, 0.1) !important;
}

.bg-primary\/20 {
    background-color: rgba(7, 129, 254, 0.2) !important;
}

.border-primary\/20 {
    border-color: rgba(7, 129, 254, 0.2) !important;
}

.border-primary\/40 {
    border-color: rgba(7, 129, 254, 0.4) !important;
}

/* Botones con degradado marca */
.button-86,
.btn-primary,
[class*="btn-primary"] {
    background: linear-gradient(90deg, var(--rb-primary) 0%, var(--rb-secondary) 100%) !important;
    color: #ffffff !important;
}

.button-86:hover,
.btn-primary:hover,
[class*="btn-primary"]:hover {
    background: linear-gradient(90deg, var(--rb-primary-hover) 0%, var(--rb-secondary) 100%) !important;
}

/* Inputs globales */
.custom-autocomplete,
.select-dark,
.bg-\[\#ebedf07a\] {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
}

.border-\[\#797979\] {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

input:focus,
select:focus,
textarea:focus,
.custom-autocomplete:focus,
.select-dark:focus,
.focus-within\:border-primary\/50:focus-within {
    border-color: rgba(7, 129, 254, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(7, 129, 254, 0.2) !important;
    outline: none !important;
}

.focus-within\:ring-primary\/20:focus-within,
.focus-visible\:ring-primary\/50:focus-visible {
    --tw-ring-color: rgba(7, 129, 254, 0.2) !important;
}

/* KYC / cards de contenido */
.bg-white\/\[0\.02\] {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Document Requirements (KYC / Contracts) más oscuro */
.bg-white\/\[0\.02\].backdrop-blur-xl,
.bg-white\/\[0\.02\].backdrop-blur-md {
    background-color: #111214 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.border-white\/5 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Boxes similares con transparencia leve */
.bg-white\/\[0\.03\] {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.selection\:bg-indigo-500\/30::selection {
    background-color: rgba(7, 129, 254, 0.3) !important;
}

/* Contracts dropzone */
.border-dashed.rounded-xl svg {
    stroke: var(--rb-primary) !important;
}

.border-dashed.rounded-xl:hover {
    border-color: #6b7280 !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ==========================================================================
   LOGIN (NO CONECTADO)
   Estos overrides afectan SOLO la pantalla de login.
   Si quieres cambiar esta vista:
   - Fondo login: regla main...bg-[#05061b]
   - Card login: reglas bg-[#070821]/40 y bg-[#0f112a]/40
   - Glow del botón ACCESS: regla "button.bg-primary" en esta sección
   - Link Forgot Password: reglas de a.text-blue-400 / hover
   ========================================================================== */
main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] {
    background-color: oklch(0.12 0 0) !important;
}

main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .bg-\[\#070821\]\/40 {
    background-color: oklch(0.15 0 0 / 40%) !important;
}

main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .bg-\[\#0f112a\]\/40 {
    background-color: oklch(0.15 0 0 / 40%) !important;
}

main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .bg-indigo-600\/20 {
    background-color: rgba(7, 129, 254, 0.2) !important;
}

main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .drop-shadow-\[0_0_30px_rgba\(37\,99\,235\,0\.3\)\] {
    filter: drop-shadow(0 0 30px rgba(7, 129, 254, 0.3)) !important;
}

main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .animate-in.fade-in.slide-in-from-left-12 h1 .text-indigo-400 {
    background: linear-gradient(90deg, var(--rb-primary) 0%, var(--rb-secondary) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .bg-indigo-500\/10 {
    background-color: rgba(7, 129, 254, 0.1) !important;
}

main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .bg-indigo-500\/10.text-indigo-400 {
    color: var(--rb-primary) !important;
}

main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .bg-primary\/40.absolute.top-0.left-0.h-\[2px\].w-full {
    background: linear-gradient(90deg, transparent 0%, rgba(7, 129, 254, 0.4) 50%, transparent 100%) !important;
}

main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .text-gray-500.uppercase .bg-gray-700,
main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .h-1.w-1.rounded-full.bg-gray-700 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ACCESS button: conserva naranja y glow naranja */
main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] button.bg-primary {
    box-shadow:
        0 12px 34px rgba(7, 129, 254, 0.42),
        0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

/* Iconos de email/password: naranja solo cuando el input está en focus */
main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .group:focus-within .group-focus-within\:text-blue-500,
main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .group:focus-within .group-focus-within\:text-primary,
main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] .group:focus-within svg.absolute {
    color: var(--rb-primary) !important;
    stroke: var(--rb-primary) !important;
}

/* Forgot password: gris por defecto, naranja en hover */
main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] a.text-blue-400,
main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] a.text-primary\/80 {
    color: #9ca3af !important;
}

main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] a.hover\:text-blue-300:hover,
main.relative.flex.min-h-screen.w-full.overflow-hidden.bg-\[\#05061b\] a.hover\:text-primary:hover {
    color: var(--rb-primary) !important;
}


/* ==========================================================================
   iOS (TOUCH ONLY): reduce heavy effects
   - IMPORTANT: desktop Safari can match -webkit-touch-callout too, so we also
     require coarse pointer / no hover to avoid breaking desktop UI.
   ========================================================================== */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    /* Disable expensive blur effects on iOS Safari */
    .backdrop-blur-xl,
    .backdrop-blur-lg,
    .backdrop-blur-md,
    .backdrop-blur-sm,
    .backdrop-blur {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    /* Also catch Tailwind arbitrary values: backdrop-blur-[1px], etc. */
    [class*="backdrop-blur"] {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    /* Reduce very heavy shadows/filters */
    .shadow,
    .shadow-sm,
    .shadow-md,
    .shadow-lg,
    .shadow-xl,
    .shadow-2xl {
      box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important;
    }

    [class*="drop-shadow"] {
      filter: none !important;
    }

    /* Animations/transitions pueden causar jank/black-screen en iOS Safari */
    .animate-pulse,
    .animate-bounce,
    .animate-ping {
      animation: none !important;
    }

    [class*="transition"],
    .transition-all,
    .transition,
    [class*="duration-"] {
      transition: none !important;
    }

    /* iOS Safari se muere con filtros grandes (los "glows" del fondo). */
    [class*="blur-\\["],
    [class*="blur-150"],
    [class*="blur-180"] {
      filter: none !important;
    }

    /* Blend modes + overlays también disparan compositing caro en iOS. */
    [class*="mix-blend-"] {
      mix-blend-mode: normal !important;
    }

    /* Evita fetch externo decorativo que puede colgarse (noise.svg). */
    *[class*="grainy-gradients.vercel.app/noise.svg"] {
      background-image: none !important;
      background: none !important;
    }

    /* Fondo fijo con glows: en iPhone puede crashear al hacer scroll. */
    .pointer-events-none.fixed.inset-0.z-0.overflow-hidden {
      display: none !important;
    }
  }
}

/* ==========================================================================
   Mobile responsive fixes (ONLY small screens)
   - Fix horizontal overflow on tab bars + wide tables
   ========================================================================== */
@media (max-width: 640px) {
  /* Hard-stop page horizontal overflow (keep inner .custom-scroll working). */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Common offender: tab bars using space-x-8 without wrap (Certificates, etc.) */
  .flex.space-x-8 {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .flex.space-x-8 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
  }

  /* Tables: keep scroll inside the component, not the page */
  .custom-scroll {
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Tables must NEVER force horizontal scroll on phones */
  [data-tf-page] .custom-scroll table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  /* Override inline minWidth styles from TableComponent (minWidth: XXXpx) */
  [data-tf-page] .custom-scroll table th,
  [data-tf-page] .custom-scroll table td {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Prevent min-width utility from forcing sideways layouts */
  .min-w-\[280px\] {
    min-width: 0 !important;
  }

  /* TableComponent toolbars: force stacking + full width in phones
     (some pages still render the header row as a horizontal bar). */
  [data-tf-page] .mb-6.flex.items-center.justify-between.gap-4,
  [data-tf-page] .mb-6.flex.flex-col.items-center.justify-between.gap-4 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  [data-tf-page] .mb-6.flex.items-center.justify-between.gap-4 > *,
  [data-tf-page] .mb-6.flex.flex-col.items-center.justify-between.gap-4 > * {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Pagination footer: avoid controls drifting off-screen */
  [data-tf-page] .mt-4.flex.items-center.justify-between.gap-2,
  [data-tf-page] .mt-4.flex.flex-col-reverse.items-center.justify-between.gap-2 {
    align-items: stretch !important;
  }

  /* ==========================================================================
     Dashboard pages: compact tables (phones only)
     - We scope everything by [data-tf-page="..."] so desktop/tablet is untouched.
     ========================================================================== */

  /* Ensure table text can wrap (many cells use whitespace-nowrap utilities) */
  [data-tf-page] .custom-scroll table th,
  [data-tf-page] .custom-scroll table td {
    white-space: normal !important;
  }

  /* Withdrawals: hide # and Program columns (keep Datetime/Amount/Status/Actions) */
  [data-tf-page="withdrawals"] .custom-scroll table th:nth-child(1),
  [data-tf-page="withdrawals"] .custom-scroll table td:nth-child(1),
  [data-tf-page="withdrawals"] .custom-scroll table th:nth-child(3),
  [data-tf-page="withdrawals"] .custom-scroll table td:nth-child(3) {
    display: none !important;
  }

  /* My Accounts: hide rule columns + Purchased at (keep Program/Size/Status/Actions) */
  [data-tf-page="my_accounts"] .custom-scroll table th:nth-child(1),
  [data-tf-page="my_accounts"] .custom-scroll table td:nth-child(1),
  [data-tf-page="my_accounts"] .custom-scroll table th:nth-child(4),
  [data-tf-page="my_accounts"] .custom-scroll table td:nth-child(4),
  [data-tf-page="my_accounts"] .custom-scroll table th:nth-child(5),
  [data-tf-page="my_accounts"] .custom-scroll table td:nth-child(5),
  [data-tf-page="my_accounts"] .custom-scroll table th:nth-child(6),
  [data-tf-page="my_accounts"] .custom-scroll table td:nth-child(6),
  [data-tf-page="my_accounts"] .custom-scroll table th:nth-child(8),
  [data-tf-page="my_accounts"] .custom-scroll table td:nth-child(8) {
    display: none !important;
  }

  /* My Accounts: shrink cell padding so Status + Actions fit */
  [data-tf-page="my_accounts"] .custom-scroll table th,
  [data-tf-page="my_accounts"] .custom-scroll table td {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
  }

  /* Status badge must never overflow its cell */
  [data-tf-page="my_accounts"] .custom-scroll table td:nth-child(7) * {
    max-width: 100% !important;
  }

  /* Trade History: hide noisy numeric columns; keep side/instrument/P&L/date */
  [data-tf-page="trade_history"] .custom-scroll table th:nth-child(1),
  [data-tf-page="trade_history"] .custom-scroll table td:nth-child(1),
  [data-tf-page="trade_history"] .custom-scroll table th:nth-child(4),
  [data-tf-page="trade_history"] .custom-scroll table td:nth-child(4),
  [data-tf-page="trade_history"] .custom-scroll table th:nth-child(5),
  [data-tf-page="trade_history"] .custom-scroll table td:nth-child(5),
  [data-tf-page="trade_history"] .custom-scroll table th:nth-child(7),
  [data-tf-page="trade_history"] .custom-scroll table td:nth-child(7),
  [data-tf-page="trade_history"] .custom-scroll table th:nth-child(8),
  [data-tf-page="trade_history"] .custom-scroll table td:nth-child(8),
  [data-tf-page="trade_history"] .custom-scroll table th:nth-child(9),
  [data-tf-page="trade_history"] .custom-scroll table td:nth-child(9) {
    display: none !important;
  }

  /* Certificates: hide # column to reduce width */
  [data-tf-page="certificates"] .custom-scroll table th:nth-child(1),
  [data-tf-page="certificates"] .custom-scroll table td:nth-child(1) {
    display: none !important;
  }

  /* Certificates (mobile): keep Program + Date + View(eye) only */
  [data-tf-page="certificates"] .custom-scroll table th:nth-child(3),
  [data-tf-page="certificates"] .custom-scroll table td:nth-child(3) {
    display: none !important; /* Quantity */
  }

  /* Hide download button, keep the eye button */
  [data-tf-page="certificates"] .custom-scroll a[title*="Download"] {
    display: none !important;
  }

  /* Make Date + Actions fixed so they don't get cut */
  [data-tf-page="certificates"] .custom-scroll table th:nth-child(4),
  [data-tf-page="certificates"] .custom-scroll table td:nth-child(4) {
    width: 120px !important;
  }

  [data-tf-page="certificates"] .custom-scroll table th:nth-child(5),
  [data-tf-page="certificates"] .custom-scroll table td:nth-child(5) {
    width: 44px !important; /* eye */
  }

  /* The "Actions" header doesn't fit in 44px; hide it. */
  [data-tf-page="certificates"] .custom-scroll table th:nth-child(5) {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* Program takes remaining space */
  [data-tf-page="certificates"] .custom-scroll table th:nth-child(2),
  [data-tf-page="certificates"] .custom-scroll table td:nth-child(2) {
    width: calc(100% - 164px) !important;
    min-width: 140px !important;
  }

  /* Leaderboards: hide Account + Program columns (keep Rank/User/Profit/Growth%) */
  [data-tf-page="leaderboards"] .custom-scroll table th:nth-child(3),
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(3),
  [data-tf-page="leaderboards"] .custom-scroll table th:nth-child(4),
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(4) {
    display: none !important;
  }

  /* Leaderboards (mobile): make remaining columns fit */
  [data-tf-page="leaderboards"] .custom-scroll table th,
  [data-tf-page="leaderboards"] .custom-scroll table td {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  [data-tf-page="leaderboards"] .custom-scroll table th:nth-child(1),
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(1) {
    width: 10% !important; /* Rank */
    text-align: center !important;
  }

  /* Use % widths so columns distribute across full row */
  [data-tf-page="leaderboards"] .custom-scroll table th:nth-child(2),
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(2) {
    width: 40% !important; /* User */
  }

  [data-tf-page="leaderboards"] .custom-scroll table th:nth-child(5),
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(5) {
    width: 25% !important; /* Profit */
    white-space: nowrap !important;
    text-align: center !important;
  }

  [data-tf-page="leaderboards"] .custom-scroll table th:nth-child(6),
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(6) {
    width: 25% !important; /* Growth (%) */
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Center growth pill within the cell */
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(6) .inline-flex {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Compact the user cell: hide email line on phones */
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(2) span.text-xs.font-medium.text-gray-500 {
    display: none !important;
  }

  /* Header "User & Email" breaks letter-by-letter due to global wrap rules.
     Replace it with a short label on phones. */
  [data-tf-page="leaderboards"] .custom-scroll table th:nth-child(2) {
    font-size: 0 !important;
    line-height: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
  }

  /* The Leaderboards header background can look "split" because the table
     header has its own bg while the wrapper uses bg-black/20. Make thead
     transparent so the wrapper background is consistent across full width. */
  [data-tf-page="leaderboards"] .custom-scroll thead,
  [data-tf-page="leaderboards"] .custom-scroll thead tr,
  [data-tf-page="leaderboards"] .custom-scroll thead th {
    background: transparent !important;
  }

  [data-tf-page="leaderboards"] .custom-scroll table th:nth-child(2)::after {
    content: "User";
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: inherit;
    display: inline-block;
  }

  /* Reduce username font a bit so it doesn't wrap aggressively */
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(2) span.text-base.leading-none.font-bold {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  /* Profit is rendered as a big number; shrink it on mobile */
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(5) {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  /* Growth badge: tighter pill */
  [data-tf-page="leaderboards"] .custom-scroll table td:nth-child(6) .inline-flex {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
}

/* ==========================================================================
   Login mobile perf (ONLY small screens)
   - Reduce heavy blur/glow effects that cause black-screen/jank on iOS Safari
   ========================================================================== */
@media (max-width: 640px) {
  /* Card blur on login is very expensive on iOS */
  .backdrop-blur-3xl,
  .backdrop-blur-2xl {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Kill giant blurred glows (they're purely decorative) */
  .blur-\[120px\] {
    filter: none !important;
  }

  /* Reduce massive shadow that can trigger slow paints */
  .shadow-\[0_20px_50px_rgba\(0\,0\,0\,0\.4\)\] {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
  }
}