:root{
  --navy:#010d35;
  --blue:#0075ff;
  --orange:#fe951c;
}

body{
  min-height:100vh;
  padding-top:86px;
  background:#eef4fb;
  color:var(--navy);
}

.active-login{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}

.login-page{
  min-height:calc(100vh - 86px);
  display:flex;
  align-items:center;
  padding:58px 18px;
  background:
    radial-gradient(circle at 10% 16%, rgba(0,117,255,0.16), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(254,149,28,0.16), transparent 24%),
    linear-gradient(180deg, #eef7ff 0%, #ffffff 48%, #eef4fb 100%);
}

.login-shell{
  width:min(100%, 1120px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap:28px;
  align-items:stretch;
}

.login-visual,
.login-card{
  border-radius:30px;
  box-shadow:0 34px 86px rgba(8,24,67,0.14);
}

.login-visual{
  position:relative;
  overflow:hidden;
  min-height:560px;
  padding:44px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,0.22), transparent 28%),
    linear-gradient(145deg, #010d35 0%, #073a8e 58%, #0075ff 100%);
}

.login-visual::after{
  content:"";
  position:absolute;
  inset:28px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:24px;
  pointer-events:none;
}

.login-kicker,
.login-card-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:34px;
  padding:0 16px;
  border-radius:999px;
  font-size:0.72rem;
  font-weight:850;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.login-kicker{
  position:absolute;
  z-index:2;
  top:42px;
  left:44px;
  background:linear-gradient(90deg, var(--orange), #ff7b00);
}

.login-image-frame{
  position:absolute;
  top:88px;
  right:42px;
  width:min(46%, 270px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:30px;
  background:rgba(255,255,255,0.92);
  box-shadow:0 28px 64px rgba(1,13,53,0.28);
  transform:rotate(-4deg);
}

.login-image-frame::before{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:34px;
  background:rgba(254,149,28,0.26);
  transform:rotate(8deg);
  z-index:-1;
}

.login-image-frame img{
  width:68%;
  height:68%;
  object-fit:contain;
  transform:rotate(4deg);
}

.login-visual h1{
  position:relative;
  z-index:1;
  max-width:560px;
  margin:0 0 18px;
  font-size:clamp(2.6rem, 6vw, 5.5rem);
  line-height:0.94;
}

.login-visual p{
  position:relative;
  z-index:1;
  max-width:560px;
  margin:0;
  color:rgba(235,242,255,0.82);
  font-size:1.04rem;
  line-height:1.75;
}

.login-card{
  padding:42px;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(8,24,67,0.08);
}

.login-card-kicker{
  background:#eef5ff;
  color:var(--blue);
  margin-bottom:22px;
}

.login-card h2{
  margin:0 0 10px;
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:850;
}

.login-card-text{
  margin:0 0 28px;
  color:#66728f;
}

.login-form{
  display:grid;
  gap:16px;
}

.login-form label{
  display:grid;
  gap:8px;
}

.login-form span{
  font-size:0.78rem;
  font-weight:850;
  letter-spacing:0.1em;
  color:#63708f;
  text-transform:uppercase;
}

.login-form input{
  width:100%;
  min-height:52px;
  border-radius:999px;
  border:1px solid rgba(8,24,67,0.12);
  background:#f7fbff;
  color:var(--navy);
  padding:0 18px;
  outline:none;
  transition:border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.login-form input:focus{
  border-color:var(--blue);
  background:#fff;
  box-shadow:0 0 0 4px rgba(0,117,255,0.12);
}

.login-submit,
.login-google{
  width:100%;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:none;
  border-radius:999px;
  font-weight:850;
}

.login-submit{
  margin-top:6px;
  background:linear-gradient(90deg, var(--blue), #13c8dd);
  color:#fff;
  box-shadow:0 18px 36px rgba(0,117,255,0.22);
}

.login-google{
  margin-top:14px;
  background:#eef5ff;
  color:var(--navy);
}

.login-link{
  display:block;
  margin:18px auto 0;
  border:none;
  background:transparent;
  color:var(--blue);
  font-weight:800;
}

.login-status{
  min-height:22px;
  margin:16px 0 0;
  color:#1d6a46;
  font-size:0.9rem;
  text-align:center;
}

.login-status.is-error{
  color:#c83232;
}

@media(max-width:991px){
  body{
    padding-top:82px;
  }

  .login-page{
    min-height:calc(100vh - 82px);
    padding:34px 14px;
  }

  .login-shell{
    grid-template-columns:1fr;
  }

  .login-visual{
    min-height:360px;
  }
}

@media(max-width:575px){
  .login-page{
    padding:18px 10px 28px;
  }

  .login-visual,
  .login-card{
    border-radius:24px;
  }

  .login-visual{
    min-height:330px;
    padding:28px 22px;
  }

  .login-kicker{
    top:24px;
    left:22px;
  }

  .login-image-frame{
    top:76px;
    right:22px;
    width:138px;
    border-radius:24px;
  }

  .login-card{
    padding:26px 20px;
  }
}