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

body{
 height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}

.container{
 width:100%;
 max-width:500px;
 padding:20px;
}

form{
 background:rgba(255,255,255,0.1);
 backdrop-filter:blur(15px);
 border-radius:16px;
 padding:40px 50px;
 box-shadow:0 20px 40px rgba(0,0,0,0.2);
 color:#fff;
 animation:fadeIn 0.6s ease-in-out;
}

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

h3{
 text-align:center;
 margin-bottom:25px;
 font-weight:600;
 letter-spacing:1px;
}

.input-group{
 position:relative;
 margin-bottom:20px;
}

input{
 width:100%;
 padding:12px 14px;
 border-radius:8px;
 border:none;
 outline:none;
 background:rgba(255,255,255,0.2);
 color:#fff;
 font-size:14px;
 transition:0.3s;
}

input::placeholder{
 color:#eee;
}

input:focus{
 background:rgba(255,255,255,0.3);
 box-shadow:0 0 0 2px #00c6ff;
}

button{
 width:100%;
 padding:12px;
 border:none;
 border-radius:8px;
 background:linear-gradient(90deg,#00c6ff,#0072ff);
 color:#fff;
 font-weight:600;
 font-size:15px;
 cursor:pointer;
 transition:0.3s;
}

button:hover{
 transform:translateY(-2px);
 box-shadow:0 10px 20px rgba(0,0,0,0.3);
}

.erro{
 background:rgba(255,0,0,0.2);
 padding:10px;
 border-radius:6px;
 margin-bottom:15px;
 text-align:center;
 font-size:14px;
}

/* =========================
   SUPER RESPONSIVO LOGIN
========================= */


/* ---------- 1200px ↓ ---------- */
@media (max-width: 1200px){
  .container{
    max-width: 450px;
  }
}


/* ---------- 992px ↓ (Tablet) ---------- */
@media (max-width: 992px){

  body{
    padding: 25px 15px;
    align-items: flex-start;
  }

  .container{
    margin-top: 60px;
  }

  form{
    padding: 35px 40px;
  }

  h3{
    font-size: 20px;
  }

}


/* ---------- 768px ↓ (Tablet pequeno / Cel grande) ---------- */
@media (max-width: 768px){

  body{
    padding: 20px 12px;
  }

  .container{
    max-width: 100%;
    padding: 10px;
  }

  form{
    padding: 30px 25px;
    border-radius: 14px;
  }

  h3{
    font-size: 18px;
    margin-bottom: 20px;
  }

  input{
    font-size: 13px;
    padding: 11px 12px;
  }

  button{
    font-size: 14px;
    padding: 11px;
  }

}


/* ---------- 480px ↓ (Celular padrão) ---------- */
@media (max-width: 480px){

  body{
    padding: 15px 10px;
  }

  form{
    padding: 25px 18px;
    border-radius: 12px;
  }

  h3{
    font-size: 17px;
  }

  input{
    font-size: 12px;
    padding: 10px;
    border-radius: 6px;
  }

  button{
    font-size: 13px;
    padding: 10px;
    border-radius: 6px;
  }

  .erro{
    font-size: 12px;
    padding: 8px;
  }

}


/* ---------- 380px ↓ (Celular muito pequeno) ---------- */
@media (max-width: 380px){

  h3{
    font-size: 15px;
  }

  input{
    font-size: 11px;
  }

  button{
    font-size: 12px;
  }

}


/* ---------- Landscape Mobile ---------- */
@media (max-height: 500px) and (orientation: landscape){

  body{
    align-items: flex-start;
  }

  .container{
    margin-top: 20px;
  }

  form{
    padding: 20px;
  }

}