:root { --pink:#fa3c65; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Inter', Arial, sans-serif;
  color: #222;
  background: url("../images/Background.png") no-repeat center center fixed;
  background-size: cover; 
  position: relative;
  overflow: hidden;
}

/* Decorative blobs */
.blob {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  z-index: -1;
  opacity: .22;
}
.blob1 { width:300px; height:280px; background:var(--pink); top:-80px; left:-100px; transform:rotate(25deg) }
.blob2 { width:240px; height:260px; background:#000; bottom:-100px; right:-60px; transform:rotate(-15deg) }
.blob3 { width:200px; height:200px; background:#555; top:40%; left:-70px; transform:rotate(40deg) }
.blob4 { width:150px; height:180px; background:#999; bottom:20%; right:30%; transform:rotate(70deg) }

.circle-top-right {
  width:240px; height:240px; background:var(--pink);
  position:absolute; top:-100px; right:-100px; border-radius:50%;
  z-index:-1; opacity:.35;
}

/* Login card */
.login-card {
  background: rgba(255,255,255,0.42); /* semi-transparent white */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1.4rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  z-index: 1;
}

.login-title {
  font-family:'Montserrat', Arial, sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}
.login-title span { color: var(--pink); }

/* Input fields */
.input-field {
  position: relative;
  margin-bottom: 1.4rem;
  text-align: left;
}
.input-field label {
  font-size: .9rem;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: .3rem;
}
.input-field input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid transparent;     /* reserve space */
  border-bottom: 2px solid var(--pink); /* underline */
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  background: transparent;
  transition: all .3s ease;
  box-sizing: border-box;            /* prevent overflow */
}
.input-field input:focus,
.input-field input:not(:placeholder-shown) {
  border: 2px solid var(--pink);    /* full pink box */
  border-radius: .6rem;
}

/* Button */
.login-btn {
  padding: 1rem;
  font-size: 1rem;
  font-weight: 700;
  background: #111827;
  color: #fff;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  width: 100%;
  margin-top: .8rem;
  transition: background .2s ease;
}
.login-btn:hover { background: #232323; }

/* Bottom text */
.alt-action {
  margin-top: 1rem;
  font-size: .92rem;
}
.alt-action a {
  color: var(--pink);
  font-weight: 600;
  text-decoration: none;
}
.alt-action a:hover { text-decoration: underline; }