/* Группы и строки сервисов главной кабинета — Figma кит, стр. 22: группы 553:11083/553:11105,
   компонент «Подключение / Строка» 537:246, состояния — доска Б 593:5086, телефон 559:3809.
   Разметка — public/js/app-home-rows.js. Отметки на знаке — общие с кольцом (app-home.css). */

.lf-home-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.lf-home-groups__col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.lf-home-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 24px 16px;
  border: 1px solid var(--lf-border-subtle);
  border-radius: var(--lf-radius-xl);
  background: var(--lf-bg-surface);
}
.lf-home-group__head { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; }
.lf-home-group__wing { flex: none; width: 44px; height: 44px; isolation: isolate; }
.lf-home-group__titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-home-group__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; }
.lf-home-group__subtitle { font-size: 15px; line-height: 22px; color: var(--lf-text-secondary); }
.lf-home-group__rows { display: flex; flex-direction: column; }
.lf-home-group__footer { margin: 0; padding-top: 8px; font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }

/* ── Строка ── */
.lf-home-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-radius: var(--lf-radius-md); }
.lf-home-row__mark {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lf-border-subtle);
  border-radius: var(--lf-radius-md);
  background: var(--lf-bg-surface);
}
.lf-home-row__mark > .lf-brand-mark { width: 28px; height: 28px; }
.lf-home-row__mark-second {
  position: absolute;
  left: 26px;
  top: 26px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lf-border-subtle);
  border-radius: 50%;
  background: var(--lf-bg-surface);
}
.lf-home-row__badge { top: -7px; right: -7px; }
.lf-home-row__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-home-row__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lf-home-row__name { overflow: hidden; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: -0.005em; text-overflow: ellipsis; white-space: nowrap; }
.lf-home-row__label {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--lf-radius-full);
  background: var(--lf-pastel-lime);
  color: var(--lf-pastel-lime-text);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
}
.lf-home-row__purpose,
.lf-home-row__meta { font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }
.lf-home-row__purpose { overflow: hidden; text-overflow: ellipsis; }
.lf-home-row__meta { display: flex; align-items: center; gap: 6px; min-width: 0; padding-top: 2px; }
.lf-home-row__meta-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-home-row__meta--muted { color: var(--lf-text-tertiary); }
.lf-home-row__meta-icon { flex: none; width: 14px; height: 14px; }
.lf-home-row__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--status-success-dot); }
.lf-home-row__meta--paused .lf-home-row__dot { background: var(--status-warning-dot); }
.lf-home-row__meta--warning { color: var(--status-warning-fg); }
.lf-home-row__meta--error { color: var(--color-error); }
.lf-home-row__meta--unavailable,
.lf-home-row__meta--lock { color: var(--lf-text-tertiary); }

.lf-home-row__actions { flex: none; display: flex; align-items: center; gap: 4px; }
.lf-home-row__actions .btn .lf-icon { width: 16px; height: 16px; }
.lf-home-row__gear,
.lf-home-row__plus { display: none; }
.lf-home-row__note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--lf-text-secondary); }
.lf-home-row__note .lf-icon { width: 14px; height: 14px; }

/* Переход из инструкции (А8): строка подсвечена, под ней подсказка. */
.lf-home-row.is-highlighted { margin: 0 -10px; padding: 10px; background: var(--lf-bg-brand-soft); box-shadow: 0 0 0 2px var(--status-success-dot); }
.lf-home-row__tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 8px;
  padding: 10px 12px;
  border-radius: var(--lf-radius-md);
  background: var(--lf-action-primary);
  color: var(--lf-action-on-primary);
  font-size: 14px;
  line-height: 20px;
}
.lf-home-row__tip .lf-icon { flex: none; width: 16px; height: 16px; }

/* Загрузка (А5) */
.lf-home-row--loading .lf-brand-mark,
.lf-home-row--loading .lf-home-row__mark-second { opacity: 0.35; }
.lf-home-row__skeleton { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; }
.lf-home-row__skeleton span,
.lf-home-row__skeleton-btn {
  display: block;
  height: 10px;
  border-radius: var(--lf-radius-full);
  background: linear-gradient(90deg, var(--lf-bg-subtle), var(--lf-bg-muted), var(--lf-bg-subtle));
  background-size: 220% 100%;
  animation: lfHomeSkeleton 1.4s ease-in-out infinite;
}
.lf-home-row__skeleton span:nth-child(1) { width: 40%; height: 12px; }
.lf-home-row__skeleton span:nth-child(2) { width: 70%; }
.lf-home-row__skeleton span:nth-child(3) { width: 35%; }
.lf-home-row__skeleton-btn { flex: none; width: 96px; height: 30px; }
@keyframes lfHomeSkeleton {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-home-row__skeleton span,
  .lf-home-row__skeleton-btn { animation: none; }
}

/* ── Телефон: одна колонка, порядок групп как в макете 06б, компактные действия ── */
@media (max-width: 768px) {
  .lf-home-groups { display: flex; flex-direction: column; gap: 16px; }
  .lf-home-groups__col { display: contents; }
  .lf-home-group--ads { order: 1; }
  .lf-home-group--social { order: 2; }
  .lf-home-group--site { order: 3; }
  .lf-home-group--sales { order: 4; }
  .lf-home-group { padding: 20px 16px 12px; border-radius: var(--lf-radius-lg); }
  .lf-home-group__head { align-items: flex-start; }
  .lf-home-group__title { font-size: 20px; line-height: 26px; }
  .lf-home-row { align-items: center; }
  .lf-home-row__purpose { overflow: visible; }
  .lf-home-row__manage,
  .lf-home-row__add,
  .lf-home-row__cta:has(+ .lf-home-row__plus) { display: none; }
  .lf-home-row__gear,
  .lf-home-row__plus { display: inline-flex; }
  .lf-home-row__note { font-size: 0; }
  .lf-home-row__note .lf-icon { width: 16px; height: 16px; }
}