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

body{
  background:#f4f6fb;
}

/* layout */
.login-container{
  display:flex;
  height:100vh;
}

/* LEFT PANEL */
.login-left{
  width:60%;
  background:
    linear-gradient(rgb(13,64,119), rgba(20,45,110,.85)),
    url('/images/police-bg.jpg') center/cover;
  color:#fff;
  position:relative;
clip-path: polygon(0 0, 83% 0, 99% 100%, 0% 100%)
}

.left-overlay{
  padding:60px;
}

.logo{
  width:70px;
  margin-bottom:30px;
}

.login-left h1{
  font-size:36px;
  font-weight:700;
  line-height:1.3;
}

.subtitle{
  margin-top:15px;
  color:#39d2ff;
  font-weight:600;
}

.left-footer{
  position:absolute;
  bottom:40px;
  font-size:13px;
  opacity:.9;
}

/* RIGHT PANEL */
.login-right{
  width:40%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f7f9fc;
}

/* CARD */
.login-card{
  width:450px;
  background:#fff;
  padding:40px;
  border-radius:18px;
  box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.login-card h2{
  font-size:28px;
  font-weight:700;
}

.muted{
  color:#6b7280;
  margin-bottom:25px;
}

/* form */
.form-group{
  margin-bottom:18px;
}

.form-group label{
  font-size:14px;
  font-weight:600;
  display:block;
  margin-bottom:6px;
}

.form-group input{
  width:100%;
  padding:13px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font-size:14px;
}

.form-group input:focus{
  outline:none;
  border-color:#2a5298;
}

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

.eye{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
}

/* options */
.form-options{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  margin-bottom:22px;
}

/* button */
.btn-login{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg, #193CB8, #104E64);
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:.25s;
}

.btn-login:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 30px rgba(0,0,0,.2);
}

/* MOBILE */
@media(max-width:992px){
  .login-left{display:none;}
  .login-right{width:100%;}
}