.login-page{
  min-height:100vh;
  overflow-x:hidden;
  color:#102033;
  background:
    radial-gradient(circle at 13% 18%,#dff8ff 0 18%,transparent 33%),
    radial-gradient(circle at 78% 10%,#e1fff2 0 14%,transparent 29%),
    linear-gradient(135deg,#f7fbff 0%,#edf8ff 44%,#f8fffb 100%);
}
.login-page:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(#b9d6e833 1px,transparent 1px),
    linear-gradient(90deg,#b9d6e833 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(90deg,#000 0%,#000 48%,transparent 82%);
}
.login-page[data-entry=admin]{
  background:
    radial-gradient(circle at 16% 16%,#e4edff 0 18%,transparent 34%),
    radial-gradient(circle at 82% 13%,#eaf5ff 0 15%,transparent 30%),
    linear-gradient(135deg,#f7fbff 0%,#edf4ff 45%,#fbfdff 100%);
}
.login-page[data-entry=neutral]{
  background:
    radial-gradient(circle at 14% 17%,#e1f7ff 0 18%,transparent 34%),
    radial-gradient(circle at 82% 11%,#f0f3ff 0 15%,transparent 30%),
    linear-gradient(135deg,#f7fbff 0%,#eef8ff 48%,#fbfffd 100%);
}
.login-layout{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  max-width:1240px;
  margin:0 auto;
  padding:64px clamp(24px,7vw,92px);
  align-items:center;
  gap:clamp(40px,8vw,118px);
}
.login-intro{
  position:relative;
  min-width:0;
}
.login-intro:after{
  content:"";
  display:block;
  width:min(460px,100%);
  height:150px;
  margin-top:42px;
  border:1px solid #c8ddea;
  border-radius:18px;
  background:
    linear-gradient(115deg,#ffffffb3,#ffffff40),
    repeating-linear-gradient(90deg,transparent 0 54px,#8bbfd829 54px 55px),
    repeating-linear-gradient(0deg,transparent 0 36px,#8bbfd824 36px 37px);
  box-shadow:0 22px 70px #2e7aa01a;
}
.login-intro>img{
  width:196px;
  height:auto;
  margin-bottom:78px;
  filter:drop-shadow(0 12px 24px #0d57651a);
}
.login-intro h1{
  font-size:clamp(42px,5vw,70px);
  line-height:1.1;
  letter-spacing:0;
  margin:15px 0 20px;
  color:#102033;
}
.login-intro p{
  max-width:520px;
  color:#5f7284;
  font-size:16px;
}
.login-card{
  position:relative;
  background:#fffffff2;
  border:1px solid #d7e6ef;
  border-radius:18px;
  padding:34px;
  box-shadow:0 28px 90px #2b6f911c,0 10px 28px #31556a14;
  backdrop-filter:blur(18px);
}
.login-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,#19c6a3,#27b4ff);
}
.login-page[data-entry=admin] .login-card:before{
  background:linear-gradient(90deg,#377dff,#7a6cff);
}
.login-page[data-entry=neutral] .login-card:before{
  background:linear-gradient(90deg,#19c6a3,#377dff,#7a6cff);
}
.login-card h2{
  color:#102033;
  font-size:28px;
  margin:8px 0 4px;
  letter-spacing:0;
}
.login-card form{
  margin-top:28px;
}
.login-card .field-label{
  color:#566a7e;
  font-weight:650;
}
.login-card .form-control{
  height:46px;
  background:#fbfdff;
  border:1px solid #cfdfe9;
  color:#102033;
  margin-bottom:18px;
  border-radius:10px;
  box-shadow:inset 0 1px 0 #fff;
}
.login-card .form-control::placeholder{
  color:#9aabb8;
}
.login-card .form-control:focus{
  border-color:#18bfa1;
  box-shadow:0 0 0 4px #18bfa11f,0 8px 22px #2b8c8c12;
}
.login-submit{
  width:100%;
  min-height:48px;
  margin-top:4px;
  border-radius:10px;
  background:linear-gradient(135deg,#18bfa1,#1aa7ff);
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:0;
  box-shadow:0 14px 28px #14a8c13a;
}
.login-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px #14a8c148;
}
.login-submit:focus-visible{
  outline:3px solid #8fe7d8;
  outline-offset:3px;
}
.login-submit:disabled{
  opacity:.72;
  cursor:wait;
  transform:none;
}
.login-error{
  padding:10px 12px;
  border:1px solid #ef806f66;
  background:#fff2f0;
  color:#b63727;
  border-radius:9px;
  font-size:13px;
  margin:4px 0 14px;
}
.login-note{
  border-top:1px solid #d9e7ef;
  margin-top:24px;
  padding-top:18px;
  color:#6c7f91;
  font-size:12px;
}
.login-orbit{
  display:flex;
  gap:10px;
  margin-top:32px;
}
.login-orbit span{
  padding:7px 12px;
  border:1px solid #c9ddea;
  border-radius:999px;
  background:#ffffff99;
  color:#63788b;
  font-size:12px;
  box-shadow:0 8px 20px #2e769414;
}
.login-orbit span:first-child{
  color:#0a8f79;
  border-color:#18bfa166;
}
.login-page[data-entry=admin] .login-card .form-control:focus{
  border-color:#377dff;
  box-shadow:0 0 0 4px #377dff20,0 8px 22px #377dff12;
}
.login-page[data-entry=admin] .login-submit{
  background:linear-gradient(135deg,#377dff,#7a6cff);
  box-shadow:0 14px 28px #377dff34;
}
.login-page[data-entry=admin] .login-submit:hover{
  box-shadow:0 18px 34px #377dff42;
}
.login-page[data-entry=admin] .login-submit:focus-visible{
  outline-color:#b8ccff;
}
.login-page[data-entry=admin] .login-orbit span:first-child{
  color:#2f68db;
  border-color:#377dff66;
}
.login-page[data-entry=neutral] .login-orbit span:first-child{
  color:#33506a;
  border-color:#9db8cc;
}
@media(max-width:760px){
  .login-page:before{mask-image:linear-gradient(#000 0%,#000 55%,transparent 94%)}
  .login-layout{
    grid-template-columns:1fr;
    padding:34px 20px;
    gap:28px;
  }
  .login-intro>img{
    width:162px;
    margin-bottom:30px;
  }
  .login-intro h1{
    font-size:40px;
  }
  .login-intro p,.login-orbit,.login-intro:after{
    display:none;
  }
  .login-card{
    padding:25px;
    border-radius:16px;
  }
}