:root{
  --misi-blue:#081d46;
  --misi-teal:#2d6787;
  --misi-sage:#799b91;
  --misi-black:#000000;
  --misi-white:#ffffff;
  --misi-bg:#f3f5f8;
}

body.login{
  background: var(--misi-bg);
}

/* Layout width */
body.login #login{
  width: min(480px, calc(100vw - 32px)); /* 16px padding left+right */
  margin-left: auto;
  margin-right: auto;
}

/* Replace WordPress logo with MISI logo */
body.login h1 a{
  background-image: url("https://misi.university/wp-content/uploads/2026/01/MISI-University-Black-512x-512-.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 220px;
  height: 90px;
  margin: 0 auto 10px;
}

/* Shared card look */
body.login #loginform,
body.login .message,
body.login .misi-login-head,
body.login .misi-azure-wrap{
  background: var(--misi-white);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
}

/* Welcome block */
.misi-login-head{
  padding: 22px 26px;
  margin-bottom: 18px;
  text-align: center;
}
.misi-login-head h1{
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 10px 0;
  font-weight: 800;
  color: var(--misi-blue);
}
.misi-login-head p{
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(0,0,0,.75);
}

/* Azure block container (NO button styling here) */
.misi-azure-wrap{
  padding: 22px 26px;
  margin-bottom: 18px;
}
.misi-azure-title{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
  color: rgba(0,0,0,.78);
}

/* Secondary login form block spacing */
#loginform.misi-secondary-form{
  padding: 22px 26px;
}

/* Hidden by default; toggled by JS */
#loginform.misi-secondary-form.is-collapsed{
  display: none;
}

/* Partner button wrapper spacing (button styling is cloned from Azure via JS) */
.misi-partner-btn{
  width: 100%;
  display: block;
  margin-top: 14px;
}

/* Center bottom links */
body.login p#nav,
body.login p#backtoblog{
  text-align: center;
}

body.login #loginform h4 {
  display: none !important;
}

/* Extra safety for small screens */
@media (max-width: 520px){
  body.login #login{
    width: calc(100vw - 24px); /* чуть плотнее */
  }

  /* Slightly reduce padding inside cards on mobile */
  .misi-login-head,
  .misi-azure-wrap,
  #loginform.misi-secondary-form{
    padding: 18px 18px;
  }

  /* Make logo scale down a bit */
  body.login h1 a{
    width: 180px;
    height: 74px;
  }

  .misi-login-head h1{
    font-size: 20px;
  }
  .misi-login-head p{
    font-size: 14px;
  }
}