/* Extracted from pages/registration.php — v170 */
/* Login 2026 — layout рассчитан под вертикальный фон 1080x1920 (9:16). */
.login-shell{
  min-height:calc(100vh - 92px);
  padding:0 0 32px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.login-card{
  width:min(1040px,100%);
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(255,255,255,.88);
  box-shadow:0 24px 70px rgba(15,23,42,.10);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.dark .login-card{
  border-color:rgba(255,255,255,.09);
  background:rgba(8,10,14,.88);
  box-shadow:0 28px 90px rgba(0,0,0,.34);
}
.login-layout{
  display:grid;
  grid-template-columns:minmax(360px,420px) minmax(0,1fr);
  align-items:stretch;
}

/* Левая колонка повторяет пропорции исходного изображения — фото не режется. */
.login-promo{
  position:relative;
  width:100%;
  aspect-ratio:9 / 16;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:#07111f;
  isolation:isolate;
}
/* Живой фон: медленное приближение + мягкий проход вправо/влево.
   Фото вынесено в отдельный слой, поэтому подписи поверх него остаются неподвижными. */
.login-promo-photo{
  position:absolute;
  inset:-6%;
  z-index:0;
  pointer-events:none;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  transform:translate3d(0,0,0) scale(1.02);
  transform-origin:center center;
  will-change:transform;
  backface-visibility:hidden;
  animation:loginPhotoKenBurns 30s cubic-bezier(.45,.05,.55,.95) infinite;
}
.login-promo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,.72) 100%),
    linear-gradient(90deg,rgba(0,0,0,.10),transparent 34%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.promo-bg-animate{position:relative;overflow:hidden;}
.promo-bg-animate::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 62%,rgba(0,0,0,.20) 100%);
  opacity:0;
  transition:opacity .55s ease;
}
.promo-bg-animate.promo-darken::before{opacity:1;}
.promo-bg-animate > *{position:relative;z-index:2;}
.promo-bg-animate > .login-promo-photo{position:absolute;z-index:0;}
.promo-text-animate{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}
.promo-text-animate.promo-text-show{opacity:1;transform:translateY(0);}
.login-promo-caption{
  position:absolute !important;
  left:20px;
  right:20px;
  bottom:20px;
  padding:15px 16px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  color:#fff;
  background:rgba(5,10,18,.34);
  box-shadow:0 14px 38px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.login-promo-kicker{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 9px;
  margin-bottom:9px;
  border-radius:999px;
  background:rgba(14,165,233,.20);
  border:1px solid rgba(125,211,252,.32);
  color:#e0f2fe;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.login-promo-caption h2{
  margin:0;
  color:#fff;
  font-size:22px;
  line-height:1.08;
  font-weight:850;
  letter-spacing:-.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.22);
}
.login-promo-caption p{
  margin:7px 0 0;
  color:rgba(255,255,255,.80);
  font-size:12px;
  line-height:1.45;
}

.login-form{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  padding:96px 54px 154px;
  overflow:hidden;
  background:
    radial-gradient(520px 320px at 100% 0%,rgba(14,165,233,.07),transparent 60%),
    linear-gradient(180deg,rgba(2,8,23,.02),transparent 30%,rgba(2,8,23,.04) 100%),
    transparent;
}
.dark .login-form{
  background:
    radial-gradient(520px 320px at 100% 0%,rgba(14,165,233,.10),transparent 60%),
    transparent;
}
.login-form-inner{position:relative;z-index:3;width:100%;max-width:450px;}
#loginTitle{
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.035em;
}
#loginSubtitle{max-width:390px;line-height:1.55;}
#loginForm input[name="login"],
#loginForm input[name="password"]{
  min-height:54px;
  border-radius:17px;
  font-size:14px;
}
#loginSubmitBtn,
#recoverBtn{min-height:52px;border-radius:17px;}
#loginSubmitBtn{
  box-shadow:0 12px 30px rgba(37,99,235,.22);
  transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease;
}
#loginSubmitBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 15px 34px rgba(37,99,235,.28);
}
#loginLegalText{line-height:1.55;}

/* Декоративная рукописная подпись в правом верхнем углу */
.login-handwritten{
  position:absolute;
  top:34px;
  right:38px;
  z-index:4;
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#60a5fa;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:17px;
  line-height:1.15;
  font-weight:600;
  letter-spacing:.01em;
  transform:rotate(-4deg);
  text-shadow:0 0 18px rgba(59,130,246,.20);
  user-select:none;
  pointer-events:none;
  animation:loginHandIn .9s cubic-bezier(.2,.8,.2,1) both;
}
.login-handwritten span{display:block;max-width:150px;text-align:center;}
.login-handwritten-heart{
  width:27px;
  height:27px;
  margin-top:-8px;
  flex:0 0 auto;
  filter:drop-shadow(0 0 8px rgba(59,130,246,.20));
  animation:loginHeartBeat 2.8s ease-in-out infinite;
}
.login-handwritten-heart path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Фоновый живой декор в правой части формы */
.login-decor{
  position:absolute;
  inset:18px 18px 118px 49%;
  z-index:1;
  pointer-events:none;
}
.login-decor-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(4px);
}
.login-decor-orb-a{
  top:16px;
  right:30px;
  width:168px;
  height:168px;
  background:radial-gradient(circle at 30% 30%,rgba(96,165,250,.34),rgba(37,99,235,.10) 42%,transparent 72%);
  animation:loginDecorFloat 9.5s ease-in-out infinite;
}
.login-decor-orb-b{
  right:-18px;
  bottom:84px;
  width:240px;
  height:240px;
  background:radial-gradient(circle at 38% 40%,rgba(34,211,238,.16),rgba(14,165,233,.07) 46%,transparent 74%);
  animation:loginDecorFloat 13s ease-in-out infinite reverse;
}
.login-decor-grid{
  position:absolute;
  top:70px;
  right:18px;
  width:170px;
  height:132px;
  border-radius:28px;
  border:1px solid rgba(125,211,252,.12);
  background:
    linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  background-size:18px 18px,18px 18px,100% 100%;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(2,8,23,.14);
  animation:loginGridDrift 12s ease-in-out infinite;
}
.login-decor-grid::before{
  content:"";
  position:absolute;
  inset:16px 18px auto 18px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.7),transparent);
  opacity:.85;
}
.login-decor-grid::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  height:42px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(59,130,246,.08));
  border:1px solid rgba(125,211,252,.10);
}
.login-decor-glass{
  position:absolute;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 34px rgba(2,8,23,.12);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
}
.login-decor-glass-a{
  top:24px;
  right:118px;
  width:78px;
  height:172px;
  border-radius:28px;
  transform:rotate(8deg);
  animation:loginGlassTilt 11s ease-in-out infinite;
}
.login-decor-glass-b{
  right:38px;
  bottom:118px;
  width:212px;
  height:72px;
  border-radius:24px;
  transform:rotate(-7deg);
  animation:loginGlassTilt 13s ease-in-out infinite reverse;
}
.login-decor-bars{
  position:absolute;
  right:48px;
  bottom:46px;
  display:grid;
  gap:10px;
}
.login-decor-bars span{
  display:block;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(59,130,246,.0),rgba(96,165,250,.9),rgba(34,211,238,.0));
  box-shadow:0 0 18px rgba(56,189,248,.22);
  animation:loginBarSweep 5.4s ease-in-out infinite;
}
.login-decor-bars span:nth-child(1){width:174px;}
.login-decor-bars span:nth-child(2){width:132px;animation-delay:.6s;}
.login-decor-bars span:nth-child(3){width:94px;animation-delay:1.1s;}
/* Три преимуществa в нижней части формы */
.login-feature-strip{
  position:absolute;
  left:42px;
  right:42px;
  bottom:30px;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  border-top:1px solid rgba(148,163,184,.18);
  padding-top:18px;
}
.dark .login-feature-strip{border-top-color:rgba(255,255,255,.10);}
.login-feature-item{
  position:relative;
  min-width:0;
  padding:0 14px;
  text-align:center;
  color:#475569;
}
.dark .login-feature-item{color:#d4d4d8;}
.login-feature-item + .login-feature-item::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:1px;
  background:rgba(148,163,184,.24);
}
.dark .login-feature-item + .login-feature-item::before{background:rgba(255,255,255,.13);}
.login-feature-icon{
  width:34px;
  height:34px;
  margin:0 auto 7px;
  display:grid;
  place-items:center;
  color:#60a5fa;
  border-radius:12px;
  background:rgba(59,130,246,.06);
  border:1px solid rgba(96,165,250,.12);
  box-shadow:0 0 0 0 rgba(59,130,246,0);
  animation:loginFeatureFloat 4.6s ease-in-out infinite;
}
.dark .login-feature-icon{background:rgba(59,130,246,.08);border-color:rgba(96,165,250,.15);}
.login-feature-item:nth-child(2) .login-feature-icon{animation-delay:.55s;}
.login-feature-item:nth-child(3) .login-feature-icon{animation-delay:1.1s;}
.login-feature-icon svg{width:21px;height:21px;display:block;}
.login-feature-icon path,
.login-feature-icon circle{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.login-feature-title{
  font-size:11.5px;
  line-height:1.3;
  font-weight:700;
}
.login-feature-item::after{
  content:"";
  position:absolute;
  left:50%;
  top:-19px;
  width:34%;
  height:1px;
  transform:translateX(-50%) scaleX(.25);
  transform-origin:center;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.85),transparent);
  opacity:0;
  animation:loginFeatureSweep 4.8s ease-in-out infinite;
}
.login-feature-item:nth-child(2)::after{animation-delay:.5s;}
.login-feature-item:nth-child(3)::after{animation-delay:1s;}

.login-mobile-after{display:none;}
.login-promo-mobile-overlay{display:none;}

@keyframes loginPhotoKenBurns{
  /* сначала почти незаметно приближаемся */
  0%{transform:translate3d(0,0,0) scale(1.02);}
  22%{transform:translate3d(0,-.45%,0) scale(1.10);}
  /* затем камера уходит вправо */
  45%{transform:translate3d(2.7%,-.8%,0) scale(1.135);}
  /* и плавно проходит влево */
  68%{transform:translate3d(-2.7%,.25%,0) scale(1.12);}
  84%{transform:translate3d(1.3%,-.35%,0) scale(1.15);}
  /* возвращаемся в исходную точку без скачка на новом цикле */
  100%{transform:translate3d(0,0,0) scale(1.02);}
}

@keyframes loginHandIn{
  from{opacity:0;transform:translateY(-8px) rotate(-7deg);}
  to{opacity:1;transform:translateY(0) rotate(-4deg);}
}
@keyframes loginHeartBeat{
  0%,72%,100%{transform:scale(1) rotate(4deg);}
  78%{transform:scale(1.14) rotate(1deg);}
  84%{transform:scale(.98) rotate(4deg);}
  90%{transform:scale(1.09) rotate(2deg);}
}
@keyframes loginFeatureFloat{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(59,130,246,0);}
  45%{transform:translateY(-4px);box-shadow:0 8px 24px rgba(59,130,246,.12);}
  58%{transform:translateY(-4px);}
}
@keyframes loginFeatureSweep{
  0%,68%,100%{opacity:0;transform:translateX(-50%) scaleX(.25);}
  76%{opacity:.85;transform:translateX(-50%) scaleX(1);}
  88%{opacity:0;transform:translateX(-50%) scaleX(.65);}
}
@keyframes loginAmbientFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(18px,-14px,0) scale(1.06);}
}
@keyframes loginDecorFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-10px,12px,0) scale(1.08);}
}
@keyframes loginGridDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(-8px,8px,0) rotate(-1deg);}
}
@keyframes loginGlassTilt{
  0%,100%{transform:translate3d(0,0,0) rotate(8deg);}
  50%{transform:translate3d(-8px,12px,0) rotate(12deg);}
}
@keyframes loginBarSweep{
  0%,100%{transform:translateX(0);opacity:.38;}
  35%{opacity:.95;}
  50%{transform:translateX(-10px);opacity:.72;}
}
@media (prefers-reduced-motion:reduce){
  .login-promo-photo,.login-handwritten,.login-handwritten-heart,.login-feature-icon,.login-feature-item::after,.login-shell::before,.login-shell::after,.login-decor-orb,.login-decor-grid,.login-decor-glass,.login-decor-bars span{animation:none!important;}
  .login-promo-photo{transform:translate3d(0,0,0) scale(1.06);}
}

@media (max-width:900px) and (min-width:768px){
  .login-card{width:min(860px,100%);}
  .login-layout{grid-template-columns:minmax(330px,370px) minmax(0,1fr);}
  .login-form{padding:86px 34px 142px;}
  .login-handwritten{top:25px;right:28px;font-size:15px;}
  .login-feature-strip{left:28px;right:28px;bottom:24px;}
  .login-feature-item{padding:0 9px;}
  .login-feature-title{font-size:10.5px;}
  .login-decor{inset:18px 16px 116px 47%;}
  .login-decor-grid{width:150px;height:120px;right:8px;}
  .login-decor-glass-b{width:180px;}
}

@media (max-width:767px){
  .login-shell{
    min-height:auto;
    padding:8px 9px 28px;
    align-items:flex-start;
  }
  .login-shell::before,.login-shell::after{display:none;}
  .login-decor{display:none;}
  .login-card{
    --mobile-form-shift:430px;
    width:100%;
    overflow:hidden;
    border-radius:26px;
    background:rgba(255,255,255,.76);
  }
  .dark .login-card{background:rgba(6,9,14,.84);}
  .login-layout{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  /* После заставки форма становится первым блоком страницы. */
  .login-form{
    order:1;
    z-index:2;
    display:block;
    padding:28px 18px 24px;
    opacity:0;
    transform:translate3d(0,-16px,0) scale(.985);
    transition:
      opacity .70s ease .18s,
      transform .90s cubic-bezier(.2,.78,.2,1) .12s;
    background:
      radial-gradient(420px 220px at 100% 0%,rgba(14,165,233,.09),transparent 64%),
      transparent;
  }
  .dark .login-form{
    background:
      radial-gradient(420px 220px at 100% 0%,rgba(14,165,233,.12),transparent 64%),
      transparent;
  }
  .login-card.mobile-login-settled .login-form{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  .login-form-inner{max-width:none;}
  #loginTitle{font-size:30px;}
  #loginSubtitle{font-size:13px;line-height:1.5;}
  #loginForm{margin-top:18px;}
  #loginForm input[name="login"],
  #loginForm input[name="password"]{
    min-height:56px;
    font-size:16px; /* iOS не увеличивает страницу при фокусе */
  }
  #loginSubmitBtn,#recoverBtn{min-height:54px;}
  #loginLegalText{font-size:10.5px;line-height:1.45;}

  /* На первом кадре фото лежит поверх формы. Затем оно уезжает вниз,
     открывая форму — сама раскладка после анимации уже окончательная. */
  .login-promo{
    order:2;
    z-index:6;
    width:100%;
    aspect-ratio:9 / 16;
    border-radius:24px 24px 0 0;
    transform:translate3d(0,calc(-1 * var(--mobile-form-shift)),0);
    transform-origin:center top;
    will-change:transform;
    transition:transform 1.28s cubic-bezier(.18,.82,.22,1);
    box-shadow:0 -18px 60px rgba(0,0,0,.18);
  }
  .login-card.mobile-login-settled .login-promo{
    transform:translate3d(0,0,0);
  }
  .login-promo::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,0) 48%,rgba(3,8,18,.14) 62%,rgba(2,6,14,.82) 100%);
  }
  /* На телефоне подписи и доп-блоки лежат прямо на фото. */
  .login-promo-caption{display:none!important;}
  .login-handwritten,.login-feature-strip,.login-mobile-after{display:none!important;}

  .login-promo-mobile-overlay{
    position:absolute;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:4;
    display:block;
    opacity:0;
    transform:translate3d(0,18px,0);
    transition:opacity .65s ease .66s,transform .85s cubic-bezier(.2,.8,.2,1) .62s;
    pointer-events:none;
  }
  .login-card.mobile-login-settled .login-promo-mobile-overlay{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  .login-mobile-script{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    margin:0 auto 10px;
    padding:7px 13px 8px;
    color:#dbeafe;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:rgba(5,12,24,.24);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 12px 32px rgba(2,8,23,.20);
    font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
    font-size:16px;
    line-height:1.2;
    font-weight:600;
    transform:rotate(-2.5deg);
    text-shadow:0 0 18px rgba(59,130,246,.20);
  }
  .login-mobile-script svg{
    width:25px;height:25px;flex:0 0 auto;
    filter:drop-shadow(0 0 8px rgba(59,130,246,.20));
    animation:loginHeartBeat 2.8s ease-in-out infinite;
  }
  .login-mobile-script path{
    fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
  }
  .login-mobile-story{
    position:relative;
    padding:15px 15px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:20px;
    background:linear-gradient(180deg,rgba(6,16,30,.52),rgba(4,11,22,.36));
    box-shadow:0 18px 45px rgba(2,8,23,.24), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(16px) saturate(130%);
    -webkit-backdrop-filter:blur(16px) saturate(130%);
  }
  .login-mobile-story::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(220px 120px at 14% 0%,rgba(56,189,248,.18),transparent 70%);
  }
  .dark .login-mobile-story{
    border-color:rgba(255,255,255,.11);
    background:linear-gradient(180deg,rgba(5,12,24,.54),rgba(4,10,20,.36));
  }
  .login-mobile-story .login-promo-kicker{margin-bottom:8px;}
  .login-mobile-story h2{
    position:relative;
    margin:0;
    color:#fff;
    font-size:20px;
    line-height:1.12;
    font-weight:850;
    letter-spacing:-.025em;
    text-shadow:0 2px 12px rgba(0,0,0,.18);
  }
  .login-mobile-story p{
    position:relative;
    margin:6px 0 0;
    color:rgba(255,255,255,.82);
    font-size:11.5px;
    line-height:1.5;
  }
  .dark .login-mobile-story p{color:rgba(255,255,255,.78);}
  .login-mobile-feature-list{
    display:grid;
    gap:10px;
    margin-top:12px;
  }
  .login-mobile-feature{
    position:relative;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-height:58px;
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    background:linear-gradient(180deg,rgba(6,16,30,.44),rgba(4,11,22,.28));
    box-shadow:0 12px 30px rgba(2,8,23,.18), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(14px) saturate(125%);
    -webkit-backdrop-filter:blur(14px) saturate(125%);
  }
  .login-mobile-feature::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(56,189,248,.12),transparent 45%,transparent 70%,rgba(59,130,246,.08));
  }
  .dark .login-mobile-feature{
    border-color:rgba(255,255,255,.09);
    background:linear-gradient(180deg,rgba(5,12,24,.48),rgba(4,10,20,.30));
  }
  .login-mobile-feature .login-feature-icon{
    width:36px;height:36px;margin:0;border-radius:13px;
  }
  .login-mobile-feature .login-feature-title{
    position:relative;
    font-size:12px;
    line-height:1.35;
    text-align:left;
    color:#f8fafc;
    text-shadow:0 1px 8px rgba(0,0,0,.15);
  }
  .dark .login-mobile-feature .login-feature-title{color:#f5f5f5;}
  .login-mobile-feature small{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.62);
    font-size:9.5px;
    font-weight:500;
    line-height:1.3;
  }
  .dark .login-mobile-feature small{color:rgba(255,255,255,.56);}
  .login-mobile-feature-list{margin-top:10px;}
}

@media (max-width:420px){
  .login-shell{padding-left:7px;padding-right:7px;}
  .login-form{padding:25px 15px 22px;}
  .login-promo-mobile-overlay{left:8px;right:8px;bottom:8px;}
  .login-mobile-story{padding:14px 14px;}
  .login-mobile-script{font-size:15px;}
}

@media (prefers-reduced-motion:reduce) and (max-width:767px){
  .login-form,.login-promo,.login-promo-mobile-overlay{transition:none!important;}
  .login-mobile-script svg{animation:none!important;}
}


/* Apple-inspired 2026 auth layer: content first, restrained Liquid Glass. */
.login-shell{
  position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",sans-serif;
  isolation:isolate;
}
.login-shell::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  width:min(900px,90%);
  height:520px;
  left:8%;
  top:60px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,113,227,.09) 0%,rgba(0,113,227,.035) 38%,transparent 72%);
  filter:blur(44px);
  animation:appleAmbient 18s ease-in-out infinite;
}
.login-card{
  border-radius:34px;
  border:1px solid rgba(255,255,255,.075);
  background:#050608;
  box-shadow:0 32px 80px rgba(0,0,0,.30);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.dark .login-card{
  border-color:rgba(255,255,255,.075);
  background:#050608;
  box-shadow:0 32px 80px rgba(0,0,0,.30);
}
.login-promo{
  background:#090b0f;
}
.login-promo::after{
  background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,0) 52%,rgba(0,0,0,.58) 100%);
  box-shadow:none;
}
.login-promo-caption{
  left:18px;
  right:18px;
  bottom:18px;
  padding:17px 17px 18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 46px rgba(0,0,0,.22);
  backdrop-filter:blur(26px) saturate(145%);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
}
.login-promo-kicker{
  min-height:24px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.86);
  letter-spacing:.08em;
  font-weight:700;
}
.login-promo-caption h2{font-size:22px;font-weight:750;letter-spacing:-.03em;}
.login-promo-caption p{color:rgba(255,255,255,.72);font-size:12px;}

.login-form{
  isolation:isolate;
  overflow:hidden;
  padding:86px 54px 146px;
  background:#08090c;
}
.login-form::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:-14%;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,6,8,.86) 0%,rgba(5,6,8,.72) 40%,rgba(5,6,8,.82) 100%),
    url('/img/fon.jpg') center / cover no-repeat;
  filter:blur(54px) saturate(118%) brightness(.72);
  transform:scale(1.10);
  opacity:.58;
  animation:appleBackdrop 34s ease-in-out infinite;
}
.login-form::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 260px at 82% 12%,rgba(69,156,255,.12),transparent 68%),
    linear-gradient(180deg,rgba(7,8,11,.22),rgba(7,8,11,.58));
}
.dark .login-form{
  background:#08090c;
}
.login-form-inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:470px;
  padding:30px 30px 28px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.042));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 70px rgba(0,0,0,.20);
  backdrop-filter:blur(28px) saturate(145%);
  -webkit-backdrop-filter:blur(28px) saturate(145%);
}
#loginTitle{
  color:#f5f5f7;
  font-size:42px;
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:700;
}
#loginSubtitle{
  margin-top:10px;
  max-width:400px;
  color:rgba(245,245,247,.66)!important;
  font-size:15px;
  line-height:1.45;
}
.login-form .text-sm.font-semibold{color:rgba(245,245,247,.88);}
.login-form input[type="text"],
.login-form input[type="tel"],
.login-form input[type="password"],
.login-form input[type="email"]{
  min-height:54px;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.055)!important;
  color:#f5f5f7!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.login-form input::placeholder{color:rgba(245,245,247,.36)!important;}
.login-form input:focus{
  border-color:rgba(64,156,255,.72)!important;
  background:rgba(255,255,255,.075)!important;
  box-shadow:0 0 0 4px rgba(0,113,227,.14)!important;
  outline:none!important;
}
#loginSubmitBtn,
#regContinue,
#recoverySubmitBtn,
#recoveryChangePwdBtn{
  min-height:52px;
  border-radius:999px!important;
  border:0!important;
  background:#0071e3!important;
  box-shadow:none!important;
  font-size:14px;
  font-weight:650;
  transition:background .2s ease,transform .18s ease,box-shadow .2s ease!important;
}
#loginSubmitBtn:hover,
#regContinue:hover,
#recoverySubmitBtn:hover,
#recoveryChangePwdBtn:hover{
  background:#0077ed!important;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,113,227,.20)!important;
}
#recoverBtn,
.login-form a.inline-flex{
  border-radius:999px!important;
  border-color:rgba(255,255,255,.11)!important;
  background:rgba(255,255,255,.055)!important;
  color:#f5f5f7!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
#loginLegalText,
.login-form .text-xs{color:rgba(245,245,247,.50)!important;}
#loginLegalText a,
.login-form a.text-blue-600,
.login-form a.text-sky-600{color:#2997ff!important;}

.login-handwritten{
  top:30px;
  right:34px;
  color:rgba(163,210,255,.78);
  font-size:15px;
  text-shadow:none;
  opacity:.9;
}
.login-handwritten-heart{filter:none;}

.login-feature-strip{
  left:34px;
  right:34px;
  bottom:26px;
  z-index:4;
  padding:12px 8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.038));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
}
.dark .login-feature-strip{border-top-color:rgba(255,255,255,.10);}
.login-feature-item{color:rgba(245,245,247,.66);padding:2px 12px;}
.login-feature-item + .login-feature-item::before{background:rgba(255,255,255,.10);top:5px;bottom:5px;}
.login-feature-icon{
  width:32px;
  height:32px;
  margin-bottom:6px;
  border-radius:999px;
  color:#64b5ff;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.055);
  box-shadow:none;
}
.login-feature-title{font-size:10.5px;font-weight:600;color:rgba(245,245,247,.70);}
.login-feature-item::after{display:none;}
.login-decor{display:none!important;}

@keyframes appleAmbient{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.72;}
  50%{transform:translate3d(28px,-12px,0) scale(1.05);opacity:1;}
}
@keyframes appleBackdrop{
  0%,100%{transform:translate3d(0,0,0) scale(1.10);}
  50%{transform:translate3d(-1.5%,1%,0) scale(1.14);}
}

@media (max-width:900px) and (min-width:768px){
  .login-form{padding:78px 28px 138px;}
  .login-form-inner{padding:26px 24px 24px;border-radius:26px;}
  #loginTitle{font-size:36px;}
  .login-feature-strip{left:22px;right:22px;}
}

@media (max-width:767px){
  .login-shell::before{display:none;}
  .login-card{border-radius:26px;background:#050608;}
  .login-form{padding:26px 14px 22px;background:#07080a;}
  .login-form::before{
    inset:-18%;
    opacity:.42;
    filter:blur(44px) saturate(115%) brightness(.62);
  }
  .login-form-inner{
    max-width:none;
    padding:24px 18px 20px;
    border-radius:25px;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
  }
  #loginTitle{font-size:34px;}
  #loginSubtitle{font-size:14px;}
}

@media (prefers-reduced-motion:reduce){
  .login-shell::before,.login-form::before{animation:none!important;}
}