/* ==========================================================================
   Accounts — модалка массовой генерации профилей (#profile-gen-modal).
   Две колонки: слева настройки, справа живое превью и счётчики. Разметка и
   поведение — в pages/accounts/index.html и js/pages/profile-gen.js.
   ========================================================================== */
.pgen .pgen-title { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.pgen-title-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; flex: none;
  border-radius: var(--radius-full);
  background: var(--color-primary-bg); color: var(--color-primary-hover);
}
.pgen-title-ic .icon { width: 1.1rem; height: 1.1rem; }

/* Две колонки на десктопе, одна на узком экране: справа — превью и счётчики, они
   помогают решиться, но без них настройки остаются полностью рабочими. */
.pgen-body { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1rem; align-items: start; }
@media (max-width: 46rem) { .pgen-body { grid-template-columns: minmax(0, 1fr); } }
.pgen-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.75rem; }

/* ── Поле ──────────────────────────────────────────────────────────────────
   Выключенное поле — просто строка со значком; включённое подсвечивается рамкой
   и раскрывает выбор источника. Так видно с одного взгляда, что именно уедет в
   Telegram, а что останется нетронутым. */
.pgen-field {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 0.5rem;
  background: var(--color-surface);
  transition: border-color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}
.pgen-field.is-on {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary-bg) 55%, transparent);
}
.pgen-field-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.75rem; cursor: pointer;
}
.pgen-field-name { font-size: 0.85rem; font-weight: 700; }
.pgen-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; flex: none; border-radius: 8px;
}
.pgen-ic .icon { width: 0.9rem; height: 0.9rem; }
.pgen-ic-violet { background: color-mix(in srgb, var(--color-primary) 18%, transparent); color: var(--color-primary-hover); }
.pgen-ic-blue   { background: color-mix(in srgb, var(--color-blue, #3b82f6) 18%, transparent); color: var(--color-blue, #3b82f6); }
.pgen-ic-amber  { background: color-mix(in srgb, var(--color-warning, #f59e0b) 20%, transparent); color: var(--color-warning-text, #f59e0b); }
.pgen-ic-green  { background: color-mix(in srgb, var(--color-success, #22c55e) 18%, transparent); color: var(--color-success-text, #22c55e); }
.pgen-field-body { padding: 0 0.75rem 0.7rem; }

/* Источник значений — сегментами, а не выпадающим списком: вариантов три, и все
   три должны быть видны сразу, иначе «свой пул» никто не найдёт. */
.pgen-src { display: flex; gap: 0.3rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.pgen-src-btn {
  flex: 1 1 auto; min-width: 6rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.75rem; font-weight: 700; cursor: pointer;
  transition: background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease);
}
.pgen-src-btn:hover { background: var(--color-surface-muted); }
.pgen-src-btn.is-active {
  background: var(--color-primary); color: var(--color-on-primary);
  border-color: transparent;
}
.pgen-pool { font-family: var(--font-data, monospace); font-size: 0.75rem; }
.pgen-prompt { margin-top: 0.5rem; }

/* ── Правая колонка ───────────────────────────────────────────────────────── */
.pgen-side-head {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 0.5rem;
}
.pgen-card {
  border: 1px solid var(--color-border); border-radius: 12px;
  padding: 0.9rem 0.75rem; text-align: center; background: var(--color-surface);
}
.pgen-avatar {
  width: 3.4rem; height: 3.4rem; margin: 0 auto 0.5rem;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-muted); color: var(--color-text-faint);
}
.pgen-avatar .icon { width: 1.6rem; height: 1.6rem; }
.pgen-pv-name { font-size: 0.9rem; font-weight: 800; word-break: break-word; }
.pgen-pv-username { font-size: 0.75rem; color: var(--color-primary-hover); font-family: var(--font-data, monospace); word-break: break-all; }
.pgen-pv-about { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.35rem; word-break: break-word; }
/* Поле, которое генерация НЕ трогает, показываем прочерком, а не пустотой: пустое
   место читается как «сотрёт», хотя невыбранное поле остаётся как было. */
.pgen-pv-untouched { color: var(--color-text-faint); font-style: italic; }

.pgen-stats { margin-top: 0.75rem; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.pgen-stat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.45rem 0.7rem; font-size: 0.75rem;
  color: var(--color-text-muted);
}
.pgen-stat + .pgen-stat { border-top: 1px solid var(--color-border); }
.pgen-stat b { color: var(--color-text); font-variant-numeric: tabular-nums; }

.pgen-safe {
  display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
  margin-top: 0.75rem; padding: 0.6rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 35%, var(--color-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-success, #22c55e) 8%, transparent);
}
.pgen-safe-ic { color: var(--color-success-text, #22c55e); flex: none; display: inline-flex; }
.pgen-safe-title { display: block; font-size: 0.75rem; }
.pgen-safe-sub { display: block; font-size: 0.68rem; color: var(--color-text-muted); }
.pgen-safe input { margin-left: auto; flex: none; }

/* ── Прогресс ─────────────────────────────────────────────────────────────── */
.pgen-progress { margin-top: 0.75rem; }
.pgen-progress-bar {
  height: 6px; border-radius: var(--radius-full);
  background: var(--color-surface-muted); overflow: hidden;
}
.pgen-progress-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-grad-end));
  transition: width 300ms var(--ease, ease);
}
.pgen-progress-text { margin-top: 0.35rem; font-size: 0.72rem; color: var(--color-text-muted); }

/* ── Настройки автозаполнения в карточке аккаунта ─────────────────────────────
   Свёрнутый блок под кнопкой «Автозаполнить»: язык/пол/ИИ нужны не каждый раз, а
   кнопка обязана остаться действием в один клик. */
.afo { margin-top: 0.5rem; border: 1px solid var(--color-border); border-radius: 10px; }
.afo-summary {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.6rem; cursor: pointer;
  font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted);
  list-style: none;
}
.afo-summary::-webkit-details-marker { display: none; }
.afo-summary:hover { color: var(--color-text); }
.afo[open] .afo-summary { border-bottom: 1px solid var(--color-border); }
.afo-body { padding: 0.6rem; }
.afo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.afo-ai { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.5rem; font-size: 0.78rem; cursor: pointer; }
.afo-prompt { margin-top: 0.4rem; }

/* Фото в примере занимает кружок целиком — заглушка со значком остаётся центрированной. */
.pgen-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }