/* ============================================================================
   Lamoda Seller — экраны авторизации и подключения
   Дополняет styles.css (использует те же токены: --font, палитра, --r-card 8px,
   --r-ctl 4px, поля 52px, кнопка primary — чёрная).
   Подключать после styles.css:  <link rel="stylesheet" href="auth.css">
   ============================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. Экран входа  /login
   ──────────────────────────────────────────────────────────────── */
.lm-authscreen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--surface-light);padding:32px;
}
.lm-authcard{
  width:420px;max-width:100%;background:var(--white);
  border-radius:var(--r-card);box-shadow:var(--shadow-pop);
  padding:40px 36px 28px;
}
.lm-authlogo{
  display:flex;align-items:baseline;justify-content:center;gap:0;margin-bottom:22px;letter-spacing:-0.01em;
}
.lm-authlogo .b1{font-size:26px;color:var(--text-black);}
.lm-authlogo .x{font-size:20px;color:var(--text-muted);margin:0 10px;}
.lm-authlogo .b2{font-size:26px;color:var(--text-muted);}
.lm-authsub{
  text-align:center;font-size:15px;line-height:22px;color:var(--text-secondary);
  margin:0 0 26px;
}
.lm-authnote{
  text-align:center;font-size:12px;line-height:18px;color:var(--text-muted);
  margin:20px 0 0;
}

/* кнопка «Войти через Telegram» — стиль Telegram Login Widget */
.lm-tgbtn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:52px;border:0;border-radius:6px;cursor:pointer;
  background:#54A9EB;color:#fff;font-family:inherit;font-size:16px;
  transition:background .12s,opacity .12s;
}
.lm-tgbtn:hover{background:#4499dc;}
.lm-tgbtn:active{background:#3f8fce;}
.lm-tgbtn:disabled{cursor:default;opacity:.75;}
.lm-tgbtn svg{width:22px;height:22px;flex:none;}
.lm-tgbtn .lm-spin{width:18px;height:18px;}

/* сообщение об ошибке/успехе в карточке входа */
.lm-authmsg{
  display:flex;align-items:flex-start;gap:10px;
  border-radius:var(--r-ctl);padding:12px 14px;font-size:14px;line-height:20px;
  margin:0 0 20px;
}
.lm-authmsg .ic{flex:none;font-size:15px;line-height:20px;}
.lm-authmsg.err{background:rgba(249,60,0,0.07);color:var(--accent-orange);}
.lm-authmsg.warn{background:rgba(224,168,0,0.10);color:#8A6A00;}
.lm-authmsg.ok{background:rgba(54,141,32,0.10);color:var(--accent-green);}

/* ────────────────────────────────────────────────────────────────
   2. Аккаунт в шапке + дропдаун
   ──────────────────────────────────────────────────────────────── */
.lm-avatar{
  width:32px;height:32px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--surface-light);display:grid;place-items:center;
  color:var(--text-secondary);font-size:13px;overflow:hidden;
}
.lm-acctwrap{position:relative;display:inline-flex;}
.lm-acctmenu{
  position:absolute;z-index:60;top:calc(100% + 8px);right:0;min-width:248px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-pop);padding:6px;
}
.lm-acctmenu-status{
  display:flex;align-items:center;gap:8px;padding:11px 12px 12px;
  font-size:14px;color:var(--text-primary);border-bottom:1px solid var(--border);margin-bottom:6px;
}
.lm-acctmenu-sub{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font:inherit;font-size:14px;color:var(--text-primary);background:none;border:0;cursor:pointer;
  padding:10px 12px;border-radius:var(--r-ctl);
}
.lm-acctmenu-sub:hover{background:var(--surface-light);}
.lm-acctmenu-sub .ic{width:18px;text-align:center;color:var(--text-muted);flex:none;}
.lm-acctmenu-sub.danger{color:var(--accent-orange);}
.lm-acctmenu-sub.danger .ic{color:var(--accent-orange);}
.lm-acctmenu-sep{height:1px;background:var(--border);margin:6px 0;}

/* ────────────────────────────────────────────────────────────────
   3. Подключение кабинета Lamoda — форма
   ──────────────────────────────────────────────────────────────── */
.lm-connect{max-width:640px;display:flex;flex-direction:column;gap:16px;}
.lm-statusline{
  display:flex;align-items:center;gap:12px;padding:16px;
  background:var(--white);border:1px solid var(--border-card);border-radius:var(--r-card);
}
.lm-statusline .st-ico{
  width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:18px;
}
.lm-statusline.on  .st-ico{background:rgba(54,141,32,0.12);}
.lm-statusline.off .st-ico{background:rgba(224,168,0,0.14);}
.lm-statusline .st-title{font-size:16px;color:var(--text-primary);}
.lm-statusline .st-note{font-size:13px;color:var(--text-muted);margin-top:2px;}

.lm-form{display:flex;flex-direction:column;gap:16px;}
.lm-form .req{color:var(--accent-orange);}
.lm-form .opt{color:var(--text-muted);}

/* поле с иконкой-глазом (пароль) */
.lm-inputwrap{position:relative;display:flex;align-items:center;}
.lm-inputwrap .lm-input{padding-right:44px;}
.lm-eye{
  position:absolute;right:8px;width:34px;height:34px;border:0;background:none;cursor:pointer;
  color:var(--text-muted);display:grid;place-items:center;border-radius:var(--r-ctl);font-size:15px;
}
.lm-eye:hover{color:var(--text-primary);background:var(--surface-light);}

/* ошибка поля */
.lm-input.err{border-color:var(--accent-orange);}
.lm-fielderr{font-size:12px;line-height:16px;color:var(--accent-orange);}

/* инфо-блок «Где взять ключи» */
.lm-infobox{
  background:var(--surface-light);border-radius:var(--r-card);padding:16px;
  font-size:14px;line-height:21px;color:var(--text-secondary);
}
.lm-infobox b{color:var(--text-primary);font-weight:400;}
.lm-infobox ol{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px;}
.lm-infobox a{color:var(--link-blue);text-decoration:none;}
.lm-infobox a:hover{text-decoration:underline;}

.lm-form-actions{display:flex;gap:12px;flex-wrap:wrap;padding-top:4px;}

/* ────────────────────────────────────────────────────────────────
   4. Экран-приглашение (кабинет не подключён)
   ──────────────────────────────────────────────────────────────── */
.lm-invite{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:64px 24px;
}
.lm-invite .ic{
  width:88px;height:88px;border-radius:50%;background:var(--surface-light);
  display:grid;place-items:center;font-size:38px;margin-bottom:22px;
}
.lm-invite h2{font-size:22px;line-height:28px;font-weight:400;color:var(--text-primary);margin:0 0 8px;}
.lm-invite p{font-size:15px;line-height:22px;color:var(--text-muted);margin:0 0 24px;max-width:400px;}

/* ────────────────────────────────────────────────────────────────
   5. Скелетоны (загрузка) + спиннер
   ──────────────────────────────────────────────────────────────── */
.lm-skel{
  background:linear-gradient(90deg,#ededed 25%,#f6f6f6 37%,#ededed 63%);
  background-size:400% 100%;animation:lm-shimmer 1.4s ease infinite;border-radius:var(--r-ctl);
}
@keyframes lm-shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

.lm-spin{
  width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,0.45);
  border-top-color:#fff;animation:lm-spin .7s linear infinite;flex:none;
}
.lm-spin.dark{border-color:rgba(0,0,0,0.18);border-top-color:var(--text-primary);}
@keyframes lm-spin{to{transform:rotate(360deg);}}