/* Login modal presentation. Header geometry is intentionally not defined here. */
body.auth-modal-open { overflow: hidden; }
.auth-modal[hidden] { display: none !important; }

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 20px;
}
.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 20, 40, .68);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}
.auth-modal__panel {
  position: relative;
  z-index: 1;
  width: min(430px, calc(100vw - 32px));
  padding: 34px 32px 32px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(245, 250, 255, .86));
  box-shadow: 0 30px 90px rgba(3, 20, 41, .28), inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(24px) saturate(1.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.16);
  animation: authModalIn .2s ease-out;
}
.auth-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(205, 220, 235, .78);
  border-radius: 11px;
  background: rgba(248, 251, 255, .72);
  color: #57708b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.auth-modal__mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}
.auth-modal__mark img {
  display: block;
  width: 62px;
  height: 62px;
  filter: drop-shadow(0 11px 14px rgba(0, 51, 102, .18)) drop-shadow(0 2px 3px rgba(28, 113, 202, .16));
}
.auth-modal__title {
  margin: 0 48px 8px;
  color: #08182c;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 820;
  letter-spacing: -.025em;
  text-align: center;
}
.auth-modal__subtitle {
  margin: 0 20px 25px;
  color: #667b91;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
.auth-form { display: grid; gap: 16px; }
.auth-field { display: grid; gap: 7px; }
.auth-field label {
  color: #29445f;
  font-size: 14px;
  font-weight: 720;
}
.auth-field input {
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid rgba(190, 208, 226, .9);
  border-radius: 12px;
  outline: none;
  background: rgba(255, 255, 255, .76);
  color: #08182c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(18, 63, 115, .04);
  font: inherit;
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.auth-field input:focus {
  border-color: #4d83bc;
  background: rgba(255,255,255,.94);
  box-shadow: 0 0 0 3px rgba(77, 131, 188, .12), inset 0 1px 0 rgba(255,255,255,.95);
}
.auth-password {
  position: relative;
}
.auth-password input {
  padding-right: 50px;
}
.auth-password__toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #647b92;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .15s ease, color .15s ease;
}
.auth-password__toggle:hover {
  background: rgba(238, 245, 252, .82);
  color: #123f73;
}
.auth-password__toggle:focus-visible {
  outline: 2px solid #4d83bc;
  outline-offset: 1px;
}
.auth-password__toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-password__toggle svg[hidden] {
  display: none;
}
.auth-form__options {
  display: flex;
  align-items: center;
  min-height: 26px;
}
.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #435d77;
  font-size: 14px;
  font-weight: 620;
  cursor: pointer;
  user-select: none;
}
.auth-remember input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #123f73;
  cursor: pointer;
}
.auth-form__error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff3f5;
  color: #962f3e;
  font-size: 13px;
  line-height: 1.4;
}
.auth-form__submit {
  width: 100%;
  min-height: 54px;
  margin-top: 2px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: linear-gradient(135deg, #0a2b55, #123f73 58%, #184e80);
  color: #fff;
  box-shadow: 0 12px 26px rgba(10, 43, 85, .2), inset 0 1px 0 rgba(255,255,255,.16);
  font: inherit;
  font-size: 16px;
  font-weight: 760;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.auth-form__submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(10, 43, 85, .26), inset 0 1px 0 rgba(255,255,255,.18);
}
.auth-form__submit:disabled { opacity: .7; cursor: wait; }

@keyframes authModalIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .auth-modal { padding: 12px; }
  .auth-modal__panel { width: calc(100vw - 24px); padding: 28px 20px 22px; border-radius: 20px; }
  .auth-modal__mark { width: 62px; height: 62px; margin-bottom: 16px; }
  .auth-modal__mark img { width: 56px; height: 56px; }
  .auth-modal__title { margin-inline: 42px; font-size: 27px; }
  .auth-modal__subtitle { margin-inline: 8px; }
}