/* Auth page: fullscreen background with topbar + modal login card.
   Background is static/login-bg.webp (no video/canvas).
*/

html, body { height: 100%; }

body.auth-page {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;            /* stop layout from moving when wheel scrolls */
  overscroll-behavior: none;

  /* B2B bluish depth, without warm/orange overlays */
  background:
    radial-gradient(1100px 650px at 30% 22%, rgba(36,110,255,.22), rgba(0,0,0,0) 60%),
    radial-gradient(1200px 800px at 70% 40%, rgba(0,180,255,.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.62)),
    url("/static/login-bg.webp") center 56% / cover no-repeat fixed;
}

/* Modal overlay (opens on "Войти") */
body.auth-page .auth-modal{
  position: fixed;
  inset: 0;
  z-index: 90; /* keep under the fixed topbar (z=100) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--topbar-h) + 18px) 18px 28px;
}

body.auth-page .auth-modal.is-hidden{ display:none; }

body.auth-page .auth-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  /* keep background sharp (no blur) */
  backdrop-filter: none;
}

body.auth-page .auth-modal .center-shell{
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

body.auth-page .auth-card {
  position: relative;
  width: 520px;
  max-width: 92vw;
  padding: 26px 26px 22px;
  border-radius: 16px;
  background: rgba(12, 16, 24, 0.92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  backdrop-filter: none;

  /* If registration makes it tall, let the card scroll internally */
  max-height: calc(100vh - var(--topbar-h) - 64px);
  overflow: auto;
}

/* Close (X) button */
body.auth-page .auth-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}
body.auth-page .auth-close:hover{
  background: rgba(255,255,255,.08);
}

body.auth-page .auth-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Reuse main "BS" style, but slightly bigger for login */
body.auth-page .auth-logo {
  width: 44px;
  height: 44px;
  font-size: 18px;
  border-radius: 14px;
}

body.auth-page .auth-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

body.auth-page .auth-subtitle {
  margin-top: 2px;
  font-size: 12px;
  opacity: .72;
}


body.auth-page .auth-brand-copy{
  display:inline-flex;
  flex-direction:column;
  min-width:0;
}

body.auth-page .auth-brand-kicker{
  align-self:flex-end;
  display:inline-block;
  margin-top: 2px;
  padding-right: 1px;
  text-align:right;
  font-size: 13px;
  font-weight: 800;
  font-style: oblique 8deg;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}

body.auth-page .auth-card .form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page .auth-card .form select,
body.auth-page .auth-card .form textarea{
  background: rgba(7,11,17,.96);
  color: rgba(238,245,255,.96);
}

body.auth-page .auth-card .form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
body.auth-page .auth-card .form select:focus,
body.auth-page .auth-card .form textarea:focus{
  background: rgba(7,11,17,.96);
  color: rgba(238,245,255,.96);
}

body.auth-page .auth-card .form input:-webkit-autofill,
body.auth-page .auth-card .form input:-webkit-autofill:hover,
body.auth-page .auth-card .form input:-webkit-autofill:focus,
body.auth-page .auth-card .form input:-webkit-autofill:active,
body.auth-page .auth-card .form textarea:-webkit-autofill,
body.auth-page .auth-card .form textarea:-webkit-autofill:hover,
body.auth-page .auth-card .form textarea:-webkit-autofill:focus,
body.auth-page .auth-card .form textarea:-webkit-autofill:active{
  -webkit-text-fill-color: rgba(238,245,255,.96) !important;
  caret-color: rgba(238,245,255,.96);
  border: 1px solid rgba(255,255,255,.08);
  -webkit-box-shadow: 0 0 0 1000px rgba(7,11,17,.96) inset !important;
  box-shadow: 0 0 0 1000px rgba(7,11,17,.96) inset !important;
  transition: background-color 9999s ease-out 0s, color 9999s ease-out 0s;
}

body.auth-page .auth-login-btn{
  position: relative;
  align-self: center;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 12px;
  overflow: hidden;
}

body.auth-page .auth-login-btn.is-loading{
  cursor: wait;
}

body.auth-page .auth-login-btn__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: opacity .14s ease;
}

body.auth-page .auth-login-btn__spinner{
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  margin-left:-7px;
  margin-top:-7px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.30);
  border-top-color:#fff;
  opacity:0;
  pointer-events:none;
  animation: auth-login-spin .8s linear infinite;
  transition: opacity .14s ease;
}

body.auth-page .auth-login-btn.is-loading .auth-login-btn__label{
  opacity:0;
}

body.auth-page .auth-login-btn.is-loading .auth-login-btn__spinner{
  opacity:1;
}

@keyframes auth-login-spin{
  to{ transform: rotate(360deg); }
}