/* ═══════════════════════════════════════════════
   GT — Fundo com brilho azul, brilho verde e pontilhado
   (o mesmo efeito do hero do index.html)

   Usado nas telas de acesso (login, registrar, trocar-senha) e em
   todas as páginas logadas. Importar depois de gt-shared.css.

   Fica em html::before / html::after (e não no body) de propósito:
   a calculadora já usa body::before pra textura de ruído. Com
   position:fixed o efeito fica parado atrás do conteúdo enquanto a
   página rola, e z-index:-1 o coloca acima do fundo da página mas
   abaixo de todo o resto.

   RGB do modo oposto de propósito (mesma decisão do index): no claro
   o azul fica mais vivo; no escuro, um azul-marinho profundo.
   ═══════════════════════════════════════════════ */

html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 55% at 12% 8%, rgba(90, 159, 212, .16) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 95% 90%, rgba(61, 158, 106, .12) 0%, transparent 70%);
}
html.dark::before {
  background:
    radial-gradient(ellipse 55% 55% at 12% 8%, rgba(26, 58, 92, .55) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 95% 90%, rgba(26, 92, 58, .30) 0%, transparent 70%);
}

/* Grade pontilhada sutil, só na faixa superior direita — textura
   "de produto" sem competir com tabelas e formulários. */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 55% at 78% 18%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 78% 18%, #000 0%, transparent 75%);
  opacity: .5;
}

@media print {
  html::before, html::after { display: none; }
}