*{
  box-sizing:border-box;
  font-family: Arial, sans-serif;
  margin:0;
  padding:0;
}

body{
  background:#000;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  overflow:hidden;
}

/* Sparkles */
.sparkle {
  position:absolute;
  width:6px;
  height:6px;
  background:white;
  border-radius:50%;
  pointer-events:none;
  opacity:0.8;
  animation: sparkleAnim 1.2s linear infinite;
}

@keyframes sparkleAnim {
  0% {transform: translateY(0) scale(1);}
  50% {transform: translateY(-10px) scale(1.5);}
  100% {transform: translateY(0) scale(1);}
}

/* Login container */
.app{
  max-width:390px;
  width:100%;
  background:#f6f7f9;
  padding:40px 30px;
  text-align:center;
  position:relative;
  box-shadow:0 8px 25px rgba(0,0,0,0.4);
  /*border-radius:20px;*/
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

/* Logo */
.logo{
  width:230px;
  margin-bottom:25px;
  opacity:0;
  transform:scale(0.8);
  animation: fadeScale 1s forwards;
}

@keyframes fadeScale{
  to {opacity:1; transform:scale(1);}
}

/* Form */
form{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:15px;
}

/* Input fields */
input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #ccc;
  font-size:14px;
  outline:none;
  transition:0.3s;
}

input:focus{
  border-color:#0d5c2f;
  box-shadow:0 0 8px rgba(13,92,47,0.4);
}

/* Password wrapper */
.password-wrapper{
  position:relative;
}

.password-wrapper i{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  color:#555;
}

/* Buttons */
.btn{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  font-size:16px;
  cursor:pointer;
  background:#0d5c2f;
  color:white;
  margin-top:10px;
  transition: all 0.3s ease;
}

.btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px #0d5c2f;
}

/* Small text */
p.bottom-text{
  font-size:14px;
  color:#555;
  margin-top:15px;
}

p.bottom-text a{
  color:#0d5c2f;
  text-decoration:none;
  font-weight:bold;
}

/* Animations */
input, .btn{
  opacity:0;
  transform:translateY(20px);
  animation: fadeUp 0.8s forwards;
}

input:nth-child(1){animation-delay:0.5s;}
input:nth-child(2){animation-delay:0.7s;}
.btn{animation-delay:0.9s;}

@keyframes fadeUp{
  to {opacity:1; transform:translateY(0);}
}