:root{
  --green:#16a34a;      /* theme green */
  --green-ink:#14532d;
  --bg:#f5f7fb;
  --card:#ffffff;
  --border:#e7ebf0;
  --muted:#6b7280;
  --blue:#0d6efd;
}
html, body{height:100%}
body{
  background:
    radial-gradient(1200px 700px at 10% -10%, #e8f7ed, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #f0fff5, transparent 50%),
    var(--bg);
}
.auth-wrap{min-height:100%; display:flex; align-items:center; justify-content:center; padding:2rem}
.auth-card{
  width:100%; max-width:420px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1.25rem;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
  overflow:hidden;
}
.brand-bar{
  background:linear-gradient(135deg, #0e7a34, var(--green));
  color:#fff;
  padding:1.25rem 1.25rem 1rem;
}
.brand-title{
  display:flex; align-items:center; gap:.6rem; margin:0;
  font-weight:800; letter-spacing:.2px;
}
.brand-title .logo{
  width:40px; height:40px; border-radius:12px; background:#fff; color:var(--green);
  display:flex; align-items:center; justify-content:center; font-weight:800;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}
.brand-sub{opacity:.9; margin-top:.25rem; font-size:.925rem}
.auth-body{padding:1.5rem 1.5rem 1.25rem}
.form-label{font-weight:600; color:#1f2937}
.form-control{
  border-radius:.9rem; padding:.75rem .95rem;
  border:1px solid #e4e8ef;
}
.form-control:focus{border-color:#bfe8c8; box-shadow:0 0 0 .2rem rgba(22,163,74,.15)}
.input-group>.form-control{border-radius:.9rem 0 0 .9rem}
.input-group .btn-toggle{
  border-radius:0 .9rem .9rem 0; border:1px solid #e4e8ef; border-left:0; background:#fff;
}
.btn-primary-green{
  background:var(--green); border-color:var(--green); color:#fff;
  border-radius:.9rem; padding:.8rem 1rem; font-weight:700;
  box-shadow:0 10px 24px rgba(22,163,74,.25);
}
.btn-primary-green:hover{filter:brightness(.96); color:#fff}
.helper{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.25rem;
  color:var(--muted);
}
.helper a{color:var(--blue); text-decoration:none}
.helper a:hover{text-decoration:underline}
.divider{
  position:relative; text-align:center; margin:1rem 0 0.75rem; color:#9aa3af; font-weight:600; font-size:.85rem;
}
.divider::before,.divider::after{
  content:""; position:absolute; top:50%; width:42%; height:1px; background:#e7ebf0;
}
.divider::before{left:0}
.divider::after{right:0}
.foot-note{color:#6b7280; font-size:.85rem}