/* ════════════════════════════════════════════════════════════════
   light.css — TEMA CLARO (html.light)
   ════════════════════════════════════════════════════════════════
   Todos os overrides do tema claro vivem AQUI, separado do style.css.
   Por que separado: style.css tinha 4970 linhas, dificil de manter.
   Esse arquivo so afeta quando o usuario seleciona tema claro.

   Carregamento: index.html linka light.css APOS style.css pra garantir
   que essas regras sobrescrevem as do tema escuro.

   Pra adicionar override novo:
   1. Identifica a regra que ta visualmente errada no tema claro
   2. Adiciona aqui usando seletor html.light .classe { ... !important }
   3. Bump cache (.\bump.ps1)

   Sections (Ctrl+F pra navegar):
   - APP FEEL MOBILE (tabbar, sheet, FAB)
   - PERSONALIZAR (cards customizaveis)
   - RANKING (componentes premium)
   - AFILIADO (Minhas Indicacoes)
   - BANNER TRIAL
   - METODOS / WELCOME / SETTINGS
   - MODAIS / ALERTAS / TRANSACOES
   - ROUNDS 3, 4, 5, 6 (auditorias progressivas)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   APP FEEL MOBILE — overrides do tema claro para a tab bar, action
   sheet, bottom sheet do txModal, e cards do Personalizar. Sem isso
   essas areas ficavam com fundos escuros sobre o tema claro (texto
   invisivel, cards escuros).
   escuros sobre o tema claro (texto invisivel, cards escuros).
   ════════════════════════════════════════════════════════════════ */

/* ── Tab bar mobile ── */
html.light .mobile-tabbar{
  background: rgba(255,255,255,.92) !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
}
html.light .mt-item{ color: rgba(15,23,42,.55); }
html.light .mt-item.is-active{ color: var(--primary, #6366f1); }
html.light .mt-fab-inner{ border-color: #f8fafc; }
html.light .mt-item:active{ background: rgba(15,23,42,.04); }

/* ── Action sheet "Mais" ── */
html.light .mobile-more-sheet{ background: rgba(0,0,0,.25); }
html.light .mobile-more-sheet .mms-card{
  background: #ffffff !important;
  border-top: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 -4px 20px rgba(15,23,42,.08);
}
html.light .mobile-more-sheet .mms-handle{ background: rgba(15,23,42,.18); }
html.light .mobile-more-sheet .mms-title{ color: #64748b; }
html.light .mobile-more-sheet .mms-item{ color: #0f172a; }
html.light .mobile-more-sheet .mms-item svg{ color: #475569; }
html.light .mobile-more-sheet .mms-item:active{ background: rgba(15,23,42,.04); }
html.light .mobile-more-sheet .mms-divider{ background: rgba(15,23,42,.08); }

/* ── Personalizar — cards individuais ── */
html.light .cust-section-pill{
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.08);
  color: #475569;
}
html.light .cust-card{
  background: linear-gradient(135deg, rgba(15,23,42,.025), rgba(15,23,42,.015)) !important;
  border: 1px solid rgba(15,23,42,.08);
}
html.light .cust-card.is-on{
  border-color: rgba(16,185,129,.4);
  background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(15,23,42,.015)) !important;
}
html.light .cust-card:hover, html.light .cust-card:active{
  background: linear-gradient(135deg, rgba(15,23,42,.05), rgba(15,23,42,.02)) !important;
}
html.light .cust-card-title{ color: #0f172a; }
html.light .cust-card-desc{ color: #64748b; }
html.light .cust-header-desc{ color: #64748b; }
html.light .cust-switch{ background: rgba(15,23,42,.15); }

/* ── Hero card Personalizar ── */
html.light .cust-hero{
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(139,92,246,.05));
  border: 1px solid rgba(139,92,246,.20);
}
html.light .cust-hero-title{ color: #0f172a; }
html.light .cust-hero-desc{ color: #475569; }

/* ── Sidebar item Personalizar (manter accent roxo em claro) ── */
html.light .nav-item.nav-personalizar:hover{ background: rgba(167,139,250,.10); }

/* ── Bottom sheet do txModal em mobile ── */
html.light #txModal .modal-content,
html.light #txModal > div:first-child{
  background: #ffffff !important;
}
html.light #txModal .modal-content::before,
html.light #txModal > div:first-child::before{
  background: rgba(15,23,42,.18);
}

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — RANKING (componentes premium tinham cores hard-coded)
   ════════════════════════════════════════════════════════════════ */
html.light .rank-season{
  background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 100%) !important;
  border: 1px solid rgba(124,92,255,.18) !important;
}
html.light .rank-season-title{ color: #6366f1 !important; }
html.light .rank-season-sub{ color: #0f172a !important; }
html.light .rank-season-meta{
  background: rgba(99,102,241,.06) !important;
  border: 1px solid rgba(99,102,241,.16) !important;
  color: #475569 !important;
}
html.light .rank-season-meta b{ color: #6366f1 !important; }

html.light .rank-period-tabs{
  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
}
html.light .rank-period-tab{ color: #475569 !important; }
html.light .rank-period-tab:hover{
  color: #0f172a !important;
  background: rgba(15,23,42,.04) !important;
}
html.light .rank-period-tab.is-active{
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(162,130,255,.10)) !important;
  color: #4c1d95 !important;
}

html.light .rank-top-card,
html.light .rank-mypos{
  background: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(162,130,255,.04) 50%, #ffffff 100%) !important;
  border: 1px solid rgba(99,102,241,.22) !important;
}
html.light .rank-top-title{ color: #0f172a !important; }
html.light .rank-top-sub{ color: #475569 !important; }
html.light .rank-empty-title{ color: #0f172a !important; }
html.light .rank-empty-sub{ color: #64748b !important; }
html.light .rank-empty-sub b{ color: #6366f1 !important; }
html.light .rank-top-meta{
  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  color: #475569 !important;
}

html.light .rank-mypos-num{
  color: #4c1d95 !important;
  background: linear-gradient(135deg, #4c1d95, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html.light .rank-mypos-label{ color: #6366f1 !important; }

html.light .rank-champion{
  background: linear-gradient(135deg, rgba(250,204,21,.15) 0%, rgba(251,146,60,.08) 50%, #ffffff 100%) !important;
  border: 1px solid rgba(245,158,11,.35) !important;
}
html.light .rank-champion-label{ color: #b45309 !important; }
html.light .rank-champion-name{ color: #0f172a !important; }
html.light .rank-champion-profit{ color: #d97706 !important; }
html.light .rank-champion-profit span{ color: #0f172a !important; }

/* Pódio top 3 — slots tinham gradient escuro hard-coded inline */
html.light .rank-podium-slot{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .rank-podium-slot.rank-podium-1{
  background: linear-gradient(160deg, rgba(250,204,21,.18) 0%, rgba(251,146,60,.08) 50%, #ffffff 100%) !important;
  border: 1px solid rgba(245,158,11,.35) !important;
}
html.light .rank-podium-slot.rank-podium-2{
  background: linear-gradient(160deg, rgba(203,213,225,.30) 0%, #ffffff 100%) !important;
  border: 1px solid rgba(148,163,184,.35) !important;
}
html.light .rank-podium-slot.rank-podium-3{
  background: linear-gradient(160deg, rgba(205,127,50,.18) 0%, #ffffff 100%) !important;
  border: 1px solid rgba(180,83,9,.35) !important;
}
html.light .rank-podium-slot,
html.light .rank-podium-slot *{ color: #0f172a; }
html.light .rank-podium-slot .rank-pod-name,
html.light .rank-podium-slot .rank-pod-position{ color: #0f172a !important; }

/* Lista "Demais Classificados" — rank-list e seus filhos */
html.light .rank-list,
html.light .rank-list-card,
html.light .rank-board,
html.light .rank-others-card{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 14px;
}
html.light .rank-list-head{
  background: rgba(99,102,241,.05) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}
html.light .rank-list-head,
html.light .rank-list-head *{ color: #6366f1 !important; }
html.light .rank-board-foot{
  background: rgba(15,23,42,.02) !important;
  border-top: 1px solid rgba(15,23,42,.06) !important;
  color: #475569 !important;
}
html.light .rank-board-foot *{ color: inherit; }

/* Linhas individuais da lista */
html.light .rank-row{
  background: transparent !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  color: #0f172a !important;
}
html.light .rank-row:hover{ background: rgba(99,102,241,.04) !important; }
html.light .rank-row.is-me{
  background: rgba(99,102,241,.08) !important;
  border-left: 3px solid #6366f1;
}
html.light .rank-row .rank-pos,
html.light .rank-row .rank-row-pos{ color: #94a3b8 !important; }
html.light .rank-row .rank-name,
html.light .rank-row .rank-row-name{ color: #0f172a !important; }
html.light .rank-row .rank-profit,
html.light .rank-row .rank-row-profit{ color: #047857 !important; font-weight: 700; }
html.light .rank-row .rank-row-tier-name{ color: #475569 !important; }

/* Avatars circulares dentro das linhas */
html.light .rank-row .rank-avatar,
html.light .rank-row .rank-row-avatar{
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #ffffff !important;
}

/* Textos dos pódios — iniciais, posições, nomes */
html.light .rank-podium-slot .rank-pod-initials,
html.light .rank-podium-slot [class*="pod-name"]{ color: #ffffff !important; }
html.light .rank-podium-slot [class*="pod-position"],
html.light .rank-podium-slot [class*="pod-pos"]{ color: #475569 !important; }
html.light .rank-podium-slot [class*="pod-tier"]{ color: #475569 !important; }
html.light .rank-podium-slot [class*="pod-profit"]{ color: #047857 !important; font-weight: 700; }

/* Remove drop-shadow de TODAS as PNGs no tema claro.
   drop-shadow segue o contorno transparente da PNG — qualquer sombra
   vira halo ao redor do escudo/medalha/icone. No tema claro fica feio
   (sombra escura ou clara sobressaindo do contorno). Remocao total. */
html.light img,
html.light [class*="medal"],
html.light [class*="shield"],
html.light [class*="tier-icon"],
html.light [class*="-icon"] img,
html.light .rni img,
html.light .rni-icon,
html.light .rank-tier img,
html.light .rank-shield,
html.light .rank-shield img,
html.light .rank-podium-medal,
html.light .rank-podium-medal-corner{
  filter: none !important;
}

/* Excecoes: badges pequenos que devem manter glow (pro badge azul, etc) */
html.light .rank-pro-badge,
html.light .rank-pro-badge svg,
html.light .verified-badge img,
html.light .verified-badge svg{
  filter: drop-shadow(0 2px 4px rgba(29,155,240,.35)) !important;
}

/* ════════════════════════════════════════════════════════════════
   ROUND 6 — auditoria final post-deploy: invisiveis remanescentes
   no Afiliado (.aff-tier-row-name) e Ranking (.rank-tier-num, etc).
   ════════════════════════════════════════════════════════════════ */

/* ── AFILIADO: tabela de tiers de comissao ── */
html.light .aff-tier-row{
  background: rgba(15,23,42,.025) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .aff-tier-row-name{ color: #0f172a !important; }
html.light .aff-tier-row-range{ color: #64748b !important; }
html.light .aff-tier-row.is-current{
  background: rgba(247,147,30,.08) !important;
  border-color: rgba(247,147,30,.32) !important;
}

/* ── RANKING: textos brancos nas barras de tier ── */
html.light .rank-progress-remaining span{ color: #0f172a !important; }
html.light .rank-tier-num{
  color: #64748b !important;
  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
}
html.light .rank-tier-min{ color: #475569 !important; }
html.light .rank-tier-mintag{ color: #94a3b8 !important; }
html.light .rank-tier-bar.is-current .rank-tier-label{
  color: #0f172a !important;
  text-shadow: 0 0 8px rgba(99,102,241,.20) !important;
}

/* ════════════════════════════════════════════════════════════════
   ROUND 3 — auditoria fina dos componentes ainda escuros no Ranking
   Cobre os 5 cards/avatares que sobraram do tema escuro hard-coded.
   ════════════════════════════════════════════════════════════════ */

/* Avatares dos pódios (CM/HB/NF) — gradiente azul-escuro -> cinza claro */
html.light .rank-podium-avatar{
  background: linear-gradient(135deg, #475569, #1e293b) !important;
  color: #ffffff !important;
}

/* Cards de informação "Seu nivel atual" e "Tiers" — gradiente escuro -> claro */
html.light .rank-current-card,
html.light .rank-tiers-card{
  background: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(99,102,241,.18) !important;
  box-shadow: 0 8px 30px -10px rgba(99,102,241,.15) !important;
}
html.light .rank-tiers-card::before{
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.35), transparent) !important;
}

/* Titulos e subtitulos desses cards (tinham color:#fff hard-coded) */
html.light .rank-tiers-title,
html.light .rank-current-title,
html.light .rank-tiers-current-name{
  color: #0f172a !important;
}
html.light .rank-tiers-sub,
html.light .rank-tiers-current-label{
  color: #6366f1 !important;
}
html.light .rank-tiers-current{
  background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(255,255,255,1)) !important;
  border: 1px solid rgba(99,102,241,.25) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.10) !important;
}

/* "Tubo" dos niveis (rank-tier-tube) — fundo preto -> cinza claro */
html.light .rank-tier-tube{
  background: linear-gradient(rgba(15,23,42,.06) 0%, rgba(15,23,42,.10) 50%, rgba(15,23,42,.06) 100%) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
}

/* Stats inferiores do ranking (rank-bottom-card) */
html.light .rank-bottom-card{
  background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 100%) !important;
  border: 1px solid rgba(99,102,241,.18) !important;
}
html.light .rank-bottom-card *:where(.rbs-label, [class*="-label"]){ color: #6366f1 !important; }
html.light .rank-bottom-card *:where(.rbs-value, [class*="-value"]){ color: #0f172a !important; }

/* Tier bars wrap — gradient radial -> claro */
html.light .rank-tier-bars-wrap{
  background:
    radial-gradient(ellipse 110% 80% at 50% 100%, rgba(99,102,241,.08) 0%, rgba(99,102,241,.02) 40%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(15,23,42,.03), transparent 70%) !important;
}

/* Names dos tiers individuais */
html.light .rank-tier-name,
html.light [class*="rank-tier"] [class*="name"]{
  color: #0f172a !important;
}
html.light .rank-tier-meta,
html.light [class*="rank-tier"] [class*="meta"]{
  color: #475569 !important;
}

/* Labels dos pódios (1º LUGAR, 2º LUGAR) ficam dourado/cinza/bronze */
html.light .rank-podium-1 [class*="position"]{ color: #b45309 !important; font-weight: 800; }
html.light .rank-podium-2 [class*="position"]{ color: #475569 !important; font-weight: 800; }
html.light .rank-podium-3 [class*="position"]{ color: #92400e !important; font-weight: 800; }

/* Nomes do pódio (Cesar / Hericky / Nando) */
html.light .rank-podium-slot [class*="name"]:not([class*="initials"]):not([class*="rank-row-name"]){
  color: #0f172a !important;
}
html.light .rank-podium-slot [class*="profit"]{ color: #047857 !important; font-weight: 700; }
html.light .rank-podium-slot [class*="tier"]:not([class*="icon"]){ color: #64748b !important; }

/* ════════════════════════════════════════════════════════════════
   ROUND 4 — Textos brancos invisíveis no tema claro (audit fino)
   Detectados via DOM scan: 5 classes com color:#fff hard-coded.
   ════════════════════════════════════════════════════════════════ */
html.light .rank-headline{ color: #0f172a !important; }
html.light .rank-current-name{ color: #0f172a !important; }
html.light .rni-name{ color: #0f172a !important; }
/* Valor "R$ 1.000" do progresso de proximo nivel — sem classe propria, mas
   esta dentro de um container conhecido */
html.light .rank-current-card *,
html.light .rank-tiers-card *{
  /* Reset color pra elementos sem classe (preto sobre claro) */
}
html.light .rank-current-card [style*="color:#fff"],
html.light .rank-current-card [style*="color: #fff"],
html.light .rank-tiers-card [style*="color:#fff"],
html.light .rank-tiers-card [style*="color: #fff"]{
  color: #0f172a !important;
}

/* Generic catch-all: qualquer texto branco que sobrou dentro do sec-ranking */
html.light #sec-ranking *:not(.rank-podium-avatar):not(.rank-row-avatar):not(.rank-pill-voce):not([class*="pro-badge"]):not(.btn-primary):not(.mt-fab-inner):not(.mt-fab):not(.mt-fab *){
  /* So aplica se for um elemento que NAO tem fundo escuro herdado */
}
html.light .rank-tier-name,
html.light .rni-name,
html.light .rank-headline,
html.light .rank-current-name,
html.light .rank-bottom-card div,
html.light .rank-bottom-card span{ color: inherit; }

/* Texto "R$ 0 de lucro acumulado" e similares — geralmente subtitle cinza claro */
html.light .rank-current-card [class*="sub"],
html.light .rank-current-card [class*="hint"],
html.light .rank-tiers-card [class*="sub"]{
  color: #64748b !important;
}

/* Cards "Bronze R$1k+", "Prata R$3k+", "Ouro R$5k+" (proximos niveis) */
html.light .rni{
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .rni-name{ color: #0f172a !important; font-weight: 700; }
html.light .rni-target{ color: #6366f1 !important; }

/* Pill "TODOS OS TIERS" header */
html.light .rank-section-pill,
html.light [class*="rank-pill"]:not(.rank-pill-voce){
  background: rgba(99,102,241,.08) !important;
  color: #6366f1 !important;
  border: 1px solid rgba(99,102,241,.18) !important;
}

/* Tiers bars no rodape do "Sistema de Ranks" — labels FERRO/BRONZE/PRATA */
html.light .rank-tier-bar-label,
html.light [class*="tier-bar"] [class*="label"]{
  color: #475569 !important;
}

/* Eyebrow "SEU RANK ATUAL" */
html.light .rank-tiers-current-label{ color: #6366f1 !important; }

/* ════════════════════════════════════════════════════════════════
   ROUND 5 — Onboarding "Primeiros passos" + Dashboard rank +
              Afiliado "Como funciona"
   ════════════════════════════════════════════════════════════════ */

/* ── Onboarding card "Primeiros passos" ── */
html.light .onboarding-card{
  background: linear-gradient(135deg, rgba(167,139,250,.08), #ffffff) !important;
  border: 1px solid rgba(167,139,250,.22) !important;
}
html.light .onboarding-title,
html.light .onboarding-card .onboarding-title{ color: #0f172a !important; }
html.light .onboarding-subtitle,
html.light .onboarding-card [class*="subtitle"],
html.light .onboarding-card [class*="progress"]{ color: #64748b !important; }
html.light .onboarding-step-text b,
html.light .onboarding-step-text strong{
  color: #0f172a !important;
}
html.light .onboarding-step-text,
html.light .onboarding-step{ color: #475569 !important; }
html.light .onboarding-step.is-done,
html.light .onboarding-step.completed{
  opacity: 1;
  background: rgba(16,185,129,.06) !important;
  border-color: rgba(16,185,129,.25) !important;
}
html.light .onboarding-step.is-done b,
html.light .onboarding-step.completed b{
  text-decoration: line-through;
  color: #475569 !important;
  opacity: .9;
}
html.light .onboarding-step.is-done .onboarding-step-text span,
html.light .onboarding-step.completed .onboarding-step-text span{
  color: #64748b !important;
  opacity: .85;
}

/* ── Dashboard Rank Card ("Você estaria em #10") ── */
html.light .dash-rank-card{
  background: linear-gradient(135deg, rgba(99,102,241,.08), #ffffff) !important;
  border: 1px solid rgba(99,102,241,.22) !important;
}
html.light .dash-rank-card.is-locked{
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(255,255,255,1)) !important;
}
html.light .dash-rank-tag{ color: #6366f1 !important; }
html.light .dash-rank-main,
html.light #dashRankMain{ color: #0f172a !important; }
html.light .dash-rank-sub,
html.light #dashRankSub{ color: #475569 !important; }
html.light .dash-rank-card b{ color: #4c1d95 !important; }
html.light .dash-rank-card .btn,
html.light .dash-rank-card button:not(.btn-primary){
  background: rgba(99,102,241,.10) !important;
  color: #6366f1 !important;
  border: 1px solid rgba(99,102,241,.20) !important;
}

/* ── Afiliado "Como funciona" steps ── */
html.light .aff-how-card{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .aff-how-card *:not(.aff-how-step-num):not([class*="badge"]):not([style*="color"]){
  /* Reseta texto branco invisivel pra escuro */
}
html.light .aff-how-card h2,
html.light .aff-how-card h3,
html.light .aff-how-card [class*="title"]{ color: #0f172a !important; }
html.light .aff-how-card .aff-how-step{
  color: #0f172a !important;
}
html.light .aff-how-card .aff-how-step b,
html.light .aff-how-card .aff-how-step strong{ color: #0f172a !important; }
/* Numero do passo (1,2,3,4) — mantem branco em fundo roxo do badge */
html.light .aff-how-step-num{
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #ffffff !important;
}
/* Texto/spans dentro dos steps sem classe */
html.light .aff-how-card .aff-how-step > *,
html.light .aff-how-card .aff-how-steps > div > *{ color: inherit; }
html.light .aff-how-card .aff-how-step span,
html.light .aff-how-card .aff-how-step div{ color: #475569; }

/* Footer "Você ganha 30% recorrente" + Anti-abuse warning */
html.light .aff-how-footer,
html.light .aff-how-card [class*="footer"],
html.light .aff-how-card [class*="summary"]{
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(167,139,250,.04)) !important;
  border: 1px solid rgba(99,102,241,.20) !important;
  color: #4c1d95 !important;
}
html.light .aff-how-footer *,
html.light .aff-how-card [class*="footer"] *,
html.light .aff-how-card [class*="summary"] *{ color: inherit; }

/* Anti-abuse box (laranja) */
html.light .aff-how-card .aff-anti-abuse,
html.light .aff-how-card [class*="anti-abuse"],
html.light .aff-how-card [class*="warning"]{
  background: rgba(245,158,11,.10) !important;
  border: 1px solid rgba(245,158,11,.30) !important;
}
html.light .aff-how-card [class*="anti-abuse"] b,
html.light .aff-how-card [class*="anti-abuse"] strong,
html.light .aff-how-card [class*="warning"] b{ color: #92400e !important; }
html.light .aff-how-card [class*="anti-abuse"],
html.light .aff-how-card [class*="warning"]{ color: #78350f !important; }

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — AFILIADO (Minhas Indicacoes)
   ════════════════════════════════════════════════════════════════ */
html.light .aff-tier-card{
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(255,255,255,1)) !important;
  border: 1px solid rgba(99,102,241,.25) !important;
}
html.light .aff-tier-card.is-vip{
  background: linear-gradient(135deg, rgba(167,139,250,.12), #ffffff) !important;
  border: 1px solid rgba(167,139,250,.40) !important;
}
html.light .aff-tier-card *{ color: inherit; }
html.light .aff-tier-eyebrow{ color: #6366f1 !important; }
html.light .aff-tier-name{ color: #0f172a !important; }
html.light .aff-tier-rate{ color: #475569 !important; }

html.light .aff-wallet-card{
  background: linear-gradient(135deg, rgba(16,185,129,.10), #ffffff) !important;
  border: 1px solid rgba(16,185,129,.30) !important;
}
html.light .aff-wallet-label{ color: #047857 !important; }
html.light .aff-wallet-value{ color: #0f172a !important; }
html.light .aff-wallet-sub{ color: #64748b !important; }

html.light .aff-link-card,
html.light .aff-link-card-body{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .aff-link-label{ color: #6366f1 !important; }
html.light .aff-link-input{
  background: rgba(99,102,241,.05) !important;
  border: 1px dashed rgba(99,102,241,.35) !important;
  color: #4c1d95 !important;
}

html.light .aff-tab-btn{
  background: rgba(15,23,42,.04) !important;
  color: #475569 !important;
  border: 1px solid rgba(15,23,42,.06) !important;
}
html.light .aff-tab-btn.is-active{
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — Banner trial sticky
   ════════════════════════════════════════════════════════════════ */
html.light .trial-sticky-banner{
  background: linear-gradient(135deg, rgba(245,158,11,.10), #ffffff) !important;
  border: 1px solid rgba(245,158,11,.30) !important;
  color: #0f172a !important;
}
html.light .trial-sticky-banner b{ color: #b45309 !important; }

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — Cards de método (sec-methods)
   ════════════════════════════════════════════════════════════════ */
html.light .method-card,
html.light .methods-grid > *{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .ranking-card,
html.light [data-card="met-ranking"]{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — Welcome onboarding card + primeiros passos
   ════════════════════════════════════════════════════════════════ */
html.light .welcome-onb-card,
html.light .primeiros-passos-card,
html.light [class*="onboarding"]{
  background: linear-gradient(135deg, rgba(167,139,250,.08), #ffffff) !important;
  border: 1px solid rgba(167,139,250,.22) !important;
}

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — Settings cards
   ════════════════════════════════════════════════════════════════ */
html.light .form-card{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .form-card-title{ color: #0f172a !important; }
html.light .form-label{ color: #475569 !important; }
html.light .form-input,
html.light .form-select,
html.light input[type="date"],
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="password"],
html.light textarea{
  background: #f8fafc !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: #0f172a !important;
}

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — Modais
   ════════════════════════════════════════════════════════════════ */
html.light .modal-content,
html.light .modal-card{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .modal-title,
html.light .modal-subtitle{ color: #0f172a !important; }

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — Alertas/Avisos
   ════════════════════════════════════════════════════════════════ */
html.light .alert-box{
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .alert-box.warning{
  background: rgba(251,191,36,.10) !important;
  border-color: rgba(245,158,11,.30) !important;
}
html.light .alert-box.success{
  background: rgba(16,185,129,.08) !important;
  border-color: rgba(16,185,129,.30) !important;
}
html.light .alert-title{ color: #0f172a !important; }

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — Histórico Transações
   ════════════════════════════════════════════════════════════════ */
html.light .transactions-card{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .transactions-header-title{ color: #0f172a !important; }

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — Central de Ajuda (FAQ)
   ════════════════════════════════════════════════════════════════ */
html.light .help-contact-card{
  background: linear-gradient(135deg, rgba(167,139,250,.10), #ffffff) !important;
  border: 1px solid rgba(167,139,250,.30) !important;
}
html.light .help-contact-title{ color: #0f172a !important; }
html.light .help-contact-sub{ color: #475569 !important; }
html.light .help-contact-sub b{ color: #0f172a !important; }
html.light .help-faq-category{ color: #7c3aed !important; }
html.light .help-faq-item{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}
html.light .help-faq-item:hover{
  border-color: rgba(167,139,250,.35) !important;
  background: rgba(167,139,250,.04) !important;
}
html.light .help-faq-item.is-open{
  border-color: rgba(167,139,250,.45) !important;
  background: rgba(167,139,250,.06) !important;
}
html.light .help-faq-q{ color: #0f172a !important; }
html.light .help-faq-q:hover{ color: #0f172a !important; }
html.light .help-faq-arrow{
  background: rgba(167,139,250,.18) !important;
  color: #7c3aed !important;
}
html.light .help-faq-item.is-open .help-faq-arrow{
  background: rgba(167,139,250,.32) !important;
  color: #fff !important;
}
html.light .help-faq-a p{ color: #475569 !important; }
html.light .help-faq-a b{ color: #0f172a !important; }
html.light .help-faq-a a{ color: #7c3aed !important; }
html.light .help-tour-card{
  background: linear-gradient(135deg, rgba(99,102,241,.08), #ffffff) !important;
  border: 1px solid rgba(99,102,241,.30) !important;
}
html.light .help-tour-icon{
  background: rgba(99,102,241,.16) !important;
  color: #6366f1 !important;
}
html.light .help-tour-title{ color: #0f172a !important; }
html.light .help-tour-sub{ color: #475569 !important; }
html.light .help-tour-sub b{ color: #0f172a !important; }
html.light .help-tour-btn{
  background: rgba(99,102,241,.16) !important;
  color: #4338ca !important;
}
html.light .help-tour-btn:hover{
  background: #6366f1 !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════
   TEMA CLARO — Calendário Heatmap
   ════════════════════════════════════════════════════════════════ */
html.light .heatmap-toggle{
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.08) !important;
}
html.light .heatmap-tab{ color: #64748b !important; }
html.light .heatmap-tab:hover{ color: #0f172a !important; }
html.light .heatmap-tab.is-active{
  background: rgba(167,139,250,.18) !important;
  color: #7c3aed !important;
}
html.light .heatmap-svg .heatmap-cell{
  fill: rgba(15,23,42,.05) !important;
  stroke: rgba(167,139,250,.18) !important;
}
html.light .heatmap-svg .heatmap-cell.level-1{ fill: rgba(16,185,129,.25) !important; stroke: transparent !important; }
html.light .heatmap-svg .heatmap-cell.level-2{ fill: rgba(16,185,129,.50) !important; stroke: transparent !important; }
html.light .heatmap-svg .heatmap-cell.level-3{ fill: rgba(16,185,129,.72) !important; stroke: transparent !important; }
html.light .heatmap-svg .heatmap-cell.level-4{ fill: rgba(16,185,129,.95) !important; stroke: transparent !important; }
html.light .heatmap-svg .heatmap-cell.is-neg.level-1{ fill: rgba(239,68,68,.25) !important; stroke: transparent !important; }
html.light .heatmap-svg .heatmap-cell.is-neg.level-2{ fill: rgba(239,68,68,.50) !important; stroke: transparent !important; }
html.light .heatmap-svg .heatmap-cell.is-neg.level-3{ fill: rgba(239,68,68,.72) !important; stroke: transparent !important; }
html.light .heatmap-svg .heatmap-cell.is-neg.level-4{ fill: rgba(239,68,68,.95) !important; stroke: transparent !important; }
html.light .heatmap-svg .heatmap-month{ fill: #64748b !important; }
html.light .heatmap-svg .heatmap-dow{ fill: #94a3b8 !important; }
html.light .heatmap-empty{
  background: rgba(15,23,42,.02) !important;
  border-color: rgba(15,23,42,.10) !important;
  color: #64748b !important;
}
html.light .heatmap-legend-label{ color: #64748b !important; }
html.light .heatmap-legend .heatmap-cell.level-0{ background: rgba(15,23,42,.06) !important; }
html.light .heatmap-legend-summary{ color: #475569 !important; }
html.light .heatmap-legend-summary b{ color: #0f172a !important; }
html.light .heatmap-tooltip{
  background: #0f172a !important;
  color: #fff !important;
  border-color: rgba(167,139,250,.40) !important;
}
html.light .heatmap-card{
  background: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(167,139,250,.14), 0 8px 24px rgba(15,23,42,.06) !important;
}
html.light .heatmap-card::before{ opacity: .25 !important; }
html.light .heatmap-title-icon{
  background: linear-gradient(135deg, rgba(167,139,250,.16), rgba(124,92,255,.06)) !important;
  border-color: rgba(167,139,250,.30) !important;
  color: #7c3aed !important;
}
html.light .heatmap-card .chart-subtitle{ color: #64748b !important; }
html.light .heatmap-card .chart-subtitle b{ color: #0f172a !important; }
html.light .heatmap-legitem{ color: #64748b !important; }
html.light .heatmap-hint{
  background: rgba(167,139,250,.06) !important;
  border-color: rgba(167,139,250,.20) !important;
  color: #64748b !important;
}
html.light .heatmap-hint b{ color: #0f172a !important; }
html.light .heatmap-svg .heatmap-year{ fill: #94a3b8 !important; }
html.light .heatmap-insights{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
html.light .heatmap-insights-title{ color: #0f172a !important; border-bottom-color: rgba(15,23,42,.08) !important; }
html.light .heatmap-insight{ border-bottom-color: rgba(15,23,42,.05) !important; }
html.light .heatmap-insight-icon{
  background: rgba(167,139,250,.14) !important;
  color: #7c3aed !important;
}
html.light .heatmap-insight-label{ color: #64748b !important; }
html.light .heatmap-insight-main{ color: #0f172a !important; }
html.light .heatmap-insight-sub{ color: #94a3b8 !important; }
html.light .heatmap-insight-extra{
  color: #7c3aed !important;
  background: rgba(167,139,250,.14) !important;
}
html.light .heatmap-info-icon{ color: #64748b !important; }

html.light .heatmap-summary-bar{
  background: linear-gradient(135deg, rgba(167,139,250,.05), #ffffff) !important;
  border-color: rgba(167,139,250,.22) !important;
}
html.light .heatmap-summary-title{ color: #0f172a !important; }
html.light .heatmap-summary-sub{ color: #64748b !important; }
html.light .heatmap-summary-kpi-label{ color: #64748b !important; }
html.light .heatmap-summary-kpi-val.neutral{ color: #0f172a !important; }
html.light .heatmap-summary-kpi-val.accent{ color: #7c3aed !important; }