/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial,sans-serif;
  background:#f0f2f5;
}

/* ===== WRAPPER ===== */
.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

/* ===== LOGIN BOX ===== */
.login-box{
  width:100%;
  max-width:360px;
}

/* ===== LOGO ===== */
.login-logo{
  text-align:center;
  margin-bottom:20px;
}

.login-logo img{
  width:84px;
  height:84px;
  object-fit:contain;
}

/* ===== TITLE ===== */
.login-box h1{
  text-align:center;
  font-size:24px;
  color:#1d2327;
  margin-bottom:24px;
  font-weight:500;
}

/* ===== FORM ===== */
.login-box form{
  background:#fff;
  padding:26px;
  border:1px solid #dcdcde;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}

/* ===== INPUT ===== */
.login-box input{
  width:100%;
  padding:12px;
  margin-bottom:18px;
  border:1px solid #8c8f94;
  font-size:15px;
  border-radius:3px;
  outline:none;
}

.login-box input:focus{
  border-color:#2271b1;
  box-shadow:0 0 0 1px #2271b1;
}

/* ===== BUTTON ===== */
.login-box button{
  width:100%;
  background:#2271b1;
  color:#fff;
  border:none;
  padding:12px;
  font-size:15px;
  cursor:pointer;
  border-radius:3px;
}

.login-box button:hover{
  background:#135e96;
}

/* ===== FOOTER ===== */
.login-footer{
  text-align:center;
  margin-top:18px;
  font-size:13px;
  color:#50575e;
}