*{box-sizing:border-box}
:root{
  --primary: #16a34a;
  --sidebar: #0f172a;
  --text: #0f172a;
  --login-bg: #06281d;
}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,Arial,sans-serif;
  background:
    linear-gradient(135deg,rgba(0,0,0,.25),rgba(0,0,0,.35)),
    var(--login-bg-image, none),
    linear-gradient(135deg,var(--sidebar) 0%,var(--login-bg) 55%,var(--primary) 160%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
}
.login-wrap{
  width:min(980px,94vw);
  display:grid;
  grid-template-columns:1.1fr 420px;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hero{
  padding:46px;
  color:#fff;
  background:rgba(15,23,42,.15);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.logo{
  width:78px;
  height:78px;
  border-radius:22px;
  background:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  font-size:26px;
  overflow:hidden;
  color:#fff;
  margin:0 auto;
}
.logo img{width:100%;height:100%;object-fit:cover}
.hero h1{font-size:42px;margin:24px 0 12px;text-align:center}
.hero p{font-size:17px;color:#e2e8f0;line-height:1.6;text-align:center;max-width:360px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.badges span{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.13);font-weight:800;font-size:13px}
.card{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  padding:42px;
}
.card h2{margin:0 0 8px;font-size:30px;color:#fff}
.card p{margin:0 0 22px;color:rgba(255,255,255,.7)}
label{display:block;font-size:13px;font-weight:900;color:rgba(255,255,255,.85);margin-bottom:14px}
input{width:100%;margin-top:7px;border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:14px;font-weight:800;background:rgba(255,255,255,.1);color:#fff}
.btn-full,button{
  border:0;background:var(--primary);color:white;border-radius:14px;padding:14px 18px;font-weight:950;cursor:pointer;
}
.btn-full{width:100%;font-size:15px;display:block;margin-top:6px}
.msg{padding:12px;border-radius:14px;margin-bottom:14px;font-weight:900}
.err{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.ok{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:50px}
.eye-btn{position:absolute;right:10px;top:32px;width:34px;height:34px;background:rgba(255,255,255,.15);color:#fff;border-radius:10px;padding:0}
.links{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.links a{font-weight:900;color:#fff;text-decoration:none}
.small{font-size:12px;color:rgba(255,255,255,.5);margin-top:10px}
.reset-box{display:none;margin-top:18px;padding:18px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(255,255,255,.08)}
.reset-box.on{display:block}
@media(max-width:850px){.login-wrap{grid-template-columns:1fr}.hero{display:none}.card{padding:32px}}

.bg-carousel{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
}
.bg-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.2s ease;
}
.bg-slide.active{
  opacity:1;
}
body:has(.bg-carousel){
  background:transparent!important;
}
body:has(.bg-carousel)::before{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.28),rgba(0,0,0,.48));
  z-index:-2;
}

/* EFFECT FINAL */
.bg-carousel.effect-fade .bg-slide{
  opacity:0;
  transform:scale(1);
}
.bg-carousel.effect-fade .bg-slide.active{
  opacity:1;
}

.bg-carousel.effect-zoom .bg-slide{
  opacity:0;
  transform:scale(1);
}
.bg-carousel.effect-zoom .bg-slide.active{
  opacity:1;
  animation:kenburnsLogin var(--slide-speed,8s) ease forwards;
}
@keyframes kenburnsLogin{
  from{transform:scale(1)}
  to{transform:scale(1.18)}
}

.bg-carousel.effect-slide .bg-slide{
  opacity:1!important;
  transform:translateX(100%);
  transition:transform .8s ease!important;
}
.bg-carousel.effect-slide .bg-slide.active{
  transform:translateX(0)!important;
}
.bg-carousel.effect-slide .bg-slide.was-active{
  transform:translateX(-100%)!important;
}


/* ==========================================================
   SEND4WHATS - LOGIN WHITELABEL
   ========================================================== */

.login-wrap .card .btn-full,
.card .btn-full,
button.btn-full {
    background: var(--primary) !important;
}

.login-wrap .card input:focus,
.card input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(
        in srgb,
        var(--primary) 18%,
        transparent
    ) !important;
}

.login-wrap .links a,
.links a {
    color: var(--primary) !important;
}

/* bloco de marca */
.hero .logo {
    border-color: var(--primary);
}

.hero .logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* mantém o fundo configurável pelo White Label */
body {
    background-color: var(--login-bg);
}