:root{
  --blue-dark: #0A2A66;
  --blue-accent: #428bd9;
  --pu-yellow: #F1C40F;
  --pu-yellow-2: #FFB400;
  --neutral-100: #F7F7F7;
  --card-radius: 16px;
  --text-dark: #16213A;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background: linear-gradient(135deg, var(--blue-dark) 0%, #1967d2 50%, var(--blue-accent) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--text-dark);
}

/* Center layout */
.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px 24px;
}

/* Card */
.login-card{
  width:100%;
  max-width:1000px;
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 20px 50px rgba(5,15,50,0.35);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr 1fr;
}

/* LEFT: branding */
.card-left{
  padding:56px 48px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
}

.logo{
  width:200px;
  height:auto;
  border-radius:8px;
  /* box-shadow: 0 6px 18px rgba(10,42,102,0.12); */
}

.brand{
  margin:6px 0 0;
  font-size:36px;
  line-height:1.05;
  color:var(--blue-dark);
  font-weight:800;
}

.subtitle{
  margin:8px 0 0;
  color:#23365a;
  font-size:15px;
  font-weight:600;
  opacity:0.9;
}

/* RIGHT: form */
.card-right{
  padding:32px 36px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card-inner{
  width:100%;
  max-width:360px;
}

.card-inner h2{
  margin:0;
  color:var(--blue-dark);
  font-size:24px;
  font-weight:700;
}

.muted{
  margin:6px 0 18px;
  color:#6b7a99;
  font-size:14px;
}

/* inputs */
input[type="email"],
input[type="password"]{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border:1px solid #e3e9f3;
  font-size:15px;
  margin-bottom:14px;
  outline:none;
  transition:box-shadow .15s, border-color .15s;
}
input:focus{
  border-color:var(--blue-accent);
  box-shadow:0 6px 18px rgba(77,163,255,0.12);
}

/* button */
button.btn-primary{
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  border:0;
  font-weight:700;
  font-size:16px;
  background: linear-gradient(180deg,var(--pu-yellow),var(--pu-yellow-2));
  color:var(--blue-dark);
  cursor:pointer;
  box-shadow:0 8px 18px rgba(241,196,15,0.24);
}
button.btn-primary:hover{
  transform:translateY(-1px);
}

/* footer */
.card-footer{
  margin-top:18px;
  text-align:center;
  color:#97a5c3;
  font-size:13px;
}

/* accessibility: hide label visually but keep for screen readers */
.sr-only{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* Responsive */
@media (max-width:900px){
  .login-card{grid-template-columns:1fr; max-width:720px;}
  .card-left{order:2; padding:28px; text-align:center; align-items:center;}
  .card-right{order:1; padding:28px;}
  .brand{font-size:28px}
}