/* Fundo padrão do Banner Studio — uma cor só, grade discreta e LEDs.
   Usado em todas as telas: painel (body.panel-shell), landing (body.lp) e
   login/cadastro (body.auth-page). Só CSS: nada de JS nem imagens. */
:root{--bs-bg:#070b14;--bs-grid:rgba(126,166,226,.075);--bs-grid-strong:rgba(126,166,226,.12);--bs-led:78,184,255;--bs-led2:109,93,251}
html[data-theme="light"]{--bs-bg:#f3f6fb;--bs-grid:rgba(46,72,105,.085);--bs-grid-strong:rgba(46,72,105,.13);--bs-led:22,142,220;--bs-led2:96,84,236}
html{background:var(--bs-bg)!important}
body.panel-shell,body.lp,body.auth-page{position:relative;z-index:0;background:var(--bs-bg)!important}
/* Grade: linhas finas a cada 44px, com uma linha mais forte a cada 220px, esmaecendo nas bordas. */
body.panel-shell::before,body.lp::before,body.auth-page::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(var(--bs-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--bs-grid) 1px,transparent 1px),
    linear-gradient(var(--bs-grid-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--bs-grid-strong) 1px,transparent 1px);
  background-size:44px 44px,44px 44px,220px 220px,220px 220px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 35%,rgba(0,0,0,.35) 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 35%,rgba(0,0,0,.35) 75%,transparent 100%)}
/* LEDs: pontos de luz que percorrem as linhas da grade (4 na horizontal, 3 na vertical)
   e dois LEDs fixos pulsando nos cruzamentos. Desliga com "reduzir movimento". */
body.panel-shell::after,body.lp::after,body.auth-page::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(var(--bs-led),.95) 0,rgba(var(--bs-led),.45) 2px,rgba(var(--bs-led),.12) 6px,transparent 12px),
    radial-gradient(circle,rgba(var(--bs-led2),.95) 0,rgba(var(--bs-led2),.45) 2px,rgba(var(--bs-led2),.12) 6px,transparent 12px),
    radial-gradient(circle,rgba(var(--bs-led),.95) 0,rgba(var(--bs-led),.45) 2px,rgba(var(--bs-led),.12) 6px,transparent 12px),
    radial-gradient(circle,rgba(var(--bs-led2),.9) 0,rgba(var(--bs-led2),.4) 2px,rgba(var(--bs-led2),.1) 6px,transparent 12px),
    radial-gradient(circle,rgba(var(--bs-led),.95) 0,rgba(var(--bs-led),.45) 2px,rgba(var(--bs-led),.12) 6px,transparent 12px),
    radial-gradient(circle,rgba(var(--bs-led2),.9) 0,rgba(var(--bs-led2),.4) 2px,rgba(var(--bs-led2),.1) 6px,transparent 12px),
    radial-gradient(circle,rgba(var(--bs-led),.9) 0,rgba(var(--bs-led),.4) 2px,rgba(var(--bs-led),.1) 6px,transparent 12px),
    radial-gradient(circle,rgba(var(--bs-led),.85) 0,rgba(var(--bs-led),.3) 3px,rgba(var(--bs-led),.08) 9px,transparent 16px),
    radial-gradient(circle,rgba(var(--bs-led2),.85) 0,rgba(var(--bs-led2),.3) 3px,rgba(var(--bs-led2),.08) 9px,transparent 16px);
  background-repeat:no-repeat;
  background-size:24px 24px,24px 24px,24px 24px,24px 24px,24px 24px,24px 24px,24px 24px,32px 32px,32px 32px;
  animation:bsLeds 26s linear infinite,bsLedPulse 3.2s ease-in-out infinite;opacity:.9}
/* Posições: y fixo = linha da grade (44px·n − 12px, para centralizar o LED de 24px); x anda de fora a fora. */
@keyframes bsLeds{
  0%{background-position:-30px 120px,110vw 296px,-30px 516px,110vw 780px,164px -30px,604px 110vh,1044px -30px,428px 208px,868px 648px}
  100%{background-position:110vw 120px,-30px 296px,110vw 516px,-30px 780px,164px 110vh,604px -30px,1044px 110vh,428px 208px,868px 648px}}
@keyframes bsLedPulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){body.panel-shell::after,body.lp::after,body.auth-page::after{animation:none;opacity:.5}}
@media (max-width:760px){body.panel-shell::before,body.lp::before,body.auth-page::before{background-size:36px 36px,36px 36px,180px 180px,180px 180px}}
/* Rodapé padrão: Desenvolvedor BRYSTACK. */
.bs-credit{display:flex;justify-content:center;align-items:center;gap:6px;padding:14px 12px 22px;font-size:12px;color:var(--muted,#96a7bd);letter-spacing:.02em}
.bs-credit .app-build-credit{font-size:12px;opacity:1}
.bs-credit a{color:var(--primary,#f21f36);font-weight:800;text-decoration:none;border-bottom:1px solid transparent}
.bs-credit a:hover{border-bottom-color:currentColor}


/* GERADOR PLUS 8.3 — backdrop vermelho/preto */
:root{--bs-bg:#050507!important;--bs-grid:rgba(242,31,54,.055)!important;--bs-grid-strong:rgba(242,31,54,.10)!important;--bs-led:242,31,54!important;--bs-led2:201,15,37!important}
html[data-theme="light"]{--bs-bg:#f7f2f3!important;--bs-grid:rgba(180,20,40,.07)!important;--bs-grid-strong:rgba(180,20,40,.12)!important;--bs-led:220,23,48!important;--bs-led2:190,16,38!important}