:root{
  --navy:#0b1f3a;
  --navy-light:#12345c;
  --green:#0f6b4b;
  --green-dark:#0b5239;
  --green-soft:#1c8a62;
  --yellow:#f4c430;
  --yellow-soft:#ffe082;
  --white:#ffffff;
  --bg:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --input-bg:#f8fbff;
  --shadow:0 18px 45px rgba(15, 23, 42, 0.08);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html, body{
  min-height:100%;
  font-family:'Segoe UI', sans-serif;
}

body{
  background:#ffffff;
  color:var(--text);
}

/* ===== LAYOUT ===== */
.center-layout{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px 90px;
}

.login-box{
  width:100%;
  max-width:430px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:22px;
  padding:32px 28px 30px;
  text-align:center;
  box-shadow:var(--shadow);
}

/* ===== LOGO FIX (IMPORTANT) ===== */
.logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:18px;
  overflow:hidden;
}

.logo-wrap img{
  width:300px; /* base size */
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background:#fff;
  padding:4px;
  border-radius:18px;

  /* zoom fix for small logo inside image */
  transform:scale(1.45);
  transform-origin:center;
}

/* ===== TEXT ===== */
.login-box h2{
  color:var(--navy);
  font-size:28px;
  font-weight:800;
  margin-bottom:8px;
}

.sub{
  color:var(--muted);
  font-size:13px;
  margin-bottom:22px;
  font-weight:500;
  line-height:1.5;
}

/* ===== INPUT ===== */
.input-group{
  position:relative;
  margin-bottom:16px;
}

.input-group .input-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  color:#64748b;
  pointer-events:none;
  z-index:2;
}

.toggle-password{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:var(--navy-light);
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
}

.input{
  width:100%;
  height:48px;
  padding-left:42px;
  padding-right:44px;
  border-radius:12px;
  border:1px solid #dbe4ee;
  background:var(--input-bg);
  font-size:14px;
  color:var(--text);
  transition:.25s ease;
}

.input:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(15,107,75,0.10);
  background:#fff;
}

/* ===== LINKS ===== */
.form-links{
  display:flex;
  justify-content:flex-end;
  margin-bottom:14px;
  font-size:13px;
}

.form-links a,
.register a{
  text-decoration:none;
  color:var(--navy-light);
  font-weight:700;
}

.form-links a:hover,
.register a:hover{
  color:var(--green);
}

/* ===== CAPTCHA ===== */
.captcha-box{
  margin-bottom:18px;
  display:flex;
  justify-content:center;
  padding:14px;
  border-radius:14px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  overflow-x:auto;
}

/* ===== BUTTON ===== */
.login-btn{
  width:100%;
  background:linear-gradient(135deg, var(--navy), var(--green));
  border:none;
  padding:13px;
  border-radius:12px;
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
}

.login-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, var(--navy-light), var(--green-soft));
}

/* ===== ALERTS ===== */
.alert-error{
  background:#fff1f2;
  color:#b91c1c;
  padding:10px;
  border-radius:12px;
  margin-bottom:14px;
  font-size:13px;
  border:1px solid #fecdd3;
}

.success-box{
  background:#d4edda;
  color:#155724;
  padding:12px;
  border-radius:8px;
  margin-bottom:15px;
  text-align:center;
}

/* ===== FOOTER ===== */
.footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#ffffff;
  color:#64748b;
  text-align:center;
  padding:10px;
  font-size:12px;
  border-top:1px solid #e5e7eb;
}

/* ===== MOBILE ===== */
@media (max-width: 700px){
  .center-layout{
    padding:24px 14px 80px;
  }

  .login-box{
    padding:26px 18px 24px;
    border-radius:18px;
  }

  .logo-wrap img{
    width:260px;
    transform:scale(1.5);
  }

  .login-box h2{
    font-size:23px;
  }
}

@media (max-width: 576px){
  .center-layout{
    padding:20px 12px 80px;
  }

  .logo-wrap img{
    width:230px;
    transform:scale(1.6);
  }

  .input{
    height:46px;
    font-size:13px;
  }

  .login-btn{
    font-size:14px;
  }
}

@media (max-width: 380px){
  .logo-wrap img{
    width:200px;
    transform:scale(1.7);
  }

  .login-box h2{
    font-size:20px;
  }
}