/*
   Login-page specific — двухколоночный split, лого «PV Lab.» и footer'ы.

   Общие компоненты (input, button, checkbox, glass surface) вынесены в pvlab-glass.css.
   Анимация фоновых blob'ов — в pvlab-blobs.css.
*/

/* Стираем pad/margin контейнера _LoginLayout. */
html, body {
  margin: 0;
  padding: 0;
}

/* Border-box на всей login-странице — без этого input с padding-right: 52px
   (под кнопку toggle password) становится визуально шире, чем input без
   wrapper'а. */
.pvlab-login-page *,
.pvlab-login-page *::before,
.pvlab-login-page *::after {
  box-sizing: border-box;
}

/* ── Cursor follower ────────────────────────────────────────────────────────
   Цветной кружок в стиле фоновых blob'ов: cyan, сильно размытый. Прилипает
   к курсору (без lerp). z-index: 1 — на одном уровне с .pvlab-login-split;
   DOM-порядок (см. JS, переносим cursor сразу после .pvlab-blob-stage и до
   .pvlab-login-split) ставит cursor ПОВЕРХ blob'ов, но ПОД формой/панелями.
   То есть он плавает на заднем фоне, не мешает контенту.

   Внутри cursor — отдельный inner-div, на нём идут transition'ы scale/opacity
   (на внешнем нельзя — transform используется под translate3d позиции).
   При hover над интерактивным элементом inner раздувается + opacity → 0
   («растворяется внутри элемента»), при уходе обратно — собирается. */
.pvlab-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  width: 0;
  height: 0;
  will-change: transform;
}

.pvlab-cursor__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
  border-radius: 50%;
  background: var(--pvlab-blob-cyan, #3DB6FF);
  filter: blur(20px);
  opacity: 0;
  transform: scale(1);
  transition:
    opacity   520ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 520ms cubic-bezier(0.4, 0, 0.2, 1),
    filter    420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pvlab-cursor.is-visible .pvlab-cursor__inner {
  opacity: 0.8;
}

/* «Растворение» в элементе: inner раздувается, opacity → 0, blur сильнее.
   Эффект «расходящегося облака». */
.pvlab-cursor.is-hover .pvlab-cursor__inner {
  opacity: 0;
  transform: scale(2);
  filter: blur(36px);
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .pvlab-cursor { display: none !important; }
}

.pvlab-login-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--pvlab-text, #1a1a23);
  background: #dde3ec;
  overflow-x: hidden;

  /* На странице ничего нельзя выделять, кроме input'ов.
     Input перебивает это правило через user-select: text (в pvlab-glass.css). */
  user-select: none;
  -webkit-user-select: none;
}

/* ── Layout: split + footer ─────────────────────────────────────────────── */

.pvlab-login-split {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* Колонки центрируют контент и горизонтально, и вертикально.
   Footer-надписи лежат внутри каждой панели (position: absolute снизу). */
.pvlab-login-pane {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px 80px;
  min-height: 100vh;
}

.pvlab-login-pane__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 36px;
  padding: 0 32px;
  font-size: 14px;
  color: var(--pvlab-text-muted, #5e6470);
}

/* Тот же цвет, что и «Забыли пароль?» — accent-dark + bold. */
.pvlab-login-pane__footer-link {
  color: var(--pvlab-accent-dark, #0e6fa3);
  font-weight: 600;
  text-decoration: none;
  transition: color 160ms ease;
}

.pvlab-login-pane__footer-link:hover {
  color: #084a6f;
}

/* Стеклянная панель — только левая часть (с логотипом). Right pane остаётся
   обычным фоном, чтобы blob'ы за правой формой проступали напрямую без glass.
   Более прозрачный фон (0.32) — blob'ы лучше проступают сквозь стекло. */
.pvlab-login-pane--brand {
  background: rgba(255, 255, 255, 0.25);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(15, 23, 42, 0.03);
}

/* ── Логотип PV Lab. ────────────────────────────────────────────────────── */

/* ── Steppe (локальный шрифт от type.today) ─────────────────────────────────
   9 начертаний — Thin (100) … Black (900). WOFF2 — основной формат для современных
   браузеров, WOFF — fallback для старых. */
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 100;
  src: url('/fonts/Steppe/Web-PS/Steppe-Thin.woff2')      format('woff2'),
       url('/fonts/Steppe/Web-TT/Steppe-Thin.woff')       format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 300;
  src: url('/fonts/Steppe/Web-PS/Steppe-Light.woff2')     format('woff2'),
       url('/fonts/Steppe/Web-TT/Steppe-Light.woff')      format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 350;
  src: url('/fonts/Steppe/Web-PS/Steppe-Book.woff2')      format('woff2'),
       url('/fonts/Steppe/Web-TT/Steppe-Book.woff')       format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 400;
  src: url('/fonts/Steppe/Web-PS/Steppe-Regular.woff2')   format('woff2'),
       url('/fonts/Steppe/Web-TT/Steppe-Regular.woff')    format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 500;
  src: url('/fonts/Steppe/Web-PS/Steppe-Medium.woff2')    format('woff2'),
       url('/fonts/Steppe/Web-TT/Steppe-Medium.woff')     format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 600;
  src: url('/fonts/Steppe/Web-PS/Steppe-SemiBold.woff2')  format('woff2'),
       url('/fonts/Steppe/Web-TT/Steppe-SemiBold.woff')   format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 700;
  src: url('/fonts/Steppe/Web-PS/Steppe-Bold.woff2')      format('woff2'),
       url('/fonts/Steppe/Web-TT/Steppe-Bold.woff')       format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 800;
  src: url('/fonts/Steppe/Web-PS/Steppe-ExtraBold.woff2') format('woff2'),
       url('/fonts/Steppe/Web-TT/Steppe-ExtraBold.woff')  format('woff'); }
@font-face { font-family: 'Steppe'; font-style: normal; font-display: swap; font-weight: 900;
  src: url('/fonts/Steppe/Web-PS/Steppe-Black.woff2')     format('woff2'),
       url('/fonts/Steppe/Web-TT/Steppe-Black.woff')      format('woff'); }

.pvlab-logo {
  display: inline-block;
  user-select: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
}

.pvlab-logo__pv {
  display: block;
  font-size: 168px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--pvlab-text, #1a1a23);
}

.pvlab-logo__lab {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 28px 12px;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #ffffff;
  background: var(--pvlab-blob-cyan, #3DB6FF);
}

.pvlab-logo__lab-dot {
  color: #ffffff;
}

/* ── Форма входа ────────────────────────────────────────────────────────── */

.pvlab-login-form {
  width: 100%;
  max-width: 460px;
}

.pvlab-login-form__title {
  margin: 0 0 28px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #2e2e36;
}

.pvlab-login-form__group {
  margin-bottom: 18px;
}

.pvlab-login-form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pvlab-text, #1a1a23);
}

.pvlab-login-form__forgot {
  display: block;
  margin-top: 10px;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: var(--pvlab-accent-dark, #0e6fa3);
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}

.pvlab-login-form__forgot:hover {
  color: #084a6f;
  transform: translateX(-2px);
}

.pvlab-login-form__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.pvlab-login-form__row .pvlab-login-form__forgot {
  margin-top: 0;
}

.pvlab-login-form__submit {
  margin-top: 28px;
}

.pvlab-login-form__error {
  margin-bottom: 16px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.32);
  color: #8b1422;
  font-size: 14px;
}

.pvlab-login-form__field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--pvlab-danger, #c5253a);
}

.pvlab-login-form__captcha {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* ── Footer'ы (две колонки) ─────────────────────────────────────────────── */

/* ── Адаптив: ниже 960px складываем колонки вертикально ────────────────── */

@media (max-width: 960px) {
  .pvlab-login-split {
    grid-template-columns: 1fr;
  }
  .pvlab-login-pane {
    padding: 40px 24px 72px;
    min-height: 70vh;
  }
  .pvlab-logo__pv             { font-size: 112px; }
  .pvlab-logo__lab            { font-size: 56px; padding: 4px 20px 8px; }
  .pvlab-login-pane__footer   { gap: 6px 20px; bottom: 16px; padding: 0 16px; font-size: 13px; }
}
