:root{
  /* Margem das laterais: o meio-termo entre a do Precifaz antigo (44px) e a do Grafaz (6vw), cresce com a tela */
  --margem:clamp(20px, calc(4.4vw + 3px), 66px);
  --papel:#FAFAF8; --cartao:#FFFFFF; --tinta:#1C1C1C; --tinta-2:#4B5563; --tinta-3:#6B7280;
  --linha:#E5E7EB; --borda-campo:#D1D5DB; --neutro:#F4F4F5; --neutro-2:#F9FAFB;
  --marca:#57C3B6; --marca-hover:#45B2A5; --marca-forte:#3AA396; --marca-texto:#2A8277; --marca-escuro:#1F6B62; --marca-claro:#E8F6F4;
  --ok:#2A8277; --ok-escuro:#1F6B62; --ok-claro:#E8F6F4;
  --lixeira:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6'/%3E%3C/svg%3E");
  --lapis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E");
  --olho:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --olho-fechado:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 5.1A10 10 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-2.2 3.2M6.6 6.6A17 17 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20'/%3E%3C/svg%3E");
  --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2l4 4 4-4' fill='none' stroke='%232A8277' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --copiar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  --zap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
  --engrenagem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
  --xis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --erro:#DC2626; --erro-escuro:#991B1B; --erro-claro:#FEE2E2;
  --serif:"Sorts Mill Goudy",Georgia,serif;
  --sans:"Nunito","Segoe UI",system-ui,sans-serif;
  --num:var(--sans);
  --raio:16px;
}
*{box-sizing:border-box}
/* Reserva o espaço da barra de rolagem: sem isso, abas curtas e longas ficam com larguras diferentes */
html{color-scheme:light;scrollbar-gutter:stable}
body{margin:0;background:var(--papel);color:var(--tinta);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--marca-texto)}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
[hidden]{display:none!important}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.muted{color:var(--tinta-3)}
.neg{color:var(--erro)}
.pos{color:var(--ok)}

/* A serifada é ilegível em tamanhos pequenos: fica só nos títulos de página */
h1,h2,h3{margin:0;color:var(--tinta)}
h1{font-family:var(--serif);font-weight:normal;font-size:34px;line-height:1.15}
h2{font-size:19px;font-weight:700}
h3{font-size:16px;font-weight:700}

.topo{position:sticky;top:0;z-index:5;background:rgba(250,250,248,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(229,231,235,.6)}
/* Duas linhas, como no Grafaz: marca de um lado e Como usar, Ajustes e conta do outro; as seções embaixo */
.topo-in{max-width:1400px;margin:0 auto;padding:12px var(--margem) 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 24px}
.topo-acoes{display:flex;align-items:center;gap:4px}
.topo-link{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:10px;background:none;padding:8px 12px;font-size:14.5px;color:var(--tinta-2);cursor:pointer;white-space:nowrap}
.topo-link:hover{background:var(--marca-claro);color:var(--marca-texto)}
.topo-link[aria-selected="true"]{background:var(--marca-claro);color:var(--marca-texto);font-weight:700}
.topo-link.como-usar::before{content:"?";display:grid;place-items:center;width:17px;height:17px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:50%;font:800 11px/1 var(--sans)}
.topo-link.ajustes::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--engrenagem) center/contain no-repeat;mask:var(--engrenagem) center/contain no-repeat}
.titulo-app{margin:0;display:flex;align-items:center;gap:10px;line-height:1;white-space:nowrap}
.titulo-app .icone{height:30px;width:30px}
.titulo-app #marca-topo{display:contents}
.titulo-app .palavra{height:22px;width:auto}
/* Logo enviada pela pessoa pode ser quadrada: ganha mais altura que a palavra NaVerot, que é só texto */
.titulo-app .palavra.logo{height:30px;max-width:190px;object-fit:contain}
.titulo-app .palavra-txt{font:normal 24px/1 var(--serif);color:var(--marca-texto);max-width:230px;overflow:hidden;text-overflow:ellipsis}
.titulo-app.sem-marca .nome-app{padding-left:0;border-left:0}
.titulo-app .nome-app{padding-left:11px;border-left:1px solid var(--linha);font:800 13px/22px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--marca-texto)}
nav.abas{grid-column:1/-1;margin-left:-14px;display:flex;gap:4px;overflow-x:auto}
nav.abas button{border:0;background:none;padding:10px 14px 12px;font-size:15px;color:var(--tinta-2);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
nav.abas button:hover{color:var(--tinta)}
nav.abas button[aria-selected="true"]{color:var(--marca-texto);border-bottom-color:var(--marca);font-weight:700}
nav.abas .curto{display:none}

main{max-width:1400px;margin:0 auto;padding:24px var(--margem) 80px}
.cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}

label.campo{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tinta-2);min-width:0}
label.campo > span{font-weight:600}
label.campo.largo{grid-column:span 2}
label.campo.inteiro{grid-column:1/-1}
input[type=text],input[type=date],input[type=url],input[type=password],select,textarea{width:100%;border:1px solid var(--borda-campo);background:#fff;border-radius:12px;padding:8px 12px;font-size:15px;color:var(--tinta);min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--marca);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 25%,transparent)}
select{appearance:none;padding-right:36px;background-image:var(--seta);background-position:right 13px center;background-size:12px;background-repeat:no-repeat;cursor:pointer}
select:disabled{background-color:var(--neutro);color:var(--tinta-2);cursor:default}
select.acao.largo{width:auto;min-width:200px}
select.acao{width:200px;height:34px;padding-top:0;padding-bottom:0;border-color:var(--marca);color:var(--marca-texto);font-size:14px;font-weight:600}
textarea{resize:vertical;min-height:60px}
.dica{font-size:12.5px;color:var(--tinta-3);margin:6px 0 0}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
/* A caixinha nativa muda de cara em cada navegador; desenhada aqui, segue a borda e o turquesa dos campos */
.check input{appearance:none;flex:none;width:18px;height:18px;margin:0;border:1px solid var(--borda-campo);border-radius:6px;background:#fff center/12px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
.check input[type=radio]{border-radius:50%}
.check input:hover{border-color:var(--marca)}
.check input:checked{background-color:var(--marca);border-color:var(--marca);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.check input:focus-visible{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 25%,transparent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--marca);background:var(--marca);color:var(--sobre-marca,#fff);border-radius:12px;padding:8px 16px;font-size:14px;font-weight:700;transition:background-color .15s,color .15s;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--marca-hover);border-color:var(--marca-hover)}
.btn.sec{background:#fff;color:var(--marca-texto);border-color:var(--marca)}
.btn.sec:hover{background:var(--marca-claro)}
.btn.leve{background:none;border-color:transparent;color:var(--tinta-2);padding:6px 8px}
.btn.leve:hover{background:var(--marca-claro);color:var(--marca-texto)}
.btn.perigo{background:#fff;border-color:var(--erro);color:var(--erro)}
.btn.perigo:hover{background:var(--erro-claro)}
.btn.peq{padding:5px 10px;font-size:13px}
.btn-x,.btn-lapis,.btn-olho,.btn-copiar,.btn-zap{border:0;background:none;color:var(--tinta-3);font-size:0;width:30px;height:30px;flex:none;display:inline-grid;place-items:center;cursor:pointer;border-radius:8px;vertical-align:middle}
.btn-x::before,.btn-lapis::before,.btn-olho::before,.btn-copiar::before,.btn-zap::before{content:"";width:19px;height:19px;background:currentColor;-webkit-mask:var(--lixeira) center/contain no-repeat;mask:var(--lixeira) center/contain no-repeat}
.btn-lapis::before{-webkit-mask-image:var(--lapis);mask-image:var(--lapis)}
.btn-x:hover{color:var(--erro);background:var(--erro-claro)}
.btn-lapis:hover,.btn-lapis.ativo{color:var(--marca-texto);background:var(--marca-claro)}
.btn-olho::before{-webkit-mask-image:var(--olho);mask-image:var(--olho)}
.btn-olho.ativo::before{-webkit-mask-image:var(--olho-fechado);mask-image:var(--olho-fechado)}
.btn-olho:hover,.btn-olho.ativo{color:var(--marca-texto);background:var(--marca-claro)}
.btn-copiar::before{-webkit-mask-image:var(--copiar);mask-image:var(--copiar)}
.btn-copiar:hover{color:var(--marca-texto);background:var(--marca-claro)}
.btn-zap::before{-webkit-mask-image:var(--zap);mask-image:var(--zap)}
.btn-zap:hover{color:#128c7e;background:#e7f7ee}

@media (max-width:620px){
  .topo-in{padding:10px 16px 0}
  main{padding:18px 16px 60px}
  label.campo.largo{grid-column:auto}
}