/* ===== Lesto webmail — premium login (CSS-only, host-scoped) ===== */
/* Sistema de design fiel à marca Lesto: monocromático, fundo carvão #0a0c0d,
   grelha subtil + brilho verde (igual ao og.svg), cartão branco, botão preto,
   accents verdes #0aa564. Tipografia de sistema (igual aos emails). */

:root{
  --ink:#0a0c0d; --green:#0aa564; --green-bright:#13c57a;
  --card:#ffffff; --field:#f4f4f3; --border:#ececeb; --muted:#a1a1aa; --text2:#52525b;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

body.task-login{
  margin:0;min-height:100vh;font-family:var(--font);
  background:#0a0c0d;
  background:
    radial-gradient(880px 560px at 84% 8%, rgba(19,197,122,.16), transparent 60%),
    radial-gradient(720px 620px at 10% 100%, rgba(10,165,100,.12), transparent 60%),
    #0a0c0d;
  background-attachment:fixed;
}
/* grelha subtil — a assinatura do og.svg do Lesto */
body.task-login::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(1100px 700px at 70% 12%, #000 0%, transparent 78%);
          mask-image:radial-gradient(1100px 700px at 70% 12%, #000 0%, transparent 78%);
}
/* chevron-glow ténue no canto, eco do watermark do og */
body.task-login::after{
  content:"";position:fixed;z-index:0;pointer-events:none;
  right:-60px;top:8%;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle, rgba(19,197,122,.18), transparent 70%);filter:blur(8px);
}

#layout{display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:28px 18px;background:transparent!important;overflow:auto}

/* O cartão */
#layout-content.no-navbar{
  position:relative;z-index:1;display:block!important;height:auto!important;min-height:0!important;max-height:none!important;
  flex:0 0 auto;width:100%;max-width:404px;margin:auto;background:var(--card)!important;
  border:1px solid var(--border);border-radius:20px;padding:38px 34px 26px;text-align:center;
  box-shadow:0 40px 90px -32px rgba(0,0,0,.62), 0 1px 0 rgba(255,255,255,.6) inset;
  animation:lestorise .5s cubic-bezier(.2,.75,.2,1) both}
@keyframes lestorise{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}

#logo{display:block;margin:0 auto 4px;max-width:150px;width:62%;height:auto}

#login-form.propform{display:block!important;height:auto!important;min-height:0!important;margin:0;text-align:left}
#login-form::before{content:"Bem-vindo de volta";display:block;text-align:center;
  font-family:var(--font);font-weight:600;font-size:21px;letter-spacing:-.02em;color:var(--ink);margin:16px 0 4px}

#login-form .input-group,#login-form .form-group{display:flex!important;margin:0 0 12px 0!important;width:100%}
#login-form .input-group{background:var(--field);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;
  align-items:center;transition:border-color .15s,box-shadow .15s,background .15s}
#login-form .input-group:focus-within{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(10,165,100,.14)}
#login-form .input-group-prepend,#login-form .input-group-text{background:transparent!important;border:0!important;color:var(--muted)!important;padding-left:14px}
#login-form .form-control{flex:1;border:0!important;background:transparent!important;box-shadow:none!important;height:50px;font-size:15px;color:var(--ink);padding-left:8px}
#login-form .form-control::placeholder{color:var(--muted)}

.formbuttons{display:block!important;margin:6px 0 0!important;text-align:center;float:none!important}
#rcmloginsubmit,#login-form button.mainaction,#login-form .btn-primary{
  width:100%!important;height:52px;margin:0!important;border:0!important;border-radius:12px!important;
  background:var(--ink)!important;color:#fff!important;font-family:var(--font);font-weight:600;font-size:15px;letter-spacing:.01em;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.6);cursor:pointer;transition:transform .12s,box-shadow .2s,background .2s}
#rcmloginsubmit:hover,#login-form button.mainaction:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(0,0,0,.7);background:#16181a!important}
#rcmloginsubmit:active{transform:translateY(0)}

#login-footer{margin-top:22px!important;text-align:center;line-height:0;font-size:0!important;position:static!important}
#login-footer::after{content:"MB WAY para a tua loja Shopify";font-family:var(--font);font-weight:500;
  font-size:12px;line-height:1.4;color:var(--muted);letter-spacing:.01em}

@media (max-width:430px){#layout-content.no-navbar{padding:32px 22px 20px;border-radius:18px}#logo{width:58%}}

/* Neutralizar a centragem vertical do Elastic para o form ficar dentro do cartão */
#login-form,#login-form.propform{top:0!important;bottom:auto!important}
#layout-content.no-navbar>#login-form{position:relative!important}
#layout-content>#logo,#logo{position:static!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;float:none!important;margin:2px auto 12px!important}