:root{
  --login-green:#147a52;
  --login-green-dark:#0e5d3e;
  --login-navy:#152b43;
  --login-gold:#b67a12;
  --login-bg:#f4f7fa;
  --login-border:#dfe6eb;
  --login-muted:#71808e;
}

*{box-sizing:border-box}

html,body{
  min-height:100%;
  margin:0;
}

body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--login-bg);
  color:#22303d;
}

.login-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(520px,1.08fr) minmax(430px,.92fr);
}

.login-visual{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:56px;
  background:
    radial-gradient(circle at 18% 15%,rgba(255,255,255,.18),transparent 28%),
    radial-gradient(circle at 82% 78%,rgba(255,255,255,.12),transparent 30%),
    linear-gradient(145deg,#0d4d38 0%,#126b4a 46%,#173e55 100%);
}

.login-visual:before,
.login-visual:after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}

.login-visual:before{
  width:420px;
  height:420px;
  top:-190px;
  right:-120px;
}

.login-visual:after{
  width:300px;
  height:300px;
  left:-120px;
  bottom:-130px;
}

.login-visual-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 82%);
}

.login-visual-content{
  position:relative;
  z-index:2;
  width:min(650px,100%);
  margin:auto;
  color:#fff;
}

.login-brand-logo{
  display:block;
  width:min(360px,72%);
  height:auto;
  margin-bottom:38px;
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:0 28px 70px rgba(0,0,0,.18);
}

.login-eyebrow{
  display:inline-block;
  margin-bottom:12px;
  color:#d7efe5;
  font-size:.74rem;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.login-visual-copy h1{
  margin:0;
  font-size:clamp(3rem,7vw,6.3rem);
  line-height:.92;
  font-weight:950;
  letter-spacing:-.045em;
}

.login-visual-copy h2{
  margin:18px 0 14px;
  font-size:clamp(1.45rem,2.6vw,2.15rem);
  font-weight:780;
}

.login-visual-copy p{
  max-width:590px;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:1.02rem;
  line-height:1.75;
}

.login-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

.login-trust-row>div{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  backdrop-filter:blur(8px);
  font-size:.84rem;
  font-weight:700;
}

.login-trust-row i{color:#d8f3e8}

.login-form-side{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:42px clamp(28px,5vw,78px) 28px;
  background:
    radial-gradient(circle at 95% 3%,#e5f3ed,transparent 26%),
    #fff;
}

.login-mobile-brand{display:none}

.login-form-shell{
  width:min(500px,100%);
  margin:auto;
}

.login-form-heading{margin-bottom:28px}

.login-secure-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:15px;
  padding:7px 11px;
  border-radius:999px;
  background:#eaf6f0;
  color:var(--login-green-dark);
  font-size:.76rem;
  font-weight:800;
}

.login-form-heading h2{
  margin:0;
  color:var(--login-navy);
  font-size:2rem;
  font-weight:900;
  letter-spacing:-.02em;
}

.login-form-heading p{
  margin:8px 0 0;
  color:var(--login-muted);
  line-height:1.55;
}

.login-alert{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:0;
  border-radius:13px;
  font-size:.9rem;
}

.login-field{margin-bottom:19px}

.login-field label{
  display:block;
  margin-bottom:7px;
  color:#344456;
  font-size:.83rem;
  font-weight:750;
}

.login-input-wrap{
  position:relative;
}

.login-input-wrap>i{
  position:absolute;
  left:15px;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  color:#8a98a5;
  pointer-events:none;
}

.login-input-wrap .form-control{
  height:54px;
  padding:0 48px 0 45px;
  border:1px solid var(--login-border);
  border-radius:13px;
  background:#fbfcfd;
  color:#1d2a37;
  font-size:.96rem;
  box-shadow:none;
  transition:.18s ease;
}

.login-input-wrap .form-control::placeholder{color:#a1abb4}

.login-input-wrap .form-control:focus{
  border-color:var(--login-green);
  background:#fff;
  box-shadow:0 0 0 4px rgba(20,122,82,.11);
}

.password-toggle{
  position:absolute;
  top:50%;
  right:10px;
  z-index:3;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  transform:translateY(-50%);
  border:0;
  border-radius:9px;
  background:transparent;
  color:#71808e;
}

.password-toggle:hover{background:#edf4f1;color:var(--login-green)}

.login-helper{
  margin:-3px 0 20px;
  color:#7a8793;
  font-size:.78rem;
}

.login-helper i{margin-right:5px;color:var(--login-green)}

.login-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:54px;
  border:0;
  border-radius:13px;
  background:linear-gradient(135deg,var(--login-green),var(--login-green-dark));
  color:#fff;
  font-weight:820;
  box-shadow:0 14px 28px rgba(14,93,62,.2);
  transition:.18s ease;
}

.login-submit:hover,
.login-submit:focus{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(14,93,62,.25);
}

.login-security-note{
  display:flex;
  gap:12px;
  margin-top:24px;
  padding:14px;
  border:1px solid #e7ecef;
  border-radius:14px;
  background:#f8fafb;
}

.login-security-note>i{
  color:var(--login-green);
  font-size:1.1rem;
}

.login-security-note strong,
.login-security-note span{display:block}

.login-security-note strong{
  margin-bottom:2px;
  color:#344456;
  font-size:.8rem;
}

.login-security-note span{
  color:#7a8793;
  font-size:.74rem;
  line-height:1.5;
}

.login-footer{
  width:min(500px,100%);
  margin:30px auto 0;
  text-align:center;
  color:#7a8793;
}

.login-footer strong,
.login-footer span,
.login-footer small{display:block}

.login-footer strong{
  color:var(--login-green);
  font-size:.76rem;
  letter-spacing:.05em;
}

.login-footer span{
  margin-top:4px;
  color:#526171;
  font-size:.74rem;
}

.login-footer small{
  margin-top:3px;
  font-size:.68rem;
}

@media(max-width:1050px){
  .login-page{grid-template-columns:1fr 1fr}
  .login-visual{padding:40px}
  .login-form-side{padding-left:34px;padding-right:34px}
}

@media(max-width:850px){
  .login-page{display:block}

  .login-visual{display:none}

  .login-form-side{
    min-height:100vh;
    padding:24px 20px;
    background:
      radial-gradient(circle at 100% 0,#dff0e8,transparent 32%),
      linear-gradient(180deg,#f7faf9,#fff 36%);
  }

  .login-mobile-brand{
    display:block;
    width:min(290px,78%);
    margin:0 auto 28px;
  }

  .login-mobile-brand img{
    display:block;
    width:100%;
    height:auto;
    padding:10px;
    border-radius:17px;
    background:#fff;
    box-shadow:0 14px 34px rgba(21,43,67,.1);
  }

  .login-form-shell{width:min(520px,100%)}
}

@media(max-width:480px){
  .login-form-side{padding:18px 14px}

  .login-form-heading h2{font-size:1.7rem}

  .login-input-wrap .form-control{height:52px}

  .login-security-note{padding:12px}

  .login-footer{margin-top:22px}
}