@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════
   DV ORACLE — folha UNICA do app.

   Esta folha NAO pinta o app por cima: ela E' o app. Nasceu do preview
   aprovado (/root/preview/preview.css) e so' depois cresceu para cobrir os
   componentes que o preview nao desenhou (paginacao, esqueleto, paywall,
   tabela de leads, tela de login...).

   Regra que vale para o arquivo inteiro: NENHUM !important. Onde uma regra
   legada disputava, a saida e' APAGAR a regra legada — nunca sobrepor. Ver
   a lista do que precisa morrer no rodape deste comentario.

   Ordem do arquivo:
     1. CONTRATO VISUAL  — preview.css, com 5 adaptacoes marcadas com "DESVIO"
     2. COMPLEMENTOS     — tudo que o preview nao tinha, no mesmo vocabulario
     3. DESLOGADO        — body.auth (login/apply/forgot/set-password)

   PRECISA MORRER no passo de PHP para esta folha valer sem !important:
     _tema.php inteiro (e' a camada de tinta que o dono rejeitou);
     ads_head.php: :root, body, .apptop, .card, h1, .sub, label,
                   input,select, button,.btn, .btn.ghost, .foot, .msg,
                   .row, .pill (morto), o bloco body.auth e o <style> que
                   fica DEPOIS do </head> (.apptop .pv);
     _header.php: o <style> inteiro (:root ... .modal .close) e os style=
                   inline dos <a> da barra;
     _i18n.php: o <style> do .langsel (o position:fixed em especial);
     library.php / traffic.php / leads.php / account.php: os <style> de tela;
     _paywall.php / _credits.php: os <style> proprios;
     ads_lib.php: os style=/fill= inline do credits_badge_html() (e emitir
                   class="cred" no <a>).
   ══════════════════════════════════════════════════════════════════════ */

/* As duas familias do contrato (Inter + IBM Plex Mono) nunca foram carregadas
   no app logado — sem isto o preview cai em system-ui/ui-monospace e a tela
   fica parecida, mas nao igual. @import e' o jeito de a folha se bastar; se o
   passo de PHP preferir, troque por <link rel=preconnect>+<link> nos DOIS
   cabecalhos (_header.php e ads_head.php) — e' uma ida a rede mais rapida. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");


/* ══════════════════════════════════════════════════════════════════════
   1. CONTRATO VISUAL — preview.css
   ══════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* tokens COPIADOS do Front v2 (Downloads/Front v2.html), acento trocado p/ ORACLE */
  --radius:.5rem;
  --font-sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono","Fira Code",ui-monospace,monospace;
  --fs-h1:2.25rem; --fs-metric:2rem; --fs-label:1rem;
  --lh-metric:2rem; --lh-label:1.5rem;
  --fg:#101828; --muted-fg:#4A5565; --card:#FFFFFF; --input:#F0F0F0;
  --cy:#00B3DD; --cyd:#0089AB;
  /* texto sobre preenchimento ciano: BRANCO, decisao do Leo.
     Como o branco puro sobre #00B3DD fica fraco, o ciano escurece um
     pouco (#00A3C9) so' onde ha texto por cima — a cor de marca segue
     #00B3DD em badge, borda e detalhe. */
  --cyfg:#ffffff; --cy-fill:#00A3C9;
  --linha:rgba(0,179,221,.20);        /* era bg-sky-500/20 */
}
body{
  background:linear-gradient(180deg,#e0e7ff 0%,#e2e9ff 9.09%,#e4eaff 18.18%,#e6ecfe 27.27%,
    #e9eefe 36.36%,#ebf0fe 45.45%,#edf1fd 54.55%,#eff3fd 63.64%,#f1f5fd 72.73%,
    #f4f7fd 81.82%,#f6f8fc 90.91%,#f8fafc 100%);
  background-attachment:fixed;min-height:100vh;color:var(--fg);
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased}

/* ── barra: h-16 px-6 ── */
/* Grade de 3 colunas iguais em vez de space-between: assim a pilula fica
   centrada na TELA, e nao no espaco que sobra entre logo e controles.
   O recuo lateral e' 49px para a logo cair na MESMA vertical do "Ad Library"
   (o titulo soma 24px do .wrap + 25px do proprio h1). */
.topo{height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:0 49px;position:sticky;top:0;z-index:9}
.topo>.dir{justify-self:end}
.marca{height:26px;width:auto;display:block;justify-self:start}
.m-dark{display:none}
/* DESVIO 1: o app grava o tema como html.dv-dark (localStorage 'dvspy-theme',
   _tema.php). O preview escreve html.dark — traduzido em TODO o arquivo. */
html.dv-dark .m-light{display:none}
html.dv-dark .m-dark{display:block}
/* DESVIO 2: a FONTE da marca vive aqui, nao no markup. O HTML atual ainda
   aponta o modo escuro para oracle-white.png (marca 100% branca, o "DV" some);
   oracle-dark.png e' a versao certa para fundo escuro. Enquanto o PHP nao
   muda, o content: resolve — e depois continua sendo o unico lugar a mexer. */
.marca.m-light{content:url("/assets/oracle-light.png")}
.marca.m-dark{content:url("/assets/oracle-dark.png")}
.dv{width:32px;height:32px;border-radius:12px;
  background:linear-gradient(135deg,#00B3DD 0%,#5AD2F0 100%);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 auto}
.pill{display:flex;gap:2px;background:var(--card);border-radius:999px;padding:5px;
  box-shadow:0 4px 20px -12px rgba(16,24,40,.30)}
/* DESVIO 3: a navegacao do app e' <a href> (navegacao real + o _tema.php marca
   a aba comparando o basename do href). O preview usa <button data-t>. */
.pill button,.pill a{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--muted-fg);padding:10px 18px;
  border-radius:999px;border:0;background:none;cursor:pointer;white-space:nowrap;transition:.12s;
  display:inline-flex;align-items:center;text-decoration:none}
.pill button:hover,.pill a:hover{color:var(--fg)}
.pill button.on,.pill a.on{background:var(--cy-fill);color:var(--cyfg);
  box-shadow:0 0 24px rgba(0,179,221,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.dir{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.cred{font-family:var(--font-mono);font-size:13px;color:var(--muted-fg)}
.cred b{color:var(--fg);font-weight:600}
.av{width:32px;height:32px;border-radius:999px;border:2px solid rgba(0,179,221,.30);
  background:rgba(0,179,221,.10);color:var(--cyd);display:flex;align-items:center;
  justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600}
.ico{border-radius:999px;padding:8px;color:rgba(74,85,101,.6);cursor:pointer;font-size:14px;background:none;border:0;line-height:1;transition:color .15s}
.ico:hover{color:var(--fg)}

.wrap{padding:0 24px 60px}
h1{font-size:var(--fs-h1);line-height:var(--fs-h1);font-weight:500;padding:26px 25px 4px}
.sub{font-family:var(--font-mono);font-size:13px;color:var(--muted-fg);padding:0 25px 8px}
.sec{font-size:1.5rem;font-weight:500;line-height:2.25rem}

/* ── metricas: SEM cartao, divisoria de 0.5px ── */
.mets{display:grid;grid-template-columns:repeat(4,1fr);background:transparent;margin:10px 0 18px}
.met{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:16px 0 16px 35px}
.met+.met::before{content:'';position:absolute;left:0;top:0;height:100%;width:.5px;
  background:var(--linha)}
.met label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1.6px;
  color:var(--muted-fg);font-size:var(--fs-label);line-height:var(--lh-label)}
.met b{font-weight:400;color:var(--fg);font-size:var(--fs-metric);line-height:var(--lh-metric);
  margin-top:8px}
.cy{color:var(--cyd)}
/* a biblioteca so' mostra "Credits left" a quem gasta credito; nos outros
   planos sobram TRES metricas e a grade de 4 colunas deixava um quarto vazio
   a' direita. O :has ja' e' usado nesta folha (.ppf:has(.pp.best)), entao nao
   entra dependencia nova — e resolve sem pedir uma classe extra ao PHP. */
.mets:has(.met:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}

.box{background:var(--card);border-radius:12px;box-shadow:0 8px 30px -20px rgba(16,24,40,.28)}
.pan{padding:22px 25px}
.fil{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inp{height:38px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;
  background:var(--input);font-family:var(--font-mono);font-size:13px;color:var(--fg)}
.inp.b{flex:1;min-width:230px;color:#9aa3b2}
.inp.off{opacity:.5}
.inp.ic{width:38px;justify-content:center;padding:0}
.btn{height:38px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;
  background:var(--cy-fill);color:var(--cyfg);font-size:13px;font-weight:600;border:0;cursor:pointer;
  box-shadow:0 0 20px rgba(0,179,221,.22),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.gh{background:transparent;color:var(--cyd);border:2px solid rgba(0,179,221,.30);box-shadow:none}
.cnt{font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--muted-fg);margin:20px 0 12px}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cc{border-radius:12px;overflow:hidden;background:var(--card);
  box-shadow:0 4px 16px -10px rgba(16,24,40,.24)}
.th{position:relative;aspect-ratio:9/13;background:var(--input)}
.bd{position:absolute;top:8px;left:8px;background:var(--cy-fill);color:#fff;border-radius:6px;
  padding:3px 8px;font-family:var(--font-mono);font-size:8.5px;font-weight:600}
.pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#b8c0cc}
.mt{padding:11px}
.mt b{display:block;font-size:12px;font-weight:600}
.mt small{display:block;font-family:var(--font-mono);font-size:9.5px;color:var(--muted-fg);margin-top:5px}
.acts{display:flex;gap:5px;margin-top:10px}
.mini{flex:1;text-align:center;background:var(--cy-fill);color:var(--cyfg);border-radius:999px;
  padding:6px 0;font-size:9px;font-weight:600}
.mini.gh{background:transparent;border:1.5px solid rgba(0,179,221,.30);color:var(--cyd)}

.abas{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ab{height:36px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;
  border:2px solid rgba(0,179,221,.20);font-family:var(--font-mono);font-size:13px;
  color:var(--muted-fg);cursor:pointer;background:transparent}
.ab.on{background:var(--cy-fill);color:var(--cyfg);border-color:var(--cy);font-weight:600}
.sp{flex:1}
.vaz{margin-top:18px;border:2px dashed rgba(0,179,221,.22);border-radius:12px;padding:42px;
  text-align:center;color:var(--muted-fg);font-family:var(--font-mono);font-size:13px}
.dica{font-family:var(--font-mono);font-size:12px;color:var(--muted-fg);margin-top:12px}
.mets3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px}
.c3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.h{font-family:var(--font-mono);font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted-fg);margin-bottom:16px}
.li{display:flex;justify-content:space-between;padding:10px 0;
  border-bottom:1px solid rgba(16,24,40,.06);font-size:13px;color:var(--muted-fg)}
.li b{color:var(--fg);font-weight:600}
.a2{display:flex;gap:8px;margin-top:16px}
.p2{font-size:13px;color:var(--muted-fg);line-height:1.55;margin-bottom:13px}
.lb{display:flex;align-items:center;justify-content:space-between;background:var(--input);
  border-radius:999px;padding:11px 15px;font-family:var(--font-mono);font-size:11px;
  color:var(--muted-fg);margin-bottom:13px}
.cp{color:var(--cyd);font-weight:600;font-size:10px;letter-spacing:1.1px}

.modalbg{position:fixed;inset:0;background:rgba(16,24,40,.45);display:none;align-items:center;
  justify-content:center;padding:28px;z-index:50;backdrop-filter:blur(3px)}
.modalbg.open{display:flex}
/* DESVIO 4: INVERSAO DE NOME. No preview .modal e' o painel branco; no app
   .modal ja e' o BACKDROP (o dvAnchorModals do _header.php faz
   querySelectorAll('.modal') contando com isso, e o backdrop vai levar
   class="modalbg modal"). Escrito como FILHO de .modalbg, o painel nunca
   pinta o fundo de branco — e a disputa se resolve por especificidade, sem
   !important. Os paineis reais do app entram na mesma lista. */
.modalbg>.modal,.pw__b,.bo__b,.details-card,.peek__b{
  background:var(--card);border-radius:16px;padding:32px;max-width:940px;width:100%;
  max-height:90vh;overflow:auto;box-shadow:0 30px 70px -30px rgba(16,24,40,.5)}
.modalbg h2,.pw__b h2,.bo__b h2,.details-card h3{font-size:1.5rem;font-weight:500;text-align:center}
.msub{text-align:center;color:var(--muted-fg);font-size:13.5px;margin:10px 0 22px}
.tg{display:flex;justify-content:center;gap:3px;background:var(--input);border-radius:999px;
  padding:4px;width:fit-content;margin:0 auto 22px}
.tg span,.tg button{font-family:var(--font-mono);font-size:12.5px;color:var(--muted-fg);padding:9px 19px;
  border-radius:999px;cursor:pointer;border:0;background:none}
.tg span.on,.tg button.on{background:var(--cy-fill);color:var(--cyfg);font-weight:600}
.pls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.p{border:2px solid rgba(16,24,40,.07);border-radius:12px;padding:22px;position:relative}
.p.d{border-color:var(--cy)}
.pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--cy);
  color:var(--cyfg);border-radius:999px;padding:4px 12px;font-family:var(--font-mono);
  font-size:9px;font-weight:600}
.pn{font-family:var(--font-mono);font-size:11px;letter-spacing:1.7px;color:var(--cyd)}
/* DESVIO 5: .pv do preview e' o PRECO do plano; .pv do app e' o selo PLAN da
   barra (ads_head.php/_header.php), e os dois vivem na MESMA pagina. O preco
   fica escopado dentro do cartao de plano; o selo da barra e' pintado em
   .dir .pv, la' embaixo. */
.p .pv{font-size:2rem;font-weight:400;line-height:2rem;margin:12px 0 4px}
.p .pv s{font-size:13px;color:var(--muted-fg);text-decoration:none}
.pa{font-size:11.5px;color:var(--muted-fg);margin-bottom:14px}
.p ul{list-style:none;border-top:1px solid rgba(16,24,40,.07);padding-top:13px}
.p li{font-size:12.5px;color:var(--muted-fg);padding:5px 0 5px 17px;position:relative}
.p li::before{content:'\2713';position:absolute;left:0;color:var(--cyd);font-weight:700}
.mf{text-align:center;color:var(--muted-fg);font-size:12px;margin-top:20px}
.ml{text-align:center;color:var(--muted-fg);font-family:var(--font-mono);font-size:12.5px;
  margin-top:13px;cursor:pointer}
/* .tela{display:none}/.tela.on REMOVIDOS: no app cada tela e' uma URL propria,
   nao uma secao escondida. */
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}
  .c3,.mets,.mets3,.pls{grid-template-columns:1fr}
  .met+.met::before{display:none}}

/* ══ MODO ESCURO ═══════════════════════════════════════════════════════
   Tokens do Front v2 (bloco .dark do index.css), COM UMA DIVERGENCIA proposital:
   o fundo do Front v2 e' indigo (#18225D). Aqui e' ciano-escuro (#0A3B4A), mesmo
   matiz do #00B3DD — senao o escuro le como 'azul', nao como a marca. Detalhe que eles
   fazem e' facil de perder: no escuro a cor primaria CLAREIA e o texto por
   cima dela vira ESCURO (--primary-fg: hsl(0 0% 0%)). Manter branco ali
   deixaria o botao lavado. */
html.dv-dark{
  --fg:#E2E8F0; --muted-fg:#94A3B8;
  --card:rgba(125,125,125,.12); --input:rgba(125,125,125,.15);
  /* o texto do item ativo saia na MESMA cor do fundo (medido: pixel do texto
     == pixel do fundo, 90,210,240). No escuro a cor primaria clareia, entao o
     texto por cima tem de ser ESCURO — igual ao --primary-fg:hsl(0 0% 0%) que
     o Front v2 usa no dark. */
  --cy:#5AD2F0; --cyd:#7CDCF5; --cy-fill:#4FC9E8; --cyfg:#052730;
  --linha:rgba(90,210,240,.22);
}
html.dv-dark body{
  background:linear-gradient(180deg,#0A3B4A 0%,#03202A 50%,#000B0F 71%,#000 100%);
  color:var(--fg)}
html.dv-dark .pill{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  box-shadow:none}
html.dv-dark .pill button,html.dv-dark .pill a{color:var(--muted-fg)}
html.dv-dark .pill button:hover,html.dv-dark .pill a:hover{color:var(--fg)}
html.dv-dark .pill button.on,html.dv-dark .pill a.on{color:var(--cyfg);box-shadow:0 0 24px rgba(90,210,240,.20),inset 0 1px 0 rgba(255,255,255,.15)}
html.dv-dark .box,html.dv-dark .cc{background:var(--card);border:1px solid rgba(255,255,255,.08);
  box-shadow:none}
html.dv-dark .th{background:rgba(255,255,255,.05)}
/* ⚠️ background-COLOR, nao o atalho `background`: o atalho zera imagem, repeat
   e position junto. Como esta regra vale 0-2-1 e o `select.inp` que desenha o
   chevron vale 0-1-1, no escuro o atalho vencia e devolvia repeat/position ao
   padrao — a setinha do <select> aparecia LADRILHADA da esquerda a' direita.
   So' a cor de fundo muda entre os temas; o desenho fica de fora. */
html.dv-dark .inp{background-color:var(--input);color:var(--fg)}
html.dv-dark .inp.b{color:#7b8494}
html.dv-dark .btn{box-shadow:0 0 20px rgba(90,210,240,.18),inset 0 1px 0 rgba(255,255,255,.15)}
html.dv-dark .btn.gh{border-color:rgba(90,210,240,.35);color:var(--cyd);box-shadow:none}
html.dv-dark .av{border-color:rgba(90,210,240,.35);background:rgba(90,210,240,.12);color:var(--cyd)}
html.dv-dark .ab{border-color:rgba(90,210,240,.22);color:var(--muted-fg)}
html.dv-dark .li{border-bottom-color:rgba(255,255,255,.07)}
html.dv-dark .lb{background:var(--input)}
html.dv-dark .vaz{border-color:rgba(90,210,240,.25)}
html.dv-dark .modalbg>.modal,html.dv-dark .pw__b,html.dv-dark .bo__b,
html.dv-dark .details-card,html.dv-dark .peek__b{background:#07222C;border:1px solid rgba(255,255,255,.10)}
html.dv-dark .p{border-color:rgba(255,255,255,.10)}
html.dv-dark .p.d{border-color:var(--cy)}
html.dv-dark .p ul{border-top-color:rgba(255,255,255,.10)}
html.dv-dark .tg{background:rgba(255,255,255,.06)}
html.dv-dark .mini.gh{border-color:rgba(90,210,240,.35);color:var(--cyd)}
html.dv-dark .ico{color:rgba(226,232,240,.55)}
html.dv-dark .pl{color:rgba(255,255,255,.28)}


/* ══════════════════════════════════════════════════════════════════════
   2. COMPLEMENTOS
   Tudo abaixo cobre componente que o preview nao desenhou. Mesmos tokens,
   mesmas fontes, mesmos raios (999px em pilula, 12px em cartao, 16px em
   modal), mesma sombra. Cada bloco diz QUE componente e'.
   ══════════════════════════════════════════════════════════════════════ */

/* ── tokens que o preview nao tinha ───────────────────────────────────
   O preview nunca mostrou erro, alta/baixa nem "cota estourada" — e a
   paleta dele e' so' ciano. Estes tres pares existem para status, e so'
   para status: nada decorativo usa cor quente. --hair e' a divisoria
   NEUTRA (a de .li), separada de --linha, que e' a ciana. */
:root{
  --st-ok:#0E9F6E; --st-ok-bg:rgba(14,159,110,.10); --st-ok-bd:rgba(14,159,110,.30);
  --st-warn:#B54708; --st-warn-bg:rgba(181,71,8,.10); --st-warn-bd:rgba(181,71,8,.28);
  --st-bad:#C6303B; --st-bad-bg:rgba(198,48,59,.10); --st-bad-bd:rgba(198,48,59,.28);
  --hair:rgba(16,24,40,.07);
  --veu:rgba(255,255,255,.55);        /* veu do cadeado sobre o criativo */
}
html.dv-dark{
  --st-ok:#4ADE80; --st-ok-bg:rgba(74,222,128,.12); --st-ok-bd:rgba(74,222,128,.30);
  --st-warn:#FDB022; --st-warn-bg:rgba(253,176,34,.12); --st-warn-bd:rgba(253,176,34,.30);
  --st-bad:#FDA29B; --st-bad-bg:rgba(253,162,155,.12); --st-bad-bd:rgba(253,162,155,.30);
  --hair:rgba(255,255,255,.10);
  --veu:rgba(5,39,48,.45);
}

/* ── conserto de contraste no escuro: aba ativa ──────────────────────
   Medido: no escuro a aba ativa saia com texto rgb(148,163,184) sobre o
   preenchimento rgb(79,201,232) — ~1.9:1, ilegivel. A causa e' que
   `html.dark .ab{color:var(--muted-fg)}` vale o mesmo que `.ab.on` (0-2-0) e
   vem depois. E' exatamente o tropeco que o proprio preview registra no
   comentario do bloco escuro para .pill button.on; ali foi corrigido, no .ab
   passou. Mesma correcao, uma casa de especificidade acima. */
html.dv-dark .ab.on{color:var(--cyfg)}

/* ── raiz e links ────────────────────────────────────────────────────
   O <html> precisa de cor propria: e' o que a barra de rolagem e os
   <select>/<input> nativos leem. scrollbar-gutter herdado do legado — sem
   ele a pagina desliza ~15px quando a barra aparece. */
html{background:#f8fafc;color-scheme:light;scrollbar-gutter:stable}
html.dv-dark{background:#000709;color-scheme:dark}
a{color:inherit;text-decoration:none}

/* ── controles reais (o preview usava <span>) ─────────────────────────
   <button>/<input>/<select> NAO herdam fonte do body: sem isto a pilula
   sai na fonte do sistema e destoa do resto da linha. */
button.btn,a.btn,button.mini,a.mini,button.ab,a.ab,button.ml,a.ml{font-family:var(--font-sans)}
input.inp,select.inp,textarea.inp,button.inp,a.inp,label.inp{font-family:var(--font-mono)}
/* a pilula do preview nao declara borda porque era um <span>. Num <input> ou
   <select> de verdade sobra a borda do navegador (medido: 1px solid #858585 no
   escuro), que desenha um retangulo dentro da pilula. */
input.inp,select.inp,textarea.inp,button.inp{border:0}
a.btn,button.mini,a.mini{display:inline-flex;align-items:center;
  justify-content:center;text-decoration:none;border:0;cursor:pointer}
/* .ab fica FORA do border:0 acima: a aba ja declara borda propria (2px ciano)
   e entrar no reset apagava a pilula da aba inativa. No preview .ab e um
   <span>, que nao tem borda de navegador para zerar; aqui sao <a>/<button>,
   e a borda declarada ja cobre a do sistema. */
button.ab,a.ab{display:inline-flex;align-items:center;
  justify-content:center;text-decoration:none;cursor:pointer}
button.ml,a.ml{display:block;width:100%;background:none;border:0}
label.inp,a.inp{cursor:pointer}
/* .inp.b no preview e' um <span> de texto-fantasma; num <input> de verdade a
   cor cinza pertence ao PLACEHOLDER, nao ao valor digitado.
   ⚠️ .inp.b vale 0-2-0 e html.dv-dark .inp.b vale 0-3-0: por isso as variantes
   com .b aparecem NOMEADAS aqui — sem elas o texto que a pessoa digita sairia
   cinza-fantasma. Sobe especificidade, nao !important. */
input.inp.b,textarea.inp.b,input.inp,textarea.inp,select.inp,.search input{color:var(--fg)}
html.dv-dark input.inp.b,html.dv-dark textarea.inp.b,html.dv-dark input.inp,
html.dv-dark textarea.inp,html.dv-dark select.inp,html.dv-dark .search input{color:var(--fg)}
.inp::placeholder,.search input::placeholder{color:#9aa3b2}
html.dv-dark .inp::placeholder,html.dv-dark .search input::placeholder{color:#7b8494}
.inp:focus,.search input:focus,select.inp:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--cy)}

/* ── <select> nativo dentro da pilula ────────────────────────────────
   O preview desenha o "▾" no texto. No <select> ele e' do sistema: some com
   appearance:none e volta como imagem, para o chevron ficar do tamanho e da
   cor certos nos dois temas. */
select.inp{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5565' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
html.dv-dark select.inp{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select.inp option{background:var(--card);color:var(--fg)}

/* ── ALIASES: nomes legados que NAO podem sair do markup ──────────────
   Cada um destes e' hook de JS, de PHP ou do <style> condicional do paywall.
   Em vez de renomear (e quebrar), o nome antigo recebe a mesma pintura do
   componente do preview. */
.topbar,.apptop{height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:0 49px;position:sticky;top:0;z-index:9;background:transparent;border:0}
.topbar>.dv-dir,.apptop>.dv-dir{justify-self:end}
.logo,.applogo{height:26px;width:auto;display:block;justify-self:start}
/* ⚠️ o display:block acima e' declarado DEPOIS do .m-dark{display:none} do
   contrato e vale o mesmo (0-1-0) — sem estas tres linhas as DUAS logos
   aparecem lado a lado. A troca e' refeita aqui com especificidade 0-2-0/0-3-0,
   entao a ordem no arquivo deixa de importar. */
.logo.m-dark,.applogo.m-dark{display:none}
html.dv-dark .logo.m-light,html.dv-dark .applogo.m-light{display:none}
html.dv-dark .logo.m-dark,html.dv-dark .applogo.m-dark{display:block}
.logo.m-light,.applogo.m-light{content:url("/assets/oracle-light.png")}
.logo.m-dark,.applogo.m-dark{content:url("/assets/oracle-dark.png")}
.dv-dir{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* a pilula de navegacao pelo nome ANTIGO: o _tema.php faz
   querySelectorAll('.dv-nav a') para marcar a aba, entao .dv-nav fica no
   elemento para sempre. Se o markup levar as duas (class="pill dv-nav"), as
   duas regras dizem a mesma coisa e nao ha disputa. */
.dv-nav{display:flex;gap:2px;background:var(--card);border-radius:999px;padding:5px;
  box-shadow:0 4px 20px -12px rgba(16,24,40,.30)}
html.dv-dark .dv-nav{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  box-shadow:none}
.dv-nav a{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--muted-fg);
  padding:10px 18px;border-radius:999px;display:inline-flex;align-items:center;
  white-space:nowrap;text-decoration:none;transition:.12s}
.dv-nav a:hover{color:var(--fg)}
html.dv-dark .dv-nav a{color:var(--muted-fg)}
html.dv-dark .dv-nav a:hover{color:var(--fg)}
/* ⚠️ a aba ativa NAO recebe .on: o _tema.php escreve .dv-on. Sem esta linha a
   barra fica sem nenhuma aba marcada — falha silenciosa, sem erro no console. */
.pill a.dv-on,.pill button.dv-on,.dv-nav a.dv-on{background:var(--cy-fill);color:var(--cyfg);
  box-shadow:0 0 24px rgba(0,179,221,.25),inset 0 1px 0 rgba(255,255,255,.25)}
html.dv-dark .pill a.dv-on,html.dv-dark .pill button.dv-on,
html.dv-dark .dv-nav a.dv-on{color:var(--cyfg);
  box-shadow:0 0 24px rgba(90,210,240,.20),inset 0 1px 0 rgba(255,255,255,.15)}
/* botao de tema pelo nome antigo. ⚠️ o _tema.php reescreve o textContent para
   ☼/☾ — o botao nunca pode ganhar um <svg> dentro, ou o icone some no
   primeiro clique. */
.dv-tema{border-radius:999px;padding:8px;margin:0;width:auto;color:rgba(74,85,101,.6);
  cursor:pointer;font-size:14px;background:none;border:0;line-height:1;transition:color .15s}
.dv-tema:hover{color:var(--fg)}
html.dv-dark .dv-tema{color:rgba(226,232,240,.55)}
/* selo de credito: o credits_badge_html() ainda sai SEM classe, entao o
   seletor pega o <a> direto da barra — e serve tambem ao "Log out".
   O fill= do <svg> e' ATRIBUTO de apresentacao (especificidade zero): o CSS
   ganha dele sem !important. Ja o style="color:#e9edf6" do <b> e' INLINE e so'
   sai editando o ads_lib.php. */
/* white-space:nowrap + flex:0 0 auto porque a coluna da direita e' estreita:
   sem isto "Log out" quebra em duas linhas e desalinha a barra inteira. */
.dir>*,.dv-dir>*{flex:0 0 auto}
.cred,.dir>a,.dv-dir>a{font-family:var(--font-mono);font-size:13px;color:var(--muted-fg);
  white-space:nowrap}
.cred b,.dir>a b,.dv-dir>a b{color:var(--fg);font-weight:600}
.cred svg,.dir>a svg,.dv-dir>a svg{fill:var(--cy)}
.cred:hover,.dir>a:hover,.dv-dir>a:hover{color:var(--fg)}
/* o wrapper largo de cada tela: o preview nao tem max-width, o conteudo
   respira ate' a borda com a mesma goteira do h1. */
.wide,.acct{width:100%;max-width:none;padding:0 24px 60px;background:transparent;border:0;border-radius:0}
.dv-hero{padding:0}
.dv-hero p,.who{font-family:var(--font-mono);font-size:13px;color:var(--muted-fg);padding:0 25px 8px}
/* .filters e .count sairam daqui: a biblioteca era a unica dona dos dois e
   agora usa .fil e .cnt. O <form> mantem a classe .filters como GANCHO do JS,
   sem regra nenhuma atras dela — duas regras iguais no mesmo elemento so'
   servem para a proxima pessoa nao saber qual esta' valendo. */
.srch{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hint,.pull-note{font-family:var(--font-mono);font-size:12px;color:var(--muted-fg);margin-top:12px}
.empty{margin-top:18px;border:2px dashed rgba(0,179,221,.22);border-radius:12px;padding:42px;
  text-align:center;color:var(--muted-fg);font-family:var(--font-mono);font-size:13px}
html.dv-dark .empty{border-color:rgba(90,210,240,.25)}
/* o <span class="k"> solto dentro do estado vazio (traffic e leads) nunca teve
   regra nenhuma — herdava a cor do body. Aqui ele vira o paragrafo do preview. */
.empty .k,.vaz .k{display:inline;font-family:var(--font-sans);font-size:13px;
  color:var(--muted-fg);line-height:1.55}
.empty a,.vaz a{color:var(--cyd)}
/* estado BLOQUEADO (paywall): o .vaz do preview e' uma linha de texto mono e
   nada mais; aqui ele carrega titulo, explicacao e o botao de assinar. */
.vaz b{display:block;font-family:var(--font-sans);font-size:15px;font-weight:500;
  color:var(--fg);margin-bottom:6px}
.vaz .btn{margin-top:16px}
.btn.ghost,.locked-btn{background:transparent;color:var(--cyd);border:2px solid rgba(0,179,221,.30);
  box-shadow:none}
html.dv-dark .btn.ghost,html.dv-dark .locked-btn{border-color:rgba(90,210,240,.35);color:var(--cyd)}
/* paineis e colunas: o cartao do preview e' .box + .pan; estes nomes ja
   existem no markup de traffic/leads/account e nao vao mudar de papel. */
.panel,.col,.ubox{background:var(--card);border-radius:12px;box-shadow:0 8px 30px -20px rgba(16,24,40,.28);
  padding:22px 25px}
html.dv-dark .panel,html.dv-dark .col,html.dv-dark .ubox{background:var(--card);
  border:1px solid rgba(255,255,255,.08);box-shadow:none}
.panels,.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.panel h3,.col h2{font-family:var(--font-mono);font-size:13px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted-fg);margin-bottom:16px;font-weight:400}
/* ⚠️ o .ln nao segue o .li do preview na COR: aqui o rotulo e' marcado por
   classe (<span class="k">) e o valor e' um <span> sem classe. Se a linha
   inteira nascesse muted, o valor perderia a enfase — e uma regra esperta do
   tipo `.ln .k+*` roubaria a cor de .credit, .planbig e .tag, que sao spans
   sem classe do ponto de vista do seletor. Linha em --fg, rotulo em muted. */
.ln{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--hair);font-size:13px;color:var(--fg)}
.ln:last-child{border-bottom:0}
.ln b{font-weight:600}
.ln .k{color:var(--muted-fg);font-weight:400}
/* .msub no account e' texto miudo alinhado a' ESQUERDA; .msub no modal e'
   subtitulo centrado. Escopar pela caixa resolve sem renomear nada. */
.col .msub,.box .msub,.panel .msub{text-align:left;font-size:12.5px;color:var(--muted-fg);
  line-height:1.5;margin:0}
@media(max-width:900px){.panels,.cols{grid-template-columns:1fr}}

/* ── BIBLIOTECA · multi-select (painel flutuante de checkboxes) ───────
   O preview so' mostra a pilula fechada ("All platforms ▾"); o painel nunca
   abre nele. ⚠️ o .box/.pan NAO pode ganhar overflow:hidden, senao este
   painel some — e' por isso que so' o .cc (cartao de criativo) tem recorte. */
.ms{position:relative;flex:0 0 auto}
.ms-btn{height:38px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;
  border-radius:999px;background:var(--input);border:0;font-family:var(--font-mono);
  font-size:13px;color:var(--fg);cursor:pointer;white-space:nowrap}
.ms-caret{font-size:10px;color:var(--muted-fg)}
.ms-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:30;
  min-width:210px;max-height:340px;overflow-y:auto;padding:6px;
  background:var(--card);border-radius:12px;box-shadow:0 18px 40px -18px rgba(16,24,40,.45)}
html.dv-dark .ms-panel{background:#07222C;border:1px solid rgba(255,255,255,.10)}
.ms.open .ms-panel{display:block}
.ms-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:999px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--fg);cursor:pointer;white-space:nowrap}
.ms-opt:hover{background:var(--input)}
.ms-opt input,.chk input,.inp input[type=checkbox]{width:15px;height:15px;flex:0 0 auto;
  accent-color:var(--cy);cursor:pointer;margin:0}

/* ── BIBLIOTECA · busca com lupa ─────────────────────────────────────
   O preview e' um <span class="inp b"> com o texto do placeholder; o campo
   real e' o mesmo .inp.b, so' que embrulhado para caber a lupa absoluta.
   ⚠️ o .search NAO redesenha o campo (altura, fundo, raio, fonte): isso ja'
   e' o .inp. Aqui entra so' o que a lupa exige — o recuo a' esquerda. */
.search{position:relative;display:flex;align-items:center;flex:1;min-width:230px}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  stroke:var(--muted-fg);pointer-events:none}
.search .inp{width:100%;padding-left:40px}

/* ── BIBLIOTECA · chip de checkbox (Shopify, Last 6 months) ───────────
   O preview so' tem o estado APAGADO (.inp.off). O ligado nao existia — e'
   um anel ciano por dentro da pilula, o mesmo sinal de "filtro ativo". */
.chk{height:38px;display:inline-flex;align-items:center;gap:9px;padding:0 16px;
  border-radius:999px;background:var(--input);font-family:var(--font-mono);font-size:13px;
  color:var(--fg);cursor:pointer;user-select:none;white-space:nowrap;flex:0 0 auto}
.chk-locked{opacity:.5;cursor:not-allowed}
.chk-locked input{cursor:not-allowed}
.chk.on,.inp.on{box-shadow:inset 0 0 0 1.5px var(--cy);color:var(--cyd)}
.chk-shopify input{accent-color:var(--cy)}

/* ── BIBLIOTECA · marcacao de "filtro ativo" ─────────────────────────
   No legado era border-color:azul. As pilulas do preview nao tem borda, entao
   o sinal foi reinventado: anel ciano por dentro + rotulo em var(--cyd). */
.fltr-on,.inp.fltr-on,.ms-btn.fltr-on,.search input.fltr-on,select.fltr-on,
input.inp.fltr-on,select.inp.fltr-on{box-shadow:inset 0 0 0 1.5px var(--cy);color:var(--cyd)}

/* ── BIBLIOTECA · coracao de favoritar (filtro e card) ────────────────
   Nao existe no preview: la' nada fica por cima da imagem. */
.filter-heart{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--input);border:0;color:var(--muted-fg);font-size:15px;
  line-height:1;cursor:pointer;flex:0 0 auto;transition:color .12s,box-shadow .12s}
.filter-heart:hover{color:var(--cyd)}
.filter-heart.on{color:var(--cyd);box-shadow:inset 0 0 0 1.5px var(--cy)}
.heart,.similar-icon{position:absolute;top:8px;width:30px;height:30px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;z-index:2;border:0;cursor:pointer;
  background:rgba(16,24,40,.45);color:#fff;font-size:14px;line-height:1;
  backdrop-filter:blur(4px);transition:background .12s,color .12s}
.heart{right:8px}
.similar-icon{right:44px}
.similar-icon svg{width:14px;height:14px;stroke:#fff}
.heart:hover,.similar-icon:hover{background:var(--cy-fill)}
.similar-icon:hover svg{stroke:var(--cyfg)}
.heart.on{color:#fff;background:var(--cy-fill)}
.heart:disabled{opacity:.55;cursor:default}

/* ── BIBLIOTECA · selo de plataforma empilhado ───────────────────────
   O card pode ter DOIS selos (plataforma + Shopify). O .bd do preview e' um
   so', ancorado em top:8px — sem esta regra os dois se sobrepoem. O segundo
   sai NEUTRO (grafite translucido): inventar uma segunda cor de marca so'
   para diferenciar seria sair da paleta, e um selo vazado nao le sobre foto. */
.bd.shopify{top:30px;background:rgba(16,24,40,.65);color:#fff}
html.dv-dark .bd.shopify{background:rgba(0,0,0,.55)}

/* ── BIBLIOTECA · play sobre a miniatura ─────────────────────────────
   O preview desenha um "▶" de texto; o markup real tem <div class=pl play>
   com um <span> vazio dentro, que vira o triangulo. Fica SEMPRE visivel,
   como no preview — nao so' no hover. */
.pl span{width:44px;height:44px;border-radius:999px;background:rgba(16,24,40,.35);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.pl span::before{content:'';border-left:13px solid #fff;border-top:8px solid transparent;
  border-bottom:8px solid transparent;margin-left:3px}

/* ── BIBLIOTECA · miniatura horizontal (YouTube 16:9) ─────────────────
   Sem esta variante o horizontal fica cortado no meio dentro do 9/13. */
.th.letterbox{background-size:contain;background-color:#000;background-repeat:no-repeat;
  background-position:center}

/* ── BIBLIOTECA · titulo do criativo ─────────────────────────────────
   No preview o <small> e' uma linha curta ("18 days · CTR 0.24%"); aqui ele
   carrega o texto INTEIRO do anuncio, que as vezes passa de dez linhas — e
   como a fileira da grade tem altura unica, um titulo comprido empurrava os
   botoes de um cartao para bem abaixo dos botoes do vizinho. Duas linhas e
   reticencias. So' o display muda; fonte, cor e margem seguem vindo do
   .mt small do preview. */
.cc .mt small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* ── BIBLIOTECA · chips do card ──────────────────────────────────────
   (📷 Image, nicho, bandeira, ♥ likes, CTR, 📈 N ads, 📅 Nd running.)
   O preview resume tudo num <small> de texto corrido; aqui sao pastilhas. */
/* ⚠️ COLISAO DE NOME: .tag tambem e' a pastilha de status/acao da CONTA
   (mais abaixo). Os chips do card ficam escopados em .tags — 0-2-0 — para que
   nenhuma das duas dependa de quem foi escrita por ultimo. */
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tags .tag{display:inline-block;font-family:var(--font-mono);font-size:9.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--muted-fg);background:var(--input);
  border:0;border-radius:6px;padding:3px 7px;white-space:nowrap}
.tags .tag-ads{color:var(--cyd);background:rgba(0,179,221,.12);font-weight:600}
html.dv-dark .tags .tag-ads{background:rgba(90,210,240,.14)}
.tags .tag-flag{font-size:12px;padding:1px 6px}

/* ── BIBLIOTECA · acoes do card ──────────────────────────────────────
   Download = pilula cheia (.mini), Original = fantasma (.mini.gh),
   Details = um .mini fantasma ocupando a largura toda (o preview so' tem dois
   botoes no card, entao o terceiro herda a mesma forma). */
.actions{display:flex;gap:5px;margin-top:10px}
.actions a,.actions button{flex:1;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:6px 0;font-size:9px;font-weight:600;border:0;cursor:pointer;
  font-family:var(--font-sans)}
.actions .dl{background:var(--cy-fill);color:var(--cyfg)}
.actions .src{background:transparent;border:1.5px solid rgba(0,179,221,.30);color:var(--cyd)}
html.dv-dark .actions .src{border-color:rgba(90,210,240,.35)}
.details-btn{display:block;width:100%;margin-top:6px;border-radius:999px;padding:6px 0;
  font-size:9px;font-weight:600;font-family:var(--font-sans);cursor:pointer;
  background:transparent;border:1.5px solid rgba(0,179,221,.30);color:var(--cyd)}
html.dv-dark .details-btn{border-color:rgba(90,210,240,.35)}
.details-btn:hover{background:var(--cy-fill);color:var(--cyfg);border-color:transparent}

/* ── BIBLIOTECA · card travado (paywall visual) ──────────────────────
   Nao existe no preview e e' a barreira comercial da tela. O borrao em si
   continua vindo do <style> condicional do library.php, que casa
   '.card.locked .thumb' e '.card.locked .meta-row' POR NOME — por isso o
   markup guarda .card/.thumb/.meta-row ao lado de .cc/.th/.mt. */
.lockov{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;gap:7px;
  align-items:center;justify-content:center;cursor:pointer;background:var(--veu);
  backdrop-filter:blur(1px);color:var(--cyd);text-align:center;padding:12px}
.lockov .lockic{font-size:26px;line-height:1}
.lockov .lockt{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase}

/* ── BIBLIOTECA · paginacao ──────────────────────────────────────────
   O preview mostra uma grade unica, sem paginar. */
.pager{display:flex;gap:10px;justify-content:center;align-items:center;margin:30px 0 0;
  font-family:var(--font-mono);font-size:12px;color:var(--muted-fg)}
.pager a{height:38px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;
  background:transparent;border:2px solid rgba(0,179,221,.30);color:var(--cyd);font-weight:600}
.pager a:hover{background:var(--cy-fill);color:var(--cyfg);border-color:transparent}
html.dv-dark .pager a{border-color:rgba(90,210,240,.35)}

/* ── BIBLIOTECA · barra "Similar to" / "Ads by" ──────────────────────
   Faixa acima da grade com o dominio de referencia e os links de busca
   externa (Google Lens, Meta, YouTube). Os links externos usam a forma da
   aba (.ab) — mesma pastilha de 36px com borda ciana. */
.simbar{background:var(--card);border-radius:12px;box-shadow:0 8px 30px -20px rgba(16,24,40,.28);
  border-left:3px solid var(--cy);padding:16px 20px;margin-bottom:18px}
html.dv-dark .simbar{background:var(--card);border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--cy);box-shadow:none}
.simbar-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.simbar-label,.simbar-find{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:1.6px;color:var(--muted-fg)}
.simbar-head b{font-size:15px;font-weight:600;color:var(--fg)}
.simbar-dom{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:1.1px;
  color:var(--cyd)}
.simbar-clear{margin-left:auto;font-family:var(--font-mono);font-size:12.5px;color:var(--muted-fg);
  cursor:pointer}
.simbar-clear:hover{color:var(--cyd)}
.simbar-ext{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px}
.simbar-ext .ext{height:36px;display:inline-flex;align-items:center;padding:0 16px;
  border-radius:999px;border:2px solid rgba(0,179,221,.20);font-family:var(--font-mono);
  font-size:13px;color:var(--muted-fg);cursor:pointer;background:transparent}
.simbar-ext .ext:hover{border-color:var(--cy);color:var(--cyd)}
html.dv-dark .simbar-ext .ext{border-color:rgba(90,210,240,.22)}

/* ── BIBLIOTECA · coleta sob demanda ─────────────────────────────────
   "Pull this store's ads", "Pull more ads", "⚡ Deep Search", contador de
   cota e status do polling. O preview so' tem .vaz + .dica, sem acao nenhuma.
   O pull comum continua SECUNDARIO de proposito (era decisao ja tomada no
   legado): quem manda no olhar e' o Deep Search, que e' a acao premium. */
.pull-store,.kw-pull,.kw-pull-more{display:flex;flex-direction:column;align-items:center;
  gap:12px;padding:48px 16px;text-align:center}
.pull-ico{font-size:36px;line-height:1;opacity:.9}
.pull-txt{font-size:15px;color:var(--fg);font-family:var(--font-sans)}
.pull-txt b{font-weight:600}
.pull-btn{height:38px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;
  background:transparent;border:2px solid rgba(0,179,221,.30);color:var(--cyd);font-size:13px;
  font-weight:600;font-family:var(--font-sans);cursor:pointer}
html.dv-dark .pull-btn{border-color:rgba(90,210,240,.35)}
.pull-btn:hover{background:rgba(0,179,221,.10)}
.pull-btn:disabled{opacity:.5;cursor:not-allowed}
/* Deep Search = o botao primario cheio. Perde o gradiente roxo #7b3ff2 do
   legado, que estava fora da paleta. */
.pull-btn.maxp{background:var(--cy-fill);color:var(--cyfg);border:0;
  box-shadow:0 0 20px rgba(0,179,221,.22),inset 0 1px 0 rgba(255,255,255,.25)}
html.dv-dark .pull-btn.maxp{box-shadow:0 0 20px rgba(90,210,240,.18),inset 0 1px 0 rgba(255,255,255,.15)}
.pull-btn.maxp:hover{filter:brightness(1.06);background:var(--cy-fill)}
.pull-btn.maxp .mpn,.mpbtn .mpn,.btn .mpn{display:inline-block;margin-left:9px;padding:2px 8px;
  border-radius:999px;background:rgba(255,255,255,.22);font-family:var(--font-mono);
  font-size:9px;font-weight:600;letter-spacing:.3px}
html.dv-dark .pull-btn.maxp .mpn,html.dv-dark .mpbtn .mpn,html.dv-dark .btn .mpn{background:rgba(5,39,48,.18)}
.pull-status{min-height:20px;font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  color:var(--cyd)}

/* ── BIBLIOTECA · modal de midia ─────────────────────────────────────
   Aqui o "painel" e' a propria midia, nao um cartao branco: o backdrop
   (.modalbg) segura video/imagem em tamanho cheio. #modalImage nasce oculto
   — o JS decide entre video e imagem. */
.modalbg>video,.modalbg>img{max-height:86vh;max-width:92vw;border-radius:12px;background:#000;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
#modalImage{display:none;object-fit:contain}
/* o X de fechar. ⚠️ o dvAnchorModals do _header.php reescreve este top em
   linha quando a pagina esta dentro de iframe — nao contar com o valor daqui. */
.modalbg .close,.peek__h button{position:absolute;top:18px;right:24px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;border:0;
  background:rgba(16,24,40,.35);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  backdrop-filter:blur(4px);padding:0}
.modalbg .close:hover{background:var(--cy-fill);color:var(--cyfg)}

/* ── BIBLIOTECA · modal de detalhes (grade chave/valor) ──────────────
   Store, Running for, Started, Platform, Niche, Country, Ads using this
   creative, First seen. ⚠️ os nomes .k e .v estao HARDCODED na string do JS
   (dRow()) — nao podem virar .li span/.li b. */
.details-card{max-width:460px;padding:26px}
.details-grid{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin-top:18px;
  font-size:13px}
.details-grid .k{color:var(--muted-fg);white-space:nowrap;font-family:var(--font-mono);
  font-size:11px;text-transform:uppercase;letter-spacing:1.1px}
.details-grid .v{color:var(--fg);font-weight:600;word-break:break-word}
.details-grid .v a{color:var(--cyd)}
.details-actions{display:flex;gap:8px;margin-top:20px}
.details-actions a{flex:1;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:transparent;border:2px solid rgba(0,179,221,.30);color:var(--cyd);
  font-size:13px;font-weight:600}
html.dv-dark .details-actions a{border-color:rgba(90,210,240,.35)}

/* ── BARRA · selo de plano / seletor de persona ──────────────────────
   O .dir do preview so' tem .cred e .ico. Este selo (clicavel para o dono,
   leitura para o cliente) vira uma pastilha pequena no molde do .tg.
   ⚠️ escopado: .pv solto e' o PRECO do plano no modal. */
.dir .pv,.dv-dir .pv{display:inline-flex;align-items:center;gap:3px;padding:3px;
  border-radius:999px;background:var(--input);margin:0}
.dir .pv .pvl,.dv-dir .pv .pvl{display:flex;align-items:center;padding:0 4px 0 9px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--muted-fg)}
.dir .pv button,.dv-dir .pv button,.dir .pv span.on,.dv-dir .pv span.on{
  display:flex;align-items:center;padding:5px 11px;border-radius:999px;border:0;
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.4px;
  background:var(--cy-fill);color:var(--cyfg);cursor:pointer;margin:0;width:auto}
.dir .pv span.on{cursor:default}
.dir .pv button:hover,.dv-dir .pv button:hover{filter:brightness(1.06)}

/* ── BARRA · seletor de idioma (EN/PT/ZH) ────────────────────────────
   O preview nao tem idioma. Nasce position:fixed no _i18n.php e e' MOVIDO por
   JS para dentro de .dv-dir — por isso o position volta a static AQUI (o
   position:fixed do _i18n.php precisa ser APAGADO la', nao sobreposto). */
.langsel{position:static;display:inline-flex;align-items:center;gap:4px;padding:0;
  background:none;border:0;box-shadow:none;backdrop-filter:none;line-height:0;font-size:0;z-index:auto}
.langsel button{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;border-radius:999px;border:0;background:none;font-size:14px;line-height:1;
  cursor:pointer;filter:grayscale(1);opacity:.55;transition:.12s}
.langsel button:hover{opacity:1;filter:none}
.langsel button.on{opacity:1;filter:none;box-shadow:inset 0 0 0 1.5px var(--cy)}

/* ── BARRA · "log out" orfao ─────────────────────────────────────────
   O _header.php fecha .dv-dir e .topbar na mesma linha e emite um SEGUNDO
   <a class="logout"> FORA da barra. Aqui ele so' fica discreto — NAO esta
   escondido de proposito: o conserto e' no markup, e esconder mascararia o
   bug em vez de mostra-lo. */
.logout{font-family:var(--font-mono);font-size:12px;color:var(--muted-fg);
  display:inline-block;padding:0 25px}

/* TRAFFIC - a terceira linha da metrica.
   A tela usa o .met do preview (label + b), mas cada metrica daqui tem uma
   linha a mais: "▲ 12% vs last month", "pages/visit · 40% bounce",
   "~2% conversion". Ela entra como <small> e NAO como .sub porque .sub no
   preview e' o subtitulo da PAGINA, com goteira lateral propria. */
.met small{display:block;font-family:var(--font-mono);font-size:11.5px;color:var(--muted-fg);
  margin-top:6px;line-height:1.4}
/* categoria/bounce podem vir vazios; um <small> vazio ainda ocupa uma linha e
   desalinharia a metrica vizinha (o .met centra o conteudo na vertical). */
.met small:empty{display:none}
.met small.up{color:var(--st-ok)}
.met small.down{color:var(--st-bad)}
/* ⚠️ o #stats e' UM container com 3 OU 6 metricas: a divisoria do preview
   (.met+.met) desenharia uma linha solta no primeiro item da 2a fileira. */
#stats .met:nth-child(3n+1)::before{display:none}
/* #out nasce oculto; o JS liga com style.display='block' quando o dado chega. */
#out{display:none}

/* .dica e' a linha mono miuda do preview; dentro do painel ela tambem faz o
   papel de "sem dado" e de nota de rodape, entao ganha entrelinha e nao
   empurra quando e' a unica coisa da caixa (#pOrders). */
.pan>.dica:first-child{margin-top:0}
.pan .dica{line-height:1.55}

/* ── TRAFFIC · barra horizontal de percentual ────────────────────────
   "Where visitors come from" e "Traffic sources". O preview nao tem NENHUM
   grafico de barra: trilho em var(--input), preenchimento em var(--cy-fill),
   nome no tom do .li e percentual no tom do .cp. */
.bar{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:13px;color:var(--fg)}
.bar .nm{width:150px;flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{flex:1;height:7px;border-radius:999px;background:var(--input);overflow:hidden}
.bar .fill{height:100%;border-radius:999px;background:var(--cy-fill)}
.bar .pc{width:52px;flex:0 0 auto;text-align:right;font-family:var(--font-mono);font-size:11.5px;
  color:var(--muted-fg)}

/* ── TRAFFIC · painel "Where it runs ads" ────────────────────────────
   Pastilhas de plataforma (.badges) e chips de pais (.chips) nao existem no
   preview. Nome PROPRIO para o chip: chamar de .cc, como fazia antes,
   colidia com o cartao de criativo e obrigava a uma regra id-especifica so'
   para desligar a outra. */
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.badges .badge{height:32px;display:inline-flex;align-items:center;padding:0 14px;
  border-radius:999px;border:2px solid rgba(0,179,221,.20);font-family:var(--font-mono);
  font-size:12px;color:var(--cyd);background:transparent}
html.dv-dark .badges .badge{border-color:rgba(90,210,240,.22)}
/* "No ads found ... yet" nao e' pastilha, e' estado vazio: le como .vaz. */
.badges .badge.none{height:auto;padding:14px 18px;border:2px dashed rgba(0,179,221,.22);
  color:var(--muted-fg);font-size:12.5px;width:100%;justify-content:center;border-radius:12px}
html.dv-dark .badges .badge.none{border-color:rgba(90,210,240,.25)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips span{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  background:var(--input);font-family:var(--font-mono);font-size:11.5px;color:var(--muted-fg)}
/* painel de largura inteira que so' aparece quando a loja NAO e' Shopify.
   ⚠️ o JS liga/desliga com po.style.display='' — por isso a classe NAO pode
   declarar display (o '' devolveria o valor da classe, nao o esperado). */
#pOrders{margin-top:14px}

/* ── TRAFFIC · esqueleto de carregamento ─────────────────────────────
   O preview nao cobre estado de carregamento. A grade e' a MESMA do
   resultado (.skmets espelha .mets3; os paineis usam o proprio .c3) e a
   altura casa com o .met (96px = 16+24+8+32+16), pra nao dar salto de
   layout quando a resposta chega. */
#skel{display:none}
#skel.on{display:block}
.skcap{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;
  color:var(--muted-fg);margin:18px 0 14px}
.skcap b{color:var(--fg);font-weight:600}
.skdot{width:8px;height:8px;border-radius:999px;background:var(--cy);flex:0 0 auto;
  animation:dvpulse 1.1s ease-in-out infinite}
@keyframes dvpulse{0%,100%{opacity:.35}50%{opacity:1}}
.skmets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.skel{position:relative;overflow:hidden;border-radius:12px;background:var(--input)}
.skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(0,179,221,.10),transparent);
  animation:dvshimmer 1.25s infinite}
html.dv-dark .skel::after{background:linear-gradient(90deg,transparent,rgba(90,210,240,.10),transparent)}
@keyframes dvshimmer{100%{transform:translateX(100%)}}
.skel-stat{height:96px}
.skel-panel{min-height:215px}
@media(max-width:900px){.skmets{grid-template-columns:1fr}}

/* ── caixa de mensagem (erro / ok / aviso) ───────────────────────────
   O preview nao tem estado de erro nem cor de alerta. Usa os tokens de status
   declarados no topo desta secao — quente so' onde ha status. #err nasce
   oculto: o JS liga com style.display='block'. */
.msg{border-radius:12px;padding:12px 15px;font-size:13px;margin-bottom:16px;
  border:1px solid transparent}
.msg.err,#err{background:var(--st-bad-bg);border-color:var(--st-bad-bd);color:var(--st-bad)}
.msg.ok{background:var(--st-ok-bg);border-color:var(--st-ok-bd);color:var(--st-ok)}
#err{display:none;border-radius:12px;padding:12px 15px;font-size:13px;margin:18px 0 16px;
  border:1px solid var(--st-bad-bd)}
.warn{background:var(--st-bad-bg);border:1px solid var(--st-bad-bd);color:var(--st-bad);
  border-radius:12px;padding:12px 15px;font-size:13px;margin-top:14px}
.okmsg{background:var(--st-ok-bg);border:1px solid var(--st-ok-bd);color:var(--st-ok);
  border-radius:12px;padding:12px 15px;font-size:13px;margin-bottom:14px}

/* ── MINE LEADS · abas ───────────────────────────────────
   Os apelidos .tabs/.tabsp/.tabdis foram APAGADOS, nao sobrepostos: o
   markup do Mine Leads passou a usar .abas/.ab/.sp/.ab.off do proprio
   preview e nao sobrou nenhum elemento com o nome antigo no app. */

/* ── MINE LEADS · botao de CSV / olho do historico ───────────────────
   O preview tem .inp.ic (quadrado de 38px so' com icone) para o de cima e
   .mini/.mini.gh para os de dentro da tabela. */
.csvbtn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--cy-fill);color:var(--cyfg);font-size:14px;flex:0 0 auto}
.csvbtn.ghosty{background:transparent;border:1.5px solid rgba(0,179,221,.30);color:var(--cyd)}
html.dv-dark .csvbtn.ghosty{border-color:rgba(90,210,240,.35)}
.csvbtn.ghosty:hover{background:var(--cy-fill);color:var(--cyfg);border-color:transparent}
.csvbtn.off{background:transparent;border:1.5px solid rgba(0,179,221,.30);color:var(--cyd);
  opacity:.5;cursor:not-allowed}
td .csvbtn,td .eyebtn{width:30px;height:30px;font-size:12px}
.mpbtn{height:38px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;
  background:var(--cy-fill);color:var(--cyfg);font-size:13px;font-weight:600;border:0;cursor:pointer;
  font-family:var(--font-sans);
  box-shadow:0 0 20px rgba(0,179,221,.22),inset 0 1px 0 rgba(255,255,255,.25)}
html.dv-dark .mpbtn{box-shadow:0 0 20px rgba(90,210,240,.18),inset 0 1px 0 rgba(255,255,255,.15)}
.ghosty.eyebtn:hover{background:var(--cy-fill);color:var(--cyfg)}

/* ── MINE LEADS · o que o preview nao chega a mostrar ───────────
   A tela do preview e a busca ainda vazia. O app tem mais tres momentos que
   precisam de nome no MESMO vocabulario: aba desligada, titulo dentro do
   vazio e a dupla de botoes de coleta. */
.ab.off{opacity:.4;cursor:not-allowed;user-select:none}
/* filho DIRETO de proposito: e o titulo do estado vazio. O <b> no meio da
   frase (Deep Search costs 1 credit) tem que continuar inline. */
.vaz>b,.empty>b{display:block;font-family:var(--font-sans);font-size:15px;font-weight:500;
  color:var(--fg);margin-bottom:6px}
.vaz .a2{justify-content:center;flex-wrap:wrap}
/* a linha de contagem carrega botao e recado (Deep Search, CSV do historico):
   flex para alinhar pelo centro em vez da linha de base, e o uppercase do
   .cnt vale para o numero — nao para o texto do botao nem para a mensagem. */
.pan>.cnt{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.cnt .mpbtn,.cnt .k{text-transform:none;letter-spacing:normal}

/* ── MINE LEADS · tabela de resultados / historico / uso ─────────────
   O preview do Mine Leads mostra so' o estado vazio (.vaz) — nao ha tabela em
   lugar nenhum do vocabulario. Ela nasce aqui no tom do .li: cabecalho como
   .h, linha com divisoria neutra, link em ciano.
   ⚠️ TEM que continuar sendo <table> e ser a PRIMEIRA do documento: o "olho"
   do historico faz doc.querySelector('table') no HTML buscado. */
table{width:100%;border-collapse:collapse;margin-top:18px;font-size:13px}
th{text-align:left;padding:0 8px 10px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--muted-fg);font-weight:400;
  border-bottom:1px solid var(--hair)}
td{padding:10px 8px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--muted-fg)}
td b{color:var(--fg);font-weight:600}
/* unica affordance de clique da coluna Search do historico e da coluna Name */
td a{color:var(--cyd)}
td a:hover{text-decoration:underline}
td.num{width:38px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted-fg)}
td.cnpj{font-family:var(--font-mono);font-size:12px;white-space:nowrap;color:var(--fg)}

/* ── MINE LEADS · caixas de consumo (Usage) ──────────────────────────
   O .ubox era um cartao; o preview nao tem cartao para metrica. Mas aqui as
   duas caixas ficam DENTRO do painel, entao elas viram .met (coluna com
   divisoria) e o painel continua sendo a unica caixa da tela. */
.ugrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:6px 0 10px}
.ugrid .ubox{position:relative;background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:16px 0 16px 35px;min-width:0}
html.dv-dark .ugrid .ubox{background:transparent;border:0;box-shadow:none}
.ugrid .ubox+.ubox::before{content:'';position:absolute;left:0;top:0;height:100%;width:.5px;
  background:var(--linha)}
.ubox .k{display:block;margin-bottom:0;font-family:var(--font-mono);text-transform:uppercase;
  letter-spacing:1.6px;color:var(--muted-fg);font-size:var(--fs-label);line-height:var(--lh-label)}
.ubig,.mbig{font-weight:400;color:var(--fg);font-size:var(--fs-metric);line-height:var(--lh-metric);
  margin-top:8px;letter-spacing:0}
.ubig small,.mbig small{font-size:13px;color:var(--muted-fg);font-weight:400}
@media(max-width:900px){.ugrid{grid-template-columns:1fr}
  .ugrid .ubox+.ubox::before{display:none}}

/* ── barra de consumo (Usage e "This cycle" da conta) ────────────────
   O preview nao tem barra de progresso. Trilho em var(--input), preenchimento
   em var(--cy-fill) — some o gradiente que terminava em verde #25d366 e
   deixava a barra com duas identidades. */
.ubar,.mbar{height:8px;border-radius:999px;background:var(--input);overflow:hidden;margin:10px 0 6px}
.mbar{height:7px;margin:8px 0 4px}
.ubar i,.mbar i{display:block;height:100%;border-radius:999px;background:var(--cy-fill)}

/* ── MINE LEADS · voltar ao topo ─────────────────────────────────────
   Botao flutuante, aparece depois de 400px de rolagem. Fora do painel. */
#toTop{position:fixed;right:20px;bottom:24px;width:44px;height:44px;border-radius:999px;
  display:none;align-items:center;justify-content:center;z-index:90;border:0;margin:0;padding:0;
  background:var(--cy-fill);color:var(--cyfg);font-size:18px;line-height:1;cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(0,179,221,.55)}
#toTop.on{display:flex}

/* ── MINE LEADS · modal do "olho" (peek) ─────────────────────────────
   O .modal do preview tem titulo centrado e fecha pelo .ml no rodape; aqui ha
   cabecalho com titulo a' esquerda e X a' direita. */
.peek{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;
  padding:28px;background:rgba(16,24,40,.45);backdrop-filter:blur(3px)}
.peek.open{display:flex}
.peek__b{position:relative;width:min(1100px,96vw);max-width:1100px;display:flex;
  flex-direction:column;padding:0;overflow:hidden}
.peek__h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 26px;border-bottom:1px solid var(--hair);font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted-fg)}
.peek__h button{position:static;background:var(--input);color:var(--muted-fg);backdrop-filter:none}
.peek__h button:hover{background:var(--cy-fill);color:var(--cyfg)}
.peek__c{overflow:auto;padding:4px 26px 26px}
.peek__c table{margin-top:0}

/* ── CONTA · linha de plano em destaque ──────────────────────────────
   "PRO · Annual", "No active plan", "DV User". */
.planbig{font-size:19px;font-weight:600;color:var(--fg)}

/* ── CONTA · pastilhas de acao e de status ───────────────────────────
   O .tag faz DOIS papeis hoje: acao (See plans, Subscribe, Invite) e selo
   (Active, Trial · 3d left, owner). Acao vai no molde do .btn/.btn.gh; selo
   fica estatico com a cor de status. Cor de status nao existe no preview —
   vem dos tokens declarados no topo desta secao. */
.tag{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  border:0;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase;vertical-align:middle;text-decoration:none;cursor:default}
a.tag,button.tag{cursor:pointer}
.tag.blue{background:var(--cy-fill);color:var(--cyfg)}
a.tag.blue:hover,button.tag.blue:hover{filter:brightness(1.06)}
.tag.grn{background:var(--st-ok-bg);color:var(--st-ok);box-shadow:inset 0 0 0 1px var(--st-ok-bd)}
.tag.amb{background:var(--st-warn-bg);color:var(--st-warn);box-shadow:inset 0 0 0 1px var(--st-warn-bd)}
.tag.red{background:transparent;color:var(--st-bad);box-shadow:inset 0 0 0 1.5px var(--st-bad-bd)}
a.tag.red:hover,button.tag.red:hover{background:var(--st-bad-bg)}

/* ── CONTA · convite de assento ──────────────────────────────────────
   Caixa de e-mail com a MESMA altura do botao ao lado (34px, nao 38px: e' um
   par dentro da coluna, nao da barra de filtros). */
.seatin{height:34px;padding:0 16px;margin:0;border-radius:999px;border:0;
  background:var(--input);color:var(--fg);font-family:var(--font-mono);font-size:12.5px;
  outline:none;min-width:0;width:auto}
.seatin::placeholder{color:#9aa3b2;text-transform:none;letter-spacing:0}
html.dv-dark .seatin::placeholder{color:#7b8494}
.seatin:focus{box-shadow:inset 0 0 0 1.5px var(--cy)}
form.inline{display:inline}

/* ── CONTA · link de indicacao ───────────────────────────────────────
   O preview desenha uma PASTILHA estatica (.lb + .cp). Aqui o campo TEM que
   continuar sendo <input> (dvCopyRef faz .select()) e o COPY um <button> (o
   JS troca o textContent para COPIED) — entao os dois so' PARECEM .lb/.cp. */
.reflink{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--input);border-radius:999px;padding:5px 8px 5px 15px;margin:4px 0 13px}
.reflink input{flex:1 1 auto;min-width:0;width:auto;background:none;border:0;padding:0;
  font-family:var(--font-mono);font-size:11px;color:var(--muted-fg);outline:none}
.reflink button{flex:0 0 auto;height:28px;padding:0 14px;margin:0;border:0;border-radius:999px;
  background:transparent;color:var(--cyd);font-family:var(--font-mono);font-size:10px;
  font-weight:600;letter-spacing:1.1px;cursor:pointer;text-transform:uppercase}
.reflink button:hover{background:var(--cy-fill);color:var(--cyfg)}
/* dinheiro na cor da MARCA, nao no verde de "dinheiro" — e' o .cy do preview */
.credit{font-size:22px;font-weight:400;color:var(--cyd);letter-spacing:0}

/* ── CONTA · dupla de botoes da coluna ───────────────────────────────
   ⚠️ .acts ja e' a dupla Download/Original DENTRO do card de criativo (gap 5px,
   margin-top 10px). Escopado na coluna para que o card nao herde o espacamento
   maior — e' o .a2 do preview com outro nome.
   ⚠️ FILHO DIRETO (>) e nao descendente: na biblioteca a grade de criativos
   mora DENTRO do .box.pan, entao um `.pan .acts` solto tambem pegava o .acts
   de cada cartao e trocava gap/margem dele pelos numeros da coluna. */
.col>.acts,.pan>.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.col>.acts a,.col>.acts button,.pan>.acts a,.pan>.acts button{width:auto;margin:0}

/* ── PAYWALL · cartao de plano ───────────────────────────────────────
   O <form class="ppf"> e' o cartao (.p) e o <button class="pp"> dentro dele e'
   a area clicavel inteira — por isso o botao fica transparente e sem borda.
   ⚠️ .feats/.ft NAO ganham o ::before de "✓": o _paywall.php ja manda o
   &#10003; DENTRO do texto, e mexer nesse texto derrubaria PT/ZH (o i18n casa
   o no' inteiro). Com o ::before sairia check dobrado. */
/* os DOIS fundos pelo nome antigo (o markup pode ou nao ganhar .modalbg).
   Os z-index sao os do legado de proposito: .modal 50 < .pw 120 < .bo 130 <
   .peek 150 — e o balao do chat.dvshipping.com disputa essa faixa. */
.pw,.bo{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  padding:28px;background:rgba(16,24,40,.45);backdrop-filter:blur(3px)}
.pw{z-index:120}
.bo{z-index:130}
.pw.open,.bo.open{display:flex}
.ppf{border:2px solid var(--hair);border-radius:12px;padding:22px;position:relative;margin:0}
html.dv-dark .ppf{border-color:rgba(255,255,255,.10)}
.ppf:has(.pp.best){border-color:var(--cy)}
.pp{display:block;width:100%;margin:0;padding:0;border:0;background:none;text-align:left;
  cursor:pointer;color:inherit;font-family:inherit;text-transform:none;letter-spacing:normal}
.pp b{display:block;font-family:var(--font-mono);font-size:11px;font-weight:400;
  letter-spacing:1.7px;color:var(--cyd)}
.prc{display:block;font-size:2rem;font-weight:400;line-height:2rem;margin:12px 0 4px;color:var(--fg)}
.eq{display:block;font-size:11.5px;color:var(--muted-fg);margin-bottom:14px}
.feats{display:block;border-top:1px solid var(--hair);padding-top:13px}
html.dv-dark .feats{border-top-color:rgba(255,255,255,.10)}
.ft{display:block;font-size:12.5px;color:var(--muted-fg);padding:5px 0}
.pw__tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--cy);
  color:var(--cyfg);border-radius:999px;padding:4px 12px;font-family:var(--font-mono);
  font-size:9px;font-weight:600;white-space:nowrap}
.pw__pl,.bo__g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pw__cyc{display:flex;justify-content:center;gap:3px;background:var(--input);border-radius:999px;
  padding:4px;width:fit-content;margin:0 auto 22px}
.pw__cyc button{width:auto;margin:0;padding:9px 19px;border-radius:999px;border:0;background:none;
  font-family:var(--font-mono);font-size:12.5px;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--muted-fg);cursor:pointer}
.pw__cyc button.on{background:var(--cy-fill);color:var(--cyfg);font-weight:600}
.pw__cyc i{font-style:normal}
.pw__b>p,.bo__b>p{text-align:center;color:var(--muted-fg);font-size:13.5px;margin:10px 0 22px;
  line-height:1.55}
.pw__b{max-width:700px}
.bo__b{max-width:580px}
.pw__hint{text-align:center;color:var(--muted-fg);font-size:12px;margin-top:20px}
.pw__x,.bo__x{display:block;width:100%;margin:13px 0 0;padding:0;border:0;background:none;
  text-align:center;color:var(--muted-fg);font-family:var(--font-mono);font-size:12.5px;
  font-weight:400;letter-spacing:normal;text-transform:none;cursor:pointer}
.pw__x:hover,.bo__x:hover{color:var(--fg)}
/* trial: unica oferta "morna" da tela. Tracejado ciano em vez do ambar
   #ffb84d do legado, que estava fora da paleta. */
.pw__trial{width:100%;margin:0;padding:13px 18px;border-radius:999px;
  border:1.5px dashed rgba(0,179,221,.38);background:transparent;color:var(--cyd);
  font-family:var(--font-sans);font-size:13px;font-weight:600;text-transform:none;
  letter-spacing:normal;cursor:pointer}
html.dv-dark .pw__trial{border-color:rgba(90,210,240,.40)}
.pw__trial:hover{background:rgba(0,179,221,.10)}
@media(max-width:900px){.pw__pl,.bo__g{grid-template-columns:1fr}}

/* ── CREDITOS · pacotes ──────────────────────────────────────────────
   O preview cobre o modal de PLANOS, nao o de pacotes de credito. Mesmo
   cartao do plano (.p), com numero grande, unidade e valor. */
.bo__p{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;margin:0;
  padding:22px 16px;border:2px solid var(--hair);border-radius:12px;background:transparent;
  color:inherit;font-family:inherit;text-transform:none;letter-spacing:normal;cursor:pointer;
  transition:border-color .12s}
html.dv-dark .bo__p{border-color:rgba(255,255,255,.10)}
.bo__p:hover{border-color:var(--cy)}
.bo__n{font-size:1.75rem;font-weight:400;line-height:2rem;color:var(--fg)}
.bo__u{font-family:var(--font-mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted-fg)}
.bo__v{margin-top:8px;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--cyd)}

/* ── rodapes ─────────────────────────────────────────────────────────*/
.foot{margin-top:16px;text-align:center;font-family:var(--font-mono);font-size:12px;
  color:var(--muted-fg)}
.foot a{color:var(--cyd)}
.authfoot{display:none}


/* ══════════════════════════════════════════════════════════════════════
   3. DESLOGADO — body.auth (login, apply, forgot, set-password)

   O preview nao tem tela de autenticacao: este e' o unico bloco sem
   referencia aprovada. A ARQUITETURA e' a de hoje (cartao escuro sobre
   brilho radial, campos altos com icone, botao unico) — o que muda e' a
   paleta: sai o indigo #2F6BFF, entra o ciano da marca (#0A3B4A -> #000709).
   A tela e' SEMPRE escura, nao segue o botao de tema (nao ha botao aqui):
   por isso os tokens sao redeclarados no proprio body.auth, com os mesmos
   valores do modo escuro do preview.
   ══════════════════════════════════════════════════════════════════════ */

body.auth{
  --fg:#E2E8F0; --muted-fg:#94A3B8;
  --card:rgba(7,34,44,.92); --input:rgba(125,125,125,.15);
  --cy:#5AD2F0; --cyd:#7CDCF5; --cy-fill:#4FC9E8; --cyfg:#052730;
  --linha:rgba(90,210,240,.22); --hair:rgba(255,255,255,.10);
  color:var(--fg);
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  padding:32px 18px;
  background:radial-gradient(1200px 520px at 50% -180px,rgba(0,179,221,.30),rgba(0,179,221,0) 62%),
    linear-gradient(180deg,#0A3B4A 0%,#03202A 42%,#000B0F 74%,#000709 100%);
  background-attachment:fixed}

/* marca solta, com brilho ciano no lugar da sombra do icone. Mesma fonte de
   imagem da barra: oracle-dark.png guarda o cinza-claro do "DV", que a versao
   100% branca (oracle-white.png, ainda no markup) apaga. */
body.auth .brand{display:flex;align-items:center;justify-content:center;margin:4px 0 20px}
body.auth .brand img{height:44px;width:auto;display:block;
  content:url("/assets/oracle-dark.png");
  filter:drop-shadow(0 12px 34px rgba(0,179,221,.38))}

/* cartao: mesmo raio de modal do preview (16px), so' que mais fechado */
body.auth .card{width:100%;max-width:432px;background:var(--card);
  border:1px solid rgba(90,210,240,.16);border-radius:16px;padding:34px 32px 28px;
  box-shadow:0 44px 110px -34px rgba(0,0,0,.75)}
body.auth .card h1{font-family:var(--font-sans);font-size:1.75rem;line-height:1.2;font-weight:500;
  letter-spacing:-.3px;padding:0;margin:0 0 6px;color:var(--fg)}
body.auth .sub{font-family:var(--font-sans);font-size:14.5px;color:var(--muted-fg);
  padding:0;margin:0 0 22px;line-height:1.5}
body.auth label{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted-fg);margin:18px 0 8px}

/* campos altos com o icone desenhado no proprio fundo. O stroke saiu do
   indigo #5b668c para um ciano dessaturado, para nao voltar a puxar azul. */
body.auth .card input,body.auth .card select{width:100%;height:52px;border-radius:16px;
  background:rgba(125,125,125,.12);border:1px solid rgba(90,210,240,.18);padding:0 16px;
  font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--fg);outline:none;
  appearance:none;transition:border-color .15s,box-shadow .15s}
body.auth .card input::placeholder{color:#556d76}
body.auth .card input:focus,body.auth .card select:focus{border-color:var(--cy);
  box-shadow:0 0 0 4px rgba(0,179,221,.16)}
body.auth .card input[type=email],body.auth .card input[type=password]{padding-left:46px;
  background-repeat:no-repeat;background-position:16px 50%}
body.auth .card input[type=email]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235b7a86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
body.auth .card input[type=password]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235b7a86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}

/* olho da senha: o ads_foot.php envolve o campo num .pwrap em runtime */
body.auth .card .pwrap{position:relative}
body.auth .card .pwrap input{padding-right:48px}
body.auth .card .peye{position:absolute;top:0;right:0;height:52px;width:46px;margin:0;padding:0;
  background:none;border:0;box-shadow:none;border-radius:0;cursor:pointer;display:flex;
  align-items:center;justify-content:center;color:#5b7a86}
body.auth .card .peye:hover{color:var(--cyd);filter:none}
body.auth .card .peye svg{width:20px;height:20px}

/* CTA unico: no escuro a cor primaria CLAREIA e o texto por cima fica ESCURO
   (--cyfg:#052730). Manter branco aqui deixaria o botao lavado — a mesma
   decisao que o preview registra no bloco do modo escuro. */
body.auth .card button[type=submit],body.auth .card .btn{width:100%;height:auto;
  display:block;margin-top:22px;padding:16px;border:0;border-radius:999px;
  background:var(--cy-fill);color:var(--cyfg);font-family:var(--font-sans);font-size:15.5px;
  font-weight:600;text-transform:none;letter-spacing:.2px;cursor:pointer;
  box-shadow:0 18px 48px -12px rgba(0,179,221,.45),inset 0 1px 0 rgba(255,255,255,.30)}
body.auth .card button[type=submit]:hover,body.auth .card .btn:hover{filter:brightness(1.06)}
body.auth .card button[type=submit]::after{content:' \2192'}

body.auth .rowlink{display:flex;justify-content:flex-end;margin-top:12px}
body.auth .rowlink a{color:var(--cyd);font-size:14px}
body.auth .rowlink a:hover{text-decoration:underline}
body.auth .ordiv{display:flex;align-items:center;gap:14px;margin:22px 0 2px;
  color:var(--muted-fg);font-family:var(--font-mono);font-size:10.5px;letter-spacing:2px}
body.auth .ordiv::before,body.auth .ordiv::after{content:'';flex:1;height:1px;
  background:rgba(255,255,255,.10)}
body.auth .foot{font-family:var(--font-sans);font-size:14px;color:var(--muted-fg)}
body.auth .foot a{color:var(--cyd);font-weight:600}
body.auth .msg{margin-bottom:16px}
body.auth .authfoot{display:block;margin-top:24px;text-align:center;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:2px;color:#39555E}

/* no deslogado o seletor de idioma nao tem barra para entrar: continua
   flutuando, mas na paleta nova (o _tema.php cuidava disso com !important). */
body.auth .langsel{position:fixed;top:12px;right:16px;z-index:300;gap:6px;padding:5px 7px;
  border-radius:999px;background:rgba(7,34,44,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(90,210,240,.16)}
body.auth .langsel button{width:28px;height:28px;font-size:15px}