/* ═══════════════════════════════════════════════
   HUBTOOLS — Tela de entrada
   Computador: quadro de 1672×941 com as medidas da referência
   do usuário, escalado para caber (--s, calculado em js/login-fx.js).
   Celular / tela em pé: só o login, com o fundo animado.
═══════════════════════════════════════════════ */
#loginView.lg{
  position:fixed;inset:0;z-index:99999;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,#061B26 0%,#04111D 55%,#030E19 100%);
  color:#F4F7FA;display:block;
}
#loginView.lg.hidden{display:none;}
.lg svg{display:block;}
.lg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen;}
.lg-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 62%,rgba(3,10,18,.55) 100%);}

/* ── Ícones ── */
.lg-feat-ic svg,.lg-card svg,.lg-input svg,.lg-eye svg,.lg-btn svg{fill:none;stroke:#2BD17F;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.lg svg .fill{fill:#2BD17F;stroke:none;}
.lg svg .fill2{fill:#5CEBA5;stroke:none;}

/* ── Marca ── */
.lg-brand{display:flex;align-items:center;}
.lg-wordmark{font-weight:700;letter-spacing:-.035em;line-height:1;white-space:nowrap;}
.lg-wordmark span{color:#F6F9FB;}
.lg-wordmark b{color:#2BD17F;font-weight:700;}
.lg-wordmark i{font-style:normal;color:#2BD17F;vertical-align:top;margin-left:2px;}
.lg-sub{text-transform:uppercase;color:#C9D4DD;white-space:nowrap;}
.lg-tagline{color:#D3DCE3;}
.lg-tagline span,.lg-foot-l span,.lg-foot-r span{display:inline-block;height:2px;background:#2BD17F;vertical-align:middle;}

/* ── Chamada ── */
.lg-hero h1{font-weight:700;margin:0;color:#F6F9FB;}
.lg-hero h1 em{font-style:normal;color:#2BD17F;}
.lg-hero p{color:#C9D4DD;margin:0;}
.lg-rule{display:block;background:#2BD17F;}
.lg-feats{list-style:none;margin:0;padding:0;}
.lg-feats li{display:flex;align-items:center;}
.lg-feats b{display:block;font-weight:500;color:#F2F6F9;}
.lg-feats small{display:block;color:#AEBBC6;}
.lg-feat-ic{flex:none;display:grid;place-items:center;border:1.5px solid rgba(43,209,127,.55);
  background:rgba(43,209,127,.05);box-shadow:inset 0 0 14px rgba(43,209,127,.1);animation:lgIcGlow 4s ease-in-out infinite;}
.lg-feats li:nth-child(2) .lg-feat-ic{animation-delay:1.3s;}
.lg-feats li:nth-child(3) .lg-feat-ic{animation-delay:2.6s;}
@keyframes lgIcGlow{0%,100%{box-shadow:inset 0 0 14px rgba(43,209,127,.1);}50%{box-shadow:inset 0 0 14px rgba(43,209,127,.25),0 0 16px rgba(43,209,127,.3);}}

/* ── Cena: arte da referência em camadas (img/login/, gerada por ferramentas/camadas_login.py) ── */
.lg-plate{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s;width:1672px;height:941px;z-index:0;pointer-events:none;
  transform:translate(var(--ox,0px),var(--oy,0px)) scale(var(--s,1));transform-origin:0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 2%,#000 98%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 2%,#000 98%,transparent);
  mask-composite:intersect;}
.lg-arte .lg-plate{opacity:1;}
.lg-arte .lg-scene{visibility:visible;}
.lg-plate img{display:block;width:100%;height:100%;user-select:none;}
.lg-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;mix-blend-mode:screen;}
.lg-ondas ellipse{fill:none;stroke:#5CEBA5;stroke-width:2;transform-origin:797px 566px;animation:lgOnda 4.2s ease-out infinite;opacity:0;}
.lg-ondas .d2{animation-delay:1.4s;} .lg-ondas .d3{animation-delay:2.8s;}
@keyframes lgOnda{0%{transform:scale(.7);opacity:0;}15%{opacity:.75;}100%{transform:scale(1.55);opacity:0;}}
.lg-pulsos path{fill:none;stroke:#A8FFD6;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 100;stroke-dashoffset:107;
  filter:drop-shadow(0 0 5px #2BD17F);animation:lgPulse 3.3s linear infinite;}
@keyframes lgPulse{0%{stroke-dashoffset:107;opacity:0;}8%{opacity:1;}85%{opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}
.lg-nos circle{fill:#8DFFC8;filter:drop-shadow(0 0 6px #2BD17F);animation:lgNo 2.4s ease-in-out infinite;opacity:.2;}
@keyframes lgNo{0%,100%{opacity:.15;}50%{opacity:.95;}}

.lg-obj{position:absolute;will-change:transform;}
.lg-obj img{display:block;width:100%;height:100%;user-select:none;}
.lg-brilho{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  background-size:260% 100%;animation:lgShine 6.5s ease-in-out infinite;}
@keyframes lgShine{0%,55%{background-position:150% 0;}100%{background-position:-50% 0;}}
.o-hex{animation:lgFlutua 6s ease-in-out infinite;}
.o-hex img{animation:lgAcende 3.2s ease-in-out infinite;}
.o-hex .lg-brilho{animation-duration:5s;}
.o-c1{animation:lgBalanca 7s ease-in-out infinite;}
.o-c2{animation:lgBalanca 7.6s ease-in-out -2s infinite;}
.o-c3{animation:lgBalanca 6.8s ease-in-out -4s infinite;}
.o-c4{animation:lgBalanca 7.3s ease-in-out -5.5s infinite;}
.o-c2 .lg-brilho{animation-delay:1.6s;} .o-c3 .lg-brilho{animation-delay:3.2s;} .o-c4 .lg-brilho{animation-delay:4.8s;}
@keyframes lgFlutua{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes lgBalanca{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-6px) rotate(.6deg);}}
@keyframes lgAcende{0%,100%{filter:brightness(1);}50%{filter:brightness(1.13) drop-shadow(0 0 14px rgba(43,209,127,.45));}}

/* ── Painel ── */
.lg-form{position:relative;display:flex;flex-direction:column;align-items:stretch;
  background:linear-gradient(165deg,rgba(20,44,52,.7),rgba(7,18,28,.84));
  border:1.5px solid rgba(43,209,127,.42);
  box-shadow:0 0 0 1px rgba(43,209,127,.05),0 0 38px rgba(43,209,127,.14),inset 0 0 40px rgba(43,209,127,.04),0 30px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.lg-form::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--lgAng,0deg),transparent 0 72%,#7DFFC0 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:lgBorder 7s linear infinite;}
@property --lgAng{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes lgBorder{to{--lgAng:360deg;}}
.lg-form-hex{margin:0 auto;animation:lgHexGlowF 3s ease-in-out infinite;}
@keyframes lgHexGlowF{0%,100%{filter:drop-shadow(0 0 5px rgba(43,209,127,.35));}50%{filter:drop-shadow(0 0 14px rgba(43,209,127,.8));}}
.lg-form-word{text-align:center;font-weight:700;letter-spacing:-.035em;line-height:1;}
.lg-form-word b{color:#2BD17F;}
.lg-form-sub{text-align:center;text-transform:uppercase;color:#C9D4DD;}
.lg-form h2{text-align:center;font-weight:600;margin:0;color:#F6F9FB;}
.lg-form-hint{text-align:center;color:#B7C3CD;margin:0;}
.lg-label{font-weight:600;text-transform:uppercase;color:#D3DCE3;display:block;}
.lg-input{position:relative;display:flex;align-items:center;border-radius:10px;
  background:rgba(5,14,22,.72);border:1.5px solid #2B3F4E;transition:border-color .2s,box-shadow .2s;}
.lg-input:focus-within{border-color:#2BD17F;box-shadow:0 0 0 3px rgba(43,209,127,.14),0 0 18px rgba(43,209,127,.16);}
.lg-input>svg{flex:none;stroke:#AEBBC6;}
.lg-input:focus-within>svg{stroke:#2BD17F;}
.lg-input input{flex:1;min-width:0;height:100%;background:transparent;border:none;outline:none;color:#F6F9FB;-webkit-appearance:none;padding:0;}
.lg-input input::placeholder{color:#6A7B8A;}
.lg-input input:-webkit-autofill{-webkit-text-fill-color:#F6F9FB;-webkit-box-shadow:0 0 0 40px #07131E inset;caret-color:#F6F9FB;}
.lg-eye{background:none;border:none;padding:0;height:100%;cursor:pointer;display:grid;place-items:center;}
.lg-eye svg{stroke:#AEBBC6;}
.lg-eye.on svg{stroke:#2BD17F;}
.lg-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.lg-check{display:flex;align-items:center;cursor:pointer;color:#E3EAEF;user-select:none;}
.lg-check input{position:absolute;opacity:0;width:0;height:0;}
.lg-check span{flex:none;border-radius:4px;border:1.6px solid #8595A2;display:grid;place-items:center;transition:.15s;}
.lg-check input:checked+span{background:#2BD17F;border-color:#2BD17F;}
.lg-check input:checked+span::after{content:"";width:28%;height:52%;border:solid #062014;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-8%,-8%);}
.lg-check input:focus-visible+span{box-shadow:0 0 0 3px rgba(43,209,127,.35);}
.lg-forgot{color:#2BD17F;text-decoration:underline;text-underline-offset:3px;}
.lg-forgot:hover{color:#6CF5B4;}
.lg-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  background:linear-gradient(135deg,#27C878,#1AA864);color:#fff;font-weight:600;
  box-shadow:0 8px 24px rgba(43,209,127,.25);transition:transform .15s,box-shadow .2s,opacity .2s;}
.lg-btn svg{stroke:#fff;transition:transform .2s;}
.lg-btn:hover{box-shadow:0 10px 30px rgba(43,209,127,.42);}
.lg-btn:hover svg{transform:translateX(4px);}
.lg-btn:active{transform:scale(.985);}
.lg-btn:disabled{opacity:.6;cursor:wait;}
.lg-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);animation:lgBtnShine 4.5s ease-in-out infinite;}
@keyframes lgBtnShine{0%,70%{left:-60%;}100%{left:130%;}}
#loginView.lg .login-error{text-align:center;color:#F87171;}
#loginView.lg .login-error.info{color:#AEBBC6;}

/* ── Rodapé ── */
.lg-foot-l,.lg-foot-r{color:#B3BFC9;white-space:nowrap;}
.lg-foot-word{color:#8C9CA9;text-align:center;}
.lg-foot-tri{color:#6E7F8C;text-transform:uppercase;text-align:center;white-space:nowrap;}

/* ═══════════════════════════════════════════════
   COMPUTADOR — quadro 1672×941 (medidas em px da referência)
═══════════════════════════════════════════════ */
@media (min-width:901px) and (min-aspect-ratio:6/5){
  .lg-stage{position:absolute;left:0;top:0;width:1672px;height:941px;z-index:2;
    transform:translate(var(--ox,0px),var(--oy,0px)) scale(var(--s,1));transform-origin:0 0;}
  .lg-stage > *{position:absolute;}

  .lg-top{inset:0 0 auto 0;height:0;}
  .lg-brand{position:absolute;left:57px;top:25px;}
  .lg-brand-hex{width:60px;height:70px;filter:drop-shadow(0 0 10px rgba(43,209,127,.45));}
  .lg-brand-txt{margin-left:16px;margin-top:-3px;}
  .lg-wordmark{font-size:35px;}
  .lg-wordmark i{font-size:12px;margin-top:-2px;}
  .lg-sub{font-size:12.8px;letter-spacing:1.9px;margin-top:6px;}
  .lg-tagline{position:absolute;left:1452px;top:31px;font-size:13.6px;line-height:19.5px;}
  .lg-tagline span{width:31px;margin-left:33px;}

  .lg-hero{left:68px;top:205px;width:560px;}
  .lg-hero h1{font-size:45.5px;line-height:50.5px;letter-spacing:-1.45px;}
  .lg-hero p{font-size:16px;line-height:24px;margin-top:20px;}
  .lg-rule{width:38px;height:2px;margin:24px 0 36px;}
  .lg-feats{display:flex;flex-direction:column;gap:16px;margin-left:1px;}
  .lg-feats li{gap:23px;}
  .lg-feat-ic{width:57px;height:57px;border-radius:9px;}
  .lg-feat-ic svg{width:28px;height:28px;}
  .lg-feats b{font-size:15.9px;}
  .lg-feats small{font-size:13.4px;margin-top:5px;}

  .lg-scene{visibility:hidden;inset:0;pointer-events:none;transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform .3s ease-out;}

  .lg-panel{left:1099px;top:157px;width:516px;height:624px;}
  .lg-form{width:100%;height:100%;border-radius:26px;padding:30px 45px 0;}
  .lg-form > *{flex-shrink:0;}
  .lg-form-hex{width:58px;height:66px;}
  .lg-form-word{font-size:36.4px;margin-top:12px;}
  .lg-form-sub{font-size:12.6px;letter-spacing:2.8px;margin-top:5px;}
  .lg-form h2{font-size:22px;margin-top:30px;}
  .lg-form-hint{font-size:13.8px;margin-top:10px;}
  .lg-label{font-size:10.8px;letter-spacing:.5px;margin:14px 0 7px 7px;}
  .lg-form-hint + .lg-label{margin-top:25.5px;}
  .lg-input{height:56px;}
  .lg-input>svg{width:21px;height:21px;margin:0 16px 0 16px;}
  .lg-input input{font-size:17px;}
  .lg-eye{padding:0 16px;}
  .lg-eye svg{width:21px;height:21px;}
  .lg-row{margin-top:28px;font-size:15px;padding:0 0 0 3px;}
  .lg-check{gap:13px;}
  .lg-check span{width:19px;height:19px;}
  .lg-forgot{font-size:12.6px;}
  .lg-btn{height:62px;margin-top:28px;border-radius:10px;font-size:17.5px;gap:10px;}
  .lg-btn svg{width:21px;height:21px;}
  #loginView.lg .login-error{font-size:13.5px;margin-top:10px;min-height:18px;}

  /* com a arte carregada (.lg-arte, posta pelo js), ela já traz marca, textos e o desenho do painel:
     o HTML decorativo fica invisível (continua na página para leitores de tela)
     e os controles ficam transparentes, alinhados sobre os desenhos da arte */
  #loginView.lg-arte .lg-vignette{display:none;}   /* a arte já tem o escurecimento das bordas */
  #loginView.lg-arte .lg-top,#loginView.lg-arte .lg-hero,#loginView.lg-arte .lg-foot{opacity:0;}
  #loginView.lg-arte .lg-form{background:none;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
  #loginView.lg-arte .lg-form-hex,#loginView.lg-arte .lg-form-word,#loginView.lg-arte .lg-form-sub,#loginView.lg-arte .lg-form h2,#loginView.lg-arte .lg-form-hint,#loginView.lg-arte .lg-label{opacity:0;}
  #loginView.lg-arte .lg-input{background:none;border-color:transparent;}
  #loginView.lg-arte .lg-input:focus-within{border-color:#2BD17F;}
  #loginView.lg-arte .lg-check input:checked+span{border-color:#2BD17F;}
  #loginView.lg-arte .lg-input>svg,#loginView.lg-arte .lg-eye svg{opacity:0;}
  #loginView.lg-arte .lg-eye.on svg{opacity:1;}
  #loginView.lg-arte .lg-check span{border-color:transparent;}
  #loginView.lg-arte .lg-forgot{color:transparent;text-decoration-color:transparent;}
  #loginView.lg-arte .lg-forgot:hover{color:transparent;text-decoration-color:#6CF5B4;}
  #loginView.lg-arte .lg-btn{background:none;box-shadow:none;color:transparent;}
  #loginView.lg-arte .lg-btn svg{opacity:0;}
  #loginView.lg-arte .lg-btn:hover{background:rgba(255,255,255,.07);box-shadow:0 10px 30px rgba(43,209,127,.35);}
  #loginView.lg-arte .lg-btn:disabled{background:rgba(0,0,0,.28);}

  .lg-foot{inset:0;height:941px;pointer-events:none;}
  .lg-foot > *{position:absolute;pointer-events:auto;}
  .lg-foot-l{left:53px;top:884px;font-size:13.2px;}
  .lg-foot-l span{width:25px;margin-right:21px;}
  .lg-foot-c{left:831px;top:829px;transform:translateX(-50%);}
  .lg-foot-word{font-size:21px;letter-spacing:17.2px;margin-right:-17.2px;}
  .lg-foot-tri{position:relative;left:5px;font-size:11px;letter-spacing:6.75px;margin-top:22px;margin-right:-6.75px;}
  .lg-foot-r{right:46px;top:884px;font-size:13.2px;}
  .lg-foot-r span{width:25px;margin-left:19px;}
}

/* ═══════════════════════════════════════════════
   CELULAR / TELA EM PÉ — só o login
═══════════════════════════════════════════════ */
@media (max-width:900px), (max-aspect-ratio:6/5){
  #loginView.lg{overflow:hidden auto;}
  .lg-stage{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;justify-content:space-between;
    padding:18px 16px 16px;gap:20px;}
  .lg-hero,.lg-scene,.lg-tagline,.lg-foot-l,.lg-foot-r,.lg-plate{display:none;}
  .lg-brand-hex{width:38px;height:44px;filter:drop-shadow(0 0 8px rgba(43,209,127,.45));}
  .lg-brand-txt{margin-left:12px;}
  .lg-wordmark{font-size:23px;}
  .lg-wordmark i{font-size:9px;}
  .lg-sub{font-size:9.5px;letter-spacing:2.4px;margin-top:6px;}
  .lg-panel{display:flex;justify-content:center;}
  .lg-form{width:100%;max-width:440px;border-radius:22px;padding:26px 22px 22px;}
  .lg-form-hex{width:46px;height:54px;}
  .lg-form-word{font-size:30px;margin-top:10px;}
  .lg-form-sub{font-size:10px;letter-spacing:2.8px;margin-top:8px;}
  .lg-form h2{font-size:20px;margin-top:22px;}
  .lg-form-hint{font-size:13.5px;margin-top:6px;}
  .lg-label{font-size:11px;letter-spacing:.5px;margin:16px 0 7px 2px;}
  .lg-input{height:54px;}
  .lg-input>svg{width:20px;height:20px;margin:0 14px;}
  .lg-input input{font-size:16px;}
  .lg-eye{padding:0 14px;}
  .lg-eye svg{width:20px;height:20px;}
  .lg-row{margin-top:20px;font-size:14px;flex-wrap:wrap;}
  .lg-check{gap:10px;}
  .lg-check span{width:18px;height:18px;}
  .lg-forgot{font-size:13px;}
  .lg-btn{height:56px;margin-top:20px;border-radius:10px;font-size:16px;gap:10px;}
  .lg-btn svg{width:20px;height:20px;}
  #loginView.lg .login-error{font-size:13px;margin-top:10px;min-height:18px;}
  .lg-foot{text-align:center;}
  .lg-foot-word{font-size:14px;letter-spacing:9px;margin-right:-9px;}
  .lg-foot-tri{font-size:8.5px;letter-spacing:3px;margin-top:8px;}
}

/* modo de comparação com a referência (#comparar) */
.lg-parado *,.lg-parado *::before,.lg-parado *::after{animation:none!important;transition:none!important;}
.lg-parado .lg-canvas,.lg-parado .lg-fx,.lg-parado .lg-brilho{display:none;}

/* Quem pediu menos movimento no sistema não recebe animação */
@media (prefers-reduced-motion:reduce){
  .lg *,.lg *::before,.lg *::after{animation:none!important;transition:none!important;}
}