.auth-body{
  background:
    radial-gradient(circle at 12% 12%,rgba(24,163,156,.20),transparent 34%),
    radial-gradient(circle at 88% 88%,rgba(17,103,116,.15),transparent 38%),
    linear-gradient(145deg,#eef8f7 0%,#f5f9fb 52%,#eaf3f4 100%);
}

.login-card{
  width:min(520px,100%);
  padding:30px;
  overflow:hidden;
  border:1px solid rgba(18,125,125,.18);
  background:rgba(255,255,255,.96);
  box-shadow:
    0 28px 70px rgba(19,67,77,.16),
    0 2px 8px rgba(19,67,77,.07);
}

.login-brandmark{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:20px;
  align-items:center;
  margin-bottom:24px;
  padding-bottom:22px;
  border-bottom:1px solid #e2eded;
}

.login-logo-frame{
  position:relative;
  display:grid;
  width:96px;
  height:96px;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(14,142,139,.22);
  border-radius:24px;
  background:#fff;
  box-shadow:
    0 14px 28px rgba(13,119,117,.14),
    inset 0 0 0 6px rgba(235,248,247,.72);
}

.login-logo-frame::after{
  position:absolute;
  inset:auto 15px 8px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#0c9995,transparent);
  content:"";
  opacity:.55;
}

.login-logo-frame img{
  display:block;
  width:86%;
  height:86%;
  object-fit:contain;
}

.login-brand-copy{
  min-width:0;
}

.login-clinic-name{
  margin:0 0 5px;
  color:#0d7f7c;
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
  line-height:1.35;
  text-transform:uppercase;
}

.login-card .login-brand-copy h1{
  margin:0 0 6px;
  color:#18313a;
  font-size:29px;
  line-height:1.08;
}

.login-card .login-brand-copy .muted{
  margin:0;
  font-size:13px;
  line-height:1.45;
}

.login-card .form-stack{
  gap:13px;
}

.login-card .form-stack label{
  gap:6px;
  color:#2d424b;
  font-size:13px;
  font-weight:800;
}

.login-card .form-stack input{
  border-color:#cbdcde;
  background:#fbfdfd;
}

.login-card .form-stack input:focus{
  border-color:#159893;
  box-shadow:0 0 0 4px rgba(21,152,147,.12);
}

.login-card .btn.primary{
  margin-top:3px;
  background:linear-gradient(135deg,#16a39c,#087571);
  box-shadow:0 10px 22px rgba(9,117,113,.20);
}

.login-card .login-security{
  display:flex;
  gap:7px;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  color:#64757c;
  font-size:11px;
  font-weight:700;
}

@media (max-width:767px){
  .login-card{
    max-width:440px !important;
    padding:18px !important;
  }

  .login-brandmark{
    grid-template-columns:78px minmax(0,1fr);
    gap:14px;
    margin-bottom:18px;
    padding-bottom:17px;
  }

  .login-logo-frame{
    width:78px;
    height:78px;
    border-radius:20px;
  }

  .login-card .login-brand-copy h1{
    font-size:23px !important;
  }

  .login-card .login-brand-copy .muted{
    font-size:12px !important;
    line-height:1.4 !important;
  }
}

@media (max-width:359px){
  .login-card{
    padding:15px !important;
  }

  .login-brandmark{
    grid-template-columns:66px minmax(0,1fr);
    gap:11px;
  }

  .login-logo-frame{
    width:66px;
    height:66px;
    border-radius:17px;
  }

  .login-clinic-name{
    font-size:9px;
  }

  .login-card .login-brand-copy h1{
    font-size:20px !important;
  }

  .login-card .login-brand-copy .muted{
    display:none;
  }
}

@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .login-brandmark{
    margin-bottom:13px;
    padding-bottom:13px;
  }

  .login-logo-frame{
    width:68px;
    height:68px;
    border-radius:17px;
  }

  .login-card .login-security{
    margin-top:10px;
  }
}