:root{
  --fundo:#f5f6f9;--sup:#fff;--sup-2:#fbfcfe;--borda:#e2e5ec;--borda-2:#eef0f5;
  --tinta:#12161f;--mudo:#5d6675;--acento:#2f6df6;--acento-sup:#eaf0ff;
  --ambar:#c9820c;--ambar-sup:#fff6e2;--verde:#0f8a4a;--verde-sup:#e6f6ec;
  --sombra:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.06);
  --raio:12px;--topo:60px;
}
:root[data-tema="escuro"]{
  --fundo:#0e1116;--sup:#161a22;--sup-2:#1b2029;--borda:#272d38;--borda-2:#20252e;
  --tinta:#e8ebf1;--mudo:#98a2b3;--acento:#5b8dff;--acento-sup:#182238;
  --ambar:#e0ac4d;--ambar-sup:#2a2313;--verde:#4cc082;--verde-sup:#14261c;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{margin:0;background:var(--fundo);color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.55;overflow-x:hidden;
  -webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--acento)}
svg{flex:none}
.oculto{display:none!important}
/* editor aberto: a janela nao rola, cada painel rola por dentro.
   scrollbar-gutter no html evita o deslocamento lateral ao travar. */
body.trava{overflow:hidden}
@media print{body.trava{overflow:visible}}

/* ---------- barra superior ---------- */
.topo{position:sticky;top:0;z-index:60;height:var(--topo);display:flex;
  align-items:center;gap:12px;padding:0 16px;background:var(--sup);
  border-bottom:1px solid var(--borda);
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right))}
.marca{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.01em;
  white-space:nowrap;background:none;border:0;padding:0;cursor:pointer}
.marca .glifo{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:linear-gradient(140deg,var(--acento),#7aa2ff);color:#fff}
.marca .txt{font-size:15.5px}
.marca .txt b{font-weight:750}
/* escopado na barra: sem isso o fundo verde vazava para .selo dentro da folha
   do recibo, que usa o mesmo nome para outra coisa */
.topo .selo{font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--verde);background:var(--verde-sup);
  padding:3px 7px;border-radius:99px}
.busca-topo{flex:1;max-width:460px;position:relative;margin-left:8px}
.busca-topo svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--mudo);width:17px;height:17px}
.busca-topo input{width:100%;height:40px;padding:0 12px 0 36px;border-radius:10px;
  border:1px solid var(--borda);background:var(--sup-2);outline:none}
.busca-topo input:focus{border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-sup)}
.acoes-topo{margin-left:auto;display:flex;align-items:center;gap:8px}
.icone-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--borda);background:var(--sup);color:var(--mudo);cursor:pointer}
.icone-btn:hover{color:var(--tinta);background:var(--sup-2)}
.gh{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 11px;
  border:1px solid var(--borda);border-radius:10px;background:var(--sup);
  color:var(--mudo);text-decoration:none;font-size:13.5px;font-weight:550}
.gh:hover{color:var(--tinta);background:var(--sup-2);border-color:var(--mudo)}
.gh .sep{width:1px;height:16px;background:var(--borda)}
.gh .estrelas{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.gh .estrelas svg{width:14px;height:14px}
.gh .n{min-width:1ch}

/* A barra e compartilhada, entao o comportamento dela em tela estreita mora
   aqui — antes vivia no CSS do catalogo e o gerador de recibos ficava sem,
   estourando a largura em 320px por causa do rotulo do botao do GitHub. */
@media (max-width:860px){
  .topo .selo{display:none}
  .gh span.rot{display:none}
}
@media (max-width:520px){
  .topo{gap:8px;padding:0 10px}
  .marca .txt{display:none}
}

/* ---------- componentes usados pelos dois apps ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:0 13px;border-radius:9px;border:1px solid var(--borda);
  background:var(--sup);color:var(--tinta);text-decoration:none;cursor:pointer;
  font-size:13.5px;font-weight:550;white-space:nowrap}
.bt:hover{background:var(--sup-2);border-color:var(--mudo)}
.bt.primario{background:var(--acento);border-color:var(--acento);color:#fff;flex:1}
.bt.primario:hover{filter:brightness(1.08);background:var(--acento)}
.bt.pequeno{min-height:34px;padding:0 10px;font-size:12.5px}
.bt svg{width:16px;height:16px}
.aviso-flutuante{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:80;background:var(--tinta);color:var(--fundo);padding:10px 16px;
  border-radius:99px;font-size:13.5px;box-shadow:var(--sombra);
  opacity:0;pointer-events:none;transition:opacity .2s}
.aviso-flutuante.ver{opacity:1}