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

body{
  min-height:100vh;
  background:
    radial-gradient(
      circle at 15% 20%,
      #f4fcff 0%,
      #8ed6ff 35%,
      #1e88e5 100%
    );
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Plus Jakarta Sans','Segoe UI',sans-serif;
  overflow-x:hidden;
  position:relative;
}

/* Soft water glow overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(
      circle at top right,
      rgba(255,255,255,0.40),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(0,180,255,0.16),
      transparent 40%
    );
  pointer-events:none;
}

/* Floating background scene */
.bg-scene{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.bg-scene .shape{
  position:absolute;
  border:2px solid rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(14,165,233,0.10);

  animation:
    waterFloat 18s ease-in-out infinite,
    blobMorph 12s ease-in-out infinite;

  transition:all 0.5s ease;
  filter:blur(1px);

  will-change:transform;
}
/* Water drop floating */
@keyframes waterFloat {
  0%{
    transform:translateY(0px) translateX(0px) scale(1) rotate(0deg);
  }

  25%{
    transform:translateY(-18px) translateX(8px) scale(1.03) rotate(2deg);
  }

  50%{
    transform:translateY(-35px) translateX(-10px) scale(0.98) rotate(-2deg);
  }

  75%{
    transform:translateY(-15px) translateX(6px) scale(1.02) rotate(1deg);
  }

  100%{
    transform:translateY(0px) translateX(0px) scale(1) rotate(0deg);
  }
}
.bg-scene .shape.s1{
  width:220px;
  height:220px;
  top:-40px;
  left:-60px;
  border-radius:50%;
  animation:waterFloat 14s infinite;
}

.bg-scene .shape.s2{
  width:280px;
  height:280px;
  right:-70px;
  top:70px;

  /* organic water blob */
  border-radius:58% 42% 63% 37% / 41% 52% 48% 59%;

  animation:waterFloat 18s infinite reverse;
}

.bg-scene .shape.s3{
  width:170px;
  height:170px;
  left:12%;
  bottom:10%;

  border-radius:61% 39% 55% 45% / 44% 58% 42% 56%;

  animation:waterFloat 16s infinite;
}

.bg-scene .shape.s4{
  width:160px;
  height:160px;
  right:16%;
  bottom:16%;

  border-radius:46% 54% 38% 62% / 53% 41% 59% 47%;

  animation:waterFloat 20s infinite reverse;
}

.bg-scene .shape.s5{
  width:280px;
  height:280px;
  right:30%;
  bottom:-120px;

  border-radius:50%;
  border-width:5px;
  border-color:rgba(125,211,252,0.35);

  animation:waterFloat 24s infinite;
}
/*  */

/* Main container */
#login-container{
  min-height:100vh;
  padding:20px;
  position:relative;
  z-index:2;
}
@keyframes blobMorph{
  0%,100%{
    border-radius:58% 42% 63% 37% / 41% 52% 48% 59%;
  }
  50%{
    border-radius:38% 62% 44% 56% / 57% 38% 62% 43%;
  }
}

/* Login card */
.login-card{
  background:rgba(255,255,255,0.82);
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.60);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:
    0 25px 60px rgba(14,165,233,0.18),
    0 8px 20px rgba(255,255,255,0.25);
  padding:40px 30px;
  max-width:380px;
  width:100%;
  animation:
    slideUp 0.6s ease-out,
    floatCard 6s ease-in-out infinite 0.6s;
  will-change:transform;
}

@keyframes floatCard{
  0%,100%{
    transform:translateY(0px);
  }
  50%{
    transform:translateY(-10px);
  }
}

@keyframes slideUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Logo */
.login-logo{
  width:90px;
  height:90px;
  margin:0 auto 16px;
  object-fit:cover;
  animation:fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown{
  from{
    opacity:0;
    transform:translateY(-20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Titles */
.system-title{
  font-size:20px;
  font-weight:700;
  color:#0f3b57;
  margin-bottom:6px;
  letter-spacing:-0.01em;
}

.system-subtitle{
  font-size:12px;
  color:#4b6b80;
  font-weight:500;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(14,165,233,0.15);
}

/* Labels */
.form-label{
  font-weight:600;
  color:#0f3b57;
  margin-bottom:10px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* Inputs */
.form-control{
  border:2px solid #d9eef8;
  border-radius:12px;
  padding:12px 16px;
  font-size:15px;
  transition:all 0.3s ease;
  background-color:rgba(255,255,255,0.75);
  color:#12384d;
}

.form-control:focus{
  border-color:#38bdf8;
  background-color:white;
  box-shadow:0 0 0 0.2rem rgba(56,189,248,0.18);
  outline:none;
}

.form-control::placeholder{
  color:#9fb9c7;
}

/* Input icon */
.input-group-text{
  border-radius:0 12px 12px 0;
  border:2px solid #d9eef8;
  border-left:none;
  cursor:pointer;
  transition:all 0.3s ease;
  color:#0284c7;
  background:white;
}

.input-group-text:hover{
  background:#f0fbff;
  color:#0369a1;
}

.input-group > .form-control:focus ~ .input-group-text{
  border-color:#38bdf8;
  background-color:white;
}

/* Forgot password */
.forgot-password-link{
  color:#0284c7;
  font-size:0.9rem;
  font-weight:600;
  text-decoration:none;
  transition:color 0.2s ease;
}

.forgot-password-link:hover{
  color:#0369a1;
  text-decoration:underline;
}

/* Login button */
.btn-primary{
  background:
    linear-gradient(
      135deg,
      #38bdf8 0%,
      #0284c7 100%
    );
  border:none;
  border-radius:12px;
  padding:12px 20px;
  font-weight:700;
  font-size:14px;
  margin-top:18px;
  transition:all 0.3s ease;
  text-transform:uppercase;
  letter-spacing:0.5px;
  box-shadow:0 6px 18px rgba(2,132,199,0.28);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(2,132,199,0.35);
  background:
    linear-gradient(
      135deg,
      #0ea5e9 0%,
      #0369a1 100%
    );
}

.btn-primary:active{
  transform:translateY(0);
}

.btn-primary:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
}

/* Error message */
#login-message{
  border-radius:12px;
  border:none;
  margin-bottom:24px;
  background:#eef9ff;
  color:#0369a1;
  border-left:4px solid #38bdf8;
  animation:slideDown 0.3s ease-out;
}

@keyframes slideDown{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

#login-message .btn-close{
  color:#0369a1;
}

/* Footer */
.footer-note{
  color:#4b6b80;
  font-size:13px;
  font-weight:600;
  text-align:center;
  margin-top:20px;
}

/* Icons */
.coloricon{
  color:#0284c7;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .bg-scene .shape,
  .login-card,
  .login-logo{
    animation:none !important;
  }
}

/* Mobile */
@media (max-width:480px){
  .login-card{
    padding:30px 20px;
  }

  .system-title{
    font-size:18px;
  }

  .login-logo{
    width:80px;
    height:80px;
  }
}