.login-page{
  min-height:100vh;
  background:var(--theme-dark);
}
.login-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.login-header__link{gap:7px}
.login-header__link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.login-hero{
  position:relative;
  flex:1;
  overflow:hidden;
  background:linear-gradient(165deg,#0a165e 0%,#040d43 42%,#062061 100%);
  padding:78px 0 88px;
}
.login-hero__dots{
  position:absolute;
  background:url(img/dots-light.svg) no-repeat;
  background-size:104px auto;
  pointer-events:none;
  opacity:.9;
}
.login-hero__dots--a{top:58px;right:7%;width:160px;height:190px;background-size:100% auto}
.login-hero__dots--b{bottom:8%;left:38%;width:120px;height:210px;background-size:100% auto;opacity:.5}

.login-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(42px,7vw,96px);
  align-items:center;
}
.login-intro{max-width:610px}
.login-intro .eyebrow{color:#9eb0ff;margin-bottom:16px}
.login-intro__title{
  color:#fff;
  font-size:clamp(2.4rem,4.2vw,4.35rem);
  line-height:1.04;
  letter-spacing:-.04em;
  max-width:13ch;
}
.login-intro__lead{
  color:#d8dcf2;
  font-size:1.04rem;
  line-height:1.75;
  max-width:540px;
  margin-top:22px;
}
.login-points{
  list-style:none;
  padding:0;
  margin:32px 0 0;
  display:grid;
  gap:14px;
}
.login-points li{
  display:flex;
  gap:13px;
  align-items:flex-start;
  color:#d8dcf2;
  font-size:.92rem;
  line-height:1.55;
}
.login-points__icon{
  flex:none;
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  padding:8px;
  color:#b9c6ff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
}
.login-points__icon svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-points strong{
  display:block;
  color:#fff;
  font-family:var(--font-head);
  font-size:.85rem;
  font-weight:600;
  margin-bottom:1px;
}
.login-intro__back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:30px;
  color:#b9c4ff;
  font-size:.84rem;
  font-weight:500;
  transition:color .18s ease;
}
.login-intro__back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.login-intro__back:hover{color:#fff}

.login-panel{width:100%;max-width:470px;justify-self:end}
.login-card{
  position:relative;
  background:#fff;
  border-radius:24px;
  border-top:4px solid var(--primary);
  padding:32px;
  box-shadow:0 40px 90px -38px rgba(0,0,0,.82);
}
.login-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.login-card__icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  padding:12px;
  color:var(--primary);
  background:#eef1ff;
  border:1px solid #dfe5ff;
}
.login-card__icon svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.login-card__badge{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:#eef1ff;
  border:1px solid #dfe5ff;
  color:var(--primary);
  font-family:var(--font-head);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.05em;
  white-space:nowrap;
}
.login-card .eyebrow{margin-bottom:7px;font-size:.68rem}
.login-card__title{
  color:var(--dark);
  font-size:clamp(1.65rem,2.4vw,2.05rem);
  letter-spacing:-.03em;
}
.login-card__sub{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
  margin-top:8px;
}
.login-alert{
  margin-top:18px;
  padding:11px 13px;
  border-radius:10px;
  border:1px solid #ffd1d6;
  background:#fff4f5;
  color:#a71930;
  font-size:.82rem;
  font-weight:500;
  line-height:1.45;
}
.login-alert--success{
  border-color:#bfe9ce;
  background:#f1fbf4;
  color:#17703a;
}
.login-field{margin-top:18px}
.login-field label{
  display:block;
  color:var(--dark);
  font-family:var(--font-head);
  font-size:.76rem;
  font-weight:600;
  margin-bottom:7px;
}
.login-input{
  position:relative;
  display:flex;
  align-items:center;
}
.login-input > svg{
  position:absolute;
  left:14px;
  width:17px;
  height:17px;
  fill:none;
  stroke:#7b81a0;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.login-input input{
  width:100%;
  height:49px;
  padding:0 15px 0 41px;
  border:1px solid #dfe3f0;
  border-radius:11px;
  background:#fbfcff;
  color:var(--dark);
  font-family:var(--font-body);
  font-size:.94rem;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.login-input input::placeholder{color:#969bb1}
.login-input input:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(43,77,255,.13);
}
.login-input--password input{padding-right:50px}
.login-pass-toggle{
  position:absolute;
  right:7px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:9px;
  border-radius:8px;
  color:#7b81a0;
  transition:color .18s ease,background .18s ease;
}
.login-pass-toggle svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-pass-toggle:hover{color:var(--primary);background:#eef1ff}
.login-pass-toggle[aria-pressed="true"]{color:var(--primary);background:#eef1ff}
.login-card__submit{
  width:100%;
  justify-content:center;
  margin-top:22px;
  padding:14px 22px;
}
.login-card__submit:disabled{opacity:.72;cursor:wait;transform:none}
.login-card__note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:17px;
  color:#7b81a0;
  font-size:.74rem;
  line-height:1.45;
  text-align:center;
}
.login-card__note svg{
  flex:none;
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.login-footer{
  background:#030b39;
  border-top:1px solid rgba(255,255,255,.08);
  color:#8f9bcc;
}
.login-footer__inner{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  font-size:.78rem;
}
.login-points strong,.login-card__title,.login-card__sub{overflow-wrap:anywhere}

@media (max-width:1020px){
  .login-grid{grid-template-columns:1fr;gap:38px}
  .login-intro{max-width:none}
  .login-intro__title{max-width:16ch}
  .login-intro__lead{max-width:650px}
  .login-points{grid-template-columns:repeat(3,1fr);gap:18px}
  .login-panel{justify-self:start;max-width:620px}
}
@media (max-width:820px){
  .login-hero{padding:36px 0 48px}
  .login-hero__dots--a{top:20px;right:-16px;opacity:.4}
  .login-hero__dots--b{display:none}
  .login-intro{display:none}
  .login-grid{gap:0}
  .login-panel{justify-self:center;max-width:560px}
  .login-card{padding:26px}
  .login-header__link{display:inline-flex}
}
@media (max-width:560px){
  .login-header__link{padding:10px 14px;font-size:.82rem}
  .login-hero{padding:36px 0 46px}
  .login-intro__title{font-size:2.15rem}
  .login-intro__lead{font-size:.94rem;margin-top:15px}
  .login-points{display:none}
  .login-intro__back{margin-top:20px}
  .login-card{padding:23px 20px;border-radius:19px}
  .login-card__top{margin-bottom:18px}
  .login-card__icon{width:42px;height:42px;border-radius:12px;padding:10px}
  .login-card__title{font-size:1.6rem}
  .login-card__sub{font-size:.85rem}
  .login-footer__inner{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding-top:12px;padding-bottom:12px}
}