/* ===============================
   AUTH RESET
================================ */
*{
  box-sizing:border-box;
}

body{
  min-height:100vh;
  background:#121212;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
  color:#fff;
}

/* ===============================
   LOGIN CARD
================================ */
.login-card{
  width:100%;
  max-width:420px;
  background:#1c1c1c;
  border-radius:20px;
  padding:42px 36px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* LOGO */
.login-logo{
  width:64px;
  height:64px;
  border-radius:14px;
  background:#111;
  border:1px solid #333;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.login-logo img{
  width:60px;
}

/* TITLES */
.login-card h1{
  font-size:22px;
  font-weight:700;
  text-align:center;
  margin-bottom:26px;
}

/* ===============================
   FORM ELEMENTS
================================ */
.form-label{
  font-size:13px;
  color:#aaa;
  margin-bottom:6px;
}

.form-control{
  background:#242424;
  border:1px solid #333;
  color:#fff;
  padding:12px 14px;
  border-radius:10px;
}

.form-control:focus{
  background:#242424;
  color:#fff;
  border-color:#ff5a3c;
  box-shadow:none;
}

/* PASSWORD */
.password-wrap{
  position:relative;
}

.password-wrap i{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#888;
  cursor:pointer;
}

/* FORGOT */
.forgot{
  font-size:13px;
  text-align:right;
  margin-top:6px;
}

.forgot a{
  color:#ff6b4a;
  text-decoration:none;
}

/* ===============================
   BUTTONS
================================ */
.btn-login{
  background:#ff5a3c;
  border:none;
  padding:14px;
  border-radius:12px;
  font-weight:600;
  margin-top:20px;
}

.btn-login:hover{
  background:#ff6b4a;
}

.divider{
  display:flex;
  align-items:center;
  margin:26px 0 18px;
  color:#777;
  font-size:13px;
}

.divider::before,
.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:#333;
}

.divider span{
  padding:0 12px;
}

.btn-google{
  background:#111;
  border:1px solid #333;
  color:#fff;
  padding:12px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.btn-google:hover{
  background:#1a1a1a;
}

/* FOOTER */
.login-footer{
  text-align:center;
  font-size:13px;
  margin-top:20px;
  color:#aaa;
}

.login-footer a{
  color:#fff;
  font-weight:600;
  text-decoration:none;
}