/* Экран входа. Две половины: слева работа, справа товар.
   Картинка здесь единственная во всей системе — дальше начинается склад,
   и украшения там мешают. */

.lg-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  background: var(--sb-bg);
}

.lg-form-side {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 36px;
  background: var(--sb-surface);
}

.lg-form { width: 100%; max-width: 340px; display: flex; flex-direction: column; }
.lg-logo { height: 40px; width: auto; align-self: flex-start; margin-bottom: 28px; }

.lg-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--sb-text); }
.lg-sub { font-size: 14px; color: var(--sb-text-muted); margin: 6px 0 26px; line-height: 1.45; }

.lg-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sb-text-muted); margin-bottom: 6px;
}
.lg-input {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--sb-border);
  background: var(--sb-surface); color: var(--sb-text);
  font-size: 15px; font-family: inherit; margin-bottom: 16px;
}
.lg-input:focus { outline: none; border-color: var(--sb-purple); box-shadow: var(--sb-ring); }

.lg-btn {
  margin-top: 6px; padding: 13px 20px; border-radius: 11px; border: 0;
  background: linear-gradient(180deg, var(--sb-purple), var(--sb-purple-dark));
  color: #fff; font-size: 15px; font-weight: 650; cursor: pointer; font-family: inherit;
  box-shadow: var(--sb-shadow-md), inset 0 1px 0 rgba(255,255,255,.18);
  transition: filter .12s ease, transform .12s ease;
}
.lg-btn:hover { filter: brightness(1.06); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:disabled { opacity: .6; cursor: default; }

.lg-err {
  display: none; font-size: 13px; font-weight: 600; color: var(--sb-error);
  background: var(--sb-error-bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px;
}
.lg-err.show { display: block; }

.lg-note { font-size: 12px; color: var(--sb-text-muted); margin: 20px 0 0; line-height: 1.5; }

/* Правая половина. Фон берётся из самой фотографии — сиреневый фон
   съёмки совпадает с фирменным оттенком, и стык не виден. */
.lg-art { position: relative; overflow: hidden; background: #b9b6f2; }
.lg-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-art-caption {
  position: absolute; left: 40px; bottom: 36px; color: #1b1630;
}
.lg-art-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.lg-art-sub { font-size: 14px; opacity: .75; margin-top: 2px; }

@media (max-width: 900px) {
  /* На телефоне картинка уходит: экран входа должен помещаться целиком,
     без прокрутки к полям. */
  .lg-page { grid-template-columns: 1fr; }
  .lg-art { display: none; }
  .lg-form-side { min-height: 100vh; padding: 28px 22px; }
}