/* ============================================================
   PAGINAS PUBLICAS -- vitrine (/v), pedido (/p), download (/d) e
   documentos legais (/termos, /privacidade, /reembolso).

   POR QUE ESTE ARQUIVO EXISTE, E NAO UM `@import` DO orion.css:

   1. AUDIENCIA DIFERENTE. `orion.css` e o design system do PAINEL: escuro,
      denso, feito para quem trabalha nele oito horas. Estas paginas sao uma
      LOJA, abertas por alguem que nunca viu o sistema e esta decidindo se
      entrega o CPF e o dinheiro. Um comprador leu a versao anterior desta
      pagina -- preto #06060c com borda laranja neon -- como "site pirata".
      A avaliacao esta correta: aquela paleta e a de painel de infraestrutura.

   2. ACOPLAMENTO QUE JA CUSTOU DOIS BUGS. Carregar o design system do painel
      obrigava a DESFAZE-LO no lugar (`body{display:block}`, `height:auto`),
      porque ele fixa o shell da sidebar no `body`. Uma dessas vezes o topo do
      cartao de compra foi para `top:-65px`, inacessivel (ver "Armadilhas ja
      pagas" no CLAUDE.md, item 3). Sem herdar, nao ha o que desfazer.

   3. CUSTO DE CARREGAMENTO NA PAGINA QUE MENOS PODE PAGAR. `orion.css` abre
      ~60 `@import`, e `@import` e SERIALIZADO: o navegador busca o arquivo,
      parseia, descobre os imports, busca cada um. Tudo isso bloqueando a
      primeira pintura da vitrine -- a tela onde latencia vira carrinho
      abandonado. Aqui e UM arquivo, sem `@import` nenhum.

   REGRAS DESTE ARQUIVO:
   - Zero dependencia externa. Sem CDN, sem Google Fonts, sem @import. A CSP
     das paginas publicas fecha em `default-src 'self'` (ver .htaccess) e nao
     ha JS nenhum (`script-src 'none'`) -- nada aqui pode depender de script.
   - Fonte do SISTEMA. A versao anterior pedia 'Plus Jakarta Sans' sem nunca
     carrega-la e caia em Arial. O stack nativo e melhor de graca: no iPhone
     rende San Francisco, que e a fonte que o comprador ve no proprio banco.
   - Toda classe usada no HTML tem que estar DEFINIDA aqui. Classe que nao
     existe nao gera erro em lugar nenhum -- ja aconteceu 3 vezes neste
     projeto. Ha teste cobrindo isso (tests/PublicoEstiloTest.php).
   ============================================================ */

/* ---------- Reset minimo ----------
   Nao ha reset herdado: sem orion.css, o que nao estiver aqui e o default do
   navegador. E pouco de proposito. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, p, figure { margin: 0; }
img, svg { max-width: 100%; }
/* Campo de formulario nao herda fonte por padrao: sem isto o input renderiza na
   fonte do sistema operacional, diferente do resto do cartao. */
input, button, select, textarea { font: inherit; color: inherit; }

/* ============================================================
   TOKENS

   Claro por padrao, escuro sobrio quando o aparelho pede. A decisao de nao
   espelhar o tema do painel e deliberada: painel e vitrine sao produtos
   diferentes para pessoas diferentes, e todo checkout que o comprador
   brasileiro conhece -- do banco ao boleto -- e claro. Escuro nao e o
   problema; escuro NEON num formulario de pagamento e.
   ============================================================ */
:root {
  color-scheme: light dark;

  --pub-ground:      #f2f5f9;
  --pub-ground-glow: rgba(29, 78, 216, .07);
  --pub-card:        #ffffff;
  --pub-card-border: #e3e8ef;
  --pub-ink:         #0f172a;
  --pub-body:        #313d4f;
  --pub-muted:       #667488;
  --pub-line:        #edf0f5;

  --pub-field:        #ffffff;
  --pub-field-border: #cbd3df;
  --pub-field-ink:    #0f172a;

  --pub-accent:       #1d4ed8;
  --pub-accent-hover: #1a43b8;
  --pub-accent-ink:   #ffffff;
  --pub-ring:         rgba(29, 78, 216, .18);

  --pub-ok-bg:     #ecfdf5;  --pub-ok-line:     #a7f3d0;  --pub-ok-ink:     #05613f;
  --pub-warn-bg:   #fffbeb;  --pub-warn-line:   #fcd97a;  --pub-warn-ink:   #7c4a06;
  --pub-danger-bg: #fef3f2;  --pub-danger-line: #fdc9c3;  --pub-danger-ink: #a12617;

  --pub-shadow: 0 1px 2px rgba(15, 23, 42, .05),
                0 14px 36px -14px rgba(15, 23, 42, .18);
  --pub-radius: 16px;

  /* Cor com que o campo autopreenchido e repintado. Token proprio porque
     cada tema precisa da sua, e a regra que a usa nao pode ter color-mix(). */
  --pub-autofill-bg:  #ffffff;
  --pub-autofill-ink: #0f172a;

  /* Cores das esferas do fundo animado. No tema base sao tons do proprio
     azul de destaque -- fundo colorido atras de um formulario de pagamento
     e decoracao, e decoracao nao pode competir com o botao de comprar. */
  --pub-orb-a: rgba(29, 78, 216, .16);
  --pub-orb-b: rgba(56, 132, 255, .13);
  --pub-orb-c: rgba(99, 102, 241, .13);
  --pub-orb-d: rgba(14, 165, 233, .12);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Slate profundo, nao preto absoluto, e sem glow de cor nenhuma. A
       diferenca entre "escuro sobrio" e "escuro neon" e exatamente esta. */
    --pub-ground:      #0b1220;
    --pub-ground-glow: rgba(79, 124, 245, .09);
    --pub-card:        #121b2c;
    --pub-card-border: #223049;
    --pub-ink:         #e9eefa;
    --pub-body:        #c3cddd;
    --pub-muted:       #93a1b8;
    --pub-line:        #1e2a40;

    --pub-field:        #0d1523;
    --pub-field-border: #2c3a53;
    --pub-field-ink:    #e9eefa;

    --pub-accent:       #3f6fe8;
    --pub-accent-hover: #5480ee;
    --pub-accent-ink:   #ffffff;
    --pub-ring:         rgba(79, 124, 245, .28);

    --pub-ok-bg:     #06241c;  --pub-ok-line:     #14563c;  --pub-ok-ink:     #6ee7b7;
    --pub-warn-bg:   #291c05;  --pub-warn-line:   #6b4708;  --pub-warn-ink:   #fcd34d;
    --pub-danger-bg: #2b1211;  --pub-danger-line: #6d2420;  --pub-danger-ink: #fca5a5;

    --pub-shadow: 0 1px 2px rgba(0, 0, 0, .4),
                  0 18px 40px -16px rgba(0, 0, 0, .6);

    --pub-autofill-bg:  #0d1523;
    --pub-autofill-ink: #e9eefa;

    --pub-orb-a: rgba(63, 111, 232, .22);
    --pub-orb-b: rgba(56, 132, 255, .16);
    --pub-orb-c: rgba(99, 102, 241, .16);
    --pub-orb-d: rgba(14, 165, 233, .14);
  }
}

/* >>> TEMAS GERADOS -- nao edite a mao
   Gerado por scripts/gerar-temas-publicos.php a partir de assets/css/orion.css.
   Rode o script de novo depois de mexer nos temas do painel. */

[data-tema="forja"]{
  color-scheme: dark;
  --pub-ground:#06060c;
  --pub-ground-glow:rgba(249,115,22,.4);
  --pub-card:rgba(13,13,25,.45);
  --pub-card-border:rgba(249,115,22,.15);
  --pub-ink:#f4f4f7;
  --pub-body:#d7dce4;
  --pub-muted:#94a3b8;
  --pub-line:rgba(249,115,22,.15);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(249,115,22,.15);
  --pub-field-ink:#f4f4f7;
  --pub-accent:#f97316;
  --pub-accent-hover:#fa8737;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(249,115,22,.4);
  --pub-orb-a:rgba(249,115,22,.4);
  --pub-orb-b:rgba(6,182,212,.4);
  --pub-orb-c:rgba(244,63,94,.4);
  --pub-orb-d:rgba(16,185,129,.4);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#15151b;
  --pub-autofill-ink:#f4f4f7;
}
[data-tema="orion"]{
  color-scheme: dark;
  --pub-ground:#06060c;
  --pub-ground-glow:rgba(168,85,247,.4);
  --pub-card:rgba(13,13,25,.45);
  --pub-card-border:rgba(147,51,234,.15);
  --pub-ink:#f4f4f7;
  --pub-body:#d7dce4;
  --pub-muted:#94a3b8;
  --pub-line:rgba(147,51,234,.15);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(147,51,234,.15);
  --pub-field-ink:#f4f4f7;
  --pub-accent:#a855f7;
  --pub-accent-hover:#b46df8;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(168,85,247,.4);
  --pub-orb-a:rgba(168,85,247,.4);
  --pub-orb-b:rgba(6,182,212,.4);
  --pub-orb-c:rgba(244,63,94,.4);
  --pub-orb-d:rgba(16,185,129,.4);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#15151b;
  --pub-autofill-ink:#f4f4f7;
}
[data-tema="cyber"]{
  color-scheme: dark;
  --pub-ground:#06060c;
  --pub-ground-glow:rgba(6,182,212,.4);
  --pub-card:rgba(13,13,25,.45);
  --pub-card-border:rgba(6,182,212,.15);
  --pub-ink:#f4f4f7;
  --pub-body:#d7dce4;
  --pub-muted:#94a3b8;
  --pub-line:rgba(6,182,212,.15);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(6,182,212,.15);
  --pub-field-ink:#f4f4f7;
  --pub-accent:#06b6d4;
  --pub-accent-hover:#29c0da;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(6,182,212,.4);
  --pub-orb-a:rgba(6,182,212,.4);
  --pub-orb-b:rgba(6,182,212,.4);
  --pub-orb-c:rgba(244,63,94,.4);
  --pub-orb-d:rgba(16,185,129,.4);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#15151b;
  --pub-autofill-ink:#f4f4f7;
}
[data-tema="matrix"]{
  color-scheme: dark;
  --pub-ground:#06060c;
  --pub-ground-glow:rgba(16,185,129,.4);
  --pub-card:rgba(13,13,25,.45);
  --pub-card-border:rgba(16,185,129,.15);
  --pub-ink:#f4f4f7;
  --pub-body:#d7dce4;
  --pub-muted:#94a3b8;
  --pub-line:rgba(16,185,129,.15);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(16,185,129,.15);
  --pub-field-ink:#f4f4f7;
  --pub-accent:#10b981;
  --pub-accent-hover:#31c393;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(16,185,129,.4);
  --pub-orb-a:rgba(16,185,129,.4);
  --pub-orb-b:rgba(6,182,212,.4);
  --pub-orb-c:rgba(244,63,94,.4);
  --pub-orb-d:rgba(16,185,129,.4);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#15151b;
  --pub-autofill-ink:#f4f4f7;
}
[data-tema="blood"]{
  color-scheme: dark;
  --pub-ground:#06060c;
  --pub-ground-glow:rgba(244,63,94,.4);
  --pub-card:rgba(13,13,25,.45);
  --pub-card-border:rgba(244,63,94,.15);
  --pub-ink:#f4f4f7;
  --pub-body:#d7dce4;
  --pub-muted:#94a3b8;
  --pub-line:rgba(244,63,94,.15);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(244,63,94,.15);
  --pub-field-ink:#f4f4f7;
  --pub-accent:#f43f5e;
  --pub-accent-hover:#f65a75;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(244,63,94,.4);
  --pub-orb-a:rgba(244,63,94,.4);
  --pub-orb-b:rgba(6,182,212,.4);
  --pub-orb-c:rgba(244,63,94,.4);
  --pub-orb-d:rgba(16,185,129,.4);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#15151b;
  --pub-autofill-ink:#f4f4f7;
}
[data-tema="sung"]{
  color-scheme: dark;
  --pub-ground:#03020a;
  --pub-ground-glow:rgba(139,92,246,.42);
  --pub-card:rgba(13,8,31,.62);
  --pub-card-border:rgba(168,85,247,.2);
  --pub-ink:#f8f5ff;
  --pub-body:#e0daee;
  --pub-muted:#a99bc7;
  --pub-line:rgba(168,85,247,.2);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(168,85,247,.2);
  --pub-field-ink:#f8f5ff;
  --pub-accent:#8b5cf6;
  --pub-accent-hover:#9b73f7;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(139,92,246,.42);
  --pub-orb-a:rgba(139,92,246,.42);
  --pub-orb-b:rgba(56,189,248,.28);
  --pub-orb-c:rgba(251,47,104,.3);
  --pub-orb-d:rgba(34,211,238,.22);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#121119;
  --pub-autofill-ink:#f8f5ff;
}
[data-tema="ember"]{
  color-scheme: dark;
  --pub-ground:#05080d;
  --pub-ground-glow:rgba(255,159,10,.36);
  --pub-card:rgba(9,15,24,.66);
  --pub-card-border:rgba(255,159,10,.18);
  --pub-ink:#fff8ef;
  --pub-body:#e5e3e0;
  --pub-muted:#a8b2bd;
  --pub-line:rgba(255,159,10,.18);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(255,159,10,.18);
  --pub-field-ink:#fff8ef;
  --pub-accent:#ff9f0a;
  --pub-accent-hover:#ffac2c;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(255,159,10,.36);
  --pub-orb-a:rgba(255,159,10,.36);
  --pub-orb-b:rgba(56,189,248,.18);
  --pub-orb-c:rgba(251,77,0,.32);
  --pub-orb-d:rgba(255,209,102,.2);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#14171c;
  --pub-autofill-ink:#fff8ef;
}
[data-tema="arounda"]{
  color-scheme: dark;
  --pub-ground:#161316;
  --pub-ground-glow:rgba(255,213,86,.34);
  --pub-card:rgba(40,40,40,.58);
  --pub-card-border:rgba(255,213,86,.2);
  --pub-ink:#fff;
  --pub-body:#f1eeea;
  --pub-muted:#d1c7b8;
  --pub-line:rgba(255,213,86,.2);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(255,213,86,.2);
  --pub-field-ink:#fff;
  --pub-accent:#ffd556;
  --pub-accent-hover:#d6b348;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(255,213,86,.34);
  --pub-orb-a:rgba(255,213,86,.34);
  --pub-orb-b:rgba(234,255,0,.2);
  --pub-orb-c:rgba(255,75,0,.35);
  --pub-orb-d:rgba(245,158,11,.22);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#242124;
  --pub-autofill-ink:#fff;
}
[data-tema="crimson"]{
  color-scheme: dark;
  --pub-ground:#050505;
  --pub-ground-glow:rgba(139,13,26,.36);
  --pub-card:rgba(11,11,11,.72);
  --pub-card-border:rgba(139,13,26,.24);
  --pub-ink:#f5f2ed;
  --pub-body:#e3dcd7;
  --pub-muted:#b9aaa4;
  --pub-line:rgba(139,13,26,.24);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(139,13,26,.24);
  --pub-field-ink:#f5f2ed;
  --pub-accent:#8b0d1a;
  --pub-accent-hover:#9b2f3a;
  --pub-accent-ink:#ffffff;
  --pub-ring:rgba(139,13,26,.36);
  --pub-orb-a:rgba(139,13,26,.36);
  --pub-orb-b:rgba(245,242,237,.1);
  --pub-orb-c:rgba(177,18,38,.3);
  --pub-orb-d:rgba(214,199,191,.12);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#141414;
  --pub-autofill-ink:#f5f2ed;
}
[data-tema="nova"]{
  color-scheme: dark;
  --pub-ground:#070b0f;
  --pub-ground-glow:rgba(214,168,74,.32);
  --pub-card:rgba(10,15,20,.68);
  --pub-card-border:rgba(214,168,74,.18);
  --pub-ink:#f8f4e8;
  --pub-body:#e0dbcd;
  --pub-muted:#a99f8e;
  --pub-line:rgba(214,168,74,.18);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(214,168,74,.18);
  --pub-field-ink:#f8f4e8;
  --pub-accent:#d6a84a;
  --pub-accent-hover:#dcb463;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(214,168,74,.32);
  --pub-orb-a:rgba(214,168,74,.32);
  --pub-orb-b:rgba(147,164,175,.16);
  --pub-orb-c:rgba(185,132,45,.22);
  --pub-orb-d:rgba(255,230,163,.16);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#161a1d;
  --pub-autofill-ink:#f8f4e8;
}
[data-tema="marple"]{
  color-scheme: dark;
  --pub-ground:#1f1f1f;
  --pub-ground-glow:rgba(202,40,81,.36);
  --pub-card:rgba(38,36,35,.62);
  --pub-card-border:rgba(255,103,102,.2);
  --pub-ink:#fff4ef;
  --pub-body:#f3e2db;
  --pub-muted:#d7b9ad;
  --pub-line:rgba(255,103,102,.2);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(255,103,102,.2);
  --pub-field-ink:#fff4ef;
  --pub-accent:#ca2851;
  --pub-accent-hover:#d14669;
  --pub-accent-ink:#ffffff;
  --pub-ring:rgba(202,40,81,.36);
  --pub-orb-a:rgba(202,40,81,.36);
  --pub-orb-b:rgba(255,227,179,.18);
  --pub-orb-c:rgba(255,103,102,.32);
  --pub-orb-d:rgba(255,177,115,.22);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#2c2c2c;
  --pub-autofill-ink:#fff4ef;
}
[data-tema="aureum"]{
  color-scheme: dark;
  --pub-ground:#0d0c0f;
  --pub-ground-glow:rgba(210,159,34,.34);
  --pub-card:rgba(25,23,27,.66);
  --pub-card-border:rgba(210,159,34,.2);
  --pub-ink:#fff4d7;
  --pub-body:#e5dac1;
  --pub-muted:#a89d8e;
  --pub-line:rgba(210,159,34,.2);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(210,159,34,.2);
  --pub-field-ink:#fff4d7;
  --pub-accent:#d29f22;
  --pub-accent-hover:#d8ac41;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(210,159,34,.34);
  --pub-orb-a:rgba(210,159,34,.34);
  --pub-orb-b:rgba(80,84,88,.18);
  --pub-orb-c:rgba(93,0,24,.28);
  --pub-orb-d:rgba(244,201,93,.18);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#1c1b1d;
  --pub-autofill-ink:#fff4d7;
}
[data-tema="infected"]{
  color-scheme: dark;
  --pub-ground:#060a12;
  --pub-ground-glow:rgba(202,166,106,.32);
  --pub-card:rgba(10,14,22,.68);
  --pub-card-border:rgba(202,166,106,.18);
  --pub-ink:#f6ead7;
  --pub-body:#dfd4c2;
  --pub-muted:#a99f91;
  --pub-line:rgba(202,166,106,.18);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(202,166,106,.18);
  --pub-field-ink:#f6ead7;
  --pub-accent:#caa66a;
  --pub-accent-hover:#d1b27f;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(202,166,106,.32);
  --pub-orb-a:rgba(202,166,106,.32);
  --pub-orb-b:rgba(75,86,102,.18);
  --pub-orb-c:rgba(229,182,106,.22);
  --pub-orb-d:rgba(241,211,155,.14);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#151920;
  --pub-autofill-ink:#f6ead7;
}
[data-tema="sigma"]{
  color-scheme: dark;
  --pub-ground:#030704;
  --pub-ground-glow:rgba(139,220,60,.34);
  --pub-card:rgba(5,14,8,.66);
  --pub-card-border:rgba(139,220,60,.2);
  --pub-ink:#efffe5;
  --pub-body:#d6ebcb;
  --pub-muted:#9dbb8d;
  --pub-line:rgba(139,220,60,.2);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(139,220,60,.2);
  --pub-field-ink:#efffe5;
  --pub-accent:#8bdc3c;
  --pub-accent-hover:#75b932;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(139,220,60,.34);
  --pub-orb-a:rgba(139,220,60,.34);
  --pub-orb-b:rgba(183,255,85,.2);
  --pub-orb-c:rgba(95,165,31,.22);
  --pub-orb-d:rgba(110,232,58,.22);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#121613;
  --pub-autofill-ink:#efffe5;
}
[data-tema="eclipse"]{
  color-scheme: dark;
  --pub-ground:#060814;
  --pub-ground-glow:rgba(255,74,61,.34);
  --pub-card:rgba(9,13,28,.66);
  --pub-card-border:rgba(255,74,61,.18);
  --pub-ink:#f7f0ef;
  --pub-body:#dcdadf;
  --pub-muted:#9ca6b8;
  --pub-line:rgba(255,74,61,.18);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(255,74,61,.18);
  --pub-field-ink:#f7f0ef;
  --pub-accent:#ff4a3d;
  --pub-accent-hover:#ff6358;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(255,74,61,.34);
  --pub-orb-a:rgba(255,74,61,.34);
  --pub-orb-b:rgba(103,115,134,.18);
  --pub-orb-c:rgba(201,39,52,.28);
  --pub-orb-d:rgba(255,122,69,.22);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#151722;
  --pub-autofill-ink:#f7f0ef;
}
[data-tema="sunset"]{
  color-scheme: dark;
  --pub-ground:#1f1511;
  --pub-ground-glow:rgba(248,143,34,.34);
  --pub-card:rgba(48,33,24,.62);
  --pub-card-border:rgba(248,143,34,.18);
  --pub-ink:#fff6e7;
  --pub-body:#f1e0cb;
  --pub-muted:#d0ad8a;
  --pub-line:rgba(248,143,34,.18);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(248,143,34,.18);
  --pub-field-ink:#fff6e7;
  --pub-accent:#f88f22;
  --pub-accent-hover:#f99f41;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(248,143,34,.34);
  --pub-orb-a:rgba(248,143,34,.34);
  --pub-orb-b:rgba(255,227,179,.18);
  --pub-orb-c:rgba(234,97,19,.3);
  --pub-orb-d:rgba(251,185,49,.22);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#2c231f;
  --pub-autofill-ink:#fff6e7;
}
[data-tema="claro"]{
  color-scheme: light;
  --pub-ground:#eef2f7;
  --pub-ground-glow:rgba(249,115,22,.22);
  --pub-card:rgba(255,255,255,.50);
  --pub-card-border:rgba(255,255,255,.62);
  --pub-ink:#111827;
  --pub-body:#2a3445;
  --pub-muted:#64748b;
  --pub-line:rgba(255,255,255,.62);
  --pub-field:#ffffff;
  --pub-field-border:rgba(255,255,255,.62);
  --pub-field-ink:#111827;
  --pub-accent:#f97316;
  --pub-accent-hover:#fa8737;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(249,115,22,.22);
  --pub-orb-a:rgba(249,115,22,.22);
  --pub-orb-b:rgba(8,145,178,.18);
  --pub-orb-c:rgba(225,29,72,.14);
  --pub-orb-d:rgba(5,150,105,.16);
  --pub-ok-bg:#ecfdf5; --pub-ok-line:#a7f3d0; --pub-ok-ink:#05613f;
  --pub-warn-bg:#fffbeb; --pub-warn-line:#fcd97a; --pub-warn-ink:#7c4a06;
  --pub-danger-bg:#fef3f2; --pub-danger-line:#fdc9c3; --pub-danger-ink:#a12617;
  --pub-shadow:0 1px 2px rgba(15,23,42,.06), 0 16px 40px -16px rgba(15,23,42,.22);
  --pub-autofill-bg:#ffffff;
  --pub-autofill-ink:#111827;
}
[data-tema="polar"]{
  color-scheme: light;
  --pub-ground:#f7fafc;
  --pub-ground-glow:rgba(37,99,235,.2);
  --pub-card:rgba(255,255,255,.52);
  --pub-card-border:rgba(255,255,255,.66);
  --pub-ink:#0f172a;
  --pub-body:#293347;
  --pub-muted:#64748b;
  --pub-line:rgba(255,255,255,.66);
  --pub-field:#ffffff;
  --pub-field-border:rgba(255,255,255,.66);
  --pub-field-ink:#0f172a;
  --pub-accent:#2563eb;
  --pub-accent-hover:#4479ee;
  --pub-accent-ink:#ffffff;
  --pub-ring:rgba(37,99,235,.2);
  --pub-orb-a:rgba(37,99,235,.2);
  --pub-orb-b:rgba(2,132,199,.16);
  --pub-orb-c:rgba(220,38,38,.13);
  --pub-orb-d:rgba(5,150,105,.16);
  --pub-ok-bg:#ecfdf5; --pub-ok-line:#a7f3d0; --pub-ok-ink:#05613f;
  --pub-warn-bg:#fffbeb; --pub-warn-line:#fcd97a; --pub-warn-ink:#7c4a06;
  --pub-danger-bg:#fef3f2; --pub-danger-line:#fdc9c3; --pub-danger-ink:#a12617;
  --pub-shadow:0 1px 2px rgba(15,23,42,.06), 0 16px 40px -16px rgba(15,23,42,.22);
  --pub-autofill-bg:#ffffff;
  --pub-autofill-ink:#0f172a;
}
[data-tema="solar"]{
  color-scheme: light;
  --pub-ground:#fff8ed;
  --pub-ground-glow:rgba(217,119,6,.2);
  --pub-card:rgba(255,255,255,.50);
  --pub-card-border:rgba(255,255,255,.64);
  --pub-ink:#1f2937;
  --pub-body:#363f4d;
  --pub-muted:#6b7280;
  --pub-line:rgba(255,255,255,.64);
  --pub-field:#ffffff;
  --pub-field-border:rgba(255,255,255,.64);
  --pub-field-ink:#1f2937;
  --pub-accent:#d97706;
  --pub-accent-hover:#de8a29;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(217,119,6,.2);
  --pub-orb-a:rgba(217,119,6,.2);
  --pub-orb-b:rgba(15,118,110,.16);
  --pub-orb-c:rgba(190,18,60,.13);
  --pub-orb-d:rgba(22,163,74,.16);
  --pub-ok-bg:#ecfdf5; --pub-ok-line:#a7f3d0; --pub-ok-ink:#05613f;
  --pub-warn-bg:#fffbeb; --pub-warn-line:#fcd97a; --pub-warn-ink:#7c4a06;
  --pub-danger-bg:#fef3f2; --pub-danger-line:#fdc9c3; --pub-danger-ink:#a12617;
  --pub-shadow:0 1px 2px rgba(15,23,42,.06), 0 16px 40px -16px rgba(15,23,42,.22);
  --pub-autofill-bg:#ffffff;
  --pub-autofill-ink:#1f2937;
}
[data-tema="grafite"]{
  color-scheme: dark;
  --pub-ground:#07090d;
  --pub-ground-glow:rgba(245,158,11,.32);
  --pub-card:rgba(20,24,33,.58);
  --pub-card-border:rgba(245,158,11,.14);
  --pub-ink:#f8fafc;
  --pub-body:#dce0e5;
  --pub-muted:#9ca3af;
  --pub-line:rgba(245,158,11,.14);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(245,158,11,.14);
  --pub-field-ink:#f8fafc;
  --pub-accent:#f59e0b;
  --pub-accent-hover:#f6ac2d;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(245,158,11,.32);
  --pub-orb-a:rgba(245,158,11,.32);
  --pub-orb-b:rgba(56,189,248,.22);
  --pub-orb-c:rgba(251,113,133,.18);
  --pub-orb-d:rgba(16,185,129,.4);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#16181c;
  --pub-autofill-ink:#f8fafc;
}
[data-tema="oceano"]{
  color-scheme: dark;
  --pub-ground:#031018;
  --pub-ground-glow:rgba(20,184,166,.3);
  --pub-card:rgba(5,25,38,.62);
  --pub-card-border:rgba(20,184,166,.16);
  --pub-ink:#ecfeff;
  --pub-body:#d0e8ee;
  --pub-muted:#8fb6c7;
  --pub-line:rgba(20,184,166,.16);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(20,184,166,.16);
  --pub-field-ink:#ecfeff;
  --pub-accent:#14b8a6;
  --pub-accent-hover:#35c2b2;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(20,184,166,.3);
  --pub-orb-a:rgba(20,184,166,.3);
  --pub-orb-b:rgba(34,211,238,.24);
  --pub-orb-c:rgba(244,63,94,.18);
  --pub-orb-d:rgba(16,185,129,.4);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#121e26;
  --pub-autofill-ink:#ecfeff;
}
[data-tema="noir"]{
  color-scheme: dark;
  --pub-ground:#08050a;
  --pub-ground-glow:rgba(236,72,153,.4);
  --pub-card:rgba(18,9,15,.55);
  --pub-card-border:rgba(236,72,153,.18);
  --pub-ink:#f7eef2;
  --pub-body:#dfd0d8;
  --pub-muted:#a68a9a;
  --pub-line:rgba(236,72,153,.18);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(236,72,153,.18);
  --pub-field-ink:#f7eef2;
  --pub-accent:#ec4899;
  --pub-accent-hover:#ef62a7;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(236,72,153,.4);
  --pub-orb-a:rgba(236,72,153,.4);
  --pub-orb-b:rgba(96,165,250,.22);
  --pub-orb-c:rgba(244,63,94,.3);
  --pub-orb-d:rgba(217,70,239,.22);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#171419;
  --pub-autofill-ink:#f7eef2;
}
[data-tema="aurora"]{
  color-scheme: dark;
  --pub-ground:#05030d;
  --pub-ground-glow:rgba(139,92,246,.42);
  --pub-card:rgba(16,11,32,.55);
  --pub-card-border:rgba(139,92,246,.22);
  --pub-ink:#f5f0ff;
  --pub-body:#ded7ef;
  --pub-muted:#a79bc9;
  --pub-line:rgba(139,92,246,.22);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(139,92,246,.22);
  --pub-field-ink:#f5f0ff;
  --pub-accent:#8b5cf6;
  --pub-accent-hover:#9b73f7;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(139,92,246,.42);
  --pub-orb-a:rgba(139,92,246,.42);
  --pub-orb-b:rgba(34,211,238,.3);
  --pub-orb-c:rgba(236,72,153,.32);
  --pub-orb-d:rgba(167,139,250,.24);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#14121c;
  --pub-autofill-ink:#f5f0ff;
}
[data-tema="gold"]{
  color-scheme: dark;
  --pub-ground:#0a0704;
  --pub-ground-glow:rgba(242,181,68,.36);
  --pub-card:rgba(22,17,8,.58);
  --pub-card-border:rgba(242,181,68,.2);
  --pub-ink:#fdf6e3;
  --pub-body:#e7ddc7;
  --pub-muted:#b3a486;
  --pub-line:rgba(242,181,68,.2);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(242,181,68,.2);
  --pub-field-ink:#fdf6e3;
  --pub-accent:#f2b544;
  --pub-accent-hover:#cb9839;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(242,181,68,.36);
  --pub-orb-a:rgba(242,181,68,.36);
  --pub-orb-b:rgba(244,213,141,.2);
  --pub-orb-c:rgba(194,65,12,.28);
  --pub-orb-d:rgba(250,204,21,.22);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#191613;
  --pub-autofill-ink:#fdf6e3;
}
[data-tema="midnight"]{
  color-scheme: dark;
  --pub-ground:#050810;
  --pub-ground-glow:rgba(99,102,241,.36);
  --pub-card:rgba(11,17,30,.58);
  --pub-card-border:rgba(99,102,241,.2);
  --pub-ink:#eef4fb;
  --pub-body:#d2dbe8;
  --pub-muted:#8fa0bd;
  --pub-line:rgba(99,102,241,.2);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(99,102,241,.2);
  --pub-field-ink:#eef4fb;
  --pub-accent:#6366f1;
  --pub-accent-hover:#797bf3;
  --pub-accent-ink:#ffffff;
  --pub-ring:rgba(99,102,241,.36);
  --pub-orb-a:rgba(99,102,241,.36);
  --pub-orb-b:rgba(56,189,248,.22);
  --pub-orb-c:rgba(244,63,94,.26);
  --pub-orb-d:rgba(165,180,252,.2);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#14171e;
  --pub-autofill-ink:#eef4fb;
}
[data-tema="neonglass"]{
  color-scheme: dark;
  --pub-ground:#050b16;
  --pub-ground-glow:rgba(255,47,146,.4);
  --pub-card:rgba(8,18,32,.32);
  --pub-card-border:rgba(255,47,146,.3);
  --pub-ink:#eaf7ff;
  --pub-body:#cadded;
  --pub-muted:#7fa0c4;
  --pub-line:rgba(255,47,146,.3);
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:rgba(255,47,146,.3);
  --pub-field-ink:#eaf7ff;
  --pub-accent:#ff2f92;
  --pub-accent-hover:#ff4ca1;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(255,47,146,.4);
  --pub-orb-a:rgba(255,47,146,.4);
  --pub-orb-b:rgba(29,233,255,.3);
  --pub-orb-c:rgba(255,95,168,.3);
  --pub-orb-d:rgba(45,252,212,.22);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#141a24;
  --pub-autofill-ink:#eaf7ff;
}
[data-tema="preto"]{
  color-scheme: dark;
  --pub-ground:#000000;
  --pub-ground-glow:rgba(250,250,250,.2);
  --pub-card:#171717;
  --pub-card-border:#262626;
  --pub-ink:#fafafa;
  --pub-body:#e0e0e0;
  --pub-muted:#a3a3a3;
  --pub-line:#262626;
  --pub-field:rgba(255,255,255,.05);
  --pub-field-border:#262626;
  --pub-field-ink:#fafafa;
  --pub-accent:#fafafa;
  --pub-accent-hover:#d2d2d2;
  --pub-accent-ink:#101418;
  --pub-ring:rgba(250,250,250,.2);
  --pub-orb-a:rgba(250,250,250,.2);
  --pub-orb-b:rgba(212,212,212,.16);
  --pub-orb-c:rgba(82,82,82,.28);
  --pub-orb-d:rgba(229,229,229,.18);
  --pub-ok-bg:#06241c; --pub-ok-line:#14563c; --pub-ok-ink:#6ee7b7;
  --pub-warn-bg:#291c05; --pub-warn-line:#6b4708; --pub-warn-ink:#fcd34d;
  --pub-danger-bg:#2b1211; --pub-danger-line:#6d2420; --pub-danger-ink:#fca5a5;
  --pub-shadow:0 1px 1px rgba(255,255,255,.05) inset, 0 18px 44px -14px rgba(0,0,0,.7);
  --pub-autofill-bg:#0f0f0f;
  --pub-autofill-ink:#fafafa;
}
[data-tema="branco"]{
  color-scheme: light;
  --pub-ground:#ffffff;
  --pub-ground-glow:rgba(23,23,23,.16);
  --pub-card:#f5f5f5;
  --pub-card-border:#e5e5e5;
  --pub-ink:#171717;
  --pub-body:#333333;
  --pub-muted:#737373;
  --pub-line:#e5e5e5;
  --pub-field:#ffffff;
  --pub-field-border:#e5e5e5;
  --pub-field-ink:#171717;
  --pub-accent:#171717;
  --pub-accent-hover:#373737;
  --pub-accent-ink:#ffffff;
  --pub-ring:rgba(23,23,23,.16);
  --pub-orb-a:rgba(23,23,23,.16);
  --pub-orb-b:rgba(64,64,64,.14);
  --pub-orb-c:rgba(115,115,115,.2);
  --pub-orb-d:rgba(23,23,23,.14);
  --pub-ok-bg:#ecfdf5; --pub-ok-line:#a7f3d0; --pub-ok-ink:#05613f;
  --pub-warn-bg:#fffbeb; --pub-warn-line:#fcd97a; --pub-warn-ink:#7c4a06;
  --pub-danger-bg:#fef3f2; --pub-danger-line:#fdc9c3; --pub-danger-ink:#a12617;
  --pub-shadow:0 1px 2px rgba(15,23,42,.06), 0 16px 40px -16px rgba(15,23,42,.22);
  --pub-autofill-bg:#ffffff;
  --pub-autofill-ink:#171717;
}

/* <<< FIM DOS TEMAS GERADOS */

/* ============================================================
   Casca
   ============================================================ */
body {
  /* Stack nativo: San Francisco no iOS/macOS, Segoe UI no Windows, Roboto no
     Android. Zero requisicao, zero FOUT, e a fonte que o aparelho usa em tudo. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pub-body);
  background: var(--pub-ground);
  /* Luz difusa no topo, sem cor forte: da profundidade ao fundo sem virar
     "gradiente de landing page". `no-repeat` e obrigatorio -- sem ele o
     radial se repete e aparecem faixas em tela alta. */
  background-image: radial-gradient(1100px 520px at 50% -12%, var(--pub-ground-glow), transparent 70%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

/* `column` porque o rodape legal e irmao do cartao: no eixo padrao (row) ele
   ficaria AO LADO, dividindo a largura. */
.venda-wrap {
  /* Acima do fundo animado, que e `position:fixed` no z-index 0. Sem isto as
     esferas passariam POR CIMA do cartao e do botao de comprar. */
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 18px 32px;
}

/* ALTURA E ORCAMENTO, NAO ESTETICA. O cartao de compra tinha 808px numa
   viewport de 720 (medido em 07/08/2026) e o botao "Comprar agora" nascia
   ABAIXO DA DOBRA: o comprador via preco e formulario e precisava rolar para
   achar como pagar. Ao acrescentar qualquer coisa acima do botao, MECA de novo
   -- e prefira por o conteudo novo depois dele.
   `margin:auto` no lugar de `align-items:center` no wrap: centra quando cabe e
   encosta no topo quando nao cabe, em vez de empurrar o inicio do cartao para
   fora da viewport. */
.venda-card {
  width: 100%;
  max-width: 520px;
  margin: auto;
  padding: 24px;
  background: var(--pub-card);
  border: 1px solid var(--pub-card-border);
  border-radius: var(--pub-radius);
  box-shadow: var(--pub-shadow);
}

@media (min-width: 560px) {
  .venda-card { padding: 30px 32px; }
}

/* ============================================================
   Cabecalho do cartao
   ============================================================ */

/* Faixa superior: quem vende (esquerda) e o selo de compra segura (direita).
   As duas coisas ocupam a linha que a identificacao da empresa ja ocupava --
   o selo entra sem custar altura, e altura aqui e orcamento (ver .venda-card). */
.venda-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--pub-line);
}

.venda-empresa {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--pub-ink);
  /* Margem para o uso SOLTO (paginas de erro: 404 de oferta, link de download
     vencido), onde nao existe faixa nem borda embaixo. Dentro de `.venda-topo`
     quem espaca e a faixa, e a regra abaixo zera esta. */
  margin-bottom: 14px;
  /* Nome digitado por operador: pode ser longo. Corta com reticencias em vez de
     empurrar o selo para fora do cartao. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venda-topo .venda-empresa { margin-bottom: 0; }

.venda-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--pub-muted);
}
/* Cadeado no tom do texto, nao verde: selo verde brilhante e o visual que os
   proprios sites de golpe imitam. Sobriedade comunica mais. */
.venda-selo svg { width: 13px; height: 13px; }

.venda-titulo {
  font-size: 23px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--pub-ink);
  margin-bottom: 8px;
}

@media (min-width: 560px) {
  .venda-titulo { font-size: 26px; }
}

.venda-desc {
  color: var(--pub-body);
  margin-bottom: 18px;
  /* A descricao vem do banco com as quebras que o operador digitou. */
  white-space: pre-line;
}

/* ---------- Preco ---------- */
.venda-preco {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pub-ink);
  /* Digito de largura fixa: sem isso "R$ 1.111,11" e "R$ 10,00" tem pesos
     visuais diferentes e o numero "dança" quando a pagina recarrega. */
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.venda-nota {
  font-size: 13px;
  color: var(--pub-muted);
}

/* ---------- Meios de pagamento ----------
   Vem de capabilities()->metodos do gateway da oferta, nunca de uma lista fixa:
   prometer boleto numa integracao que nao emite boleto e pior que nao prometer
   nada. Responde a duvida "como eu pagaria isso?" antes de ela existir. */
.venda-metodos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.venda-metodo {
  font-size: 12px;
  font-weight: 600;
  color: var(--pub-muted);
  border: 1px solid var(--pub-card-border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ============================================================
   Avisos
   ============================================================ */
.venda-aviso {
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid transparent;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.5;
}
.venda-aviso strong { font-weight: 650; }

.venda-aviso--bloqueio { background: var(--pub-danger-bg); border-color: var(--pub-danger-line); color: var(--pub-danger-ink); }
.venda-aviso--ok       { background: var(--pub-ok-bg);     border-color: var(--pub-ok-line);     color: var(--pub-ok-ink); }
/* Ambar, e nao vermelho: "aguardando pagamento" nao e erro. */
.venda-aviso--aguardando,
.venda-aviso--sandbox  { background: var(--pub-warn-bg);   border-color: var(--pub-warn-line);   color: var(--pub-warn-ink); }
/* `--aguardando` e `--sandbox` compartilham a aparencia mas NAO o nome: sao
   estados diferentes (um e o pedido do comprador esperando confirmacao, o outro
   e um alerta de ambiente de teste). Se um dia o aviso de sandbox precisar
   assustar mais, ele muda sozinho -- com um nome so, mexer em um mexeria no
   outro sem ninguem perceber. */

/* ============================================================
   Formulario
   ============================================================ */
.venda-form { margin-top: 20px; }

.venda-campo { margin-bottom: 12px; }

.venda-campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pub-ink);
  margin-bottom: 5px;
}

.venda-campo small { display: block; margin-top: 5px; }

.venda-campo input {
  width: 100%;
  /* 44px de altura util: o minimo confortavel para o dedo em tela de celular,
     que e onde a maior parte das compras acontece. */
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 15px;
  background: var(--pub-field);
  border: 1px solid var(--pub-field-border);
  color: var(--pub-field-ink);
  transition: border-color .15s, box-shadow .15s;
}

.venda-campo input::placeholder { color: var(--pub-muted); opacity: .8; }

.venda-campo input:focus {
  outline: none;
  border-color: var(--pub-accent);
  box-shadow: 0 0 0 4px var(--pub-ring);
}

/* Campo que o navegador reprovou, e SO depois de o comprador ter interagido com
   ele. `:invalid` puro pintaria de vermelho todos os obrigatorios ainda vazios no
   primeiro instante da pagina -- "voce errou" antes de digitar, num formulario de
   pagamento que ja estava com problema de credibilidade.
   `:user-invalid` e exatamente essa distincao, e e o comportamento nativo: o
   navegador so o aplica depois de o campo ser editado ou de um submit falhar.

   A TENTATIVA ANTERIOR ERA `:not(:placeholder-shown):invalid` E ESTAVA ERRADA:
   nenhum destes campos tem `placeholder`, e sem placeholder `:placeholder-shown`
   nunca casa -- logo `:not(:placeholder-shown)` e sempre verdadeiro e a regra
   pintava tudo de vermelho na carga. Pego no Browser pane em 17/08/2026 medindo
   `borderColor` do campo Nome numa pagina recem-aberta.

   Em navegador antigo que nao conheca `:user-invalid` a regra e simplesmente
   ignorada, e o campo nunca fica vermelho -- degradacao na direcao certa. Por
   isso ela mora numa regra SOZINHA: numa lista de seletores, um seletor
   desconhecido invalida a regra inteira, inclusive as partes suportadas.

   O QUE FOI VERIFICADO: que nenhum campo nasce vermelho, e que o navegador
   suporta o seletor (`CSS.supports('selector(:user-invalid)')`). O estado
   vermelho EM SI nao foi: ele exige gesto real do usuario, e nem
   `requestSubmit()` nem `execCommand('insertText')` levantam a marca de
   "interagido" -- o clique de verdade no botao levanta. Confirme junto do
   proximo teste manual de compra. */
.venda-campo input:user-invalid {
  border-color: var(--pub-danger-line);
}

/* AUTOPREENCHIMENTO. O navegador pinta o campo preenchido com fundo e cor de
   texto proprios e IGNORA `background`/`color`. Nao ha propriedade para
   desligar: a saida conhecida e um `box-shadow` INSET grosso o bastante para
   cobrir a area, que o navegador desenha por cima do fundo dele.

   COR SOLIDA, e nao `color-mix()`: valor que o navegador nao entende faz a
   declaracao INTEIRA ser descartada, e ai o campo autopreenchido volta a ser
   branco sobre cartao escuro -- exatamente o que foi visto no Safari do iOS
   (HANDOFF 1.1). Aqui o tema claro e o padrao, entao mesmo o pior caso (a
   regra ser ignorada) cai num campo claro dentro de um cartao claro.

   O `transition` de 600000s e o segundo cinto: em versoes que ANIMAM a cor de
   fundo, adiar a animacao para daqui a uma semana equivale a nunca aplica-la. */
.venda-campo input:-webkit-autofill,
.venda-campo input:-webkit-autofill:hover,
.venda-campo input:-webkit-autofill:focus,
.venda-campo input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--pub-autofill-ink);
  -webkit-box-shadow: 0 0 0 60px var(--pub-autofill-bg) inset;
  caret-color: var(--pub-autofill-ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Os dois campos curtos dividem a linha para o cartao caber na viewport. O
   ponto de corte e 520px e nao um breakpoint do design system de proposito: o
   que decide aqui e a largura em que dois inputs ainda sao usaveis lado a lado,
   nao o tamanho do aparelho. */
@media (min-width: 520px) {
  .venda-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
}

/* ============================================================
   Acao
   ============================================================ */

/* Todo botao destas paginas e uma acao unica de largura cheia -- comprar, pagar,
   baixar, acessar, retentar. Por isso a largura mora na propria classe: nao ha
   caso de botao inline aqui, e um `.venda-btn` solto no meio de um texto seria
   o sintoma de um problema de layout, nao um uso valido. */
.venda-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  background: var(--pub-accent);
  color: var(--pub-accent-ink);
  font-size: 16px;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18);
  transition: background-color .15s, transform .08s, box-shadow .15s;
}

.venda-btn:hover  { background: var(--pub-accent-hover); }
.venda-btn:active { transform: translateY(1px); box-shadow: none; }
.venda-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--pub-ring);
}

/* Espacamento do bloco de acao. Vale para o botao e para o `<form>` que envolve
   o botao de retentativa em /p -- e por isso e uma classe de margem, separada
   da aparencia do botao. */
.venda-acao { margin-top: 16px; }

/* Aceite POR ACAO, sem checkbox: tem a mesma validade e nao acrescenta um
   clique no ponto do funil de onde a rolagem acabou de ser tirada. Fica DEPOIS
   do botao de proposito -- antes dele, empurraria o botao para baixo de novo. */
.venda-aceite {
  font-size: 12px;
  color: var(--pub-muted);
  line-height: 1.5;
  margin-top: 14px;
  text-align: center;
}
.venda-aceite a { color: var(--pub-muted); text-decoration: underline; }
.venda-aceite a:hover { color: var(--pub-ink); }

/* ============================================================
   Linhas de resumo (/p)
   ============================================================ */
.venda-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pub-line);
  font-size: 14px;
}
.venda-linha:last-of-type { border-bottom: none; }
.venda-linha span { color: var(--pub-muted); }
.venda-linha strong {
  text-align: right;
  font-weight: 600;
  color: var(--pub-ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Confianca -- o bloco que responde "isso aqui e serio?"

   Fica DEPOIS do botao de proposito. Quem ja decidiu comprar nao precisa
   rolar por cima disso; quem desconfiou rola procurando exatamente isto.
   ============================================================ */
.venda-confianca {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--pub-line);
}

/* Os tres passos do que acontece depois do pagamento. A duvida que trava a
   compra de um infoproduto nunca e "quanto custa", e "eu vou receber?". */
.venda-passos {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 480px) {
  .venda-passos { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

.venda-passo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--pub-muted);
}

.venda-passo b {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--pub-accent);
  color: var(--pub-accent-ink);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  /* O circulo alinha com a primeira LINHA do texto, nao com o centro do bloco:
     em duas linhas o centro fica no meio das duas e parece desalinhado. */
  margin-top: 1px;
}

.venda-garantia {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pub-muted);
  margin-top: 7px;
}

.venda-garantia svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--pub-muted);
}

.venda-garantia a { color: var(--pub-muted); text-decoration: underline; }
.venda-garantia a:hover { color: var(--pub-ink); }
.venda-garantia strong { color: var(--pub-body); font-weight: 600; }

/* ============================================================
   Rodape legal (todas as paginas publicas)
   ============================================================ */
.venda-rodape {
  margin: 20px auto 0;
  padding: 0 8px;
  text-align: center;
  font-size: 12px;
  color: var(--pub-muted);
  line-height: 2;
}
.venda-rodape a { color: var(--pub-muted); text-decoration: underline; }
.venda-rodape a:hover { color: var(--pub-ink); }
.venda-rodape span { margin: 0 6px; opacity: .45; }

/* ============================================================
   Documentos legais
   ============================================================ */
/* Cartao mais largo que o de compra: 520px e a medida boa para um FORMULARIO e
   curta demais para texto corrido -- linha curta cansa tanto quanto linha
   longa. */
.venda-card--legal { max-width: 760px; }

.legal-atualizado { font-size: 12px; color: var(--pub-muted); margin: 4px 0 22px; }
.legal-doc h2 { font-size: 16px; font-weight: 650; color: var(--pub-ink); margin: 26px 0 8px; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p, .legal-doc li { line-height: 1.68; margin: 0 0 10px; }
.legal-doc ul { margin: 0 0 10px; padding-left: 20px; }
.legal-doc strong { color: var(--pub-ink); font-weight: 600; }
.legal-doc a { color: var(--pub-accent); }
.legal-voltar { display: inline-block; margin-top: 24px; font-size: 13px; color: var(--pub-accent); }

/* ============================================================
   FUNDO DA PAGINA -- escolhido por oferta (coluna offers.fundo)

   O painel faz isto em JavaScript (`renderBgOrbs()` em app.js, 6 esferas com
   posicao calculada em tempo de execucao). AQUI NAO PODE: a CSP das paginas
   publicas e `script-src 'none'`, e ela nao vai ser afrouxada -- e a defesa mais
   forte da unica pagina que um estranho abre, e que exibe texto digitado por
   operador de empresa.

   Entao as esferas sao CSS puro: o PHP emite os `<i>` vazios e cada posicao vem
   de um `:nth-child`. Perde-se a quantidade/velocidade configuraveis do painel;
   ganha-se um fundo que funciona sem uma linha de script.

   TAMANHO EM `vmin` e proposital. O painel calcula ~470px fixos, o que num
   celular de 375px vira uma mancha ocupando a tela inteira. `62vmin` acompanha o
   aparelho: 232px no celular, ~496px no desktop.
   ============================================================ */
.venda-fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.venda-fundo i {
  position: absolute;
  display: block;
  width: 62vmin;
  height: 62vmin;
  margin: -31vmin 0 0 -31vmin;
  border-radius: 50%;
  will-change: transform;
  animation: pub-deriva-a 21s ease-in-out infinite;
}

/* Posicoes espalhadas pelo angulo aureo, como no painel -- distribui sem alinhar
   em grade e sem duas esferas nascerem uma em cima da outra. */
.venda-fundo i:nth-child(1) { left: 66%; top: 51%; background: radial-gradient(circle, var(--pub-orb-a), transparent 70%); animation-duration: 19s; animation-delay: -1.7s; }
.venda-fundo i:nth-child(2) { left: 28%; top: 72%; background: radial-gradient(circle, var(--pub-orb-b), transparent 70%); animation-name: pub-deriva-b; animation-duration: 24s; animation-delay: -5.1s; }
.venda-fundo i:nth-child(3) { left: 72%; top: 22%; background: radial-gradient(circle, var(--pub-orb-c), transparent 70%); animation-name: pub-deriva-c; animation-duration: 27s; animation-delay: -8.5s; }
.venda-fundo i:nth-child(4) { left: 18%; top: 24%; background: radial-gradient(circle, var(--pub-orb-d), transparent 70%); animation-duration: 22s; animation-delay: -11.9s; }
.venda-fundo i:nth-child(5) { left: 50%; top: 88%; background: radial-gradient(circle, var(--pub-orb-b), transparent 70%); animation-name: pub-deriva-c; animation-duration: 30s; animation-delay: -15.3s; }
.venda-fundo i:nth-child(6) { left: 88%; top: 78%; background: radial-gradient(circle, var(--pub-orb-c), transparent 70%); animation-name: pub-deriva-b; animation-duration: 26s; animation-delay: -18.7s; }

/* `translate3d` e `scale` apenas: as duas propriedades que o navegador anima na
   GPU sem recalcular layout. Animar `left`/`top` daria o mesmo efeito visual e
   repintaria a pagina inteira 60 vezes por segundo atras do formulario. */
@keyframes pub-deriva-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(5%, -7%, 0) scale(1.14); }
}
@keyframes pub-deriva-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50%      { transform: translate3d(-6%, 5%, 0) scale(.92); }
}
@keyframes pub-deriva-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.96); }
  50%      { transform: translate3d(4%, 6%, 0) scale(1.1); }
}

/* Grade sutil -- alternativa estatica a malha, para quem quer textura sem
   movimento. Vai no `body` porque nao precisa de elemento nenhum. */
body[data-fundo="grade"] {
  background-image:
    linear-gradient(var(--pub-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pub-line) 1px, transparent 1px),
    radial-gradient(1100px 520px at 50% -12%, var(--pub-ground-glow), transparent 70%);
  background-size: 46px 46px, 46px 46px, auto;
}

/* Cartao translucido quando um tema do painel esta aplicado: os temas trazem
   `--panel-bg` com alfa, e sem o desfoque o fundo animado aparece nitido ATRAS
   do texto do formulario, que fica ilegivel. O atributo so existe quando o
   vendedor escolheu um tema -- ver publico_pagina_inicio(). */
[data-tema] .venda-card {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* ============================================================
   Preferencias do sistema
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* `animation` junto de `transition`: o fundo em malha e animacao infinita, e
     para quem pede menos movimento ela e exatamente o que incomoda. As esferas
     continuam desenhadas -- so param. */
  * { transition: none !important; animation: none !important; }
}