/* Окно подключения сервиса — Figma кит, стр. 22, окна 01–12 и В (714:13512), телефон — листы Е (714:13518).
   Поверх общего окна .lf-dialog (lf-dialog.css): ширина 560, радиус 24 → --lf-radius-xl, пара знаков сверху,
   шаги с номерами, «Что сможет ИИ», низ на --lf-bg-subtle. Разметка — public/js/app-home-connect-window.js. */

.lf-dialog.lf-connect-window {
  position: relative;
  max-width: 560px;
  gap: 20px;
  padding: 24px 28px 28px;
  border-radius: var(--lf-radius-xl);
  background: var(--lf-bg-surface);
}
.lf-connect-window .lf-dialog__head { margin-top: -4px; }
.lf-connect-window .lf-dialog__title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; }
.lf-connect-window .lf-dialog__close { position: absolute; top: 20px; right: 16px; }
.lf-connect-window .lf-dialog__body { gap: 20px; margin-top: -14px; }

/* Связь LidFly и сервиса */
.lf-connect-pair { display: flex; align-items: center; height: 48px; }
.lf-connect-pair__lidfly,
.lf-connect-pair__service {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lf-border-subtle);
  background: var(--lf-bg-surface);
}
.lf-connect-pair__lidfly { border-radius: 50%; }
.lf-connect-pair__service { border-radius: var(--lf-radius-md); }
.lf-connect-pair__service > .lf-brand-mark { width: 28px; height: 28px; }
.lf-connect-pair__second {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lf-border-subtle);
  border-radius: 50%;
  background: var(--lf-bg-surface);
}
.lf-connect-pair__link { position: relative; width: 64px; height: 24px; }
.lf-connect-pair__link::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  border-top: 1.5px dashed var(--lf-border-default);
}
.lf-connect-pair__link.is-on::before { border-top: 2px solid var(--status-success-dot); }
.lf-connect-pair__link.is-error::before { border-top-color: var(--status-warning-dot); }
.lf-connect-pair__link.is-error .lf-connect-pair__check { background: var(--status-warning-dot); }
.lf-connect-pair__check {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--status-success-dot);
  color: var(--color-text-inverse);
  transform: translate(-50%, -50%);
}
.lf-connect-pair__check .lf-icon { width: 14px; height: 14px; }

.lf-connect-subtitle { margin: 0; font-size: 15px; line-height: 22px; color: var(--lf-text-secondary); }
.lf-connect-tabs { align-self: flex-start; border-radius: var(--lf-radius-full); }
.lf-connect-tabs > .btn { width: auto; min-height: 36px; padding: 6px 16px; border-radius: var(--lf-radius-full); font-size: 14px; }

/* Шаги */
.lf-connect-steps-row { display: flex; gap: 20px; align-items: flex-start; }
.lf-connect-steps-row > .lf-connect-steps { flex: 1 1 auto; min-width: 0; }
.lf-connect-aside { flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--lf-text-tertiary); text-align: center; }
.lf-connect-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lf-connect-step { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.lf-connect-step:last-child { padding-bottom: 0; }
.lf-connect-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12.5px;
  top: 30px;
  bottom: 4px;
  border-left: 1px solid var(--lf-border-default);
}
.lf-connect-step__num {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lf-border-default);
  border-radius: 50%;
  background: var(--lf-bg-surface);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: var(--lf-text-secondary);
}
.lf-connect-step__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 3px; }
.lf-connect-step__body > .lf-field,
.lf-connect-step__body > .lf-input { align-self: stretch; }
.lf-connect-step__title { margin: 0; font-size: 16px; line-height: 20px; font-weight: 500; }
.lf-connect-step__text { margin: 0; font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }
.lf-connect-step__body .btn { margin-top: 6px; }

/* Что сможет ИИ */
.lf-connect-abilities { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--lf-radius-lg); background: var(--lf-bg-subtle); }
.lf-connect-abilities__title { margin: 0; font-size: 14px; line-height: 18px; font-weight: 500; }
.lf-connect-abilities__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 18px; }
.lf-connect-abilities__list li { display: flex; align-items: flex-start; gap: 8px; }
.lf-connect-abilities__list .lf-icon { flex: none; width: 16px; height: 16px; color: var(--status-success-dot); }
.lf-connect-abilities__guarantee { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }
.lf-connect-abilities__guarantee .lf-icon { flex: none; width: 16px; height: 16px; }

.lf-connect-note { margin: 0; }
.lf-connect-fallback { margin: 0; font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }
.lf-connect-error { display: flex; flex-direction: column; gap: 12px; }

/* Низ окна: «Поможем подключить» слева, главная кнопка справа, полоса --lf-bg-subtle */
.lf-connect-window .lf-dialog__actions--end {
  justify-content: flex-end;
  margin: 4px -28px -28px;
  padding: 16px 28px;
  border-top: 0;
  border-radius: 0 0 var(--lf-radius-xl) var(--lf-radius-xl);
  background: var(--lf-bg-subtle);
}
.lf-connect-support { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
.lf-dialog__actions > .lf-connect-support--button { margin-right: 0; }
.lf-connect-copy { display: flex; gap: 8px; align-self: stretch; }
.lf-connect-copy .lf-input { flex: 1 1 auto; min-width: 0; font-family: var(--lf-font-mono); }
.lf-connect-support .lf-icon { width: 16px; height: 16px; }
.lf-connect-window .lf-dialog__actions .btn .lf-icon { width: 16px; height: 16px; }

/* Телефон: лист снизу на всю ширину (листы Е) */
@media (max-width: 768px) {
  .lf-dialog-overlay:has(> .lf-connect-window) { align-items: flex-end; padding: 0; }
  .lf-dialog.lf-connect-window {
    max-width: none;
    max-height: calc(100dvh - var(--app-shell-top, 0px) - 16px);
    padding: 16px 20px 20px;
    border-radius: var(--lf-radius-xl) var(--lf-radius-xl) 0 0;
  }
  .lf-connect-window::before {
    content: "";
    align-self: center;
    width: 36px;
    height: 4px;
    margin-bottom: -8px;
    border-radius: var(--lf-radius-full);
    background: var(--lf-border-default);
  }
  .lf-connect-window .lf-dialog__close { top: 16px; right: 12px; }
  .lf-connect-abilities__list { grid-template-columns: 1fr; }
  .lf-connect-steps-row { flex-direction: column; }
  .lf-connect-aside { display: none; }
  .lf-connect-window .lf-dialog__actions--end {
    position: sticky;
    bottom: -20px;
    flex-wrap: wrap;
    margin: 4px -20px -20px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-radius: 0;
  }
  .lf-connect-window .lf-dialog__actions--end > .btn { flex: 1 1 100%; order: -1; }
  .lf-connect-support { margin: 0 auto; }
}

/* Поля внутри шага (окна 09, В3, В4, В7): подписи мельче, как в макете. */
.lf-connect-step__body .lf-field { align-self: stretch; gap: 6px; margin-top: 8px; }
.lf-connect-step__body .lf-field__label { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--lf-text-secondary); }
.lf-connect-step__body .lf-field__hint,
.lf-connect-step__body .lf-field__error { font-size: 13px; line-height: 18px; }

/* ── Окно управления (М, Д): части из public/js/app-home-manage-window.js ── */
.lf-manage-section { display: flex; flex-direction: column; gap: 8px; }
.lf-manage-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lf-manage-section__title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 500; }
.lf-manage-section__aside { font-size: 13px; line-height: 18px; color: var(--lf-text-tertiary); }
.lf-manage-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--lf-border-subtle);
  border-radius: var(--lf-radius-lg);
  background: var(--lf-bg-surface);
}
.lf-manage-account--warning { border-color: color-mix(in srgb, var(--status-warning-dot) 45%, var(--lf-border-subtle)); }
.lf-manage-account--error { border-color: color-mix(in srgb, var(--color-error) 45%, var(--lf-border-subtle)); }
.lf-manage-account__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lf-border-subtle);
  border-radius: 50%;
  background: var(--lf-bg-surface);
}
.lf-manage-account__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-manage-account__name { overflow: hidden; font-size: 15px; line-height: 20px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.lf-manage-account__meta { font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }
.lf-manage-account__side { flex: none; display: flex; align-items: center; gap: 8px; }
.lf-manage-account__price { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; line-height: 18px; color: var(--lf-text-tertiary); }
.lf-manage-account__price strong { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--lf-text-primary); }
.lf-manage-account__price--plain { color: var(--lf-text-secondary); }
.lf-manage-sublist { display: flex; flex-direction: column; gap: 6px; }
.lf-manage-sublist__title { margin: 4px 0 0; font-size: 15px; line-height: 20px; font-weight: 500; }
.lf-manage-sublist ul { display: flex; flex-direction: column; margin: 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--lf-border-subtle); list-style: none; }
.lf-manage-sublist__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; font-size: 14px; line-height: 20px; }
.lf-manage-sublist__name { font-weight: 500; }
.lf-manage-sublist__caption { color: var(--lf-text-tertiary); }
.lf-manage-sublist__side { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lf-manage-sublist__meta { flex-basis: 100%; font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }
.lf-manage-sublist__add { padding: 6px 0; }
.lf-manage-sublist__add .lf-home-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.lf-manage-sublist__add .lf-icon { width: 16px; height: 16px; }
.lf-manage-add {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px dashed var(--lf-border-default);
  border-radius: var(--lf-radius-lg);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lf-manage-add:hover { background: var(--lf-bg-hover); }
.lf-manage-add:focus-visible { outline: none; box-shadow: var(--lf-focus-ring); }
.lf-manage-add__icon { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lf-action-gray); }
.lf-manage-add__icon .lf-icon { width: 18px; height: 18px; }
.lf-manage-add__text { display: flex; flex-direction: column; gap: 2px; }
.lf-manage-add__title { font-size: 15px; line-height: 20px; font-weight: 500; }
.lf-manage-add__hint { font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }
.lf-manage-note { display: flex; gap: 10px; padding: 14px 16px; border-radius: var(--lf-radius-lg); background: var(--lf-bg-subtle); font-size: 14px; line-height: 20px; color: var(--lf-text-secondary); }
.lf-manage-note > .lf-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.lf-manage-note p { margin: 0; }
.lf-manage-note .lf-home-link { margin-top: 4px; font-size: 14px; }
.lf-manage-empty { margin: 0; padding: 14px 16px; border-radius: var(--lf-radius-lg); background: var(--lf-bg-subtle); font-size: 14px; line-height: 20px; color: var(--lf-text-secondary); }
.lf-dialog__actions > .lf-manage-danger { margin-right: auto; }
.lf-manage-window .lf-connect-support { display: none; }
@media (max-width: 768px) {
  .lf-manage-account { flex-wrap: wrap; }
  .lf-manage-account__side { flex-basis: 100%; justify-content: flex-end; }
  .lf-manage-window .lf-dialog__actions--end > .lf-manage-danger { order: 2; flex: 1 1 100%; justify-content: center; }
}

/* ── Уведомления (В10): public/js/app-home-notify.js ── */
.lf-notify-host { position: fixed; z-index: 1200; top: calc(var(--app-shell-top, 0px) + 16px); right: 16px; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.lf-notify {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 10px 14px 14px;
  border: 1px solid var(--lf-border-subtle);
  border-radius: var(--lf-radius-lg);
  background: var(--lf-bg-surface);
  box-shadow: var(--lf-shadow-elevation-3);
  pointer-events: auto;
}
.lf-notify__icon { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--status-success-bg); color: var(--status-success-dot); }
.lf-notify--danger .lf-notify__icon { background: var(--status-warning-bg); color: var(--status-warning-dot); }
.lf-notify--info .lf-notify__icon { background: var(--color-category-sky-bg); color: var(--color-category-sky-accent); }
.lf-notify__icon .lf-icon { width: 16px; height: 16px; }
.lf-notify__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.lf-notify__title { font-size: 15px; line-height: 20px; font-weight: 500; }
.lf-notify__text { font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }
.lf-notify__close .lf-icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .lf-notify { animation: lfNotifyIn 0.2s ease-out; }
  @keyframes lfNotifyIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* QR-код Telegram справа от шагов (Окно 05) и заголовки частей окна цены (В9). */
.lf-connect-qr { width: 104px; height: 104px; padding: 6px; border: 1px solid var(--lf-border-subtle); border-radius: var(--lf-radius-md); background: var(--color-text-inverse); }
.lf-connect-qr svg { display: block; width: 100%; height: 100%; }
.lf-price-dialog .lf-price-part { margin: 4px 0 0; font-size: 15px; line-height: 20px; font-weight: 600; }

/* Окна управления: ряд кнопок и перенесённое содержимое контроллеров (Telegram, ВКонтакте, Вебмастер, Аудитории). */
.lf-manage-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-manage-embed > * { margin: 0; }
.lf-manage-embed .home-modal-list { display: flex; flex-direction: column; gap: 8px; }
.lf-manage-embed .home-vk-cabinet,
.lf-manage-embed .home-modal-row { padding: 12px 14px; border: 1px solid var(--lf-border-subtle); border-radius: var(--lf-radius-lg); background: var(--lf-bg-surface); }
.lf-connect-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; cursor: pointer; }
.lf-connect-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--lf-action-brand); }