/* =====================
   BACKGROUND
   ===================== */
body{
  margin:0;
  min-height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  position: relative;

  background: linear-gradient(
    to bottom,
    hsl(191, 51%, 68%) 0%,
    hsl(189, 63%, 83%) 14%,
    hsl(328, 53%, 72%) 100%
  );
}

/* ===================== FAIRY LIGHTS ===================== 
*/ .fairy-left, .fairy-mid, .fairy-right{ 
  position: absolute;

  top: 0; 
  width: min(520px, 70vw);
  height: auto; 
  pointer-events: none;
  z-index: 0; opacity: 0.95; 
  filter: drop-shadow(0 0 12px rgba(255, 215, 140, 0.45));
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%); }
  
  .fairy-left{ 
    left: 0; 
    top: -50px; 
  }
    
    
    
  .fairy-right{ 
  right: 300; 
  transform: scaleX(-1); /* mirror it */
  transform-origin: top right;
  top: -50px; }
      
  .fairy-mid{ 
  left: 97%; 
  transform: translateX(-50%); 
  width: min(620px, 80vw);
   /* slightly wider than sides */ 
  height: auto; top: -65px; /* a tiny bit higher */ 
  opacity: 0.92; } 
  
/* =====================
   THREE HANGING LANTERNS
   ===================== */
.lantern{
  position: absolute;
  top: 0;
  width: min(220px, 40vw);
  height: auto;
  pointer-events: none;
  z-index: 8;
  filter: drop-shadow(0 14px 28px rgba(63,29,50,0.22));
  opacity: 0.98;
  transform-origin: top center;
  animation: lanternSway 4.5s ease-in-out infinite;
}

.lantern-left{
  left: 1%;
  animation-delay: 0.5s;
}

.lantern-center{
  left: 52%;
  transform: translateX(-50%);
  animation-delay: 0s;
}

.lantern-right{
  right: 21%;
  animation-delay: 1s;
  top: 5px;
}

@keyframes lanternSway{
  0%,100%{ transform: rotate(-1.5deg); }
  50%{ transform: rotate(1.5deg); }
}

.lantern-center{
  animation: lanternSwayCenter 4.5s ease-in-out infinite;
}

@keyframes lanternSwayCenter{
  0%,100%{ transform: translateX(-50%) rotate(-1.5deg); }
  50%{ transform: translateX(-50%) rotate(1.5deg); }
}

/* =====================
   AUTH CARD
   ===================== */
.auth-wrap{
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 160px 18px 40px;
  box-sizing: border-box;
}

.auth-card{
  width: min(380px, 100vw);
  padding: 8px 10px;
  border-radius: 22px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 36px rgba(63,29,50,0.12);
  top:30px;
  position: relative;
  
}

.auth-title{
  margin: 0 0 0px;
  font-family: 'Cinzel', serif;
  text-align:center;
  color: rgba(36, 79, 111, 0.95);
  font-weight: 600;
  font-size: 1.3rem;
}

.auth-subtitle{
  margin: 0 0 1px;
  font-family: 'Atma', cursive;
  color: rgba(36, 79, 111, 0.9);
  text-align:center;
  font-size: 0.9rem;
}

.auth-form{ display:flex; flex-direction:column; gap: 10px; }

.label{
  font-family: 'Atma', cursive;
  color: rgba(50,7,55,0.82);
  margin-top: 4px;
}

.field{
  width: 100%;
  padding: 11px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.14);
  outline: none;
  font-size: 0.95rem;
  font-family: 'Atma', cursive;
  color: rgba(50,7,55,0.92);
  box-sizing: border-box;
}

.btn{
  margin-top: 6px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 10px 14px;
  font-family: 'Atma', cursive;
  font-size: 1rem;
  color: rgba(50,7,55,0.90);
  background: linear-gradient(
    120deg,
    rgba(3, 57, 84, 0.65),
    rgba(175, 231, 255, 0.65),
    rgba(190,230,255,0.58)
  );
  box-shadow: 0 10px 18px rgba(63,29,50,0.10);
}

.small{
  margin: 8px 0 0;
  text-align:center;
  font-family: 'Atma', cursive;
  color: rgba(50,7,55,0.72);
}

.small a{ color: rgba(36, 79, 111, 0.95); text-decoration: none; font-weight: 700; }

.msg{
  margin: 6px 0 0;
  text-align:center;
  font-family: 'Atma', cursive;
  color: rgba(80, 16, 70, 0.9);
}