/* Prop Hub CRM — тёмная тема Signal Glass.
   Фон #090A0F, violet #8B5CF6, акцент-текст #C4B5FD, emerald #10B981.
   Шрифты: Unbounded (заголовки), Onest (текст), JetBrains Mono (числа). */

:root {
  --bg: #090A0F;
  --panel: #12141F;
  --panel-2: #181B29;
  --line: #23263A;
  --violet: #8B5CF6;
  --accent: #C4B5FD;
  --emerald: #10B981;
  --red: #F87171;
  --red-deep: #EF4444;
  --text: #E7E9F2;
  --muted: #8A8FA8;
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Onest", system-ui, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* Поля форм не шире своих ячеек — без горизонтальной прокрутки страницы */
input, select, textarea, button {
  box-sizing: border-box;
  max-width: 100%;
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
}

/* ── верхняя панель и навигация ─────────────────────────────────────────── */

.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(18, 20, 31, 0.85);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 12px;
  width: 100%;
}

.nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  margin-right: 8px;
  white-space: nowrap; /* «Prop Hub CRM» не переносится на 375 px */
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 4px;
}

.nav__link {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.nav__link:hover { color: var(--accent); }

.nav__link--active {
  color: var(--accent);
  background: rgba(139, 92, 246, 0.12);
}

.nav__logout { margin-left: auto; }

.nav__logout-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

.nav__logout-btn:hover {
  color: var(--text);
  border-color: var(--violet);
}

/* ── кнопки ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn--primary {
  background: var(--violet);
  color: #FFFFFF;
  width: 100%;
}

.btn--primary:hover { background: #7C4AF0; }

.btn--done {
  background: var(--emerald);
  color: #04150E;
  padding: 6px 12px;
  font-size: 14px;
  margin-top: 8px;
}

.btn--done:hover { background: #0DA270; }

/* ── заголовок страницы, лимиты, плашки ──────────────────────────────────── */

.page-title {
  font-size: 20px;
  margin: 20px 0 4px;
}

.page-title__date {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.limits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 12px 0;
}

.limits__title { color: var(--muted); }
.limits__item { color: var(--text); }

.scope-note { margin: 8px 0; }

.alert {
  border-radius: 12px;
  padding: 10px 14px;
  margin: 12px 0;
}

.alert-dead,
.alert-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--red-deep);
  color: var(--red);
}

/* ── колонки «Сегодня» ───────────────────────────────────────────────────── */

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  align-items: start;
}

.col {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

.col__title {
  font-size: 15px;
  margin: 0 0 12px;
}

.col__empty {
  color: var(--muted);
  margin: 0;
}

.waiting, .tasks, .intakes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.waiting__item, .task, .intake {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.waiting__item.is-red {
  border-color: var(--red-deep);
  box-shadow: 0 0 0 1px var(--red-deep), 0 0 12px rgba(239, 68, 68, 0.35);
}

.waiting__item.is-red .waiting__ago { color: var(--red); }

.waiting__link {
  display: block;
  text-decoration: none;
}

.waiting__link:hover .waiting__name { color: var(--accent); }

.waiting__name {
  display: block;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.waiting__channel {
  color: var(--accent);
  font-size: 13px;
  font-weight: 400;
}

.waiting__body {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.waiting__ago {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.task { display: grid; gap: 2px; }
.task__title { color: var(--text); }
.task__partner { font-size: 13px; }
.task__due { color: var(--muted); font-size: 13px; }

.intake { display: grid; gap: 2px; }
.intake__title { color: var(--text); }
.intake__partner { font-size: 13px; }
.intake__body {
  color: var(--muted);
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

/* ── вход ────────────────────────────────────────────────────────────────── */

.login {
  max-width: 360px;
  margin: 12vh auto 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
}

.login__title {
  font-size: 18px;
  margin: 0 0 20px;
  text-align: center;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--muted);
  min-width: 0; /* ячейка сетки формы может сжиматься до колонки */
}

.field input {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  width: 100%;
  min-width: 0;
}

.field input:focus { border-color: var(--violet); }

/* ── «Входящие» ──────────────────────────────────────────────────────────── */

.inbox {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.inbox__list, .inbox__thread {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}

.inbox__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.inbox__filter {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.inbox__filter:hover { color: var(--accent); }

.inbox__filter.is-active {
  color: var(--accent);
  background: rgba(139, 92, 246, 0.12);
}

.dialogs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.dialog {
  display: block;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  text-decoration: none;
}

.dialog:hover { border-color: var(--violet); }

.dialog__name {
  display: block;
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dialog__body {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.dialog__ago {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.dialog__channel { color: var(--accent); }

.inbox__empty, .inbox__hint {
  color: var(--muted);
  margin: 0;
}

.thread__back {
  display: none;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 10px;
}

.thread__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.thread__head-name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.thread__head-name:hover { color: var(--accent); }

.thread__head-stage {
  color: var(--muted);
  font-size: 13px;
}

.feed {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.feed__empty {
  color: var(--muted);
  margin: 0;
}

.bubble {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  max-width: 85%;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bubble--in {
  justify-self: start;
  border-bottom-left-radius: 4px;
}

.bubble--out {
  justify-self: end;
  border-bottom-right-radius: 4px;
  background: rgba(139, 92, 246, 0.10);
}

.bubble__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  color: var(--muted);
  font-size: 13px;
}

.bubble__channel { color: var(--accent); }

.bubble__subject { color: var(--text); }

.bubble__body {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.bubble__status--failed { color: var(--red); }
.bubble__status--read { color: var(--emerald); }

.bubble__error {
  color: var(--red);
  margin: 0;
  font-size: 13px;
}

.event {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 2px 0;
}

.event__time { color: var(--muted); }

.composer {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.composer__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.composer__row select,
.composer__row input,
.composer textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

.composer select:focus,
.composer input:focus,
.composer textarea:focus { border-color: var(--violet); }

.composer textarea {
  width: 100%;
  resize: vertical;
  min-height: 88px;
}

.composer__subject { flex: 1; min-width: 0; }

.composer__error {
  color: var(--red);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--red-deep);
  border-radius: 10px;
  padding: 8px 12px;
}

.composer__warn {
  color: #FBBF24;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid #FBBF24;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 14px;
  margin-bottom: 6px;
}

.unknown {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.unknown__form {
  display: grid;
  gap: 8px;
}

.unknown__label {
  color: var(--muted);
  font-size: 14px;
}

.unknown__form input,
.unknown__form select {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

/* ── карточка партнёра ───────────────────────────────────────────────────── */

.page-title__type {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

/* Сетка карточки: три колонки только от 1200 px, две — 760–1199 px
   (слева инфо, справа лента + статистика), ниже — одна. Детям сетки
   запрещено расширять колонки (min-width: 0). */
.partner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}

.partner-grid > * { min-width: 0; }

.partner-grid input { width: 100%; min-width: 0; }
.partner-grid select, .partner-grid textarea { min-width: 0; }

@media (min-width: 760px) and (max-width: 1199px) {
  .partner-grid {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  }
  .card__left { grid-column: 1; grid-row: 1 / span 2; }
  .card__center { grid-column: 2; grid-row: 1; }
  .card__right { grid-column: 2; grid-row: 2; }
}

@media (min-width: 1200px) {
  .partner-grid {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr) minmax(260px, 1fr);
  }
}

.card__center {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

.card__left, .card__right {
  display: grid;
  gap: 12px;
}

.box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

.box__title {
  font-size: 14px;
  margin: 0 0 10px;
  color: var(--accent);
}

.box__row {
  margin: 6px 0 0;
  color: var(--muted);
}

.box__empty {
  color: var(--muted);
  margin: 0;
}

.stage-form { display: grid; gap: 8px; }

.stage-form__row {
  display: flex;
  gap: 8px;
}

.stage-form__row select {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

.stage-form__reason input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

.is-hidden { display: none; }

.contacts {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.contact {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact__kind {
  color: var(--muted);
  font-size: 13px;
  min-width: 64px;
}

.contact__value { overflow-wrap: anywhere; }

.contact__del {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 6px;
}

.contact__del:hover { color: var(--red); }

.contact-add {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.contact-add select,
.contact-add input {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

.contact-add input {
  flex: 1;
  min-width: 0;
}

.asset { padding: 4px 0; }

.asset__subs {
  color: var(--muted);
  font-size: 13px;
  margin-left: 8px;
}

.next-step { margin: 0; }

.hint {
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid var(--emerald);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 12px 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.hint__text { color: var(--emerald); }

.terms {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

.terms__current {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.terms__model { font-weight: 600; }
.terms__item { color: var(--muted); }

.terms__edit summary,
.terms__history summary,
.stats__manual summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 14px;
  margin: 6px 0;
}

.terms-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.terms-form select,
.terms-form input {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

.terms__versions {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.stats {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

.stats__periods {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.stats__period {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.stats__period:hover { color: var(--accent); }

.stats__period.is-active {
  color: var(--accent);
  background: rgba(139, 92, 246, 0.12);
}

.stats__rows {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
}

.stats__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.stats__label { color: var(--muted); }

.stats__value {
  margin: 0;
  text-align: right;
}

.stats-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.stats-form__grid {
  display: grid;
  gap: 8px;
}

.stats-form input {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

.seq {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 10px;
}

.seq__title {
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--accent);
}

.seq__active {
  display: grid;
  gap: 4px;
  padding: 8px 0;
}

.seq__name { font-weight: 600; }

.seq__step, .seq__next {
  color: var(--muted);
  font-size: 13px;
}

.seq__start {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.seq__start select {
  flex: 1;
  min-width: 120px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

.btn--small {
  padding: 8px 12px;
  font-size: 14px;
}

.btn--retry {
  background: var(--violet);
  color: #FFFFFF;
  padding: 6px 12px;
  font-size: 13px;
  justify-self: start;
}

.btn--retry:hover { background: #7C4AF0; }

.btn--danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
  border: 1px solid var(--red-deep);
}

/* ── планшет: одна панель во «Входящих» ──────────────────────────────────── */

@media (max-width: 960px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox.thread-open .inbox__list { display: none; }
  .thread__back { display: inline-block; }
}

/* ── узкие экраны (375 px — одна колонка, без прокрутки) ─────────────────── */

@media (max-width: 600px) {
  .shell { padding: 0 10px; }
  .nav {
    gap: 2px 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .nav__links { flex-wrap: nowrap; }
  .nav__logout { margin-left: 0; }
  .login { margin-top: 6vh; padding: 20px; }
  .page-title { font-size: 17px; }
  .limits { gap: 4px 10px; }
  .bubble { max-width: 92%; }
}

/* ── «Партнёры»: фильтры, таблица, массовые действия ─────────────────────── */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
}

.filters .field {
  margin-bottom: 0;
  flex: 1 1 150px;
  min-width: 130px;
}

.filters .field--q { flex: 2 1 220px; }

.filters select,
.bulkbar select,
.new-partner select {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  width: 100%;
  min-width: 0;
}

.filters select:focus,
.bulkbar select:focus,
.new-partner select:focus { border-color: var(--violet); }

.filters__reset { align-self: center; color: var(--muted); font-size: 14px; }

.filters__quick { display: inline-flex; gap: 4px 12px; }

.new-partner {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
}

.new-partner__summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.new-partner__form { margin-top: 12px; }

.new-partner__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 12px;
}

.new-partner__submit { max-width: 220px; }

.bulkbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
}

.bulkbar .field { margin-bottom: 0; }

.bulkbar__value { display: none; }
.bulkbar[data-action="stage"] .bulkbar__value[data-for="stage"],
.bulkbar[data-action="owner"] .bulkbar__value[data-for="owner"],
.bulkbar[data-action="sequence"] .bulkbar__value[data-for="sequence"] {
  display: grid;
}

.table-wrap {
  overflow-x: auto;
  margin: 12px 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.ptable { width: 100%; border-collapse: collapse; }

.ptable th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.ptable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.ptable tbody tr:last-child td { border-bottom: none; }
.ptable tbody tr:hover { background: var(--panel-2); }

.ptable__name {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.ptable__name:hover { color: var(--accent); }

.ptable__check { width: 32px; }

.ptable__empty { color: var(--muted); text-align: center; }

.stage-badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(139, 92, 246, 0.15);
  color: var(--accent);
  white-space: nowrap;
}

.stage-badge--rejected {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red);
}

.stage-badge--active,
.stage-badge--key {
  background: rgba(16, 185, 129, 0.15);
  color: var(--emerald);
}

.pager {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
}

.pager__info { color: var(--muted); }

/* ── «Воронка»: канбан ────────────────────────────────────────────────────── */

.board {
  display: flex;
  gap: 12px;
  overflow-x: auto; /* горизонтальная прокрутка внутри доски */
  padding: 4px 4px 12px;
  margin: 12px -4px 0;
}

.fcol {
  flex: 0 0 240px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  min-height: 200px;
}

.fcol.is-over {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px var(--violet), 0 0 14px rgba(139, 92, 246, 0.4);
}

.fcol__title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 15px;
  margin: 0 0 10px;
}

.fcol__count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.fcol__cards { display: grid; gap: 8px; }

.fcard {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: grab;
  display: grid;
  gap: 4px;
}

.fcard.is-dragging { opacity: 0.45; }

.fcard.is-overdue { border-color: var(--red-deep); }
.fcard.is-overdue .fcard__days { color: var(--red); }

.fcard__name {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.fcard__name:hover { color: var(--accent); }

.fcard__type,
.fcard__touch,
.fcard__days {
  color: var(--muted);
  font-size: 13px;
}

.fcol__more {
  display: block;
  margin-top: 10px;
  font-size: 13px;
}

.board-hint { color: var(--muted); font-size: 13px; }

/* ── «Статистика» ─────────────────────────────────────────────────────────── */

.stats-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin: 12px 0;
}

.spanel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

.spanel__title { font-size: 15px; margin: 0 0 10px; }

.spanel__list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.spanel__empty { color: var(--muted); list-style: none; }

.statable__sort {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.statable__sort:hover { color: var(--accent); }

.statable__total td {
  border-top: 1px solid var(--line);
  font-weight: 600;
  background: var(--panel-2);
}

.import-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 16px 0;
}

.import-box__title { font-size: 15px; margin: 0 0 10px; }

.import-box__hint { color: var(--muted); font-size: 13px; margin: 10px 0 0; }

.import-box__hint code {
  font-family: var(--font-num);
  font-size: 12px;
  background: var(--panel-2);
  padding: 2px 6px;
  border-radius: 6px;
}

.import-errors { margin: 8px 0 0; padding-left: 18px; }

.alert-ok {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid var(--emerald);
  color: var(--emerald);
}

/* ── узкие экраны (375 px — одна колонка, без прокрутки) ─────────────────── */

@media (max-width: 600px) {
  .shell { padding: 0 10px; }
  .nav { gap: 2px 8px; }
  .nav__logout { margin-left: 0; }
  .login { margin-top: 6vh; padding: 20px; }
  .page-title { font-size: 17px; }
  .limits { gap: 4px 10px; }
}

/* Уже 760 px: таблица партнёров превращается в карточки (без прокрутки страницы) */

@media (max-width: 759px) {
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable { background: none; }
  .ptable tbody { display: grid; gap: 10px; }
  .ptable tr {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 4px;
  }
  .ptable tr:hover { background: var(--panel); }
  .ptable td {
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    text-align: right;
  }
  .ptable td:last-child { border-bottom: none; }
  .ptable td::before {
    content: attr(data-label);
    color: var(--muted);
    flex-shrink: 0;
    text-align: left;
  }
  .ptable td.ptable__check {
    justify-content: flex-start;
    border-bottom: none;
    padding-bottom: 0;
  }
  .statable td { justify-content: space-between; }
}

/* ── админ: шаблоны, цепочки, настройки ───────────────────────────────────── */

.field select,
.field textarea,
.set-form select,
.set-form textarea,
.tpl-form select,
.tpl-form textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  width: 100%;
  min-width: 0;
}

.field select:focus,
.field textarea:focus,
.set-form select:focus,
.set-form textarea:focus { border-color: var(--violet); }

.field__hint {
  color: var(--muted);
  font-size: 13px;
}

.field__error {
  color: var(--red);
  margin: 0;
  font-size: 13px;
}

.field--check {
  align-self: end;
  display: flex;
}

.field--check label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text);
}

.field--check input { width: auto; }

.field--wide { grid-column: 1 / -1; }

.tpl-form,
.set-form,
.tpl-delete {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
}

.tpl-form__grid,
.set-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 12px;
}

.tpl-form__actions,
.set-form__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

.tpl-delete { display: inline-block; background: none; border: none; padding: 0; }

.tpl-preview {
  margin-top: 12px;
}

.tpl-preview__form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tpl-preview__form select {
  flex: 1;
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}

.tpl-preview__result { margin-top: 10px; }

.tpl-preview__text {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}

.cell-input {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  width: 100%;
  min-width: 0;
}

.cell-input:focus { border-color: var(--violet); }

.seq-actions,
.set-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.seq-move {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
}

.seq-move:hover:not(:disabled) { border-color: var(--violet); }

.seq-move:disabled { opacity: 0.35; cursor: default; }

.seq-move--del:hover:not(:disabled) { color: var(--red); border-color: var(--red-deep); }

.set-note {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.set-hint {
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0 0;
}

.set-hint code {
  font-family: var(--font-num);
  font-size: 12px;
  background: var(--panel-2);
  padding: 2px 6px;
  border-radius: 6px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.tabs__link {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}

.tabs__link:hover {
  color: var(--accent);
  border-color: var(--violet);
}

.set-section { margin-bottom: 16px; }

.import-list {
  margin: 8px 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}

/* ── Task 16: ссылки на TG, карточка профиля отправителя ──────────────────── */

.dialogs__item, .waiting__item { position: relative; }

.dialog__tg, .waiting__tg {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--accent);
  text-decoration: none;
  font-size: 15px;
  padding: 2px 6px;
}

.dialog__tg:hover, .waiting__tg:hover { color: var(--text); }

.thread__head-tg {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.thread__head-tg:hover { color: var(--text); }

a.contact__value { color: var(--accent); }

.profile-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.profile-card__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.profile-card__info {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-card__name {
  color: var(--text);
  font-weight: 600;
}

.profile-card__username {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
}

.profile-card__pending {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.profile-card__bio {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.profile-card__links {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.profile-card__links a {
  color: var(--accent);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.unknown__form--create { padding-bottom: 10px; }