:root{
  --silama-blue:#0c46ad;
  --silama-blue-dark:#09398f;
  --silama-blue-soft:#eaf3ff;
  --silama-yellow:#f6c516;
  --silama-text:#10233f;
  --silama-muted:#65758b;
  --silama-bg-1:#f4f3de;
  --silama-bg-2:#e8f0ff;
  --silama-bg-3:#cadeff;
  --silama-border:#efc53d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--silama-text);
  background:
    linear-gradient(90deg, rgba(244,243,222,1) 0%, rgba(241,245,240,1) 28%, rgba(225,236,255,1) 68%, rgba(202,222,255,1) 100%);
}
.login-page-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px 18px;
}
.login-shell{
  width:min(1160px, 100%);
  display:grid;
  grid-template-columns:1fr 1fr;
  border:3px solid var(--silama-border);
  border-radius:34px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 22px 55px rgba(22,48,91,.14);
}
.login-left{
  background:var(--silama-blue);
  color:#fff;
  padding:40px 48px 44px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.logo-card{
  width:min(340px, 100%);
  margin:6px auto 22px;
  background:#fff;
  border:3px solid var(--silama-border);
  border-radius:14px;
  padding:10px 16px;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}
.logo-card img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.left-brand-title{
  text-align:center;
  font-size:28px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:.01em;
  margin-top:8px;
}
.left-brand-subtitle{
  text-align:center;
  font-size:18px;
  font-weight:700;
  line-height:1.25;
  margin-top:2px;
}
.left-heading{
  font-size:34px;
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:58px 0 18px;
}
.left-heading .accent{color:#ffe01f}
.left-desc{
  font-size:15px;
  line-height:1.8;
  color:rgba(255,255,255,.94);
  max-width:510px;
}
.left-footer{
  margin-top:auto;
  padding-top:28px;
  color:rgba(255,255,255,.52);
  font-size:14px;
}
.login-right{
  background:#fff;
  padding:56px 52px 48px;
  display:flex;
  align-items:center;
}
.form-box{width:100%}
.form-title{
  font-size:32px;
  font-weight:900;
  line-height:1.1;
  margin:0;
  color:#13284b;
}
.form-subtitle{
  margin:10px 0 34px;
  color:var(--silama-muted);
  font-size:18px;
}
.input-group-shell{margin-bottom:18px}
.input-label{
  display:block;
  font-size:17px;
  font-weight:700;
  color:#111f38;
  margin-bottom:10px;
}
.input-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  border:1.8px solid #e0ba39;
  background:#eef6ff;
  border-radius:18px;
  padding:0 18px;
}
.input-wrap input{
  border:0;
  outline:none;
  background:transparent;
  width:100%;
  height:52px;
  color:#20304d;
  font-size:16px;
}
.input-wrap input::placeholder{color:#77879e}
.input-icon,
.toggle-password{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#67788f;
}
.toggle-password{
  cursor:pointer;
  border:0;
  background:transparent;
  padding:0;
}
.form-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin:6px 0 22px;
}
.forgot-link,
.bottom-link{
  color:var(--silama-blue);
  font-weight:700;
  text-decoration:none;
}
.forgot-link:hover,
.bottom-link:hover{text-decoration:underline}
.login-btn{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:18px;
  background:var(--silama-blue);
  color:#fff;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(12,70,173,.18);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.login-btn:hover{transform:translateY(-1px); background:var(--silama-blue-dark); box-shadow:0 16px 32px rgba(12,70,173,.23)}
.login-btn .btn-icon{margin-right:8px}
.bottom-register{
  margin-top:24px;
  text-align:center;
  color:#4d5c73;
  font-size:16px;
}
.alert-box{
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:18px;
  font-size:14px;
}
.alert-danger{background:#fff2f2;color:#982d2d;border:1px solid #f1bcbc}
.alert-success{background:#eef9f1;color:#0e7a43;border:1px solid #bfe5cc}
@media (max-width: 991.98px){
  .login-shell{grid-template-columns:1fr}
  .login-left{padding:34px 28px 32px}
  .login-right{padding:38px 28px}
  .left-heading{margin-top:34px;font-size:28px}
  .form-title{font-size:28px}
}
@media (max-width: 575.98px){
  .login-page-wrap{padding:18px 12px}
  .login-shell{border-radius:24px}
  .login-left,.login-right{padding:24px 18px}
  .logo-card{padding:10px}
  .left-brand-title{font-size:24px}
  .left-brand-subtitle{font-size:16px}
  .left-heading{font-size:24px}
  .form-title{font-size:24px}
  .form-subtitle{font-size:16px}
  .input-label{font-size:15px}
  .input-wrap{min-height:54px}
  .login-btn{min-height:54px;font-size:17px}
}