/* Smart Connecta · tela de login (1.4.23).
   Fundo escuro com aurora nas cores da marca, mensagem e vitrine do produto à
   esquerda e o cartão de acesso branco à direita. Sem imagens pesadas: só o
   símbolo e o logotipo em PNG transparente. */
.login-v3{
  --lg-ink:#1d1238;--lg-muted:#6f6787;--lg-line:#e7e2f1;--lg-field:#faf8fe;
  --lg-violet:#6a3df0;--lg-magenta:#e5179b;--lg-orange:#ff7a1a;--lg-cyan:#14b8f0;--lg-blue:#2f6bff;
  --lg-brand:linear-gradient(100deg,#ff7a1a 0%,#e5179b 34%,#6a3df0 68%,#2f8cff 100%);
  position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(400px,.88fr);align-items:center;
  gap:clamp(24px,4vw,72px);padding:clamp(28px,5vw,72px) clamp(24px,6vw,96px);
  background:radial-gradient(120% 90% at 0% 0%,#24124f 0%,#130b2e 46%,#0c0720 100%);
  color:#fff;font-family:'Nunito Sans',Arial,sans-serif;box-sizing:border-box
}
.login-v3 *,.login-v3 *::before,.login-v3 *::after{box-sizing:border-box}

/* Aurora e textura */
.lg-aurora{position:absolute;inset:-20%;z-index:-2;pointer-events:none;filter:blur(90px) saturate(125%)}
.lg-aurora i{position:absolute;border-radius:50%;opacity:.55;mix-blend-mode:screen;animation:lg-drift 26s ease-in-out infinite alternate}
.lg-aurora .a1{width:46vw;height:46vw;left:4%;top:8%;background:#e5179b;animation-duration:24s}
.lg-aurora .a2{width:40vw;height:40vw;left:30%;top:46%;background:#2f6bff;animation-duration:30s;animation-delay:-6s}
.lg-aurora .a3{width:34vw;height:34vw;left:-6%;top:52%;background:#6a3df0;animation-duration:22s;animation-delay:-12s}
.lg-aurora .a4{width:26vw;height:26vw;left:42%;top:0%;background:#ff7a1a;opacity:.38;animation-duration:28s;animation-delay:-3s}
@keyframes lg-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,-4vh,0) scale(1.12)}100%{transform:translate3d(-4vw,5vh,0) scale(.94)}}
.lg-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(85% 70% at 30% 45%,#000 0%,transparent 75%);mask-image:radial-gradient(85% 70% at 30% 45%,#000 0%,transparent 75%)}

/* Mensagem da marca */
.lg-story{position:relative;max-width:640px;justify-self:end;width:100%}
.lg-mark{width:64px;height:auto;display:block;margin:0 0 26px;filter:drop-shadow(0 10px 30px rgba(229,23,155,.35))}
.lg-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.2px;
  color:#efe9ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px)}
.lg-eyebrow i{width:8px;height:8px;border-radius:50%;background:#34e3a0;box-shadow:0 0 0 4px rgba(52,227,160,.18);animation:lg-pulse 2.4s ease-out infinite}
@keyframes lg-pulse{0%{box-shadow:0 0 0 0 rgba(52,227,160,.5)}80%,100%{box-shadow:0 0 0 9px rgba(52,227,160,0)}}
.lg-story h1{margin:22px 0 18px;font-size:clamp(40px,4.3vw,66px);line-height:1.03;letter-spacing:-1.8px;font-weight:800;color:#fff}
.lg-story h1 em{font-style:normal;background:linear-gradient(95deg,#ffb36b 0%,#ff5fae 40%,#a58bff 72%,#5fd4ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-story>p{margin:0;max-width:520px;font-size:17px;line-height:1.65;color:rgba(239,233,255,.78)}

/* Vitrine: conversa, indicador e canais */
.lg-showcase{position:relative;height:300px;margin-top:40px;max-width:560px}
.lg-glass{position:absolute;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 24px 60px rgba(5,2,20,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.lg-chat{left:0;top:0;width:min(370px,74%);padding:16px 16px 18px;animation:lg-float 7s ease-in-out infinite}
.lg-chat header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;font-size:12px;font-weight:700;color:#f3efff}
.lg-chat header span{display:inline-flex;align-items:center;gap:8px}
.lg-chat header b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#22c55e;color:#fff;font-size:13px}
.lg-live{font-size:11px;color:#9ff5cf;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.lg-live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#34e3a0;margin-right:6px;vertical-align:1px}
.lg-bubble{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.45;margin-top:8px}
.lg-bubble.in{background:rgba(255,255,255,.92);color:#2a1d4a;border-bottom-left-radius:4px}
.lg-bubble.out{margin-left:auto;background:linear-gradient(120deg,#7b4dff,#e5179b);color:#fff;border-bottom-right-radius:4px}
.lg-bubble small{display:block;font-size:10.5px;font-weight:800;opacity:.85;margin-bottom:3px;letter-spacing:.2px}
.lg-typing{display:inline-flex;gap:4px;padding:10px 12px;margin-top:8px;border-radius:12px;background:rgba(255,255,255,.14)}
.lg-typing i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.5;animation:lg-dot 1.2s infinite}
.lg-typing i:nth-child(2){animation-delay:.15s}.lg-typing i:nth-child(3){animation-delay:.3s}
@keyframes lg-dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}
.lg-metric{right:2%;top:36px;width:190px;padding:16px;animation:lg-float 8s ease-in-out infinite;animation-delay:-2.5s}
.lg-metric span{display:block;font-size:11px;font-weight:700;color:rgba(239,233,255,.75);letter-spacing:.3px;text-transform:uppercase}
.lg-metric strong{display:block;font-size:34px;line-height:1.1;margin:6px 0 10px;font-weight:800;letter-spacing:-1px}
.lg-metric strong small{font-size:14px;color:#9ff5cf;font-weight:800;margin-left:6px;letter-spacing:0}
.lg-bars{display:flex;align-items:flex-end;gap:5px;height:34px}
.lg-bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#5fd4ff,#6a3df0)}
.lg-channels{position:absolute;left:8%;bottom:0;display:flex;flex-wrap:wrap;gap:10px;max-width:92%}
.lg-channels span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font-size:12.5px;font-weight:700;color:#f6f2ff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);animation:lg-float 9s ease-in-out infinite}
.lg-channels span:nth-child(2n){animation-delay:-3s}.lg-channels span:nth-child(3n){animation-delay:-5s}
.lg-channels i{width:9px;height:9px;border-radius:50%}
@keyframes lg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Cartão de acesso */
.lg-access{position:relative;display:flex;flex-direction:column;align-items:center;justify-self:start;width:100%;max-width:460px}
.lg-card{position:relative;width:100%;padding:42px 42px 30px;border-radius:28px;border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--lg-brand) border-box;color:var(--lg-ink);
  box-shadow:0 50px 120px rgba(6,2,24,.55),0 12px 30px rgba(6,2,24,.25);animation:lg-rise .7s cubic-bezier(.2,.8,.2,1) both}

@keyframes lg-rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.lg-logo{display:block;width:210px;max-width:72%;height:auto;margin:0 0 30px}
.lg-card h2{margin:0;font-size:30px;line-height:1.15;letter-spacing:-.8px;font-weight:800;color:var(--lg-ink)}
.lg-subtitle{margin:8px 0 28px;font-size:15px;color:var(--lg-muted)}
.lg-field{display:block;margin:0 0 18px}
.lg-field>span{display:block;margin:0 0 8px;font-size:13px;font-weight:800;color:#3b2d5c}
.lg-control{position:relative;display:block}
.lg-control>svg{position:absolute;left:16px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:#9a90b5;pointer-events:none;transition:color .15s}
.lg-control input{width:100%;height:54px;margin:0;padding:0 16px 0 48px;border-radius:14px;border:1.5px solid var(--lg-line);background:var(--lg-field);
  color:var(--lg-ink);font:inherit;font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.lg-control input::placeholder{color:#aaa2bf}
.lg-control input:hover{border-color:#d6cdea}
.lg-control input:focus{border-color:var(--lg-violet);background:#fff;box-shadow:0 0 0 4px rgba(106,61,240,.14)}
.lg-control:focus-within>svg{color:var(--lg-violet)}
.lg-control.has-reveal input{padding-right:52px}
.lg-reveal{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:10px;
  background:transparent;color:#8d84a8;cursor:pointer}
.lg-reveal:hover{background:#f1ecfb;color:var(--lg-violet)}
.lg-reveal svg{width:19px;height:19px}
.lg-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px;font-size:14px}
.lg-remember{display:inline-flex;align-items:center;gap:10px;color:#4a3d68;font-weight:700;cursor:pointer;user-select:none}
.lg-remember input{position:absolute;opacity:0;width:1px;height:1px}
.lg-remember b{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;border:1.5px solid #cfc5e4;background:#fff;transition:all .15s}
.lg-remember b svg{width:13px;height:13px;color:#fff;opacity:0;transition:opacity .15s}
.lg-remember input:checked+b{background:var(--lg-violet);border-color:var(--lg-violet)}
.lg-remember input:checked+b svg{opacity:1}
.lg-remember input:focus-visible+b{box-shadow:0 0 0 4px rgba(106,61,240,.2)}
.lg-link{border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--lg-violet);cursor:pointer}
.lg-link:hover{text-decoration:underline}
.login-v3 #notice:empty{display:none}
.login-v3 #notice:not(:empty){display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:12px 14px;border-radius:12px;
  background:#fff1f6;border:1px solid #ffd3e3;color:#a3134b;font-size:13.5px;font-weight:700;line-height:1.45}
.lg-submit{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border:0;border-radius:15px;cursor:pointer;
  background:var(--lg-brand);background-size:180% 100%;background-position:0% 50%;color:#fff;font:inherit;font-size:16px;font-weight:800;letter-spacing:.2px;
  box-shadow:0 14px 34px rgba(229,23,155,.32);transition:background-position .45s ease,transform .15s,box-shadow .2s}
.lg-submit:hover{background-position:100% 50%;box-shadow:0 18px 40px rgba(106,61,240,.36)}
.lg-submit:active{transform:translateY(1px)}
.lg-submit svg{width:19px;height:19px;transition:transform .2s}
.lg-submit:hover svg{transform:translateX(4px)}
.lg-submit:disabled{opacity:.7;cursor:progress}
.lg-support{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 0;padding-top:20px;border-top:1px solid #f0ecf6;font-size:13.5px;color:var(--lg-muted)}
.lg-support svg{width:17px;height:17px;color:#9a90b5}
.lg-support a{color:var(--lg-violet);font-weight:800;text-decoration:none}
.lg-support a:hover{text-decoration:underline}
.lg-footnote{margin:18px 0 0;font-size:12px;color:rgba(239,233,255,.55);text-align:center}
.login-v3 button:focus-visible,.login-v3 a:focus-visible{outline:3px solid rgba(106,61,240,.45);outline-offset:3px}
body:has(.login-v3) .version{display:none}

/* Ativação inicial: mais campos, cartão um pouco mais largo */
.login-v3.is-setup .lg-access{max-width:500px}
.login-v3.is-setup .lg-field{margin-bottom:14px}

/* Telas médias e celulares */
@media (max-width:1180px){
  .login-v3{grid-template-columns:minmax(0,1fr) minmax(380px,440px);padding-inline:clamp(24px,4vw,56px)}
  .lg-showcase{transform:scale(.9);transform-origin:left top;margin-bottom:-30px}
}
@media (max-width:920px){
  .login-v3{grid-template-columns:1fr;justify-items:center;align-content:start;gap:28px;padding:36px 16px 56px;overflow-y:auto}
  .lg-story{justify-self:center;text-align:center;max-width:560px}
  .lg-mark{margin:0 auto 18px;width:52px}
  .lg-story h1{font-size:clamp(30px,7vw,44px);letter-spacing:-1px;margin:16px 0 10px}
  .lg-story>p{margin:0 auto;font-size:15px}
  .lg-showcase{display:none}
  .lg-access{justify-self:center}
}
@media (max-width:480px){
  .lg-card{padding:30px 22px 24px;border-radius:24px}
  .lg-card h2{font-size:25px}
  .lg-story>p{display:none}
  .lg-options{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .login-v3 *,.login-v3 *::before{animation:none!important;transition:none!important}
}