body{
  margin:0;
  font-family:'Segoe UI',sans-serif;
  background:linear-gradient(120deg,#84fab0,#8fd3f4);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}




.page-header{
  height:100px;
  display:flex;
  align-items:center;
  padding:0 20px;
  position:relative;
  background:rgba(255,255,255,0.2);
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.page-logo{
  width:180px;
}

.page-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:24px;
  font-weight:700;
  font-family:'Poppins',sans-serif;
  color:#216e6e;
}



.container{
  background:#fff;
  border-radius:20px;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:
      0 15px 35px rgba(0,0,0,0.15),
      inset 0 2px 8px rgba(0,0,0,0.05);
  padding:2rem;
  width:420px;
  max-width:90%;
  margin:auto;
}




form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

h2{
  text-align:center;
  margin-bottom:1rem;
  color:#333;
  font-size:22px;
}




input{
  padding:10px;
  border:1px solid rgba(0,0,0,0.15);
  border-radius:8px;
  font-size:14px;
  outline:none;
  transition:0.3s;
}

input:focus{
  border-color:#2575fc;
  box-shadow:0 0 8px rgba(37,117,252,0.2);
}

input.field-error{
  border-color:#e53935;
  background:#fff5f5;
  box-shadow:0 0 0 3px rgba(229,57,53,0.12);
}




button{
  padding:12px;
  background:linear-gradient(to right,#6a11cb,#2575fc);
  color:white;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:bold;
  font-size:15px;
  transition:0.3s;
}

button:hover{
  background:linear-gradient(to right,#2575fc,#6a11cb);
  transform:translateY(-2px);
  box-shadow:0 4px 15px rgba(37,117,252,0.5);
}




.container p{
  text-align:center;
  margin-top:10px;
  font-size:14px;
}

.container a{
  color:#2575fc;
  text-decoration:none;
}

.container a:hover{
  text-decoration:underline;
}




.page-footer{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.2);
  color:#1b4d4d;
  font-size:13px;
  backdrop-filter:blur(10px);
  box-shadow:0 -2px 10px rgba(0,0,0,0.1);
}




@media(max-width:600px){

  .container{
      width:90%;
      padding:1.8rem;
  }

  .page-logo{
      width:140px;
  }

  .page-title{
      font-size:20px;
  }

}