/* Extra styles for vkr/login.html (keeps vkr.css unchanged) */

.auth{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  padding: 18px clamp(14px, 4vw, 28px) 26px;
  align-items:start;
}
.auth__panel{
  min-height: 640px;
  justify-self:center;
  width: min(640px, 100%);
}
.auth__side{ position:sticky; top: 92px; }
.auth__body{
  padding: 14px 16px 16px;
  display:flex;
  justify-content:center;
}

.auth-screen{ display:none; }
.auth-screen.is-active{ display:block; }
.auth-screen{
  width: min(520px, 100%);
}

.auth-hero{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px;
  border-radius: 18px;
  border:1px solid rgba(160,220,255,.12);
  background: rgba(10,16,36,.16);
}
.auth-hero__icon{
  width: 52px; height: 52px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  font-size: 22px;
  background: linear-gradient(180deg, rgba(55,243,255,.18), rgba(168,85,255,.10));
  border:1px solid rgba(160,220,255,.18);
}
.auth-hero__title{ font-weight:950; font-size: 22px; }
.auth-hero__text{ margin-top:4px; color: rgba(206,232,245,.76); font-weight:850; line-height:1.2; }

.form{ margin-top: 12px; display:grid; gap: 10px; }

.field{ display:grid; gap: 6px; }
.field__label{ color: rgba(206,232,245,.70); font-weight:900; font-size: 12px; }
.field__row{ display:flex; gap: 10px; align-items:stretch; }
.field__input{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(160,220,255,.14);
  background: rgba(5,6,18,.20);
  color: rgba(240,250,255,.92);
  font-weight:900;
  outline:none;
}
.field__input::placeholder{ color: rgba(206,232,245,.45); }
.field__input:focus-visible{ box-shadow: var(--ring); }
.field__input.is-invalid{
  border-color: rgba(255,90,137,.45);
  background: rgba(255,90,137,.06);
}

.field__btn{ white-space:nowrap; }

.form__actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 4px; }
.form__actions .btn{ flex:1; min-width: 160px; }

.form__error{
  min-height: 22px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(160,220,255,.10);
  background: rgba(10,16,36,.12);
  color: rgba(255,210,106,.92);
  font-weight:850;
}
.form__ok{
  min-height: 22px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(160,220,255,.10);
  background: rgba(10,16,36,.12);
  color: rgba(116,255,122,.92);
  font-weight:850;
}

.auth-note{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(160,220,255,.10);
  background: rgba(5,6,18,.16);
  color: rgba(206,232,245,.72);
  font-weight:850;
  line-height:1.2;
}

.auth-help{ padding: 14px 16px 16px; display:grid; gap: 12px; }
.auth-help__block{
  padding: 12px;
  border-radius: 16px;
  border:1px solid rgba(160,220,255,.10);
  background: rgba(5,6,18,.18);
}
.auth-help__title{ font-weight:950; }
.auth-help__text{ margin-top:6px; color: rgba(206,232,245,.76); font-weight:850; line-height:1.25; }

@media (max-width: 980px){
  .auth{ grid-template-columns: 1fr; }
  .auth__side{ position:static; top:auto; }
}

@media (prefers-reduced-motion: reduce){
  .field__input{ transition:none; }
}