:root {
  --login-ink: #14213d;
  --login-muted: #718096;
  --login-blue: #2879d8;
  --login-green: #159447;
  --login-border: #d4deea;
}

.login-page {
  min-height: 100vh;
  padding: 24px;
  background: #edf3f8;
  color: var(--login-ink);
  font-family: 'Inter', sans-serif;
}

.login-wrapper {
  width: min(1450px, 95vw);
  min-height: 720px;
  margin: 0 auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: 54% 46%;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 25px 70px rgba(31, 60, 90, 0.15);
}

.left-panel {
  position: relative;
  overflow: hidden;
  padding: 55px 60px 35px;
  background: radial-gradient(circle at 85% 20%, rgba(54, 177, 125, 0.13), transparent 32%), linear-gradient(135deg, #fff 0%, #f3faf7 100%);
}

.left-panel::after {
  position: absolute;
  right: -220px;
  bottom: -250px;
  width: 500px;
  height: 500px;
  border: 60px solid rgba(48, 174, 127, 0.05);
  border-radius: 50%;
  content: '';
}

.plus91-logo,
.pmjay-brand,
.description,
.features {
  position: relative;
  z-index: 2;
}

.plus91-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 55px;
}

.plus91-logo-image {
  display: block;
  width: 180px;
  height: auto;
}

.plus-icon {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg, #2879d8, #2262bd);
}

.plus-icon::before,
.plus-icon::after {
  position: absolute;
  background: #fff;
  border-radius: 9px;
  content: '';
}

.plus-icon::before { width: 17px; height: 43px; top: 5px; left: 18px; }
.plus-icon::after { width: 43px; height: 17px; top: 18px; left: 5px; }

.logo-text { color: #142b58; font-size: 38px; font-weight: 800; letter-spacing: -2px; }
.logo-text span { color: #2976ce; }
.tagline { margin-top: -4px; color: #65758b; font-size: 10px; letter-spacing: 1.5px; }

.pmjay-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.pmjay-logo-image { display: block; width: 190px; height: auto; flex: 0 0 auto; }
.pmjay-title h2 { margin: 0 0 6px; color: #173d42; font-size: 25px; line-height: 1.15; }
.pmjay-title h3 { margin: 0; color: var(--login-green); font-size: 21px; }

.description { max-width: 500px; margin-top: 25px; }
.description h1 { margin: 0 0 10px; color: #1d344e; font-size: 24px; }
.description p { margin: 0; color: var(--login-muted); font-size: 15px; line-height: 1.6; }

.features { display: flex; gap: 24px; margin-top: 40px; }
.feature { width: 105px; }
.feature-icon { display: flex; width: 60px; height: 60px; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 15px; font-size: 23px; }
.feature:nth-child(1) .feature-icon { color: #249b63; background: #e5f5eb; }
.feature:nth-child(2) .feature-icon { color: #5965ca; background: #e9eaff; }
.feature:nth-child(3) .feature-icon { color: #2178cc; background: #e3f1ff; }
.feature:nth-child(4) .feature-icon { color: #ed7325; background: #fff0e5; }
.feature span { color: #20364e; font-size: 13px; font-weight: 600; line-height: 1.35; }

.india-map { position: absolute; right: 25px; bottom: 70px; z-index: 1; width: 390px; height: 450px; opacity: 0.16; }
.india-shape { width: 300px; height: 390px; margin: auto; background: linear-gradient(135deg, #2fae80, #75d0a8); clip-path: polygon(42% 0%, 57% 5%, 61% 15%, 72% 20%, 67% 32%, 76% 41%, 71% 51%, 79% 59%, 68% 66%, 65% 78%, 57% 85%, 53% 100%, 45% 89%, 39% 79%, 32% 68%, 21% 62%, 27% 50%, 17% 42%, 27% 33%, 24% 23%, 34% 17%, 33% 7%); }
.map-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #159d65; box-shadow: 0 0 0 5px rgba(21, 157, 101, 0.12); }
.dot1 { left: 190px; top: 100px; } .dot2 { left: 220px; top: 165px; } .dot3 { left: 170px; top: 205px; } .dot4 { left: 235px; top: 250px; } .dot5 { left: 195px; top: 300px; } .dot6 { left: 250px; top: 345px; }

.right-panel { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 80px; background: #fff; }
.right-panel::before,
.right-panel::after { position: absolute; right: -140px; width: 350px; height: 350px; border: 45px solid rgba(65, 186, 153, 0.09); border-radius: 50%; content: ''; }
.right-panel::before { top: -130px; }
.right-panel::after { right: -160px; bottom: -180px; width: 400px; height: 400px; border-width: 50px; opacity: 0.75; }
.login-content { position: relative; z-index: 2; width: 100%; max-width: 560px; margin: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.welcome { margin-bottom: 10px; color: var(--login-muted); font-size: 14px; font-weight: 600; letter-spacing: 3px; }
.login-title { margin: 0 0 14px; color: #111d40; font-size: 38px; line-height: 1.15; }
.login-subtitle { margin: 0 0 40px; color: var(--login-muted); font-size: 16px; line-height: 1.6; }
.form-group { margin-bottom: 23px; }
.form-label { display: block; margin-bottom: 9px; color: #192d49; font-size: 15px; font-weight: 600; }
.input-wrapper { position: relative; }
.input-icon { position: absolute; top: 50%; left: 18px; z-index: 1; color: var(--login-muted); font-size: 17px; transform: translateY(-50%); }
.form-control { width: 100%; height: 58px; padding: 0 50px; border: 1px solid var(--login-border); border-radius: 11px; outline: none; color: #172b4d; font: inherit; font-size: 15px; transition: all 0.25s ease; }
.form-control:focus { border-color: #3578cf; box-shadow: 0 0 0 4px rgba(53, 120, 207, 0.08); }
.form-control::placeholder { color: #9aa8b9; }
.password-toggle { position: absolute; top: 50%; right: 18px; padding: 4px; border: 0; background: transparent; color: var(--login-muted); cursor: pointer; font-size: 16px; transform: translateY(-50%); }
.login-options { display: flex; align-items: center; margin: 5px 0 27px; }
.remember { display: flex; align-items: center; gap: 10px; color: #31435b; font-size: 14px; }
.remember input { width: 21px; height: 21px; accent-color: #2878d1; cursor: pointer; }
.login-button { width: 100%; height: 58px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #397fd1, #286cc1); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 20px rgba(43, 113, 200, 0.22); transition: all 0.25s ease; }
.login-button:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(43, 113, 200, 0.3); }
.login-button i { margin-left: 10px; }
.login-error { margin-bottom: 20px; padding: 11px 12px; border: 1px solid #fecdca; border-radius: 7px; background: #fef3f2; color: #b42318; font-size: 12px; }
.footer { position: relative; z-index: 2; margin-top: 45px; color: #8190a5; font-size: 12px; text-align: center; }
.footer-line { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-line::before, .footer-line::after { flex: 1; height: 1px; background: #e0e6ed; content: ''; }
.footer strong { color: #63748a; }
.security { margin-top: 13px; color: #9aa6b5; font-size: 11px; }

@media (max-width: 1100px) {
  .login-wrapper { grid-template-columns: 48% 52%; }
  .left-panel { padding: 45px 40px; }
  .right-panel { padding: 60px 50px; }
  .login-title { font-size: 32px; }
  .india-map { right: -60px; opacity: 0.1; }
}

@media (max-width: 850px) {
  .login-wrapper { display: block; min-height: auto; }
  .left-panel { min-height: 480px; }
  .india-map { right: 50%; bottom: -100px; transform: translateX(50%); }
  .right-panel { padding: 55px 35px; }
}

@media (max-width: 550px) {
  .login-page { padding: 0; }
  .login-wrapper { width: 100%; border-radius: 0; }
  .left-panel { min-height: 430px; padding: 35px 25px; }
  .plus91-logo { margin-bottom: 35px; }
  .logo-text { font-size: 30px; }
  .pmjay-logo-image { width: 150px; }
  .pmjay-title h2 { font-size: 19px; }
  .pmjay-title h3 { font-size: 17px; }
  .features { flex-wrap: wrap; gap: 12px; }
  .feature { width: 85px; }
  .feature-icon { width: 50px; height: 50px; }
  .right-panel { padding: 45px 25px; }
  .login-title { font-size: 28px; }
  .india-map { display: none; }
}