/* propostas.css - gerador de propostas embutido no SaaS.
   Gerado a partir do antigo proposta.html (iframe), com TODOS os seletores escopados
   em #pgen. O escopo e obrigatorio: o gerador usa :root, *, body, input, button e
   select, que sem prefixo reestilizariam o SaaS inteiro.
   Removidos: as regras .in-iframe (nao ha mais iframe) e o @media print. */
#pgen{--cy:#0ea5e9; --cy2:#38bdf8; --cy-glow:rgba(14,165,233,.35);
    --nav-1:#080e1a; --nav-2:#0a1d39; --nav-3:#0e2448;
    --nav-ink:#e2ecfa; --nav-muted:#8ea3c4; --nav-faint:#5a7194;
    --nav-field:rgba(255,255,255,.05); --nav-line:rgba(56,189,248,.10);
    --nav-card:rgba(255,255,255,.04); --nav-card-bd:rgba(255,255,255,.08);
    --ink:#0f172a; --radius:10px;
    --ring:0 0 0 3px rgba(14,165,233,.32);
    --shadow-btn:0 4px 14px rgba(14,165,233,.4);}
#pgen *{box-sizing:border-box;}
#pgen{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:#0c1525; color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
/* A altura desconta o cabeçalho do SaaS — era o que o iframe fazia com
   calc(100vh - 160px). Sem isso o gerador passaria da dobra por causa do header. */
#pgen .app{display:grid; grid-template-columns:350px 1fr; grid-template-rows:auto 1fr;
           height:calc(100vh - 160px); height:calc(100dvh - 160px); min-height:640px;}
/* ── Header / branding ── */
#pgen .topbar{grid-column:1 / -1; position:relative; z-index:2; display:flex; align-items:center; gap:12px; height:52px; padding:0 20px; background:linear-gradient(90deg,var(--nav-1),var(--nav-2)); border-bottom:1px solid rgba(56,189,248,.08); box-shadow:0 2px 20px rgba(0,0,0,.35); color:#fff;}
#pgen .brand{display:flex; align-items:center; gap:12px;}
#pgen .brand-mark{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; color:#04121f; background:linear-gradient(135deg,var(--cy2),var(--cy)); box-shadow:0 4px 14px var(--cy-glow);}
#pgen .brand-text{display:flex; flex-direction:column; line-height:1.25;}
#pgen .brand-text strong{font-size:13.5px; font-weight:700; letter-spacing:-.01em;}
#pgen .brand-text span{font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--cy2);}
#pgen .panel{padding:16px; overflow-y:auto; min-height:0;}
#pgen .panel::-webkit-scrollbar{width:6px;}
#pgen .panel::-webkit-scrollbar-track{background:transparent;}
#pgen .panel::-webkit-scrollbar-thumb{border-radius:3px; background:rgba(56,189,248,.15);}
#pgen .panel::-webkit-scrollbar-thumb:hover{background:rgba(56,189,248,.3);}
#pgen .form::-webkit-scrollbar-thumb{background:rgba(56,189,248,.15);}
#pgen .form::-webkit-scrollbar-thumb:hover{background:rgba(56,189,248,.3);}
#pgen .preview-wrap::-webkit-scrollbar-thumb{background:rgba(14,165,233,.2);}
#pgen .preview-wrap::-webkit-scrollbar-thumb:hover{background:rgba(14,165,233,.35);}
#pgen .form{background:linear-gradient(180deg,var(--nav-1) 0%,var(--nav-2) 40%,var(--nav-3) 100%); border-right:1px solid rgba(56,189,248,.06); color:var(--nav-ink); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
#pgen #formExcel{display:flex; flex-direction:column; height:100%; gap:0;}
#pgen #formExcel .card{flex:1; display:flex; flex-direction:column;}
#pgen .form h2{font-size:9.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; margin:0 0 10px; padding-bottom:7px; border-bottom:1px solid var(--nav-line); display:flex; align-items:center; gap:7px;}
#pgen .sec-ic{width:15px; height:15px; flex:0 0 auto;}
#pgen .consul-btn-row label .sec-ic{vertical-align:-3px; margin-right:6px;}
#pgen .card{background:var(--nav-card); border:1px solid var(--nav-card-bd); border-radius:12px; padding:12px 14px 14px; margin-bottom:8px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:border-color .2s cubic-bezier(.4,0,.2,1), background-color .2s cubic-bezier(.4,0,.2,1), box-shadow .2s; border-left:3px solid rgba(255,255,255,.06);}
#pgen .card:hover{background-color:rgba(255,255,255,.06); box-shadow:0 4px 20px -8px rgba(14,165,233,.12);}
#pgen .card-cy{border-left-color:var(--cy); position:relative; z-index:20;}
#pgen .card-cy h2{color:var(--cy2);}
#pgen .card-cy:hover{border-color:var(--nav-card-bd); border-left-color:var(--cy2);}
#pgen .card-am{border-left-color:#f59e0b;}
#pgen .card-am h2{color:#fbbf24;}
#pgen .card-am:hover{border-color:var(--nav-card-bd); border-left-color:#fbbf24;}
#pgen .card-gn{border-left-color:#22c55e;}
#pgen .card-gn h2{color:#4ade80;}
#pgen .card-gn:hover{border-color:var(--nav-card-bd); border-left-color:#4ade80;}
#pgen label{display:block; font-size:11px; font-weight:600; color:var(--nav-muted); margin:8px 0 4px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#pgen input,#pgen textarea,#pgen select{width:100%; min-width:0; box-sizing:border-box; padding:8px 11px; border:1px solid var(--nav-line); border-radius:var(--radius); font-size:12.5px; font-family:inherit; color:var(--nav-ink); background-color:var(--nav-field); color-scheme:dark; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;}
#pgen input:hover,#pgen textarea:hover,#pgen select:hover{border-color:rgba(56,189,248,.25); background-color:rgba(255,255,255,.07);}
#pgen input:focus,#pgen textarea:focus,#pgen select:focus{outline:none; border-color:var(--cy); background-color:rgba(14,165,233,.08); box-shadow:var(--ring);}
#pgen input::placeholder,#pgen textarea::placeholder{color:var(--nav-faint);}
#pgen select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:30px; 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='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center;}
#pgen select option{background-color:var(--nav-2); color:var(--nav-ink);}
#pgen textarea{resize:vertical; min-height:56px; line-height:1.5;}
#pgen .row{display:flex; gap:8px;}
#pgen .row > *{flex:1; min-width:0;}
/* A coluna do formulário do gerador tem ~280px — as 2 pílulas de "Preencher com"
   (destModo) não cabem lado a lado no tamanho natural e quebram. Aqui forçamos as
   duas a dividir a linha meio a meio. Escopado em #pgen: não afeta o trilho de
   negociações (4 pílulas, que devem quebrar em 2×2 num modal largo). */
#pgen .sg button{flex:1 1 0; min-width:0;}
#pgen .row3{display:flex; gap:8px;}
#pgen .row3 > *{flex:1; min-width:0;}
#pgen .consul-btn-row{display:flex; gap:10px; align-items:flex-end; margin-top:auto; padding-top:10px; border-top:1px solid var(--nav-line);}
#pgen .consul-btn-row > *:first-child{flex:1;}
#pgen .consul-btn-row .btn{margin-top:0; width:auto; white-space:nowrap;}
#pgen .consul-btn-row label{color:var(--cy2);}
#pgen .btn{background:linear-gradient(135deg,var(--cy2),var(--cy)); color:#04121f; border:none; padding:10px 14px; border-radius:var(--radius); font-size:12.5px; font-weight:700; letter-spacing:.01em; cursor:pointer; width:100%; margin-top:16px; box-shadow:var(--shadow-btn); transition:filter .18s ease, box-shadow .18s ease, transform .08s ease;}
#pgen .btn:hover{filter:brightness(1.1); box-shadow:0 6px 22px var(--cy-glow);}
#pgen .btn:active{transform:translateY(1px);}
#pgen .btn:focus-visible{outline:none; box-shadow:var(--ring);}
/* Preview */
#pgen .preview-wrap{background:linear-gradient(180deg,#0f1b2e,#0c1525); padding:16px 12px; overflow-x:auto;}
#pgen #doc{background:#fff; width:210mm; height:297mm; min-height:297mm; overflow:hidden; margin:0 auto; padding:18mm 16mm; box-shadow:0 4px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(56,189,248,.06); border-radius:4px; font-size:13px; color:#1f2937; transform-origin:top center;}
/* ── Layout Excelência ── */
#pgen #doc.excel{padding:0; display:flex; flex-direction:column;}
#pgen #doc.excel .ex-band{width:100%; height:auto; display:block;}
#pgen #doc.excel .ex-body{flex:1; padding:12mm 15mm; font-size:13px; line-height:1.55; color:#1f2937;}
#pgen #doc.excel .ex-date{text-align:right; font-weight:700; font-size:12px; margin-bottom:16px;}
#pgen #doc.excel .ex-to{margin:0 0 14px;}
#pgen #doc.excel .ex-par{text-align:justify; margin:0 0 14px;}
#pgen #doc.excel .ex-price{width:100%; border-collapse:collapse; margin:16px 0; font-size:12.5px;}
#pgen #doc.excel .ex-price th,#pgen #doc.excel .ex-price td{border:1px solid #333; padding:7px 9px;}
#pgen #doc.excel .ex-price th{text-align:center; font-weight:700;}
#pgen #doc.excel .ex-price tr.c td{text-align:center; font-weight:700;}
#pgen #doc.excel .ex-price td.full{text-align:left;}
#pgen #doc.excel .ex-price td.it{font-style:italic; font-size:11.5px;}
#pgen #doc.excel .ex-price td.lbl{text-align:left;}
#pgen #doc.excel .ex-sign{display:flex; justify-content:space-between; gap:24px; margin-top:24px;}
#pgen #doc.excel .ex-bank{border:1px solid #333; padding:10px 14px; font-size:11.5px; line-height:1.6; text-align:center; flex:0 1 48%;}
#pgen #doc.excel .ex-bank .cnpj{font-size:10px;}
#pgen #doc.excel .ex-bank b{display:block;}
#pgen #doc.excel .ex-seller{text-align:center; font-size:12px; line-height:1.7; padding-top:16px; flex:0 1 48%;}
#pgen #doc.excel .ex-seller b{display:block; font-size:13px;}
#pgen #doc.excel .ex-seller a{color:#2563eb; display:block; word-break:break-all;}
#pgen #doc.excel .ex-seller span{display:block;}
/* Cortesia — linha destacada na tabela */
#pgen #doc.excel .ex-price tr.courtesy td{background:#ecfdf5; color:#065f46; font-weight:700; text-align:center; letter-spacing:.05em;}
/* Cortesia — toggle no formulário */
#pgen .courtesy-toggle{display:flex; align-items:center; gap:10px; padding:10px 12px; margin-top:12px; border:1px solid var(--nav-line); border-radius:var(--radius); background:var(--nav-card); cursor:pointer; transition:border-color .2s ease, background-color .2s ease, box-shadow .2s;}
#pgen .courtesy-toggle:hover{border-color:rgba(56,189,248,.18); background-color:rgba(255,255,255,.06);}
#pgen .courtesy-toggle input[type=checkbox]{width:16px; height:16px; margin:0; cursor:pointer; accent-color:#16a34a; flex:0 0 auto;}
#pgen .courtesy-toggle label{margin:0; font-size:12.5px; font-weight:600; color:var(--nav-ink); cursor:pointer; flex:1;}
#pgen .courtesy-toggle .hint{font-size:11px; color:var(--nav-muted); font-weight:400; display:block; margin-top:2px;}
#pgen .courtesy-toggle.active{border-color:rgba(22,163,74,.4); background:rgba(22,163,74,.10); box-shadow:0 0 0 1px rgba(22,163,74,.2) inset;}
#pgen .courtesy-toggle.active label{color:#bbf7d0;}
#pgen .courtesy-toggle .courtesy-qty{display:none; align-items:center; gap:6px; font-size:11.5px; color:#bbf7d0; flex:0 0 auto;}
#pgen .courtesy-toggle .courtesy-qty input{width:60px; padding:5px 8px; font-size:12px; margin:0;}
#pgen .courtesy-toggle.active .courtesy-qty{display:flex;}
#pgen .discount-group.disabled{opacity:.4; pointer-events:none;}
#pgen .discount-group.disabled input,#pgen .discount-group.disabled select{cursor:not-allowed;}
#pgen .org-sug{display:none; position:absolute; left:0; right:0; top:100%; background:var(--nav-2); border:1px solid rgba(56,189,248,.12); border-radius:var(--radius); max-height:180px; overflow-y:auto; z-index:50; box-shadow:0 8px 28px rgba(0,0,0,.5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
#pgen .org-sug-item{padding:8px 11px; font-size:12px; color:var(--nav-ink); cursor:pointer; border-bottom:1px solid rgba(56,189,248,.06); transition:background .12s;}
#pgen .org-sug-item:hover{background:rgba(14,165,233,.1);}
/* ── Mobile 768px — stack layout ── */
@media(max-width:768px){
  /* MEDIDAS NO CELULAR — duas correções que só têm efeito em aparelho real:
       1) 100dvh (dynamic viewport height): no Safari do iPhone, 100vh é a altura SEM a
          barra de endereço, ou seja, sempre maior que a área visível — o layout fica mais
          alto que a tela. dvh acompanha a altura realmente visível. A linha 100vh fica
          como fallback para navegadores antigos (a de baixo vence onde há suporte).
       2) env(safe-area-inset-*): a página declara viewport-fit=cover, que manda o iOS
          estender o conteúdo por baixo do notch/Dynamic Island e da barra de gestos.
          Sem compensar os insets, o conteúdo fica embaixo deles — cortado nas laterais
          e no rodapé. Em tela sem notch (desktop/Android comum) os insets valem 0 e
          estas regras não mudam nada. */
  #pgen .app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;height:auto;min-height:0;
         padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
         padding-bottom:env(safe-area-inset-bottom,0px)}
  /* Trava de largura: o A4 do preview tem 794px de layout. Sem isto ele empurra o
       container e o app corta na lateral (body tem overflow-x:clip). #doc/#docScaler
       ficam de fora de propósito — o A4 precisa manter 794px, quem encolhe é o zoom. */
  /* NÃO incluir #doc/#docScaler aqui: o A4 precisa manter 794px de layout (quem
       encolhe é o zoom do fitPreview). Capar a largura deles faria o documento refluir
       e o preview deixaria de corresponder ao PDF. */
  #pgen .app,#pgen .panel,#pgen .preview-wrap{max-width:100%}
  #pgen .preview-wrap{overflow-x:hidden}
  #pgen .form{border-right:none;border-bottom:1px solid rgba(56,189,248,.06)}
  #pgen .preview-wrap{padding:16px 10px}
  /* O #doc NÃO é reflowado no mobile: ele continua A4 real (210x297mm) e o
       fitPreview() o reduz com transform:scale(). Assim a pré-visualização é uma
       miniatura FIEL — mesmas quebras de linha do desktop e do PDF. Redimensionar
       o documento aqui (width:100%/font menor) fazia o preview não corresponder ao
       documento gerado. */
  #pgen .topbar{height:48px;padding:0 14px;gap:8px}
  #pgen .brand-mark{width:26px;height:26px;font-size:15px;border-radius:7px}
  #pgen .brand-text strong{font-size:12px}
  #pgen .brand-text span{font-size:9px}
}
/* ── Mobile 640px — touch-friendly form ── */
@media(max-width:640px){
  #pgen .panel{padding:14px 12px 18px}
  /* ── Aparência de app nativo ──
     No celular as seções deixam de ser cartões: o cabeçalho (ícone colorido +
     título + fio) já agrupa, e a caixa em volta só empilhava molduras — eram três
     aninhadas (.ct + .eq-cc + .card), ~92px dos 430 da tela só em borda.
     A identidade de cada seção continua na COR do ícone e do título (azul,
     âmbar, verde), como faz um formulário de iOS. */
  #pgen .form h2{font-size:10.5px;letter-spacing:1.4px;margin:0 0 10px;padding-bottom:8px}
  #pgen .card{background-color:transparent;background-image:none;border:0;border-radius:0;
    padding:0;margin:0 0 20px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  #pgen .card:hover{background-color:transparent;box-shadow:none}
  #pgen label{font-size:11px;margin:7px 0 3px}
  /* 44px e 16px sao pisos, nao escolhas de estilo: 44px e o alvo minimo de toque
     (Apple HIG) e abaixo de 16px o Safari do iOS da zoom automatico ao focar. */
  #pgen input,#pgen textarea,#pgen select{padding:8px 10px;font-size:16px;border-radius:8px;min-height:44px}
  #pgen select{padding-right:32px;background-position:right 10px center}
  #pgen textarea{min-height:60px}
  /* Largura do campo = tamanho esperado do conteúdo.
     Estas linhas empilhavam TODOS os pares que o HTML já define em .row, e aí um
     campo de 2 dígitos ("Carga horária: 16") ficava com a largura inteira da tela —
     era o que deixava o formulário com 1460px de altura. Mantendo os pares, cai
     para ~990px sem encolher alvo de toque (44px) nem fonte (16px). */
  #pgen .row{flex-direction:row;gap:8px}
  #pgen .row > *{flex:1 1 0;min-width:0}
  /* .row3 = Prezado | Cidade | Data. Três colunas em 430px dariam ~110px cada e o
     seletor de data nativo (mín. ~136px) não caberia: Prezado ocupa a linha e os
     dois curtos dividem a de baixo. Grid porque flex-wrap aqui é imprevisível. */
  /* minmax(0,…) e obrigatorio: `1fr` equivale a `minmax(auto,1fr)`, e esse minimo
     `auto` impede a coluna de encolher abaixo do conteudo. O seletor de data nativo
     do iOS escreve "19 de jul. de 2026" (~174px) contra "19/07/2026" (~127px) do
     Chrome — a coluna esticava, empurrava o grid para fora e a pagina arrastava de
     lado. Com minmax(0,…) a coluna pode encolher e o campo se ajusta.
     A data tambem ganha a fatia maior (1.15 contra 0.85) pelo mesmo motivo. */
  #pgen .row3{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:8px}
  #pgen .row3 > *:first-child{grid-column:1 / -1}
  /* linhas com texto longo não dividem (ver .row-wide no pgenHTML) */
  #pgen .row.row-wide{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  /* rede de seguranca: nada dentro do formulario pode ditar largura maior que a tela */
  #pgen .panel.form{overflow-x:hidden}
  #pgen .btn{padding:14px 16px;font-size:14px;border-radius:10px;min-height:48px;margin-top:12px}
  /* consultor e botao PDF lado a lado: a acao principal fica junto da assinatura */
  #pgen .consul-btn-row{flex-direction:row;gap:8px;align-items:flex-end;padding-top:10px}
  #pgen .consul-btn-row .btn{width:auto;flex:0 0 auto}
  #pgen .courtesy-toggle{padding:12px 14px;gap:10px;border-radius:10px}
  #pgen .courtesy-toggle label{font-size:13px}
  #pgen .courtesy-toggle input[type=checkbox]{width:20px;height:20px}
  #pgen .courtesy-toggle .courtesy-qty input{width:56px;padding:8px;font-size:14px;min-height:40px}
  #pgen .courtesy-toggle .courtesy-qty{font-size:12px;gap:6px}
  #pgen .discount-group .row{flex-direction:row;gap:8px}
  #pgen .org-sug-item{padding:12px 14px;font-size:14px;min-height:44px;display:flex;align-items:center}
  #pgen .org-sug{border-radius:10px;max-height:200px}
  #pgen #formExcel .card{flex:none}
  #pgen #formExcel{height:auto}
}
/* ── Mobile 430px — iPhone Pro Max fine-tuning ── */
@media(max-width:430px){
  #pgen .panel{padding:12px 10px 16px}
  /* NÃO reintroduzir caixa no card aqui: o bloco de 640px acima o deixa sem moldura
     (estilo nativo) e esta media query, sendo mais específica na largura, desfaria
     isso justamente na tela do iPhone. Só o espaçamento entre seções é ajustado. */
  #pgen .card{margin:0 0 18px}
  #pgen .form h2{font-size:9.5px}
  #pgen label{font-size:11.5px;margin:8px 0 4px}
  #pgen input,#pgen textarea,#pgen select{padding:10px 10px;font-size:16px}
  #pgen .btn{padding:12px 14px;font-size:13.5px}
  #pgen .topbar{height:44px;padding:0 10px}
  #pgen .brand-mark{width:24px;height:24px;font-size:14px;border-radius:6px}
  #pgen .brand-text strong{font-size:11.5px}
  #pgen .brand-text span{font-size:8.5px;letter-spacing:.4px}
  /* idem 768px: #doc fica intocado (A4 real) — quem encolhe é o fitPreview() */
  #pgen .preview-wrap{padding:12px 6px}
}
/* UI/UX Pro Max */
#pgen a,#pgen button,#pgen input,#pgen select,#pgen textarea{touch-action:manipulation}
#pgen::selection{background:var(--cy);color:#fff}
#pgen::-moz-selection{background:var(--cy);color:#fff}
#pgen .btn:disabled,#pgen button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
#pgen .btn.loading{pointer-events:none;opacity:.7;color:transparent!important;position:relative}
#pgen .btn.loading::after{content:'';position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:pgen-sp .7s linear infinite}
@keyframes pgen-sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  #pgen *,#pgen *::before,#pgen *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ══ Layout do gerador dentro do SaaS ══════════════════════════════════════
   A moldura eq-cc (eyebrow + h1 + lead) saiu daqui: era decorativa e custava
   ~130px da altura do preview A4. Sobra uma barra compacta com as abas. */
.pgen-shell{display:flex; flex-direction:column; gap:8px;}
.pgen-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.pgen-bar .eq-tabs{margin:0;}
.pgen-fs{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; cursor:pointer;
  padding:7px 12px; border-radius:8px; font-size:12.5px; font-weight:600; font-family:inherit;
  color:var(--sb); background:var(--wh); border:1px solid var(--bd);
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;}
.pgen-fs:hover{background:var(--az); color:#fff; border-color:var(--az);}
.pgen-fs svg{width:13px; height:13px;}
/* no celular o modo foco não aparece: o layout já empilha e esconder o cabeçalho
   tiraria a única forma de voltar */
@media(max-width:880px){ .pgen-fs{display:none;} }

/* ══ Modo foco ═════════════════════════════════════════════════════════════ */
body.pgen-fs-on header,
body.pgen-fs-on .nv,
body.pgen-fs-on .navbk,
body.pgen-fs-on .pgen-bar,
body.pgen-fs-on .fxh{display:none !important;}
body.pgen-fs-on{overflow:hidden;}
body.pgen-fs-on .ct{padding:0 !important; max-width:none !important;}
body.pgen-fs-on #pgen{position:fixed; inset:0; z-index:9000; background:#0c1525;
  padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px);}
body.pgen-fs-on #pgen .app{height:100vh; height:100dvh; min-height:0;}
#pgenFsSair{position:fixed; top:calc(12px + env(safe-area-inset-top,0px)); right:calc(12px + env(safe-area-inset-right,0px));
  z-index:9010; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:7px 12px; border-radius:8px; font-size:12.5px; font-weight:600; font-family:inherit;
  color:#e2ecfa; background:rgba(10,29,57,.9); border:1px solid rgba(56,189,248,.28);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background-color .16s ease, border-color .16s ease;}
#pgenFsSair:hover{background:rgba(14,165,233,.85); border-color:var(--cy2,#38bdf8); color:#04121f;}
#pgenFsSair svg{width:13px; height:13px;}