:root{
    --brand-red:#d32f2f;
    --brand-black:#0b0b0b;
    --brand-white:#ffffff;
    --accent-gray:#f4f4f4;
    }
body{
  /* background:linear-gradient(120deg,var(--brand-black),#212121); */
  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-position: center;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo {
    height: 120px;
    padding-bottom: 1rem;
}
.login-card{
  background:var(--brand-white);
  color:#222;
  border-radius:16px;
  box-shadow:0 8px 28px rgba(0,0,0,0.2);
  width:100%;
  max-width:420px;
  padding:2.5rem;
  position:relative;
  overflow:hidden;
}
.login-card::before{
  content:'';
  position:absolute;
  top:0;left:0;width:100%;height:6px;
  background:linear-gradient(90deg,var(--brand-red),#ff7b7b);
}
.form-control:focus{
  border-color:var(--brand-red);
  box-shadow:0 0 0 .25rem rgba(211,47,47,0.25);
}
.btn-login{
  background:var(--brand-red);
  color:var(--brand-white);
  border:none;
  border-radius:10px;
  padding:.75rem 1.25rem;
  width:100%;
  font-weight:600;
  transition:all .3s ease;
}
.btn-login:hover{background:#b71c1c;}
.text-muted a{color:var(--brand-red);text-decoration:none;}
.text-muted a:hover{text-decoration:underline;}