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

.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; }
}


/* Выбор при открытии гостевой ссылки поверх своего входа. */
.lg-ask{
  max-width:460px; margin:14vh auto; padding:32px 30px; text-align:center;
  background:var(--sb-surface); border:1px solid var(--sb-border);
  border-radius:var(--sb-radius); box-shadow:var(--sb-shadow-lg);
}
.lg-ask h1{ font-size:21px; margin:0 0 14px }
.lg-ask p{ font-size:14.5px; line-height:1.55; color:var(--sb-text-muted); margin:0 0 10px }
.lg-ask p b{ color:var(--sb-text) }
.lg-ask-note{ font-size:13px }
.lg-ask-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px }
.lg-ask-btn{
  padding:12px 20px; border-radius:12px; cursor:pointer; text-decoration:none;
  font-family:var(--sb-font); font-size:14px; font-weight:700;
  background:transparent; color:var(--sb-purple-dark);
  border:1.5px solid var(--sb-purple);
  box-shadow:0 3px 0 0 var(--sb-purple-dark);
}
.lg-ask-btn.ghost{
  color:var(--sb-text-muted); border-color:var(--sb-border-strong);
  box-shadow:0 3px 0 0 var(--sb-border-strong);
}
.lg-ask-btn:active{ transform:translateY(3px); box-shadow:none }