/*!
 * feed_settings.css — стили формы «Настройки ленты» (модуль feed_settings.js).
 * Copyright (c) 2026 Mehti Zeynalov / Hubstorie. Proprietary. All rights reserved.
 *
 * ЕДИНЫЙ модульный источник КОНТЕНТНЫХ стилей формы (.fp-row/.tm-*/.seg/.kw-*),
 * раньше жили в hubstorie.css (только лента). Теперь грузится и в ленте, и в
 * кабинете → форма выглядит одинаково на всех поверхностях (правило 10). Chrome
 * слайд-панели монолита (.fp-head/.fp-back/.fp-title/.fp-body) остаётся в
 * hubstorie.css — он нужен только монолит-фолбэку, у модуля свой хост-хедер.
 */
/* Обёртка контента формы в хост-шторке: горизонтальные поля (панель-body узкий,
   4px — для списков-рядов; форме нужно дыхание). */
.fp-wrap { padding: 4px 14px 18px; }

.fp-hint { color: var(--text-dim, #b8b0a2); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.fp-loading { color: var(--text-faint, #8c857a); text-align: center; padding: 30px; }

.fp-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card, #1e1d20); border: 1px solid var(--border, rgba(237,228,211,0.12));
  border-radius: 12px; padding: 16px; margin-bottom: 10px; cursor: pointer;
  color: var(--text, #ede4d3); font-family: inherit; text-align: left;
}
.fp-row-main { display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.fp-row-sub { font-size: 13px; color: var(--text-dim, #b8b0a2); }
.fp-chevron { color: var(--text-faint, #8c857a); font-size: 22px; line-height: 1; flex-shrink: 0; }

.tm-row { padding: 14px 0; border-bottom: 1px solid var(--border, rgba(237,228,211,0.1)); }
.tm-name { font-size: 15px; color: var(--text, #ede4d3); margin-bottom: 10px; }
.seg-ctl { display: flex; background: var(--card2, #242327); border-radius: 10px; padding: 3px; gap: 2px; }
.seg {
  flex: 1; background: none; border: none; cursor: pointer;
  color: var(--text-dim, #b8b0a2); font-family: inherit; font-size: 13px;
  padding: 9px 4px; border-radius: 8px; transition: all .15s ease;
}
.seg.on { background: var(--accent, #d4a574); color: #1a1a1c; font-weight: 600; }

.fp-clear {
  width: 100%; margin-top: 22px;
  background: none; border: 1px solid rgba(217,139,139,0.5);
  color: #d98b8b; border-radius: 12px; padding: 14px;
  font-size: 15px; font-family: inherit; cursor: pointer;
}
.fp-clear:active { background: rgba(217,139,139,0.12); }
.fp-note { color: var(--text-faint, #8c857a); font-size: 12px; line-height: 1.5; margin: 12px 2px 0; }

.kw-add { display: flex; gap: 8px; margin: 4px 0 16px; }
.kw-input {
  flex: 1; min-width: 0; background: var(--card2, #242327); border: 1px solid var(--border, rgba(237,228,211,0.14));
  color: var(--text, #ede4d3); border-radius: 10px; padding: 11px 13px; font-size: 15px; font-family: inherit;
}
.kw-input:focus { outline: none; border-color: var(--accent, #d4a574); }
.kw-add-btn {
  background: var(--accent, #d4a574); color: #1a1a1c; border: none; border-radius: 10px;
  padding: 0 16px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.kw-list { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card2, #242327); border: 1px solid var(--border, rgba(237,228,211,0.14));
  color: var(--text, #ede4d3); border-radius: 16px; padding: 7px 8px 7px 13px; font-size: 14px;
}
.kw-del {
  background: rgba(237,228,211,0.12); border: none; color: var(--text-dim, #b8b0a2);
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.kw-del:active { background: rgba(217,139,139,0.3); color: #fff; }