:root {
   --login-primary: #4f46e5;
   --login-primary-dark: #312e81;
   --login-accent: #06b6d4;
   --login-text: #111827;
   --login-muted: #6b7280;
   --login-card-bg: rgba(255, 255, 255, 0.9);
   --login-border: rgba(255, 255, 255, 0.35);
}

body.login-page.modern-login {
   min-height: 100vh;
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   position: relative;
   overflow: hidden;
   font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body.login-page.modern-login::before {
   content: "";
   position: absolute;
   inset: 0;
   background:
      radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.35), transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.3), transparent 45%),
      linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.5));
   z-index: 0;
}

.modern-login-wrapper {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 980px;
   padding: 1.5rem;
}

.modern-login-card {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   border-radius: 22px;
   overflow: hidden;
   background: var(--login-card-bg);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--login-border);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
   animation: fadeSlideIn .45s ease-out;
}

.modern-login-brand {
   padding: 2.5rem;
   color: #ffffff;
   background: linear-gradient(160deg, var(--login-primary), var(--login-primary-dark));
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.modern-login-brand::after {
   content: "";
   position: absolute;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
   top: -80px;
   right: -80px;
}

.modern-login-brand h1 {
   position: relative;
   z-index: 1;
   margin: 0;
   font-weight: 700;
   letter-spacing: 0.2px;
}

.modern-login-brand p {
   position: relative;
   z-index: 1;
   margin: .75rem 0 0;
   opacity: .9;
   line-height: 1.5;
}

.brand-badge {
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   width: fit-content;
   margin-top: 1rem;
   background: rgba(255, 255, 255, 0.18);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 999px;
   padding: .4rem .9rem;
   font-size: .85rem;
   font-weight: 500;
}

.modern-login-form {
   padding: 2.3rem 2.3rem 2rem;
   color: var(--login-text);
   background: rgba(255, 255, 255, 0.82);
}

.modern-login-form h2 {
   margin: 0;
   font-size: 1.35rem;
   font-weight: 700;
   color: #0f172a;
}

.modern-login-form .subtitle {
   margin-top: .35rem;
   margin-bottom: 1.35rem;
   color: var(--login-muted);
   font-size: .92rem;
}

.modern-input-group {
   margin-bottom: 1rem;
}

.modern-input-group .input-group-text {
   background: #fff;
   border-right: 0;
   border-color: #e5e7eb;
   color: #6b7280;
}

.modern-input-group .form-control {
   border-left: 0;
   border-color: #e5e7eb;
   height: 46px;
   font-size: .94rem;
}

.modern-input-group .form-control:focus {
   border-color: #c7d2fe;
   box-shadow: 0 0 0 .2rem rgba(79, 70, 229, 0.12);
}

.modern-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: .75rem;
   margin-top: .5rem;
}

.modern-submit {
   border: 0;
   border-radius: 10px;
   font-weight: 600;
   padding: .65rem 1rem;
   min-width: 160px;
   background: linear-gradient(135deg, var(--login-primary), var(--login-accent));
   box-shadow: 0 10px 20px rgba(79, 70, 229, 0.25);
   transition: transform .15s ease, box-shadow .2s ease;
}

.modern-submit:hover {
   transform: translateY(-1px);
   box-shadow: 0 14px 22px rgba(79, 70, 229, 0.35);
}

.modern-submit:focus {
   box-shadow: 0 0 0 .2rem rgba(79, 70, 229, 0.28), 0 10px 20px rgba(79, 70, 229, 0.3);
}

@keyframes fadeSlideIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width: 900px) {
   .modern-login-card {
      grid-template-columns: 1fr;
   }

   .modern-login-brand {
      padding: 1.8rem;
   }

   .modern-login-form {
      padding: 1.6rem;
   }

   .modern-actions {
      flex-direction: column;
      align-items: stretch;
   }

   .modern-submit {
      width: 100%;
   }
}