/* =====================================================================
   NexusMax — Tema CLARO (identidade Fidelimax)
   =====================================================================
   Paleta herdada do ecossistema Fidelimax:
   - Azul primary/actions #2B5FF3
   - Amarelo CTA #FFB800
   - Laranja decorativo #FF6B00
   - Roxo decorativo #733EE3
   - Grays 100-800 padronizados

   Filosofia visual (estilo Gmail — 3 níveis de hierarquia):
   - Nível 1 (fundo da página): cinza-azulado #E8EBF2 (sidebar-level)
   - Nível 2 (cards/containers): cinza claro #F0F4F9 (caixa-de-entrada-level)
   - Nível 3 (elementos internos): branco #ffffff (email-level, conteúdo)
   - Texto em gray-800 (#19202D) com hierarquia via gray-600/700
   - Bordas sutis em gray-200 (#DCE1EB) com tom azulado
   - Verde mantido APENAS em contextos semânticos (toggle on, success, dots)

   Implementação: TUDO dentro de html[data-theme="light"] { ... }
   pra não vazar pro dark. Usamos !important em props-chave porque o
   dark tem ~200 regras hardcoded que precisamos sobrescrever.
   ===================================================================== */

html[data-theme="light"] {
  /* ==== Tokens ==== */
  --bg:              #E8EBF2;   /* fundo da página */
  --bg-deep:         #E8EBF2;
  --bg-elev:         #F0F4F9;   /* cards primários (briefing, time, histórico) */
  --bg-card:         #F0F4F9;
  --bg-card-hi:      #ffffff;   /* elementos destacados DENTRO dos cards */
  --bg-subtle:       #F1F4F9;   /* fundo bem suave */
  --border:          #DCE1EB;   /* bordas sutis */
  --border-hi:       #C3CADA;   /* bordas visíveis */
  --text:            #19202D;   /* gray-800 */
  --text-2:          #333E4F;   /* gray-700 */
  --muted:           #5A626E;   /* gray-600 */
  --dim:             #737A86;   /* gray-500 */

  /* Acentos Fidelimax */
  --acc:             #2B5FF3;   /* azul primary */
  --acc-hover:       #2148B9;
  --acc-soft:        #E5EFFF;   /* azul bem claro (bg) */
  --blue:            #2B5FF3;   /* links, actions secundárias */
  --blue-hover:      #2148B9;
  --blue-soft:       #E5EFFF;   /* fundo azul claro (active state) */
  --yellow:          #FFB800;   /* CTA chamativo */
  --yellow-hover:    #E6A500;
  --orange:          #FF6B00;
  --purple:          #733EE3;
  --pink:            #F0538C;

  /* Estados */
  --ok:              #1ECB4F;
  --warn:            #FFAE00;
  --err:             #FF3541;
  --err-soft:        #FFE6E8;

  /* Sombras (Fidelimax-style: discretas, com base gray-800) */
  --shadow-sm:       0 1px 2px rgba(25,32,45,0.05);
  --shadow-md:       0 2px 6px rgba(25,32,45,0.06), 0 1px 2px rgba(25,32,45,0.04);
  --shadow-lg:       0 8px 24px rgba(25,32,45,0.10), 0 2px 6px rgba(25,32,45,0.06);
  --shadow-glow:     var(--shadow-md);

  /* Acentos antigos do dark (cyber-mint etc) mapeados pro Fidelimax */
  --acc-2:           #2B5FF3;
  --acc-violet:      #733EE3;
  --acc-hot:         #F0538C;
}

/* =====================================================================
   BASE — body e elementos globais
   ===================================================================== */
html[data-theme="light"] body {
  background: #E8EBF2 !important;
  color: #19202D !important;
}

/* Esconde orbs e grão do dark (identidade web3 — não cabem no light) */
html[data-theme="light"] body::before,
html[data-theme="light"] .grain {
  display: none !important;
}

/* Vinheta lateral no claro — bem mais sutil, em cinza-azulado, não preto. */
html[data-theme="light"]::before {
  background:
    linear-gradient(to right, rgba(25,32,45,0.02), transparent 10%) !important,
    linear-gradient(to left,  rgba(25,32,45,0.02), transparent 10%) !important;
}

/* Grid cyber adaptado pro light: mantém a "assinatura" do dark como
   memória visual, mas em azul Fidelimax. Sutil mas visível. */
html[data-theme="light"] body::after {
  display: block !important;
  background-image:
    linear-gradient(rgba(43,95,243,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,95,243,0.05) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  mask-image: radial-gradient(1200px 820px at 50% 30%, black 35%, transparent 80%) !important;
  -webkit-mask-image: radial-gradient(1200px 820px at 50% 30%, black 35%, transparent 80%) !important;
  z-index: -2 !important;
  pointer-events: none !important;
}

/* Tipografia: força escuros, nunca brancos */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: #19202D;
}

html[data-theme="light"] a:not(.btn):not([class*="-btn"]) {
  color: #2B5FF3;
}
html[data-theme="light"] a:not(.btn):not([class*="-btn"]):hover {
  color: #2148B9;
}

/* =====================================================================
   HEADER + BRAND
   ===================================================================== */
html[data-theme="light"] .brand-name,
html[data-theme="light"] .brand-nexus {
  color: #19202D !important;
}
html[data-theme="light"] .brand-max {
  color: #2B5FF3 !important;
}

/* Logo mark — glow verde cyber-mint vaza do dark */
html[data-theme="light"] .brand-logo {
  box-shadow:
    0 0 0 1px rgba(43,95,243,0.25),
    0 8px 24px rgba(43,95,243,0.18) !important;
}
html[data-theme="light"] .brand-logo::after {
  background: #F0F4F9 !important;  /* miolo do logo: clara em vez de bg-deep escuro */
}

/* Avatar do drawer (modal "i" do agente) — fundo verde cyber-mint vaza */
html[data-theme="light"] .drawer-avatar {
  background: linear-gradient(135deg, #E5EFFF, #F0F4F9) !important;
  border: 1px solid #C3CADA !important;
}

/* Loja de pacotes (modal Comprar) — glow/borda cyber-mint vaza do dark */
html[data-theme="light"] .pack {
  background: #ffffff !important;
  border-color: #DCE1EB !important;
}
html[data-theme="light"] .pack:hover {
  border-color: #2B5FF3 !important;
  box-shadow: 0 6px 18px rgba(43,95,243,0.10) !important;
}
html[data-theme="light"] .pack.highlight {
  border-color: #2B5FF3 !important;
  background: linear-gradient(180deg, #E5EFFF, #ffffff 80%) !important;
  box-shadow: 0 14px 40px rgba(43,95,243,0.15) !important;
}
html[data-theme="light"] .pack .badge {
  background: linear-gradient(180deg, #2B5FF3, #4b75f5) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(43,95,243,0.30) !important;
}
html[data-theme="light"] .pack .pack-credits {
  color: #2B5FF3 !important;
}

/* Wallet chip */
html[data-theme="light"] .wallet-chip {
  background: #F0F4F9 !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 1px 2px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] .wallet-amount {
  color: #19202D !important;
}
html[data-theme="light"] .wallet-amount .unit {
  color: #5A626E !important;
}
/* Dot da wallet: verde semântico (indica saldo positivo/ativo) */
html[data-theme="light"] .wallet-dot {
  background: #1ECB4F !important;
  box-shadow: none !important;
}

/* Theme toggle + account btn */
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .account-btn {
  background: #F0F4F9 !important;
  border: 1px solid #DCE1EB !important;
  color: #5A626E !important;
  box-shadow: 0 1px 2px rgba(25,32,45,0.04);
}
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .account-btn:hover {
  background: #ffffff !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}

/* Dropdown account */
html[data-theme="light"] .account-dropdown {
  background: #F0F4F9 !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 12px 32px rgba(25,32,45,0.12),
              0 2px 6px rgba(25,32,45,0.06) !important;
}
html[data-theme="light"] .account-name {
  color: #19202D !important;
}
html[data-theme="light"] .account-email {
  color: #5A626E !important;
}
html[data-theme="light"] .account-item {
  color: #19202D !important;
}
html[data-theme="light"] .account-item:hover {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
}

/* =====================================================================
   BOTÕES
   ===================================================================== */

/* Primary: azul primary Fidelimax */
html[data-theme="light"] .btn.btn-primary {
  background: #2B5FF3 !important;
  border: 1px solid #2B5FF3 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(43,95,243,0.20) !important;
}
html[data-theme="light"] .btn.btn-primary:hover {
  background: #2148B9 !important;
  border-color: #2148B9 !important;
  box-shadow: 0 4px 10px rgba(43,95,243,0.25) !important;
}

/* Published: estado "no ar". Verde semântico Fidelimax. */
html[data-theme="light"] .btn.btn-published {
  background: #E6F8EC !important;
  border: 1px solid #1ECB4F !important;
  color: #0F7A30 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .btn.btn-published::before {
  color: #1ECB4F !important;
}
html[data-theme="light"] .btn.btn-published:hover {
  background: #D6F1DF !important;
  border-color: #19B043 !important;
  color: #0B5F25 !important;
  box-shadow: 0 0 0 3px rgba(30,203,79,0.15) !important;
}

/* Ghost: outline cinza */
html[data-theme="light"] .btn.btn-ghost {
  background: #F0F4F9 !important;
  border: 1px solid #C3CADA !important;
  color: #19202D !important;
}
html[data-theme="light"] .btn.btn-ghost:hover {
  background: #ffffff !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}

/* Danger */
html[data-theme="light"] .btn.btn-danger {
  background: #F0F4F9 !important;
  border: 1px solid #FF3541 !important;
  color: #FF3541 !important;
}
html[data-theme="light"] .btn.btn-danger:hover {
  background: #FF3541 !important;
  color: #ffffff !important;
}

/* CTA chamativo — amarelo Fidelimax ("Comprar") */
html[data-theme="light"] #btn-open-store.btn,
html[data-theme="light"] #btn-account-buy.btn,
html[data-theme="light"] .btn-cta-yellow {
  background: #FFB800 !important;
  border: 1px solid #FFB800 !important;
  color: #19202D !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(255,184,0,0.30) !important;
}
html[data-theme="light"] #btn-open-store.btn:hover,
html[data-theme="light"] #btn-account-buy.btn:hover,
html[data-theme="light"] .btn-cta-yellow:hover {
  background: #E6A500 !important;
  border-color: #E6A500 !important;
  box-shadow: 0 4px 12px rgba(255,184,0,0.35) !important;
}

/* "Ganhar" (referral) — laranja decorativo */
html[data-theme="light"] .btn.btn-earn {
  background: #FFF1E6 !important;
  border: 1px solid #FFD9B8 !important;
  color: #C55100 !important;
}
html[data-theme="light"] .btn.btn-earn:hover {
  background: #FF6B00 !important;
  border-color: #FF6B00 !important;
  color: #ffffff !important;
}

/* Botão "Abrir" do histórico = azul outline Fidelimax */
html[data-theme="light"] .history-item .btn.btn-primary.btn-xs,
html[data-theme="light"] .btn-view {
  background: #F0F4F9 !important;
  border: 1px solid #2B5FF3 !important;
  color: #2B5FF3 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .history-item .btn.btn-primary.btn-xs:hover,
html[data-theme="light"] .btn-view:hover {
  background: #E5EFFF !important;
  color: #2148B9 !important;
  border-color: #2148B9 !important;
}

/* =====================================================================
   CARDS principais (briefing, agentes, histórico, etc)
   ===================================================================== */
html[data-theme="light"] .card,
html[data-theme="light"] .card-hairline {
  background: #F0F4F9 !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 1px 3px rgba(25,32,45,0.04),
              0 2px 8px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] .card.card-hairline::before {
  display: none !important;
}

/* =====================================================================
   LABELS e títulos
   ===================================================================== */
html[data-theme="light"] .field-label {
  color: #333E4F !important;
}
html[data-theme="light"] .field-label .hint {
  color: #5A626E !important;
}
html[data-theme="light"] .field-label.field-label-lg {
  color: #19202D !important;
}
html[data-theme="light"] .field-label.field-label-lg::before {
  background: #2B5FF3 !important;
  box-shadow: none !important;
}

/* Help dots (?) */
html[data-theme="light"] .field-help {
  background: #F0F4F9 !important;
  border: 1px solid #C3CADA !important;
  color: #5A626E !important;
}
html[data-theme="light"] .field-help:hover,
html[data-theme="light"] .field-help.active {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}

/* Tooltips: fundo escuro (padrão HubSpot) sobre light */
html[data-theme="light"] .field-help-pop,
html[data-theme="light"] .inline-pop {
  background: #19202D !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(25,32,45,0.22),
              0 2px 6px rgba(25,32,45,0.10) !important;
}
html[data-theme="light"] .field-help-pop::before,
html[data-theme="light"] .inline-pop::before {
  background: #19202D !important;
  border-color: #19202D !important;
}

/* =====================================================================
   INPUTS e formulários
   ===================================================================== */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .select-plain {
  background: #ffffff !important;
  border: 1px solid #C3CADA !important;
  color: #19202D !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] .select-plain:focus {
  background: #ffffff !important;
  border-color: #2B5FF3 !important;
  box-shadow: 0 0 0 3px rgba(43,95,243,0.15) !important;
  outline: none !important;
}
html[data-theme="light"] ::placeholder {
  color: #737A86 !important;
}

/* =====================================================================
   INTENT OPTS (Site/Banner/Doc/Outros)
   ===================================================================== */
html[data-theme="light"] .intent-opt {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
}
html[data-theme="light"] .intent-opt:hover {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
}
html[data-theme="light"] .intent-opt.active {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  box-shadow: inset 0 0 0 1px #2B5FF3 !important;
}
html[data-theme="light"] .intent-opt.active .intent-label {
  color: #2B5FF3 !important;
}

/* Banner/Imagem tem pill beta */
html[data-theme="light"] .intent-opt .intent-pill {
  background: #FFF1E6 !important;
  color: #C55100 !important;
  border-color: #FFD9B8 !important;
}

/* =====================================================================
   STYLE PILL (seletor de estilo visual)
   ===================================================================== */
html[data-theme="light"] .style-pill {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
}
html[data-theme="light"] .style-pill:hover {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
}
html[data-theme="light"] .style-pill.chosen {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
}
html[data-theme="light"] .style-pill.chosen .style-caret,
html[data-theme="light"] .style-pill.chosen .style-label {
  color: #2B5FF3 !important;
}

/* =====================================================================
   TEMPLATES (SaaS, Clínica, etc)
   ===================================================================== */
html[data-theme="light"] .templates-label {
  color: #5A626E !important;
}
html[data-theme="light"] .template-btn {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
}
html[data-theme="light"] .template-btn:hover {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}

/* =====================================================================
   QUALIDADE (slider 3 opções)
   ===================================================================== */
html[data-theme="light"] .quality-slider {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .quality-opt {
  color: #19202D !important;
}
html[data-theme="light"] .quality-opt .q-desc {
  color: #5A626E !important;
}
html[data-theme="light"] .quality-opt .q-time {
  color: #737A86 !important;
}
html[data-theme="light"] .quality-opt:hover {
  background: #E5EFFF !important;
}
html[data-theme="light"] .quality-opt.active {
  background: #E5EFFF !important;
  box-shadow: inset 0 0 0 1.5px #2B5FF3 !important;
}
html[data-theme="light"] .quality-opt.active .q-label {
  color: #2B5FF3 !important;
}
/* Q-credits quando qualidade selecionada: verde cyber-mint vaza do dark */
html[data-theme="light"] .quality-opt.active .q-desc,
html[data-theme="light"] .quality-opt.active .q-credits {
  color: #2B5FF3 !important;
}

/* Preferências (aba conta) — pills verde cyber-mint vazam do dark */
html[data-theme="light"] .pref-pill {
  background: #F0F4F9 !important;
  border-color: #DCE1EB !important;
  color: #19202D !important;
}
html[data-theme="light"] .pref-pill:hover {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}
html[data-theme="light"] .pref-pill.active {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}
html[data-theme="light"] .pref-select {
  background: #ffffff !important;
  border-color: #C3CADA !important;
  color: #19202D !important;
}

/* Caixa de atividade dentro do card do agente — no dark é escura translúcida,
   no light precisa ser clara pra ver o texto dentro */
html[data-theme="light"] .activity {
  background: #F0F4F9 !important;
  border-color: #DCE1EB !important;
  color: #5A626E !important;
}
html[data-theme="light"] .agent.working .activity {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
}
html[data-theme="light"] .agent.done [data-role="activity-text"] {
  color: #5A626E !important;
}
html[data-theme="light"] .agent.finished [data-role="activity-text"] {
  color: #2B5FF3 !important;
}
html[data-theme="light"] .activity .mini-spinner {
  border-color: rgba(43,95,243,0.20) !important;
  border-top-color: #2B5FF3 !important;
}
html[data-theme="light"] .agent.done .activity::before {
  color: #2B5FF3 !important;
}

/* =====================================================================
   ESTIMATIVA
   ===================================================================== */
html[data-theme="light"] .estimate-box {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .estimate-value {
  color: #19202D !important;
}
html[data-theme="light"] .estimate-value .unit {
  color: #5A626E !important;
}
html[data-theme="light"] .estimate-breakdown {
  color: #5A626E !important;
}

/* =====================================================================
   AGENTES (grid do "time")
   ===================================================================== */
html[data-theme="light"] .agent {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
  box-shadow: 0 1px 3px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] .agent .meta-text h3 {
  color: #19202D !important;
}
html[data-theme="light"] .agent .role {
  color: #5A626E !important;
}
html[data-theme="light"] .agent [data-role="status"] {
  color: #5A626E !important;
}
html[data-theme="light"] .agent .avatar {
  background: #F0F4F9 !important;
  color: #19202D !important;
}
html[data-theme="light"] .agent .info-btn {
  background: transparent !important;
  border: 1px solid #C3CADA !important;
  color: #5A626E !important;
}
html[data-theme="light"] .agent .info-btn:hover {
  color: #2B5FF3 !important;
  border-color: #2B5FF3 !important;
}
html[data-theme="light"] .agent.working {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  box-shadow: 0 4px 14px rgba(43,95,243,0.14) !important;
}
html[data-theme="light"] .agent.done {
  border-color: rgba(43,95,243,0.50) !important;
}

/* =====================================================================
   HISTÓRICO
   ===================================================================== */
html[data-theme="light"] .history-item {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
}
/* Zebra no histórico */
html[data-theme="light"] .history-item:nth-child(even) {
  background: #F7F9FC !important;
}
html[data-theme="light"] .history-item:hover,
html[data-theme="light"] .history-item:nth-child(even):hover {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
}
/* Zebra nas versões do projeto (drilldown) — só zebrinha, sem linha divisória */
html[data-theme="light"] .proj-ver-row {
  border-bottom: none !important;
}
html[data-theme="light"] .proj-ver-row:nth-child(odd) {
  background: #F7F9FC !important;
}
html[data-theme="light"] .proj-ver-row:nth-child(even) {
  background: #ffffff !important;
}
html[data-theme="light"] .proj-ver-row:hover {
  background: #E5EFFF !important;
}
html[data-theme="light"] .history-item .fname {
  color: #19202D !important;
}
html[data-theme="light"] .history-item .briefing {
  color: #5A626E !important;
}
html[data-theme="light"] .history-item .when-date {
  color: #5A626E !important;
}
html[data-theme="light"] .history-item .when-size {
  color: #737A86 !important;
}

/* Extensão badge */
html[data-theme="light"] .history-item .ext {
  background: #DCE1EB !important;
  color: #333E4F !important;
}
html[data-theme="light"] .history-item .ext.html {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
}
html[data-theme="light"] .history-item .ext.md {
  background: #FFF1E6 !important;
  color: #C55100 !important;
}
html[data-theme="light"] .history-item .ext.zip {
  background: #F1E8FF !important;
  color: #6D28D9 !important;
}

/* =====================================================================
   CHIPS / TAGS / PILLS
   ===================================================================== */
html[data-theme="light"] .tag,
html[data-theme="light"] .chip,
html[data-theme="light"] .version-pill {
  background: #DCE1EB !important;
  border: 1px solid #C3CADA !important;
  color: #333E4F !important;
}
html[data-theme="light"] .chip-google {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
  border-color: rgba(43,95,243,0.30) !important;
}

/* =====================================================================
   MODAIS
   ===================================================================== */
html[data-theme="light"] .modal-overlay {
  background: rgba(25,32,45,0.40) !important;
  backdrop-filter: blur(6px) !important;
}
html[data-theme="light"] .modal {
  background: #F0F4F9 !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 24px 60px rgba(25,32,45,0.22),
              0 4px 12px rgba(25,32,45,0.08) !important;
}
html[data-theme="light"] .modal::before {
  display: none !important;
}
html[data-theme="light"] .modal .subtitle {
  color: #5A626E !important;
}
html[data-theme="light"] .modal-close {
  color: #5A626E !important;
  border: 1px solid #DCE1EB !important;
  background: transparent !important;
}
html[data-theme="light"] .modal-close:hover {
  color: #FF3541 !important;
  border-color: #FF3541 !important;
}

/* Style cards dentro do modal */
html[data-theme="light"] .style-card {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .style-card:hover {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
}
html[data-theme="light"] .style-card.active {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
}
html[data-theme="light"] .style-card-tagline {
  color: #5A626E !important;
}
html[data-theme="light"] .style-card.active .style-card-label {
  color: #2B5FF3 !important;
}

/* =====================================================================
   DRAWER lateral
   ===================================================================== */
html[data-theme="light"] .drawer {
  background: #F0F4F9 !important;
  border-left: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .drawer-overlay {
  background: rgba(25,32,45,0.35) !important;
}

/* =====================================================================
   BANNER MODAL (imagem)
   ===================================================================== */
html[data-theme="light"] .switch-row {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .switch-opt.active {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
}
html[data-theme="light"] .size-opt,
html[data-theme="light"] .model-opt,
html[data-theme="light"] .position-opt,
html[data-theme="light"] .logo-box {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .size-opt.active,
html[data-theme="light"] .model-opt.active,
html[data-theme="light"] .position-opt.active {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  box-shadow: inset 0 0 0 1px #2B5FF3 !important;
}
html[data-theme="light"] .banner-name-row input {
  background: #ffffff !important;
  border: 1px solid #C3CADA !important;
}
html[data-theme="light"] .banner-locked {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
}

/* =====================================================================
   PREVIEW / RESULT
   ===================================================================== */
html[data-theme="light"] .preview-frame-wrapper {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
}
html[data-theme="light"] #code-box {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
}

/* =====================================================================
   KEBAB MENU
   ===================================================================== */
html[data-theme="light"] .kebab-btn {
  background: transparent !important;
  color: #5A626E !important;
  border-color: transparent !important;
}
html[data-theme="light"] .kebab-btn:hover {
  background: #ffffff !important;
  color: #19202D !important;
}
html[data-theme="light"] .kebab-menu {
  background: #F0F4F9 !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 12px 28px rgba(25,32,45,0.14),
              0 2px 6px rgba(25,32,45,0.06) !important;
}
html[data-theme="light"] .kebab-item {
  color: #19202D !important;
}
html[data-theme="light"] .kebab-item:hover {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
}

/* =====================================================================
   TOAST
   ===================================================================== */
html[data-theme="light"] .toast {
  background: #19202D !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 32px rgba(25,32,45,0.25) !important;
}

/* =====================================================================
   BANNER DE MENSAGEM (erro/warn/success)
   ===================================================================== */
html[data-theme="light"] .banner-msg.error {
  background: #FFE6E8 !important;
  border-color: rgba(255,53,65,0.35) !important;
  color: #B91C1C !important;
}
html[data-theme="light"] .banner-msg.warn {
  background: #FFF1E6 !important;
  border-color: rgba(255,174,0,0.35) !important;
  color: #C55100 !important;
}
/* Success: mantém verde semântico (padrão universal "deu certo") */
html[data-theme="light"] .banner-msg.success {
  background: #E8F5EB !important;
  border-color: rgba(29,141,60,0.30) !important;
  color: #1d8d3c !important;
}

/* =====================================================================
   ABA CONTA (perfil, meus dados)
   ===================================================================== */
html[data-theme="light"] .account-tabs {
  background: transparent !important;
  border: none !important;
}
html[data-theme="light"] .account-tab {
  color: #333E4F !important;
}
html[data-theme="light"] .account-tab:hover {
  background: #E5EFFF !important;
  color: #19202D !important;
}
html[data-theme="light"] .account-tab.active {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
  box-shadow: inset 2px 0 0 #2B5FF3 !important;
}
/* Área de conteúdo do "Minha conta" — fundo suave com cantos arredondados */
html[data-theme="light"] .account-content {
  background: #F0F4F9 !important;
  border-radius: 14px !important;
  margin: 10px !important;
}

/* =====================================================================
   PROGRESS BAR
   ===================================================================== */
html[data-theme="light"] #progress-bar {
  background: #2B5FF3 !important;
}
html[data-theme="light"] .progress-track {
  background: #DCE1EB !important;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
html[data-theme="light"] footer {
  color: #5A626E !important;
}
html[data-theme="light"] footer a {
  color: #333E4F !important;
}
html[data-theme="light"] footer a:hover {
  color: #2B5FF3 !important;
}

/* =====================================================================
   ADMIN (admin.html) — overrides específicos
   ===================================================================== */

/* Avatar do account-head (admin) — azul no light */
html[data-theme="light"] .account-head .account-avatar,
html[data-theme="light"] #me-avatar {
  background: linear-gradient(135deg, #2B5FF3, #4b75f5) !important;
  color: #ffffff !important;
}
/* Chip "admin" dentro do dropdown */
html[data-theme="light"] .account-role-chip {
  color: #2B5FF3 !important;
  border-color: rgba(43,95,243,0.25) !important;
  background: #E5EFFF !important;
}

/* Nav links do header admin — sem pílula, só cor do texto muda */
html[data-theme="light"] .nav-links a,
html[data-theme="light"] .nav-links .nav-dd-trigger {
  color: #333E4F !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active,
html[data-theme="light"] .nav-links .nav-dd-trigger:hover,
html[data-theme="light"] .nav-links .nav-dd-trigger.active {
  color: #2B5FF3 !important;
  background: transparent !important;
}

/* Dropdown do menu (Configurações) no tema claro */
html[data-theme="light"] .nav-dd-menu {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 10px 28px rgba(25,32,45,0.12) !important;
}
html[data-theme="light"] .nav-dd-menu a {
  color: #333E4F !important;
}
html[data-theme="light"] .nav-dd-menu a:hover {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
}
html[data-theme="light"] .nav-dd-menu a.active {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
}

/* Cards de estatística (Budget global, etc) — painel único, sem subdivisões brancas */
html[data-theme="light"] .budget-card,
html[data-theme="light"] .stat-card {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 1px 3px rgba(25,32,45,0.04),
              0 2px 8px rgba(25,32,45,0.04) !important;
}
/* Stats INTERNOS do budget-card: sem fundo próprio (herdam o painel) */
html[data-theme="light"] .budget-stat {
  background: transparent !important;
  border: none !important;
  padding: 4px 2px !important;
}
/* Separador vertical sutil entre stats (simula colunas sem fundo) */
html[data-theme="light"] .budget-grid > .budget-stat + .budget-stat {
  border-left: 1px solid #E9EDF4 !important;
  padding-left: 16px !important;
}
html[data-theme="light"] .stat-card-total {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .budget-label,
html[data-theme="light"] .stat-label {
  color: #5A626E !important;
}
html[data-theme="light"] .budget-value,
html[data-theme="light"] .stat-value {
  color: #19202D !important;
}
html[data-theme="light"] .budget-sub {
  color: #5A626E !important;
}

/* Budget bar (progresso de uso) */
html[data-theme="light"] .budget-bar-outer {
  background: #DCE1EB !important;
}
html[data-theme="light"] .budget-bar {
  background: #2B5FF3 !important;
}

/* Botões Bloquear/Liberar do budget — neutros no light */
html[data-theme="light"] #budget-block,
html[data-theme="light"] #budget-unblock {
  background: #ffffff !important;
  color: #5A626E !important;
  border-color: #C3CADA !important;
}
html[data-theme="light"] #budget-block:hover {
  background: #FFF7E6 !important;
  color: #B45309 !important;
  border-color: #FFAE00 !important;
}
html[data-theme="light"] #budget-unblock:hover {
  background: #E8F5EB !important;
  color: #1d8d3c !important;
  border-color: #1d8d3c !important;
}
html[data-theme="light"] .budget-blocked-banner {
  background: #FFE6E8 !important;
  border-color: rgba(255,53,65,0.35) !important;
  color: #B91C1C !important;
}

/* Tabela de usuários */
html[data-theme="light"] .table-wrap {
  background: #F0F4F9 !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 1px 3px rgba(25,32,45,0.04),
              0 2px 8px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] table {
  background: transparent !important;
}
html[data-theme="light"] thead th {
  background: #E9EDF4 !important;
  color: #333E4F !important;
  border-bottom: 1px solid #DCE1EB !important;
}
html[data-theme="light"] tbody tr {
  border-bottom: 1px solid #E9EDF4 !important;
  background: #ffffff !important;
}
/* Zebra striping — linha ímpar em cinza claro pra separar visualmente */
html[data-theme="light"] tbody tr:nth-child(even) {
  background: #F7F9FC !important;
}
html[data-theme="light"] tbody tr:hover,
html[data-theme="light"] tbody tr:nth-child(even):hover {
  background: #E5EFFF !important;
}
html[data-theme="light"] tbody td {
  color: #19202D !important;
}
html[data-theme="light"] tbody td a.user-email-link {
  color: #2B5FF3 !important;
}
html[data-theme="light"] tbody td a.user-email-link:hover {
  color: #2148B9 !important;
  text-decoration: underline;
}

/* Chips role (admin/user/google) */
html[data-theme="light"] .chip-admin {
  background: rgba(115,62,227,0.10) !important;
  color: #6D28D9 !important;
  border: 1px solid rgba(115,62,227,0.30) !important;
}
html[data-theme="light"] .chip-user {
  background: #F0F4F9 !important;
  color: #5A626E !important;
  border: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .chip-google {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
  border: 1px solid rgba(43,95,243,0.25) !important;
}

/* Botão "acessar" (impersonate) — azul no light (vez de gradient neon) */
html[data-theme="light"] .btn-imp {
  background: #2B5FF3 !important;
  border: 1px solid #2B5FF3 !important;
  color: #ffffff !important;
}
html[data-theme="light"] .btn-imp:hover {
  background: #2148B9 !important;
  border-color: #2148B9 !important;
}

/* Botão ícone ($, etc) */
html[data-theme="light"] .btn.btn-icon {
  background: #ffffff !important;
  border: 1px solid #C3CADA !important;
  color: #5A626E !important;
}
html[data-theme="light"] .btn.btn-icon:hover {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}

/* Paginação */
html[data-theme="light"] .pagination button {
  background: #F0F4F9 !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
}
html[data-theme="light"] .pagination button:hover {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}
html[data-theme="light"] .pagination button.active {
  background: #2B5FF3 !important;
  border-color: #2B5FF3 !important;
  color: #ffffff !important;
}

/* Inputs de pesquisa/filtro */
html[data-theme="light"] input[type="search"],
html[data-theme="light"] .search-input {
  background: #ffffff !important;
  border: 1px solid #C3CADA !important;
  color: #19202D !important;
}

/* Barra impersonate (admin logado como cliente) */
html[data-theme="light"] .banner-imp {
  background: linear-gradient(90deg, #FFAE00, #FF6B00) !important;
  color: #ffffff !important;
}

/* =====================================================================
   LANDING (landing.html) — overrides específicos
   ===================================================================== */

/* Nav do header — fundo branco translúcido (só o <nav> da landing, não o do admin) */
html[data-theme="light"] body > nav {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: saturate(140%) blur(12px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px) !important;
  border-bottom: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .nav-link {
  color: #333E4F !important;
}
html[data-theme="light"] .nav-link:hover {
  color: #2B5FF3 !important;
}

/* Hero principal — mantém gradient azul→roxo no accent (igual dark) */
html[data-theme="light"] .hero-title {
  color: #19202D !important;
}
/* NÃO sobrescreve .hero-title .accent — deixa o linear-gradient original
   rodar (var(--acc) no light = azul, var(--acc-2) = azul-info, var(--acc-violet) = roxo) */
html[data-theme="light"] .hero-lede,
html[data-theme="light"] .section-sub,
html[data-theme="light"] .section-kicker {
  color: #5A626E !important;
}
html[data-theme="light"] .hero-hint {
  color: #5A626E !important;
}

/* Section titles — também mantém gradient */
html[data-theme="light"] .section-title {
  color: #19202D !important;
}

/* Badge "200 créditos" — glow verde cyber-mint vaza do dark */
html[data-theme="light"] .bonus-badge {
  background: #E5EFFF !important;
  border-color: rgba(43,95,243,0.30) !important;
  color: #2B5FF3 !important;
  box-shadow: 0 0 24px rgba(43,95,243,0.15) !important;
}
html[data-theme="light"] .hero-bonus {
  color: #5A626E !important;
}
/* Glow do botão primário da hero (Criar meu site agora) */
html[data-theme="light"] .hero-cta .btn.btn-primary {
  box-shadow:
    0 4px 14px rgba(43,95,243,0.30),
    0 0 0 1px rgba(43,95,243,0.10) !important;
}
html[data-theme="light"] .hero-cta .btn.btn-primary:hover {
  box-shadow:
    0 6px 20px rgba(43,95,243,0.40),
    0 0 0 1px rgba(43,95,243,0.15) !important;
}

/* Cards "O que fazemos" (landing pages, propostas, documentos…) — hover verde vaza do dark */
html[data-theme="light"] .product {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 1px 3px rgba(25,32,45,0.04),
              0 2px 8px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] .product:hover {
  border-color: #2B5FF3 !important;
  box-shadow: 0 4px 14px rgba(43,95,243,0.12),
              0 1px 3px rgba(25,32,45,0.06) !important;
}
html[data-theme="light"] .product-title {
  color: #19202D !important;
}
html[data-theme="light"] .product-desc {
  color: #5A626E !important;
}

/* Benefícios (check verde) — verde escuro legível no light, mantém semântica */
html[data-theme="light"] .benefit {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 1px 3px rgba(25,32,45,0.04),
              0 2px 8px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] .benefit-check {
  background: #E8F5EB !important;
  border-color: rgba(29,141,60,0.40) !important;
  color: #1d8d3c !important;
}
html[data-theme="light"] .benefit-title {
  color: #19202D !important;
}
html[data-theme="light"] .benefit-desc {
  color: #5A626E !important;
}

/* Cards dos 5 agentes (Leo/Joanna/Alex/Alice/Daniel) */
html[data-theme="light"] .team-card {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 1px 3px rgba(25,32,45,0.04),
              0 2px 8px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] .team-card:hover {
  border-color: #2B5FF3 !important;
  box-shadow: 0 4px 14px rgba(43,95,243,0.12),
              0 1px 3px rgba(25,32,45,0.06) !important;
}
html[data-theme="light"] .team-card::before {
  background: radial-gradient(80% 60% at 0% 0%, rgba(43,95,243,0.06), transparent 70%) !important;
}
html[data-theme="light"] .team-avatar {
  background: linear-gradient(135deg, #E5EFFF, #F0F4F9) !important;
  border-color: #C3CADA !important;
}
html[data-theme="light"] .team-name {
  color: #19202D !important;
}
html[data-theme="light"] .team-role {
  color: #2B5FF3 !important;
}
html[data-theme="light"] .team-desc {
  color: #5A626E !important;
}

/* Template count badge + trust pills */
html[data-theme="light"] .tmpl-count-badge,
html[data-theme="light"] .trust-pill,
html[data-theme="light"] .badge {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #333E4F !important;
}

/* Marquee de templates (chips de segmentos) */
html[data-theme="light"] .marquee-wrap {
  background: transparent !important;
}
html[data-theme="light"] .marquee-wrap::before,
html[data-theme="light"] .marquee-wrap::after {
  background: linear-gradient(90deg, #ffffff, transparent) !important;
}
html[data-theme="light"] .marquee-wrap::after {
  background: linear-gradient(270deg, #ffffff, transparent) !important;
}
html[data-theme="light"] .tmpl-chip {
  background: #F0F4F9 !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
}
html[data-theme="light"] .tmpl-chip:hover {
  background: #ffffff !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}

/* Como funciona: steps */
html[data-theme="light"] .step-card,
html[data-theme="light"] .how-step {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 1px 3px rgba(25,32,45,0.04),
              0 2px 8px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] .step-num {
  color: #2B5FF3 !important;
}
html[data-theme="light"] .step-title {
  color: #19202D !important;
}
html[data-theme="light"] .step-desc {
  color: #5A626E !important;
}

/* Portfolio */
html[data-theme="light"] .portfolio-section {
  background: #F0F4F9 !important;
}
html[data-theme="light"] .portfolio-card {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 1px 3px rgba(25,32,45,0.04),
              0 2px 8px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] .portfolio-name {
  color: #19202D !important;
}
html[data-theme="light"] .portfolio-meta {
  color: #5A626E !important;
}
html[data-theme="light"] .portfolio-arrow {
  color: #2B5FF3 !important;
}

/* Pricing / packs */
html[data-theme="light"] .pack-list,
html[data-theme="light"] .packs {
  background: transparent !important;
}
html[data-theme="light"] .pack-label {
  color: #5A626E !important;
}
html[data-theme="light"] .pack-sub {
  color: #5A626E !important;
}
html[data-theme="light"] .pricing-note {
  color: #5A626E !important;
}
html[data-theme="light"] .pack-price {
  color: #19202D !important;
}
html[data-theme="light"] .pack-price .cents {
  color: #5A626E !important;
}

/* FAQ — design original usa só divisórias horizontais, sem card.
   Mantemos transparente e ajustamos só as cores de texto/bordas. */
html[data-theme="light"] .faq-item {
  background: transparent !important;
  border-top-color: #DCE1EB !important;
}
html[data-theme="light"] .faq-item:last-child {
  border-bottom-color: #DCE1EB !important;
}
html[data-theme="light"] .faq-q {
  color: #19202D !important;
}
html[data-theme="light"] .faq-a {
  color: #333E4F !important;
}
html[data-theme="light"] .faq-toggle {
  color: #5A626E !important;
}

/* Footer — sem fundo próprio (segue cor da página, evita "ilha branca" cortada) */
html[data-theme="light"] footer {
  background: transparent !important;
  border-top-color: #DCE1EB !important;
  color: #5A626E !important;
}
html[data-theme="light"] .footer-links a {
  color: #333E4F !important;
}
html[data-theme="light"] .footer-links a:hover {
  color: #2B5FF3 !important;
}

/* Auth overlay (modal de login/signup na landing) */
html[data-theme="light"] .auth-overlay {
  background: rgba(25,32,45,0.40) !important;
  backdrop-filter: blur(6px);
}

/* Ajustes gerais: fundo body da landing igual cor do /app */
html[data-theme="light"] .hero-main,
html[data-theme="light"] section {
  background: transparent !important;
}

/* =====================================================================
   PÁGINAS LEGAIS (termos, privacidade) — legal_pages.py
   Template próprio com CSS inline. Já aponta pra /theme-light.css
   mas tem suas próprias classes que precisam override.
   ===================================================================== */

/* Page header da página legal */
html[data-theme="light"] .page-header {
  border-bottom-color: #DCE1EB !important;
}
html[data-theme="light"] .page-kicker {
  color: #2B5FF3 !important;
}
html[data-theme="light"] h1.page-title {
  color: #19202D !important;
}
html[data-theme="light"] .page-meta {
  color: #5A626E !important;
}

/* Conteúdo (h2, h3, p, ul, blockquote, strong, a) */
html[data-theme="light"] .content h2 {
  color: #19202D !important;
}
html[data-theme="light"] .content h2::before {
  color: #2B5FF3 !important;
}
html[data-theme="light"] .content h3 {
  color: #19202D !important;
}
html[data-theme="light"] .content p,
html[data-theme="light"] .content ul,
html[data-theme="light"] .content ol {
  color: #333E4F !important;
}
html[data-theme="light"] .content strong {
  color: #19202D !important;
}
html[data-theme="light"] .content a {
  color: #2B5FF3 !important;
  border-bottom-color: rgba(43,95,243,0.35) !important;
}
html[data-theme="light"] .content a:hover {
  border-bottom-color: #2B5FF3 !important;
}
html[data-theme="light"] .content blockquote {
  border-left-color: #2B5FF3 !important;
  color: #333E4F !important;
}

/* Callout (caixa de destaque dentro do conteúdo) */
html[data-theme="light"] .callout {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 1px 3px rgba(25,32,45,0.04),
              0 2px 8px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] .callout::before {
  display: none !important;
}
html[data-theme="light"] .callout-title {
  color: #2B5FF3 !important;
}

/* =====================================================================
   RESET DE SENHA (reset_senha.html) — tela simples, CSS próprio inline
   ===================================================================== */
html[data-theme="light"] .card {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  box-shadow: 0 8px 32px rgba(25,32,45,0.08),
              0 2px 8px rgba(25,32,45,0.04) !important;
}
html[data-theme="light"] .brand-logo {
  background: linear-gradient(135deg, #2B5FF3, #4b75f5) !important;
}
html[data-theme="light"] .brand-name .max {
  color: #2B5FF3 !important;
}
html[data-theme="light"] .sub {
  color: #5A626E !important;
}
/* Label "Nova senha" / "Confirmar senha" em mono caps */
html[data-theme="light"] body > .card label {
  color: #5A626E !important;
}
/* Input: fundo cinza muito claro, texto escuro */
html[data-theme="light"] body > .card input {
  background: #F0F4F9 !important;
  border-color: #C3CADA !important;
  color: #19202D !important;
}
html[data-theme="light"] body > .card input:focus {
  border-color: #2B5FF3 !important;
  box-shadow: 0 0 0 3px rgba(43,95,243,0.15) !important;
  background: #ffffff !important;
}
html[data-theme="light"] body > .card .hint {
  color: #5A626E !important;
}
/* Botão submit: azul Fidelimax com texto branco (era verde com texto verde escuro) */
html[data-theme="light"] body > .card button[type="submit"] {
  background: #2B5FF3 !important;
  color: #ffffff !important;
}
html[data-theme="light"] body > .card button[type="submit"]:hover {
  background: #2148B9 !important;
  filter: none !important;
}
/* Mensagens */
html[data-theme="light"] .msg.error {
  background: #FFE6E8 !important;
  border-color: rgba(255,53,65,0.35) !important;
  color: #B91C1C !important;
}
html[data-theme="light"] .msg.success {
  background: #E8F5EB !important;
  border-color: rgba(29,141,60,0.30) !important;
  color: #1d8d3c !important;
}
html[data-theme="light"] .back {
  color: #5A626E !important;
}
html[data-theme="light"] .back:hover {
  color: #2B5FF3 !important;
}

/* =====================================================================
   FIX — Cyber-mint que escapou (auditoria)
   8 classes com verde hardcoded sem override. Todas corrigidas abaixo.
   ===================================================================== */

/* Search do admin — focus ring */
html[data-theme="light"] .search:focus,
html[data-theme="light"] .manage-input:focus {
  box-shadow: 0 0 0 3px rgba(43,95,243,0.15) !important;
  border-color: #2B5FF3 !important;
}

/* Btn genérico no admin (sem classe primary/ghost/etc) — hover vaza verde */
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-imp):not(.btn-icon):not(.btn-earn):hover {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
  border-color: #2B5FF3 !important;
}

/* Step completado em revisão (rev-step.done) */
html[data-theme="light"] .rev-step.done {
  border-color: rgba(29,141,60,0.45) !important;
}

/* Position opt (seletor de posição da logo no banner modal) */
html[data-theme="light"] .position-opt:hover {
  border-color: #2B5FF3 !important;
  background: #E5EFFF !important;
}

/* Badge "Essencial" no portfólio */
html[data-theme="light"] .proj-quality-badge.essencial {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
  border-color: rgba(43,95,243,0.25) !important;
}

/* Paginação do histórico (botão de página ativa) */
html[data-theme="light"] .hist-page-btn.active {
  background: #2B5FF3 !important;
  border-color: #2B5FF3 !important;
  color: #ffffff !important;
}
html[data-theme="light"] .hist-page-btn:hover:not(.active) {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}

/* Menu dropdown de download (hover do item) */
html[data-theme="light"] .download-menu-item:hover {
  background: #E5EFFF !important;
  color: #2B5FF3 !important;
}

/* Menu download — container e items base (defesa em profundidade) */
html[data-theme="light"] .download-menu {
  background: #ffffff !important;
  border-color: #DCE1EB !important;
  box-shadow: 0 12px 32px rgba(25,32,45,0.12),
              0 2px 6px rgba(25,32,45,0.06) !important;
}
html[data-theme="light"] .download-menu-item {
  color: #19202D !important;
}

/* Feedback do briefing (<30 palavras): laranja cyber-mint é invisível
   no light. Troca pra cinza mais escuro (visível mas discreto). */
html[data-theme="light"] .briefing-feedback.hint {
  color: #5A626E !important;
}
html[data-theme="light"] .briefing-feedback.over {
  color: #B91C1C !important;
}

/* Final CTA (Comece agora) — vibrante em azul Fidelimax no light */
html[data-theme="light"] .final-cta {
  background: linear-gradient(135deg, #2B5FF3 0%, #1E47CC 100%) !important;
  border: 1px solid #2148B9 !important;
  box-shadow: 0 20px 60px rgba(43,95,243,0.30),
              0 6px 16px rgba(43,95,243,0.15) !important;
  color: #ffffff !important;
}
html[data-theme="light"] .final-cta::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.30), transparent 50%, rgba(255,255,255,0.10)) !important;
}
html[data-theme="light"] .final-cta .kicker {
  color: rgba(255,255,255,0.82) !important;
}
html[data-theme="light"] .final-cta h2 {
  color: #ffffff !important;
}
html[data-theme="light"] .final-cta p {
  color: rgba(255,255,255,0.88) !important;
}
/* Botão primário dentro do final-cta: vira branco sólido (contraste sobre azul) */
html[data-theme="light"] .final-cta .btn.btn-primary {
  background: #ffffff !important;
  color: #2B5FF3 !important;
  border-color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(25,32,45,0.18) !important;
}
html[data-theme="light"] .final-cta .btn.btn-primary:hover {
  background: #F0F4F9 !important;
  color: #2148B9 !important;
  box-shadow: 0 6px 20px rgba(25,32,45,0.25) !important;
}

/* ---- Geo info badge (pequeno "i" na linha do cliente) ---- */
html[data-theme="light"] .geo-info {
  border-color: #C3CADA !important;
  color: #5A626E !important;
  background: #ffffff !important;
}
html[data-theme="light"] .geo-info:hover {
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
  background: #E5EFFF !important;
}

/* Tooltip geo — escuro elegante (padrão produto premium, tipo Stripe) */
html[data-theme="light"] .geo-tooltip {
  background: #19202D !important;
  border: 1px solid #19202D !important;
  color: #D4DAE5 !important;
  box-shadow: 0 12px 32px rgba(25,32,45,0.25),
              0 4px 10px rgba(25,32,45,0.12) !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  min-width: 240px !important;
}
html[data-theme="light"] .geo-tooltip .geo-label {
  color: #8B93A3 !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .geo-tooltip .geo-val {
  color: #ffffff !important;
  font-weight: 500 !important;
}
html[data-theme="light"] .geo-tooltip .geo-row {
  margin-bottom: 6px !important;
}
html[data-theme="light"] .geo-signup-match {
  color: #FFB800 !important;
}

/* =====================================================================
   QUALIFICATION MODAL — light theme
   Padrão do produto no claro: branco/cinza com azul corporativo
   #2B5FF3 nos estados ativos. Não copia o mint do dark.
   ===================================================================== */
html[data-theme="light"] .qual-modal {
  background: #F0F4F9 !important;
  border: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .qual-progress {
  background: #DCE1EB !important;
}
html[data-theme="light"] .qual-progress-fill {
  background: linear-gradient(90deg, #2B5FF3 0%, #4E7CFF 100%) !important;
  box-shadow: 0 0 12px rgba(43,95,243,0.25) !important;
}
html[data-theme="light"] .qual-eyebrow {
  color: #5A626E !important;
}
html[data-theme="light"] .qual-eyebrow-hot {
  color: #2B5FF3 !important;
}
html[data-theme="light"] .qual-title {
  color: #19202D !important;
}
html[data-theme="light"] .qual-sub {
  color: #5A626E !important;
}
html[data-theme="light"] .qual-choice {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
}
html[data-theme="light"] .qual-choice:hover {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
}
html[data-theme="light"] .qual-choice.selected {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  box-shadow: 0 0 0 3px rgba(43,95,243,0.12) !important;
}
html[data-theme="light"] .qual-choice-title {
  color: #19202D !important;
}
html[data-theme="light"] .qual-choice-sub {
  color: #5A626E !important;
}
html[data-theme="light"] .qual-pill {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
}
html[data-theme="light"] .qual-pill:hover {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
}
html[data-theme="light"] .qual-pill.selected {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
  box-shadow: 0 0 0 2px rgba(43,95,243,0.16) !important;
}
html[data-theme="light"] .qual-label {
  color: #5A626E !important;
}
html[data-theme="light"] .qual-optional {
  color: #8B93A3 !important;
}
html[data-theme="light"] .qual-input {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
}
html[data-theme="light"] .qual-input::placeholder {
  color: #8B93A3 !important;
}
html[data-theme="light"] .qual-input:focus {
  border-color: #2B5FF3 !important;
  box-shadow: 0 0 0 3px rgba(43,95,243,0.14) !important;
}
html[data-theme="light"] .qual-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235A626E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html[data-theme="light"] .qual-select option {
  background: #ffffff !important;
  color: #19202D !important;
}
html[data-theme="light"] .qual-divider {
  background: #DCE1EB !important;
}
html[data-theme="light"] .qual-fine {
  color: #5A626E !important;
}

/* Wizard visuals no claro */
html[data-theme="light"] .qual-wizard-visual {
  background: linear-gradient(135deg, rgba(43,95,243,0.06), rgba(43,95,243,0.02)) !important;
  border: 1px solid #DCE1EB !important;
}
html[data-theme="light"] .qual-wiz-line {
  background: #C9D0DD !important;
}
html[data-theme="light"] .qual-wiz-cursor {
  background: #2B5FF3 !important;
  box-shadow: 0 0 8px rgba(43,95,243,0.4) !important;
}
html[data-theme="light"] .qual-wiz-agent {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #2B5FF3 !important;
}
@keyframes qual-wiz-pulse-light {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43,95,243,0); transform: translateY(0); }
  50% { box-shadow: 0 0 0 6px rgba(43,95,243,0.10); transform: translateY(-2px); }
}
html[data-theme="light"] .qual-wiz-agent {
  animation-name: qual-wiz-pulse-light !important;
}
html[data-theme="light"] .qual-wiz-card {
  background: #ffffff !important;
  border: 1px solid #DCE1EB !important;
  color: #19202D !important;
}
html[data-theme="light"] .qual-wiz-card.alt {
  background: #E5EFFF !important;
  border-color: #2B5FF3 !important;
  color: #2B5FF3 !important;
}

/* Welcome offer no claro */
html[data-theme="light"] .qual-amount {
  color: #2B5FF3 !important;
}
html[data-theme="light"] .qual-amount-2 {
  color: #19202D !important;
  text-decoration-color: #8B93A3 !important;
  opacity: 0.65 !important;
}
html[data-theme="light"] .qual-offer-card {
  background: linear-gradient(135deg, #E5EFFF 0%, #F0F4F9 100%) !important;
  border: 1px solid #2B5FF3 !important;
  box-shadow: 0 0 24px rgba(43,95,243,0.10) !important;
}
html[data-theme="light"] .qual-offer-row + .qual-offer-row {
  border-top: 1px dashed rgba(43,95,243,0.22) !important;
}
html[data-theme="light"] .qual-offer-label {
  color: #5A626E !important;
}
html[data-theme="light"] .qual-offer-value {
  color: #19202D !important;
}
html[data-theme="light"] .qual-offer-highlight {
  color: #2B5FF3 !important;
}
html[data-theme="light"] .qual-offer-foot .qual-offer-value {
  color: #5A626E !important;
}