*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #1e293b,
    #334155
  );

  color:white;

  display:flex;
  justify-content:center;
  align-items:center;

  min-height:100vh;
}

.box{
  width:380px;
  max-width:90%;

  padding:32px;

  border-radius:20px;

  background:rgba(30,41,59,.75);

  backdrop-filter:blur(15px);

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
  0 15px 40px rgba(0,0,0,.35);
}

.logo{
  text-align:center;
  margin-bottom:24px;
}

.logo h1{
  margin:0;
  font-size:28px;
}

.logo p{
  margin-top:8px;
  color:#cbd5e1;
  font-size:14px;
}

input{
  width:100%;

  padding:14px;

  margin:10px 0;

  border:none;

  border-radius:12px;

  background:#334155;

  color:white;

  font-size:15px;
}

input::placeholder{
  color:#94a3b8;
}

button{
  width:100%;

  padding:14px;

  margin-top:10px;

  border:none;

  border-radius:12px;

  background:#2563eb;

  color:white;

  font-size:15px;

  cursor:pointer;

  transition:.2s;
}

button:hover{
  background:#3b82f6;
  transform:translateY(-1px);
}

.link{
  margin-top:15px;

  text-align:center;

  color:#93c5fd;

  cursor:pointer;

  font-size:14px;
}

.link:hover{
  text-decoration:underline;
}

#msg{
  margin-top:15px;
  text-align:center;
  color:#86efac;
}

@media(max-width:768px){

  .box{
    width:92%;
    padding:24px;
  }

}