body[data-page="login"]{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(227,6,19,.06), transparent 25%),
    radial-gradient(circle at right center, rgba(13,87,161,.08), transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#eef3f9 100%);
}

body[data-page="login"] .login-shell{
  min-height:100vh;
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}

body[data-page="login"] .login-wrap{
  width:min(1380px, 100%);
}

body[data-page="login"] .login-card{
  border-radius:34px;
  overflow:hidden;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 30px 80px rgba(31,41,55,.10);
  backdrop-filter:blur(10px);
}

body[data-page="login"] .login-showcase{
  min-height:760px;
  padding:42px;
  color:#fff;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg, #ff0f1f 0%, #d51a3a 22%, #7f3f76 60%, #295fae 100%);
}

body[data-page="login"] .login-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 90% 6%, rgba(255,255,255,.14) 0, rgba(255,255,255,.14) 120px, transparent 121px),
    radial-gradient(circle at 6% 92%, rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 95px, transparent 96px),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  pointer-events:none;
}

body[data-page="login"] .login-showcase > *{
  position:relative;
  z-index:1;
}

body[data-page="login"] .login-form-wrap{
  min-height:760px;
  padding:42px;
  background:#ffffffd9;
}

body[data-page="login"] .login-logo-box{
  background:#fff;
  border-radius:24px;
  padding:20px;
  min-height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:228px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

body[data-page="login"] .login-logo-box img{
  max-width:100%;
  max-height:88px;
  width:auto;
}

body[data-page="login"] .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  border-radius:999px;
  padding:.6rem 1rem;
  font-size:.9rem;
  font-weight:700;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  text-transform:none;
  letter-spacing:0;
}

body[data-page="login"] .login-showcase h1{
  font-size:3.4rem;
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:800;
  margin-bottom:1.25rem;
}

body[data-page="login"] .login-showcase p,
body[data-page="login"] .login-showcase .text-white-50{
  color:rgba(255,255,255,.78) !important;
}

body[data-page="login"] .login-feature{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.14);
}

body[data-page="login"] .login-feature:first-of-type{
  border-top:none;
}

body[data-page="login"] .feature-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:none;
  flex-shrink:0;
}

body[data-page="login"] .feature-icon i{
  font-size:1.1rem;
}

body[data-page="login"] .stat-float{
  border-radius:22px;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
}

body[data-page="login"] .metric-lg{
  font-size:2rem;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
}

body[data-page="login"] .footer-note{
  color:#8a95a7;
  font-size:.92rem;
}

body[data-page="login"] .soft-label{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#72819a;
  font-weight:800;
}

body[data-page="login"] .muted{
  color:#73839d;
}

body[data-page="login"] .form-control{
  min-height:56px;
  border-radius:18px;
  border:1px solid #d9e2ee;
  background:rgba(255,255,255,.84);
  box-shadow:none;
}

body[data-page="login"] .form-control:focus{
  border-color:#9cb5d8;
  box-shadow:0 0 0 .2rem rgba(13,87,161,.08);
}

body[data-page="login"] .btn-brand{
  min-height:58px;
  border:none;
  border-radius:18px;
  font-size:1.15rem;
  font-weight:800;
  color:#fff;
  background:linear-gradient(90deg, #ff0015 0%, #ff4457 100%);
  box-shadow:0 18px 32px rgba(255,0,21,.16);
}

body[data-page="login"] .btn-brand:hover{
  color:#fff;
  filter:brightness(.98);
}

body[data-page="login"] .password-toggle{
  color:#6b7280;
}

body[data-page="login"] .password-toggle:hover{
  color:#243041;
}

body[data-page="login"] .form-check-input{
  border-color:#d2dbe7;
}

body[data-page="login"] .form-check-input:checked{
  background-color:#e30613;
  border-color:#e30613;
}

@media (max-width: 1199.98px){
  body[data-page="login"] .login-showcase h1{
    font-size:2.8rem;
  }
}

@media (max-width: 991.98px){
  body[data-page="login"] .login-shell{
    padding:16px;
  }

  body[data-page="login"] .login-showcase,
  body[data-page="login"] .login-form-wrap{
    min-height:auto;
    padding:28px;
  }

  body[data-page="login"] .login-logo-box{
    width:100%;
    max-width:240px;
  }

  body[data-page="login"] .login-showcase h1{
    font-size:2.3rem;
  }
}

@media (max-width: 575.98px){
  body[data-page="login"] .login-shell{
    padding:10px;
  }

  body[data-page="login"] .login-showcase,
  body[data-page="login"] .login-form-wrap{
    padding:22px;
  }

  body[data-page="login"] .login-showcase h1{
    font-size:1.9rem;
  }

  body[data-page="login"] .btn-brand{
    font-size:1rem;
    min-height:54px;
  }
}