/* ===== Base ===== */
:root{
  --lv-bg:#ecf6f3;
  --lv-card:#ffffff;
  --lv-text:#0f172a;
  --lv-muted:#6b7280;
  --lv-border:#e5e7eb;
  --lv-shadow:0 10px 30px rgba(0,0,0,.08);
  --lv-radius:16px;
  --lv-grad-a:#0ea5a5;
  --lv-grad-b:#22c55e;
  --lv-green:#0ea5a5;
  --lv-green-strong:#0f766e;
  --lv-green-light:#19b89b;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body.lv-bg{
  margin:0;
  color:var(--lv-text);
  background:var(--lv-bg);
  font:500 16px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}

/* ===== Layout ===== */
.lv-auth{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  min-height:100vh;
}
.lv-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.lv-card > *{
  width:min(720px,100%);
  background:var(--lv-card);
  border:1px solid var(--lv-border);
  border-radius:var(--lv-radius);
  box-shadow:var(--lv-shadow);
  padding:28px;
}

/* ===== Hero ===== */
.lv-hero{
  position:relative;
  padding:48px 56px;
  color:#022c22;
  background:linear-gradient(135deg,var(--lv-grad-a),var(--lv-grad-b));
  overflow:hidden;
}
.lv-brand{ display:flex; align-items:center; gap:12px; }
.lv-logo{ width:82px; height:82px; border-radius:999px; object-fit:contain; padding:3px; }
.lv-brand-name{ font-weight:700; color:#052e2b; }
.lv-hero-title{
  margin:28px 0 6px;
  font-size:clamp(26px,5vw,44px);
  line-height:1.05;
  color:#04251f;
  text-shadow:0 1px 0 rgba(255,255,255,.15);
}
.lv-hero-sub{
  max-width:620px;
  color:#063b33;
  font-weight:500;
}

/* ===== Card Header ===== */
.lv-card-header h2{
  margin:6px 0 4px;
  font-size:clamp(22px,2.6vw,30px);
}
.lv-card-header p{ margin:0 0 8px; color:var(--lv-muted); }

/* ===== Form ===== */
.lv-form{ display:flex; flex-direction:column; gap:14px; }
.lv-field{ display:flex; flex-direction:column; gap:8px; }

.lv-form input[type="email"],
.lv-form input[type="password"],
.lv-form input[type="tel"],
.lv-form input[type="text"]{
  width:100%;
  height:46px;
  padding:0 14px;
  border:1px solid var(--lv-border);
  border-radius:12px;
  background:#fff;
  outline:0;
  transition:box-shadow .2s, border-color .2s, transform .02s;
}
.lv-form input:focus{
  border-color:#10b98133;
  box-shadow:0 0 0 4px rgba(16,185,129,.12);
}

.lv-passwrap{ position:relative; }
.lv-passwrap input{ padding-right:44px; }
.lv-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; background:transparent; color:#0f766e;
  border-radius:10px; cursor:pointer;
}
.lv-eye:hover{ background:#0ea5a50f }

/* Lembrar + link */
.lv-row{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px; margin-top:2px;
}
.lv-check{ display:inline-flex; align-items:center; gap:8px; color:#334155; }
.lv-check input{ accent-color:#0ea5a5 }
.lv-check span{ font-size:12px; }

.lv-link-green{
  color:var(--lv-green-strong);
  text-decoration:none;
  font-weight:500;
  font-size:12.5px;
}
.lv-link-green:hover{ color:var(--lv-green-light); }

/* ===== Botão principal + spinner ===== */
.lv-btn{
  position:relative;
  height:46px;
  border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(90deg,var(--lv-grad-a),var(--lv-grad-b));
  color:#083c35; font-weight:800; letter-spacing:.2px;
  box-shadow:0 10px 20px rgba(34,197,94,.18);
  transition:transform .03s ease-in, box-shadow .2s ease;
}
.lv-btn:active{ transform:translateY(1px) }
.lv-btn:hover{ box-shadow:0 14px 24px rgba(34,197,94,.26) }

.lv-btn .lv-spinner{
  display:none;
  position:absolute; right:14px; top:50%;
  width:18px; height:18px;
  transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.6);
  border-top-color:#fff;
  border-radius:50%;
  animation:lvspin .9s linear infinite;
}
.lv-btn.is-loading .lv-spinner{ display:block; }
.lv-btn.is-loading .lv-btn__label{ opacity:.8; }

@keyframes lvspin{ to{ transform:translateY(-50%) rotate(360deg); } }

/* ===== Alternativa ===== */
.lv-alt{
  text-align:center; margin:12px 0 2px; color:#475569;
  font-size:13px;
}
.lv-alt a{ color:var(--lv-green-strong); text-decoration:none; font-weight:800; }
.lv-alt a:hover{ color:var(--lv-green-light); }

/* ===== Social ===== */
.lv-social{ display:flex; justify-content:center; gap:14px; margin-top:10px; }
.lv-icon{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--lv-border);
  background:#fff; color:#0f172a; cursor:pointer;
  box-shadow:0 3px 10px rgba(2,6,23,.06);
}
.lv-icon:hover{ transform:translateY(-1px) }

/* ===== Barra de força de senha (REGISTER apenas) ===== */
.lv-strength{
  margin-top:6px;
  height:6px;
  background:#e5e7eb;
  border-radius:4px;
  overflow:hidden;
}
.lv-strength #lv-strength-bar{
  height:100%;
  width:0%;
  transition:width .3s ease, background .3s ease;
}

/* ===== Responsivo (≤ 980px) ===== */
@media (max-width:980px){
  /* fundo branco */
  body.lv-bg{ background:#ffffff; }

  /* coluna única */
  .lv-auth{ grid-template-columns:1fr; }

  /* hero igual para login e register */
  .lv-hero{
    padding:18px 16px 20px;
    margin:0;
    border-radius:0;
    min-height:110px;            /* altura consistente */
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .lv-hero-sub{ display:none; }  /* esconder subtítulo */
  .lv-hero-title{ display:none; }/* e o título, como definido antes */

  /* card “flat” */
  .lv-card{ padding:0; }
  .lv-card > *{ border:none; border-radius:0; box-shadow:none; }

  /* ajustes de marca */
  .lv-logo{ width:74px; height:74px; padding:5px; }
  .lv-brand-name{ font-size:16px; }
}

/* ===== Responsivo fino (≤ 520px) ===== */
@media (max-width:520px){
  .lv-card > *{ width:100%; padding:20px; }
  .lv-row{ justify-content:space-between; align-items:center; }
  .lv-row .lv-link-green{ margin-left:auto; }
}



.success-banner  {color:#065f46;background:#d1fae5;border:1px solid #a7f3d0;padding:10px;border-radius:8px;margin-bottom:12px;}
.error-banner  {color:#7f1d1d;background:#fee2e2;border:1px solid #fecaca;padding:10px;border-radius:8px;margin-bottom:12px;}


