auth.css

/* ================= GLOBAL ================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:"Poppins",sans-serif;
}

/* ================= BACKGROUND ================= */
body{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;

  /* SAME pastel gradient as main website */
  background: linear-gradient(
    135deg,
    #fdf6f0,
    #f8e8ee,
    #e4f0f6
  );

  color:#5c5470;
}

/* ================= AUTH CARD ================= */
.auth-container{
  width:400px;
  padding:45px;
  border-radius:26px;

  /* pastel glass effect */
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(15px);

  border:1px solid rgba(255,255,255,0.85);

  box-shadow:
    0 16px 45px rgba(113,79,127,0.18);

  text-align:center;
  animation: authCardIn 700ms cubic-bezier(0.22,1,0.36,1) both;
}

/* ================= TITLE ================= */
h2{
  font-family:'Playfair Display', serif;
  color:#6d4e86;
  margin-bottom:28px;
  font-weight:600;
  letter-spacing:0.5px;
  animation: authTitleIn 760ms cubic-bezier(0.22,1,0.36,1) both;
  transition: letter-spacing 220ms ease, transform 220ms ease;
}

h2:hover{
  transform: translateY(-1px);
  letter-spacing: 1px;
}

/* ================= INPUT GROUP ================= */
.input-group{
  position:relative;
  margin-bottom:18px;
  opacity:0;
  transform:translateY(14px);
  animation: authFadeUp 560ms cubic-bezier(0.22,1,0.36,1) forwards;
}

.input-group:nth-of-type(1){
  animation-delay:140ms;
}

.input-group:nth-of-type(2){
  animation-delay:220ms;
}

.input-group:nth-of-type(3){
  animation-delay:300ms;
}

.input-group:nth-of-type(4){
  animation-delay:380ms;
}

input{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.9);
  outline:none;

  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);

  color:#6a4e77;
  font-size:15px;
  transition:0.25s ease;
}

input::placeholder{
  color:#b08fbf;
}

/* input focus pastel glow */
input:focus{
  border-color:#ff9eb5;
  box-shadow:0 0 0 3px rgba(255,158,181,0.25);
}

/* ================= PASSWORD TOGGLE ================= */
.toggle-password{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:16px;
  color:#8a6aa3;
}

/* ================= BUTTON ================= */
button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:999px;
  margin-top:12px;

  /* pastel gradient button (same family as navbar active) */
  background:linear-gradient(135deg,#ff86ba,#b17ff6);
  color:white;
  font-size:16px;
  font-weight:600;
  cursor:pointer;

  transition: all 0.3s ease;
  opacity:0;
  transform:translateY(14px);
  animation: authFadeUp 560ms cubic-bezier(0.22,1,0.36,1) 420ms forwards;
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(191,115,185,0.35);
}

/* ================= LINKS ================= */
p{
  margin-top:20px;
  color:#7a5c8e;
  opacity:0;
  transform:translateY(14px);
  animation: authFadeUp 560ms cubic-bezier(0.22,1,0.36,1) 500ms forwards;
}

a{
  color:#ff86ba;
  font-weight:600;
  text-decoration:none;
  transition:0.25s;
}

a:hover{
  color:#b23e86;
}

/* ================= ERROR ================= */
.error{
  color:#ff6fa3;
  font-size:14px;
  margin-top:8px;
}

@keyframes authCardIn{
  from{
    opacity:0;
    filter: blur(8px);
  }
  to{
    opacity:1;
    filter: blur(0);
  }
}

@keyframes authTitleIn{
  from{
    opacity:0;
    transform:translateY(12px);
    letter-spacing:0.2em;
  }
  to{
    opacity:1;
    transform:translateY(0);
    letter-spacing:0.03em;
  }
}

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

@media (prefers-reduced-motion: reduce){
  .auth-container,
  h2,
  .input-group,
  button,
  p{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}