/* Главная кабинета — Figma кит «LidFly — Бренд и UI Kit 2026», стр. 22 «Кабинет — Главная: подключения»
   (537:130). Шапка с кольцом 553:11017, подсказка 553:11562, «Поможем подключить» 553:11124, «Подключили —
   пишите задачу» 553:11152, «Сколько стоит» 553:11179, строка оплаты 644:3802, полоса паузы 553:13006,
   телефон 559:3686. Разметка — public/js/app-home-view.js и app-home-ring.js; строки — app-home-rows.css.
   Цвета — токены кита (--lf-*, tokens-kit.css) и кабинета; тёмная тема — их значения. */

.lf-home {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  color: var(--lf-text-primary);
  font-family: var(--font-sans);
}

.lf-home-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-category-sky-text);
  font: 500 13px/16px var(--font-sans);
  cursor: pointer;
}
.lf-home-link:hover { text-decoration: underline; }
.lf-home-link:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--lf-focus-ring); }

/* ── Шапка ── */
.lf-home-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 40px 24px 40px 48px;
  overflow: hidden;
  border: 1px solid var(--lf-border-subtle);
  border-radius: var(--lf-radius-xl);
  background: var(--lf-bg-surface);
}
.lf-home-hero__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lf-home-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-home-hero__badges:empty { display: none; }
.lf-home-hero__title { margin: 0; font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.03em; color: var(--lf-text-primary); }
.lf-home-hero__lead { margin: 0; font-size: 19px; line-height: 30px; color: var(--lf-text-secondary); }
.lf-home-hero__intro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--lf-radius-md);
  background: color-mix(in srgb, var(--color-category-sky-bg) 60%, var(--lf-bg-surface));
  font-size: 15px;
  line-height: 22px;
}
.lf-home-hero__intro .lf-icon { flex: none; width: 16px; height: 16px; color: var(--color-category-sky-accent); }
.lf-home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.lf-home-hero__actions .btn .lf-icon { width: 18px; height: 18px; }
.lf-home-hero__footnote { display: flex; align-items: center; gap: 6px; margin: -8px 0 0; font-size: 13px; line-height: 18px; color: var(--lf-text-tertiary); }
.lf-home-hero__footnote .lf-icon { width: 14px; height: 14px; }
.lf-home-hero__free { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.lf-home-hero__free-label { font-size: 13px; line-height: 18px; color: var(--lf-text-tertiary); }
.lf-home-hero__free-list { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-home-free-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--lf-border-subtle);
  border-radius: var(--lf-radius-full);
  background: var(--lf-bg-surface);
  font-size: 15px;
  font-weight: 500;
}
.lf-home-free-chip__check { width: 16px; height: 16px; color: var(--status-success-dot); }

/* Кольцо «N из 12» */
.lf-home-hero__ring { flex: none; width: 420px; height: 340px; }
.lf-home-ring { position: relative; width: 420px; height: 340px; }
.lf-home-ring::before,
.lf-home-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.lf-home-ring::before { left: -20px; top: 30px; width: 300px; height: 240px; background: color-mix(in srgb, var(--lf-pastel-lime) 70%, transparent); }
.lf-home-ring::after { left: 160px; top: 80px; width: 280px; height: 240px; background: color-mix(in srgb, var(--color-category-sky-bg) 80%, transparent); }
.lf-home-ring.is-paused::before { background: color-mix(in srgb, var(--status-warning-bg) 90%, transparent); }
.lf-home-ring__lines { position: absolute; inset: 0; z-index: 1; overflow: visible; }
.lf-home-ring__orbit { fill: none; stroke: var(--lf-border-default); stroke-width: 1; stroke-dasharray: 3 5; }
.lf-home-ring__spoke { stroke: var(--lf-border-default); stroke-width: 1; stroke-dasharray: 3 5; }
.lf-home-ring__spoke.is-on { stroke: var(--status-success-dot); stroke-width: 2; stroke-dasharray: none; }
.lf-home-ring__spoke.is-problem,
.lf-home-ring__spoke.is-paused { stroke: var(--status-warning-dot); stroke-width: 2; stroke-dasharray: 4 4; }
.lf-home-ring__halo {
  position: absolute;
  z-index: 1;
  left: 126px;
  top: 86px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lf-bg-brand-soft) 85%, transparent);
}
.lf-home-ring.is-paused .lf-home-ring__halo { background: color-mix(in srgb, var(--status-warning-bg) 85%, transparent); }
.lf-home-ring__center {
  position: absolute;
  z-index: 2;
  left: 146px;
  top: 106px;
  width: 128px;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  background: var(--lf-bg-surface);
  box-shadow: 0 12px 32px rgb(28 27 30 / 0.08), 0 2px 6px rgb(28 27 30 / 0.06);
  text-align: center;
}
.lf-home-ring__count { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.lf-home-ring__caption { max-width: 104px; font-size: 13px; line-height: 18px; color: var(--lf-text-tertiary); }
.lf-home-ring__mark {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--lf-border-default);
  border-radius: var(--lf-radius-md);
  background: var(--lf-bg-surface);
}
.lf-home-ring__mark .lf-brand-mark { width: 28px; height: 28px; opacity: 0.45; }
.lf-home-ring__mark.is-on { border-style: solid; border-color: transparent; box-shadow: 0 4px 8px rgb(28 27 30 / 0.05), 0 1px 1px rgb(28 27 30 / 0.04); }
.lf-home-ring__mark.is-on .lf-brand-mark { opacity: 1; }
.lf-home-ring__badge,
.lf-home-row__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--lf-bg-surface);
  border-radius: 50%;
  color: var(--color-text-inverse);
}
.lf-home-ring__badge .lf-icon,
.lf-home-row__badge .lf-icon { width: 12px; height: 12px; }
.lf-home-ring__badge--ok,
.lf-home-row__badge--ok { background: var(--status-success-dot); }
.lf-home-ring__badge--warn,
.lf-home-row__badge--warn,
.lf-home-row__badge--pause,
.lf-home-row__badge--reauth { background: var(--status-warning-dot); }

/* Телефон: вместо кольца плашка со строкой знаков */
.lf-home-strip { display: none; }

/* ── Подсказка под шапкой ── */
.lf-home-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 20px;
  border-radius: var(--lf-radius-md);
  background: color-mix(in srgb, var(--color-category-sky-bg) 60%, var(--lf-bg-surface));
}
.lf-home-hint__icon { flex: none; width: 16px; height: 16px; color: var(--color-category-sky-accent); }
.lf-home-hint__text { flex: 1 1 0; min-width: 0; margin: 0; font-size: 15px; line-height: 22px; }
.lf-home-hint__action,
.lf-home-hint__close { flex: none; }
.lf-home-hint--warning { background: var(--status-warning-bg); }
.lf-home-hint--warning .lf-home-hint__icon { color: var(--status-warning-dot); }

.lf-home-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--lf-radius-md);
  background: var(--lf-bg-brand-soft);
  font-size: 15px;
  line-height: 22px;
}
.lf-home-guide .lf-icon { flex: none; width: 16px; height: 16px; }

/* ── Поможем подключить ── */
.lf-home-support {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 40px 48px 40px 40px;
  border-radius: var(--lf-radius-xl);
  background: var(--color-category-sky-bg);
}
.lf-home-support__chat { flex: 0 0 400px; display: flex; flex-direction: column; gap: 12px; }
.lf-home-support__question,
.lf-home-support__bubble {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--lf-radius-lg);
  background: var(--lf-bg-surface);
  font-size: 15px;
  line-height: 22px;
}
.lf-home-support__question { align-self: flex-end; width: 312px; border-bottom-right-radius: 4px; }
.lf-home-support__answer { display: flex; align-items: flex-end; gap: 10px; width: 368px; }
.lf-home-support__avatar { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lf-bg-surface); }
.lf-home-support__bubble { display: flex; flex-direction: column; gap: 4px; border-bottom-left-radius: 4px; }
.lf-home-support__author { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--color-brand-text); }
.lf-home-support__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lf-home-support__title,
.lf-home-work__title { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.lf-home-support__lead { margin: 0; font-size: 17px; line-height: 24px; color: var(--lf-text-secondary); }
.lf-home-support__facts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 18px; font-weight: 500; }
.lf-home-support__facts li { display: flex; align-items: center; gap: 8px; }
.lf-home-support__facts .lf-icon { width: 16px; height: 16px; color: var(--lf-text-secondary); }
.lf-home-support__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.lf-home-support__note { margin: 0; font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }

/* ── Подключили — пишите задачу ── */
.lf-home-work { display: flex; flex-direction: column; gap: 24px; }
.lf-home-work__head { display: flex; flex-direction: column; gap: 4px; padding-top: 24px; }
.lf-home-work__lead { margin: 0; font-size: 15px; line-height: 24px; color: var(--lf-text-secondary); }
.lf-home-work__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lf-home-chat,
.lf-home-own {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px;
  border-radius: var(--lf-radius-xl);
}
.lf-home-chat { background: var(--lf-bg-brand-soft); }
.lf-home-own { border: 1px solid var(--lf-border-subtle); background: var(--lf-bg-surface); }
.lf-home-chat__top { display: flex; align-items: center; gap: 12px; }
.lf-home-chat__wing { width: 44px; height: 44px; isolation: isolate; }
.lf-home-card__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; }
.lf-home-card__text { flex: 1 1 auto; margin: 0; font-size: 15px; line-height: 22px; color: var(--lf-text-secondary); }
.lf-home-card__action { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 6px; }
.lf-home-card__note { font-size: 13px; line-height: 18px; color: var(--lf-text-tertiary); }
.lf-home-own__logos { display: flex; }
.lf-home-own__logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -8px;
  border: 1px solid var(--lf-border-subtle);
  border-radius: 50%;
  background: var(--lf-bg-surface);
}
.lf-home-own__row { display: none; }

/* ── Сколько стоит / строка оплаты ── */
.lf-home-price {
  display: flex;
  padding: 24px 24px 24px 28px;
  border-radius: var(--lf-radius-xl);
  background: var(--lf-bg-subtle);
}
.lf-home-price__head { flex: 0 0 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lf-home-price__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.lf-home-price__col { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; padding: 0 24px; border-left: 1px solid var(--lf-border-default); }
.lf-home-price__label { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--lf-text-tertiary); }
.lf-home-price__value { font-size: 18px; line-height: 24px; font-weight: 600; }
.lf-home-price__text { font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }
.lf-home-price__summary,
.lf-home-price__more { display: none; }
.lf-home-paid {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--lf-radius-lg);
  background: var(--lf-bg-subtle);
}
.lf-home-paid__icon { flex: none; width: 20px; height: 20px; color: var(--lf-text-secondary); }
.lf-home-paid__text { flex: 1 1 0; margin: 0; font-size: 15px; line-height: 22px; }

/* ── Полоса паузы на других страницах (05б) ── */
.lf-home-pause {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: var(--lf-radius-md);
  background: var(--status-warning-bg);
}
.lf-home-pause__icon { flex: none; width: 18px; height: 18px; color: var(--status-warning-dot); }
.lf-home-pause__text { flex: 1 1 0; min-width: 0; margin: 0; font-size: 14px; line-height: 20px; }

/* ── Телефон ── */
@media (max-width: 768px) {
  .lf-home { gap: 16px; }
  .lf-home-hero { padding: 20px; border-radius: var(--lf-radius-lg); }
  .lf-home-hero__text { gap: 16px; }
  .lf-home-hero__title { font-size: 30px; line-height: 36px; }
  .lf-home-hero__lead { font-size: 17px; line-height: 26px; }
  .lf-home-hero__ring { display: none; }
  .lf-home-hero__actions { width: 100%; order: 10; }
  .lf-home-hero__actions .btn { flex: 1 1 100%; }
  .lf-home-hero__actions .btn:not(.lf-home-hero__primary) { display: none; }
  .lf-home-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border-radius: var(--lf-radius-lg);
    background: var(--lf-bg-subtle);
  }
  .lf-home-strip__symbol { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lf-bg-surface); }
  .lf-home-strip__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .lf-home-strip__title { font-size: 15px; line-height: 20px; font-weight: 500; }
  .lf-home-strip__marks { display: flex; flex-wrap: wrap; gap: 4px; }
  .lf-home-strip__mark { opacity: 0.45; }
  .lf-home-strip__mark.is-on { opacity: 1; }
  .lf-home-hint { padding: 12px; align-items: flex-start; flex-wrap: wrap; }
  .lf-home-hint__text { flex-basis: calc(100% - 72px); }
  .lf-home-support { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; border-radius: var(--lf-radius-lg); }
  .lf-home-support__chat { display: none; }
  .lf-home-support__title,
  .lf-home-work__title { font-size: 22px; line-height: 28px; }
  .lf-home-support__actions { width: 100%; }
  .lf-home-support__actions .btn { flex: 1 1 100%; }
  .lf-home-work { gap: 16px; }
  .lf-home-work__head { padding-top: 8px; }
  .lf-home-work__cards { grid-template-columns: 1fr; gap: 16px; }
  .lf-home-chat { padding: 20px; border-radius: var(--lf-radius-lg); }
  .lf-home-chat .lf-home-card__action { width: 100%; }
  .lf-home-chat .lf-home-card__action .btn { flex: 1 1 100%; }
  .lf-home-chat .lf-home-card__note { display: none; }
  .lf-home-own { padding: 0; border-radius: var(--lf-radius-lg); }
  .lf-home-own > :not(.lf-home-own__row) { display: none; }
  .lf-home-own__row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: inherit;
    background: none;
    color: inherit;
    font: 500 15px/20px var(--font-sans);
    text-align: left;
    cursor: pointer;
  }
  .lf-home-own__row > span:not(.lf-home-own__logos) { flex: 1 1 auto; }
  .lf-home-own__row .lf-home-own__logos { display: flex; }
  .lf-home-own__row .lf-home-own__logo { width: 32px; height: 32px; }
  .lf-home-own__row .lf-home-own__logo:nth-child(4) { display: none; }
  .lf-home-own__row .lf-icon { width: 18px; height: 18px; color: var(--lf-text-tertiary); }
  .lf-home-price { flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--lf-radius-lg); }
  .lf-home-price__head { flex: none; }
  .lf-home-price__head .lf-home-link,
  .lf-home-price__col { display: none; }
  .lf-home-price__summary { display: block; margin: 0; font-size: 15px; line-height: 22px; color: var(--lf-text-secondary); }
  .lf-home-price__more { display: block; align-self: flex-start; font-size: 15px; line-height: 22px; }
  .lf-home-paid { flex-wrap: wrap; }
  .lf-home-paid .btn { flex: 1 1 100%; }
  .lf-home-pause { flex-wrap: wrap; }
  .lf-home-pause .btn { flex: 1 1 100%; }
}

/* Полоса паузы над содержимым раздела кабинета (#global-sub-banner, 05б). */
#global-sub-banner.lf-home-pause { margin: 0 0 16px; }