:root{
  --brand-primary:#2f66b4;
  --panel-bg:#ffffff;
  --page-bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--page-bg);
  color:var(--text);
}

.login-layout{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
}

.login-visual{
  position:relative;
  background-image:url("../../admin/assest/logos/login-02.jpg");
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.login-visual__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(2, 10, 20, 0.25) 0%, rgba(2, 10, 20, 0.35) 60%, rgba(2, 10, 20, 0.5) 100%);
}

.login-visual__title{
  position:absolute;
  top:26px;
  left:28px;
  right:28px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size: clamp(42px, 6vw, 86px);
  line-height:0.95;
  color:rgba(207, 242, 255, 0.35);
}

.login-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(18px, 4vw, 48px);
  background:var(--panel-bg);
}

.login-card{
  width:min(420px, 100%);
}

.login-logo{
  height:34px;
  width:auto;
  display:block;
  margin:0 auto 34px;
}

.login-title{
  font-size:30px;
  font-weight:700;
  margin:0 0 10px;
}

.login-subtitle{
  margin:0 0 26px;
  color:var(--muted);
  font-weight:500;
}

.input-with-icon{position:relative}

.input-icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  color:#9ca3af;
}

.login-input{
  border-radius:999px;
  padding-left:54px;
  border-color:var(--border);
  height:54px;
}

.login-input:focus{
  border-color:rgba(47, 102, 180, 0.45);
  box-shadow:0 0 0 .25rem rgba(47, 102, 180, 0.14);
}

.login-btn{
  margin-top:6px;
  border-radius:999px;
  height:52px;
  font-weight:600;
  background:var(--brand-primary);
  border-color:var(--brand-primary);
}

.login-btn:disabled{opacity:.7}

.login-forgot{
  display:inline-block;
  margin-top:14px;
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  font-size:14px;
}

.login-forgot:hover{text-decoration:underline}

@media (max-width: 991px){
  .login-layout{grid-template-columns:1fr}
  .login-visual{display:none}
  .login-panel{min-height:100vh}
}