/* Painel da equipe LUMAXX no visual "Dashboard V12" (VIXCAPTA, 11/10/2026). Mesma casca do Hub do gerente.
   Vidro fosco, fundo com luzes e grade fraca, barra lateral flutuante com ícones (no celular, faixa embaixo).
   Cor de destaque: amarelo LUMAXX no lugar do verde VIXCAPTA. Tema em html[data-theme] (v12.js).
   Fotos dos produtos ficam sempre em fundo claro (vieram assim da loja). */

/* ---------- cores: escuro (padrão) ---------- */
html.v12 {
  --v-bg: #07070A;
  --v-bg2: #0E0D0A;
  --v-vidro: rgba(255, 255, 255, 0.045);
  --v-vidro-forte: rgba(255, 255, 255, 0.08);
  --v-borda: rgba(255, 255, 255, 0.09);
  --v-borda-forte: rgba(255, 255, 255, 0.17);
  --v-txt: #F6F3EA;
  --v-mut: rgba(246, 243, 234, 0.66);
  --v-fraco: rgba(246, 243, 234, 0.42);
  --v-ac: #FEFE22;
  --v-ac-txt: #F3E640;
  --v-ac-forte: #C9C912;
  --v-ac-fundo: rgba(254, 254, 34, 0.11);
  --v-ac-linha: rgba(254, 254, 34, 0.32);
  --v-ok: #34D399;
  --v-ok-fundo: rgba(52, 211, 153, 0.12);
  --v-ruim: #FB7185;
  --v-ruim-fundo: rgba(251, 113, 133, 0.12);
  --v-aviso: #FBBF24;
  --v-aviso-fundo: rgba(251, 191, 36, 0.13);
  --v-info: #7FD8F5;
  --v-info-fundo: rgba(76, 201, 240, 0.13);
  --v-campo: rgba(0, 0, 0, 0.28);
  --v-sombra: 0 24px 60px -24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --v-luz1: rgba(254, 254, 34, 0.12);
  --v-luz2: rgba(207, 169, 35, 0.16);
  --v-luz3: rgba(255, 138, 60, 0.08);
  --v-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
html.v12[data-theme="light"] {
  --v-bg: #F5F3EC;
  --v-bg2: #ECE8DC;
  --v-vidro: rgba(255, 255, 255, 0.66);
  --v-vidro-forte: rgba(255, 255, 255, 0.86);
  --v-borda: rgba(30, 26, 10, 0.09);
  --v-borda-forte: rgba(30, 26, 10, 0.17);
  --v-txt: #17150E;
  --v-mut: rgba(23, 21, 14, 0.68);
  --v-fraco: rgba(23, 21, 14, 0.5);
  --v-ac: #FEFE22;
  --v-ac-txt: #6B5800;
  --v-ac-forte: #C9C912;
  --v-ac-fundo: rgba(201, 180, 18, 0.16);
  --v-ac-linha: rgba(150, 125, 0, 0.35);
  --v-ok: #047857;
  --v-ok-fundo: rgba(4, 120, 87, 0.1);
  --v-ruim: #B91C1C;
  --v-ruim-fundo: rgba(185, 28, 28, 0.08);
  --v-aviso: #92400E;
  --v-aviso-fundo: rgba(217, 119, 6, 0.13);
  --v-info: #1F4F86;
  --v-info-fundo: rgba(31, 79, 134, 0.1);
  --v-campo: rgba(255, 255, 255, 0.8);
  --v-sombra: 0 20px 50px -28px rgba(40, 34, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --v-luz1: rgba(254, 254, 34, 0.34);
  --v-luz2: rgba(207, 169, 35, 0.16);
  --v-luz3: rgba(255, 170, 70, 0.12);
  color-scheme: light;
}
/* nomes de cor do painel apontando para o tema */
html.v12 {
  --texto: var(--v-txt);
  --suave: var(--v-mut);
  --fundo: transparent;
  --card: var(--v-vidro);
  --borda: var(--v-borda);
  --realce: var(--v-vidro-forte);
  --ok: var(--v-ok); --ok-fundo: var(--v-ok-fundo);
  --erro: var(--v-ruim); --erro-fundo: var(--v-ruim-fundo);
  --f-corpo: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.v12 { background: var(--v-bg); }

/* ---------- fundo com luzes e grade ---------- */
html.v12 body {
  background: transparent;
  font-family: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--v-txt);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
html.v12::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 14% 6%, var(--v-luz1), transparent 70%),
    radial-gradient(34vmax 28vmax at 92% 16%, var(--v-luz2), transparent 70%),
    radial-gradient(40vmax 32vmax at 58% 100%, var(--v-luz3), transparent 70%),
    linear-gradient(180deg, var(--v-bg), var(--v-bg2));
  animation: lx-luz 28s ease-in-out infinite alternate;
}
html.v12::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--v-borda) 1px, transparent 1px),
    linear-gradient(90deg, var(--v-borda) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .4;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
}
@keyframes lx-luz {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(-3vmax, 2vmax, 0) rotate(8deg); }
}
html.v12 :focus-visible { outline: 2px solid var(--v-ac-txt); outline-offset: 2px; }

/* ---------- barra lateral flutuante ---------- */
html.v12 .v12-nav {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 24px;
  background: var(--v-vidro-forte);
  border: 1px solid var(--v-borda);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--v-sombra);
}
html.v12 .v12-nav .v12-marca {
  width: 48px; height: 48px;
  border-radius: 15px;
  display: grid; place-items: center;
  /* fundo escuro fixo: a lâmpada da logo tem partes brancas, também no tema claro */
  background: radial-gradient(circle at 30% 20%, rgba(254, 254, 34, .2), transparent 62%), #0E0D0A;
  border: 1px solid rgba(254, 254, 34, .3);
  margin-bottom: 8px;
  box-shadow: 0 10px 24px -12px rgba(207, 169, 35, .9);
  transition: transform .3s var(--v-ease), box-shadow .3s;
}
html.v12 .v12-nav .v12-marca img { width: 30px; height: auto; display: block; }
html.v12 .v12-nav .v12-marca:hover { transform: scale(1.06); box-shadow: 0 12px 28px -10px rgba(254, 254, 34, .7); }
html.v12 .v12-nav nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; overflow: visible; max-width: none; }
html.v12 .v12-nav .v12-sep { width: 28px; height: 1px; background: var(--v-borda); margin: 6px 0; }
html.v12 .v12-nav nav button,
html.v12 .v12-nav .v12-ic {
  position: relative;
  width: 46px; height: 46px; min-height: 0;
  padding: 0; margin: 0;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 0;
  background: transparent;
  color: var(--v-mut);
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s var(--v-ease);
}
html.v12 .v12-nav svg { width: 21px; height: 21px; }
html.v12 .v12-nav nav button:hover,
html.v12 .v12-nav .v12-ic:hover { color: var(--v-txt); background: var(--v-vidro-forte); transform: translateX(2px); }
html.v12 .v12-nav nav button[aria-current="page"] {
  color: var(--v-ac-txt);
  background: var(--v-ac-fundo);
  box-shadow: inset 0 0 0 1px var(--v-ac-linha);
  font-weight: 400;
}
html.v12 .v12-nav nav button[aria-current="page"]::before {
  content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px;
  border-radius: 3px; background: var(--v-ac); box-shadow: 0 0 10px rgba(254, 254, 34, .6);
}
html.v12[data-theme="light"] .v12-nav nav button[aria-current="page"]::before { background: var(--v-ac-txt); box-shadow: none; }
html.v12 .v12-nav #lx-tema:hover { transform: rotate(20deg); }
html.v12 #lx-tema .lx-lua { display: none; }
html.v12[data-theme="light"] #lx-tema .lx-sol { display: none; }
html.v12[data-theme="light"] #lx-tema .lx-lua { display: block; }
/* nome ao passar o mouse */
html.v12 .v12-nav .v12-dica {
  position: absolute; left: calc(100% + 14px); top: 50%;
  transform: translate(-6px, -50%);
  white-space: nowrap;
  padding: 6px 10px; border-radius: 10px;
  font: 600 12px Inter, system-ui, sans-serif;
  background: var(--v-vidro-forte); color: var(--v-txt);
  border: 1px solid var(--v-borda);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--v-sombra);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s var(--v-ease);
}
html.v12 .v12-nav :is(button, a):hover .v12-dica,
html.v12 .v12-nav :is(button, a):focus-visible .v12-dica { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 761px) {
  html.v12 body { padding-left: 96px; }
}

/* ---------- topo: logo, selo e ações ---------- */
html.v12 .v12-topo-linha {
  max-width: 1360px;
  margin: 0 auto;
  padding: 22px 24px 0;
  background: transparent;
  color: var(--v-txt);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 16px; flex-wrap: wrap;
  font-size: 13px;
}
html.v12 .v12-marca-linha { display: flex; align-items: center; gap: 12px; }
html.v12 .lx-logo { height: 26px; width: auto; display: block; color: var(--v-txt); }
html.v12 .v12-versao { font: 700 11px Inter, system-ui, sans-serif; color: var(--v-ac-txt); border: 1px solid var(--v-ac-linha); background: var(--v-ac-fundo); padding: 4px 9px; border-radius: 999px; letter-spacing: .02em; }
html.v12 .v12-acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
html.v12 .pilula {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--v-vidro); border: 1px solid var(--v-borda);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--v-txt); font: 600 13px Inter, system-ui, sans-serif; cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s var(--v-ease);
}
html.v12 button.pilula:hover { border-color: var(--v-borda-forte); background: var(--v-vidro-forte); transform: translateY(-1px); }
html.v12 .pilula.ok { color: var(--v-ac-txt); background: var(--v-ac-fundo); border-color: var(--v-ac-linha); cursor: default; }
html.v12 .ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--v-ac); box-shadow: 0 0 0 0 rgba(254, 254, 34, .6); animation: lx-pulsa 2s infinite; }
html.v12[data-theme="light"] .ponto-vivo { background: var(--v-ac-txt); }
@keyframes lx-pulsa { 70% { box-shadow: 0 0 0 9px rgba(254, 254, 34, 0); } 100% { box-shadow: 0 0 0 0 rgba(254, 254, 34, 0); } }

/* ---------- indicadores ---------- */
html.v12 .kpi-card { padding: 20px; display: flex; flex-direction: column; gap: 6px; min-height: 160px; }
html.v12 .kpi-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
html.v12 .kpi-ic { width: 42px; height: 42px; border-radius: 13px; display: grid !important; place-items: center; flex: none; }
html.v12 .kpi-ic svg { width: 20px; height: 20px; }
html.v12 .kpi-ic.ouro { background: rgba(254, 254, 34, .13); color: var(--v-ac-txt); box-shadow: inset 0 0 0 1px rgba(254, 254, 34, .3), 0 8px 22px -10px rgba(254, 254, 34, .55); }
html.v12 .kpi-ic.ciano { background: rgba(76, 201, 240, .12); color: var(--v-info); box-shadow: inset 0 0 0 1px rgba(76, 201, 240, .26); }
html.v12 .kpi-ic.verde { background: rgba(52, 211, 153, .12); color: var(--v-ok); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .26); }
html.v12 .kpi-ic.vermelho { background: var(--v-ruim-fundo); color: var(--v-ruim); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, .28); }
html.v12 .kpi-ic.laranja { background: rgba(251, 146, 60, .13); color: #FB923C; box-shadow: inset 0 0 0 1px rgba(251, 146, 60, .28); }
html.v12[data-theme="light"] .kpi-ic.ouro { background: rgba(254, 254, 34, .55); color: #3D3300; box-shadow: inset 0 0 0 1px rgba(150, 125, 0, .3), 0 8px 22px -12px rgba(150, 125, 0, .6); }
html.v12[data-theme="light"] .kpi-ic.laranja { color: #C2410C; }
html.v12 .kpi-card .kpi-nome { display: block; font-size: 13px; color: var(--v-mut); font-weight: 500; }
html.v12 .kpi-card .kpi-valor { display: block; margin: 0; font: 700 clamp(22px, 2vw, 30px)/1.15 Inter, system-ui, sans-serif; letter-spacing: -.03em; color: var(--v-txt); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html.v12 .kpi-card.ouro .kpi-valor { color: var(--v-ac-txt); }
html.v12 .kpi-card .kpi-sub { display: block; font-size: 12px; color: var(--v-fraco); line-height: 1.45; }
html.v12 .selo {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 11.5px Inter, system-ui, sans-serif; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--v-vidro-forte); color: var(--v-mut); border: 1px solid var(--v-borda);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
html.v12 .selo.sobe { color: var(--v-ok); background: var(--v-ok-fundo); border-color: rgba(52, 211, 153, .3); }
html.v12 .selo.desce { color: var(--v-ruim); background: var(--v-ruim-fundo); border-color: rgba(251, 113, 133, .3); }
html.v12 .selo.aviso { color: var(--v-aviso); background: var(--v-aviso-fundo); border-color: rgba(251, 191, 36, .3); }


/* ---------- painel: barra lateral (botões do menu viram ícones) ---------- */
html.v12 .cab.v12-nav { border-bottom: 0; color: var(--v-txt); }
html.v12 .v12-nav nav button { opacity: 1; text-decoration: none; }
html.v12 .v12-nav .marca { padding: 0; cursor: pointer; }
html.v12 .v12-nav .ver-site { color: var(--v-mut); }
html.v12 .v12-nav .qtd {
  position: absolute; top: 3px; right: 1px; margin: 0;
  min-width: 17px; height: 17px; padding: 0 4px; font: 800 10px/17px Inter, system-ui, sans-serif;
  border-radius: 99px; background: var(--v-ac); color: #111; box-shadow: 0 0 0 2px var(--v-bg);
}
html.v12 .v12-nav nav::-webkit-scrollbar, html.v12 .v12-nav::-webkit-scrollbar { display: none; }
@media (min-width: 761px) and (max-height: 760px) {
  /* tela baixa: menu mais compacto para caber tudo */
  html.v12 .v12-nav { padding: 10px 8px; gap: 3px; }
  html.v12 .v12-nav nav { gap: 3px; }
  html.v12 .v12-nav nav button, html.v12 .v12-nav .v12-ic { width: 40px; height: 40px; }
  html.v12 .v12-nav .v12-marca { width: 42px; height: 42px; margin-bottom: 4px; }
}

/* ---------- topo e faixas ---------- */
html.v12 .v12-topo-linha { max-width: 1140px; padding: 22px 20px 0; }
html.v12 .pilula small { font-weight: 500; color: var(--v-fraco); font-size: 11.5px; }
html.v12 .lx-avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 11px Inter, system-ui, sans-serif; color: #111; background: linear-gradient(135deg, #C9C912, #FEFE22); }
html.v12 .lx-data { color: var(--v-mut); cursor: default; }
html.v12 .lx-tema-solto #lx-tema {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--v-vidro-forte); color: var(--v-txt); border: 1px solid var(--v-borda-forte);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--v-sombra);
  transition: transform .3s var(--v-ease);
}
html.v12 .lx-tema-solto #lx-tema:hover { transform: rotate(20deg); }
html.v12 .lx-tema-solto #lx-tema svg { width: 19px; height: 19px; }
html.v12 .lx-tema-solto .v12-dica { display: none; }
html.v12 .demo {
  background: transparent; color: var(--v-mut); font-size: 12.5px; padding: 10px 16px 0;
}
html.v12 .demo b { color: var(--v-ac-txt); }
html.v12 .demo button { color: var(--v-txt); border: 1px solid var(--v-borda-forte); background: var(--v-vidro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 5px 12px; transition: border-color .2s; }
html.v12 .demo button:hover { border-color: var(--v-ac-linha); }
html.v12 .faixa-pub {
  max-width: 1100px; margin: 16px auto 0; border-radius: 18px;
  background: radial-gradient(120% 200% at 0% 0%, rgba(254, 254, 34, .2), transparent 60%), var(--v-vidro);
  border: 1px solid var(--v-ac-linha); color: var(--v-txt);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--v-sombra);
  width: calc(100% - 32px);
}
html.v12 .corpo { max-width: 1140px; padding-inline: 20px; }

/* ---------- textos ---------- */
html.v12 h1 { font: 800 clamp(24px, 2.6vw, 32px)/1.15 Montserrat, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.025em; color: var(--v-txt); }
html.v12 h2 { font-family: Inter, system-ui, sans-serif; font-weight: 700; color: var(--v-txt); }
html.v12 .corpo > p, html.v12 .conta, html.v12 .vazio, html.v12 .extra { color: var(--v-mut); }
html.v12 a { color: inherit; }

/* ---------- vidro: caixas, listas, tabelas, lojistas ---------- */
html.v12 :is(.caixa, .prods, .tabela, .loja, .dica, .resumo > div) {
  background: var(--v-vidro);
  border: 1px solid var(--v-borda);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--v-sombra);
  border-radius: 20px;
}
html.v12 .dica { border-style: dashed; border-color: var(--v-borda-forte); color: var(--v-mut); box-shadow: none; }
html.v12 .dica b { color: var(--v-ac-txt); }
html.v12 .lx-entrar-marca { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 14px; background: radial-gradient(circle at 30% 20%, rgba(254, 254, 34, .2), transparent 62%), #0E0D0A; border: 1px solid rgba(254, 254, 34, .3); box-shadow: 0 10px 24px -12px rgba(207, 169, 35, .9); }
html.v12 .lx-entrar-marca img { width: 32px; height: auto; display: block; }
html.v12 .caixa.entrar { max-width: 440px; padding: 28px; box-shadow: var(--v-sombra), 0 30px 80px -40px rgba(254, 254, 34, .35); }
html.v12 .prods li + li { border-top-color: var(--v-borda); }
html.v12 .prods button.linha { transition: background .2s; }
html.v12 .prods button.linha:hover { background: var(--v-vidro-forte); }
/* fotos dos produtos: fundo claro fixo nos dois temas */
html.v12 .mini, html.v12 .semfoto, html.v12 .foto-campo img { background: #F3F2EC; color: #5b5f68; }
html.v12 .hist th { background: var(--v-vidro-forte); color: var(--v-fraco); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
html.v12 .hist th, html.v12 .hist td { border-top-color: var(--v-borda); }
html.v12 .hist tbody tr:hover { background: var(--v-vidro); }
html.v12 fieldset { border-color: var(--v-borda-forte); border-radius: 14px; }
html.v12 .perigo { border-color: rgba(251, 113, 133, .35); }

/* cartões de lojistas (o estilo antigo ".resumo div" não vale para as partes de dentro) */
html.v12 .resumo .kpi-topo { background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.v12 .resumo .kpi-nome { color: var(--v-mut); font-size: 13px; }
html.v12 .resumo { gap: 14px; }
html.v12 .resumo > .kpi-card { border-top: 1px solid var(--v-borda); padding: 18px; min-height: 0; transition: transform .35s var(--v-ease), border-color .35s; }
html.v12 .resumo > .kpi-card:hover { transform: translateY(-4px); border-color: var(--v-borda-forte); }
html.v12 .resumo .kpi-card .kpi-valor { font-size: 30px; }
html.v12 .loja { transition: transform .35s var(--v-ease), border-color .35s; }
html.v12 .loja:hover { transform: translateY(-3px); border-color: var(--v-borda-forte); }
html.v12 .loja.do-site { border-color: var(--v-ac-linha); box-shadow: var(--v-sombra), 0 0 0 3px rgba(254, 254, 34, .22); }
html.v12 .loja-topo b { font-family: Inter, system-ui, sans-serif; color: var(--v-txt); }
html.v12 .loja dt { color: var(--v-fraco); }
html.v12 .loja .linhas span { background: var(--v-vidro-forte); border-color: var(--v-borda); }
html.v12 .loja .obs { border-left-color: var(--v-ac); }
html.v12[data-theme="light"] .loja .obs { border-left-color: #C9B400; }
html.v12 .st-novo { background: var(--v-info-fundo); color: var(--v-info); }
html.v12 .st-analise { background: var(--v-aviso-fundo); color: var(--v-aviso); }
html.v12 .st-aprovado { background: var(--v-ok-fundo); color: var(--v-ok); }
html.v12 .st-recusado { background: var(--v-ruim-fundo); color: var(--v-ruim); }
html.v12 .st-site { background: var(--v-ac); color: #111; }
html.v12 .chips button { background: var(--v-vidro); color: var(--v-mut); border-color: var(--v-borda); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .2s, color .2s; }
html.v12 .chips button:hover { color: var(--v-txt); border-color: var(--v-borda-forte); }
html.v12 .chips button[aria-pressed=true] { background: var(--v-ac-fundo); color: var(--v-ac-txt); border-color: var(--v-ac-linha); }

/* ---------- botões e campos ---------- */
html.v12 .bt { background: linear-gradient(135deg, #C9C912, #FEFE22); color: #111; border: 0; padding: 11px 20px; box-shadow: 0 10px 24px -14px rgba(254, 254, 34, .8); transition: transform .2s var(--v-ease), filter .2s; }
html.v12 .bt:hover { background: linear-gradient(135deg, #C9C912, #FEFE22); filter: brightness(1.06); transform: translateY(-1px); }
html.v12 .bt-claro, html.v12 .bt-claro:hover { background: var(--v-vidro); color: var(--v-txt); border: 1px solid var(--v-borda-forte); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.v12 .bt-claro:hover { border-color: var(--v-ac-linha); filter: none; }
html.v12 .bt-perigo, html.v12 .bt-perigo:hover { background: #B3261E; color: #fff; box-shadow: none; }
html.v12 .bt-pub { color: #111; }
html.v12 .bt-peq { padding: 7px 13px; }
html.v12[data-theme="light"] .bt:not(.bt-claro):not(.bt-perigo) { box-shadow: 0 10px 22px -14px rgba(120, 100, 0, .8); }
html.v12 input:not([type=checkbox]), html.v12 select, html.v12 textarea {
  background: var(--v-campo); color: var(--v-txt); border: 1px solid var(--v-borda-forte); border-radius: 12px;
}
html.v12 input::placeholder, html.v12 textarea::placeholder { color: var(--v-fraco); }
html.v12 select option { background: var(--v-bg); color: var(--v-txt); }
html.v12 input:focus-visible, html.v12 select:focus-visible, html.v12 textarea:focus-visible, html.v12 button:focus-visible { outline: 2px solid var(--v-ac-txt); outline-offset: 2px; border-color: var(--v-ac-linha); }
html.v12 input[type=checkbox] { accent-color: #C9B400; }
html.v12 .pags button { background: var(--v-vidro); color: var(--v-txt); border-color: var(--v-borda); border-radius: 10px; }
html.v12 .pags button[aria-current] { background: var(--v-ac-fundo); color: var(--v-ac-txt); border-color: var(--v-ac-linha); font-weight: 700; }
html.v12 .aviso-ok { background: var(--v-ok-fundo); color: var(--v-ok); border: 1px solid rgba(52, 211, 153, .3); }
html.v12 .aviso-erro { background: var(--v-ruim-fundo); color: var(--v-ruim); border: 1px solid rgba(251, 113, 133, .3); }
html.v12 .toast { background: rgba(14, 13, 10, .92); color: #F6F3EA; border: 1px solid rgba(254, 254, 34, .35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
/* visualizador do site: fica por cima de tudo, com fundo próprio */
html.v12 .site { z-index: 100; background: var(--v-bg); }

/* ---------- rodapé com a logo da VIXCAPTA ---------- */
html.v12 .rod { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; color: var(--v-fraco); padding-block: 18px 30px; }
html.v12 .rod a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 12.5px; color: rgba(246, 243, 234, .7); background: rgba(10, 10, 9, .86); border: 1px solid rgba(255, 255, 255, .12); border-radius: 99px; padding: 7px 14px; transition: transform .25s var(--v-ease), border-color .25s; }
html.v12 .rod a:hover { transform: translateY(-2px); border-color: rgba(254, 254, 34, .4); }
html.v12 .rod img { height: 15px; width: auto; display: block; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  /* barra vira faixa embaixo; com muitos itens, rola para o lado */
  html.v12 .v12-nav {
    top: auto; bottom: 10px; left: 10px; right: 10px;
    transform: none;
    flex-direction: row; justify-content: flex-start;
    padding: 6px 8px; border-radius: 20px; gap: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  html.v12 .v12-nav .v12-marca, html.v12 .v12-nav .v12-sep, html.v12 .v12-nav .v12-dica { display: none; }
  html.v12 .v12-nav nav button:hover, html.v12 .v12-nav .v12-ic:hover { transform: none; }
  html.v12 body { padding-bottom: 86px; }
  html.v12 .v12-nav nav { flex-direction: row; gap: 0; flex: none; }
  /* os 10 botões cabem na largura; em tela muito estreita a faixa rola para o lado */
  html.v12 .v12-nav nav button, html.v12 .v12-nav .v12-ic { width: max(34px, min(42px, calc((100vw - 40px) / 10))); height: 42px; flex: none; }
  html.v12 .v12-nav svg { width: 20px; height: 20px; }
  html.v12 .v12-nav .qtd { top: 2px; right: 0; }
  html.v12 .v12-nav nav button[aria-current="page"]::before { left: 12px; right: 12px; top: auto; bottom: -6px; width: auto; height: 3px; }
  html.v12 .v12-topo-linha { padding: 14px 16px 0; }
  html.v12 .corpo { padding-inline: 16px; }
  html.v12 .lx-data { display: none; }
  html.v12 .resumo { grid-template-columns: 1fr 1fr; gap: 10px; }
  html.v12 .resumo > .kpi-card { padding: 14px; }
  html.v12 .resumo .kpi-topo { flex-direction: column; align-items: flex-start; gap: 8px; }
  html.v12 .resumo .kpi-ic { width: 34px; height: 34px; border-radius: 11px; }
  html.v12 .resumo .kpi-ic svg { width: 17px; height: 17px; }
  html.v12 .resumo .kpi-card .kpi-valor { font-size: 24px; }
  html.v12 .selo { font-size: 10.5px; padding: 3px 7px; }
  html.v12 .toast { bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  html.v12::before, html.v12 .ponto-vivo { animation: none; }
  html.v12 .loja:hover, html.v12 .resumo > .kpi-card:hover { transform: none; }
}
@media print {
  html.v12 .v12-nav { display: none; }
  html.v12 body { padding-left: 0; }
}