/* =============================================================================
   Рассылка — design system.

   Характер: приборная панель, а не витрина. Главное содержимое интерфейса —
   состояние системы, поэтому индикаторы состояния получают лучшее место и
   самую строгую типографику, а украшений нет нигде.

   Правила, которые держат систему целой:
     · цвет статуса всегда сопровождается словом или значком — цветом одним
       ничего не передаётся;
     · тени только у всплывающего (тосты, меню). Карточки разделяются
       волосяной линией;
     · цифры везде табличные: колонки не пляшут при обновлении;
     · движение 150–220 мс и только там, где подтверждает действие.
   ============================================================================= */

:root {
  /* --- цвет ---------------------------------------------------------------- */
  --paper:        #f6f5f2;   /* тёплый нейтральный фон страницы */
  --card:         #ffffff;
  --card-sunken:  #fbfaf8;
  --ink:          #14161a;   /* основной текст */
  --ink-soft:     #3d3f45;
  --muted:        #6f6c66;   /* вторичный текст, метаданные */
  --faint:        #9a968f;   /* подписи */
  --line:         #e6e3dd;
  --line-strong:  #d5d1c9;

  --accent:       #16624a;   /* emerald: основное действие */
  --accent-hover: #10513c;
  --accent-soft:  #e9f1ed;
  --accent-line:  #c3dbd0;

  --ok:           #2c6a43;
  --ok-soft:      #e8f2ea;
  --ok-line:      #c6e0cf;

  --warn:         #8a5a12;
  --warn-soft:    #fdf3e2;
  --warn-line:    #efdcb8;

  --danger:       #97302a;
  --danger-soft:  #fbeceb;
  --danger-line:  #f0cdc9;

  --info:         #2a5c8a;
  --info-soft:    #ecf2f8;
  --info-line:    #cadcec;

  /* Цвета каналов живут только в значках каналов и нигде больше. */
  --ch-telegram:  #2a7fb8;
  --ch-sms:       #6b5aa6;
  --ch-whatsapp:  #1f7a4d;
  --ch-vk:        #3d5c8c;
  --ch-max:       #8a4a6b;
  --ch-instagram: #a04a6b;
  --ch-email:     #6f6c66;
  --ch-phone:     #4a5560;
  --ch-website:   #6f6c66;

  /* --- ритм ---------------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 44px;

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 26, .04),
               0 1px 3px -1px rgba(20, 22, 26, .07);
  --shadow-md: 0 6px 16px -8px rgba(20, 22, 26, .12),
               0 2px 5px -3px rgba(20, 22, 26, .08);
  --shadow-pop: 0 8px 24px -8px rgba(20, 22, 26, .18),
                0 2px 6px -2px rgba(20, 22, 26, .10);
  --ring: 0 0 0 3px var(--accent-line);

  /* --- типографика --------------------------------------------------------- */
  --font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", sans-serif;
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-page:   26px;  /* заголовок страницы */
  --t-section:17px;  /* заголовок раздела */
  --t-card:   14px;  /* заголовок карточки */
  --t-metric: 30px;  /* главная цифра */
  --t-metric-lg: 38px;
  --t-body:   14px;
  --t-meta:   13px;
  --t-caption:11.5px;

  /* --- движение ------------------------------------------------------------ */
  --fast: 120ms cubic-bezier(.2, .6, .3, 1);
  --base: 180ms cubic-bezier(.2, .6, .3, 1);
  --slow: 220ms cubic-bezier(.2, .6, .3, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-body)/1.5 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* =============================================================== навигация */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.topbar__inner {
  max-width: 1440px; margin: 0 auto; padding: 0 var(--s6);
  display: flex; align-items: center; gap: var(--s6); min-height: 56px;
}
.brand {
  font-weight: 640; letter-spacing: -.015em; font-size: 15px;
  color: var(--ink); white-space: nowrap;
}
.brand a { color: inherit; }
.brand a:hover { text-decoration: none; }
.nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.nav a {
  color: var(--muted); font-size: var(--t-meta); padding: 7px 10px;
  border-radius: var(--r-sm); transition: background var(--fast), color var(--fast);
  white-space: nowrap;
}
.nav a:hover { background: var(--card-sunken); color: var(--ink); text-decoration: none; }
.nav a.is-active { color: var(--ink); background: var(--accent-soft); font-weight: 550; }
.nav .badge-count {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--warn); color: #fff; font-size: 10.5px; font-weight: 650;
  vertical-align: 1px;
}
.topbar__right { display: flex; align-items: center; gap: var(--s3); }
.whoami { font-size: var(--t-caption); color: var(--muted); text-align: right; line-height: 1.35; }
.whoami b { display: block; color: var(--ink-soft); font-size: var(--t-meta); font-weight: 550; }

/* ============================================ рельс состояния отправки */
/* Единственный элемент, который всегда виден и всегда говорит правду:
   два независимых замка и то, что происходит прямо сейчас. */
.rail {
  background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 56px; z-index: 39;
}
.rail__inner {
  max-width: 1440px; margin: 0 auto; padding: 7px var(--s6);
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  font-size: var(--t-meta);
}
.rail__state { display: flex; align-items: center; gap: var(--s2); font-weight: 560; }
.rail--off .rail__state { color: var(--ink-soft); }
.rail--on  .rail__state { color: var(--danger); }
.lamp {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--faint); box-shadow: 0 0 0 3px rgba(154, 150, 143, .16);
}
.rail--on .lamp { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-line); }
.rail--on .lamp { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(151, 48, 42, .12); } }
/* Ответы — второе, независимое право. Их состояние не подчиняется цвету
   рассылки: остановка рассылки не означает молчания в ответ. */
.rail .rail__state--reply { color: var(--ok); font-weight: 500; }
.rail .rail__state--reply .lamp { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-line);
  animation: none; }
.rail .rail__state--reply .lamp--off { background: var(--faint);
  box-shadow: 0 0 0 3px rgba(154, 150, 143, .16); }
.rail .rail__state--reply:has(.lamp--off) { color: var(--muted); }
/* Где что стоит в SMS-ферме. Картинка нужна, потому что железо не здесь,
   и это первое, что человек понимает неправильно. */
.chain {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin: var(--s4) 0; font-size: var(--t-caption);
}
.chain i { color: var(--faint); font-style: normal; }
.chain__link {
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px;
  background: var(--paper); color: var(--muted); white-space: nowrap;
}
.chain__link--node {
  border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--accent); font-weight: 560;
}
.steps { margin: var(--s4) 0 0; padding-left: 1.15rem; color: var(--ink-soft); }
.steps li { margin-bottom: 6px; }

/* Почему сообщение стоит: приписка под пузырём, не тревожная плашка. */
.tl__why {
  margin-top: 4px; font-size: var(--t-caption); color: var(--warn);
  max-width: 62ch;
}
.tl--out .tl__why { text-align: right; margin-left: auto; }
.rail__locks { display: flex; gap: var(--s4); color: var(--muted); }
.rail__lock { display: flex; align-items: center; gap: 5px; }
.rail__lock i { font-style: normal; color: var(--faint); }
.rail__spacer { margin-left: auto; }
.rail__live { display: flex; gap: var(--s4); color: var(--muted); }
.rail__live b { color: var(--ink-soft); font-weight: 600; }
.rail details { position: relative; }
.rail summary {
  cursor: pointer; color: var(--muted); list-style: none;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.rail summary::-webkit-details-marker { display: none; }
.rail details[open] .rail__pop { display: block; }
.rail__pop {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 380px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-pop); padding: var(--s4); z-index: 50;
  font-size: var(--t-meta); color: var(--ink-soft); line-height: 1.55;
  animation: pop var(--base) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.rail__pop dt { color: var(--muted); font-size: var(--t-caption); text-transform: uppercase;
                letter-spacing: .05em; margin-top: var(--s3); }
.rail__pop dt:first-child { margin-top: 0; }
.rail__pop dd { margin: 2px 0 0; }

/* ================================================================== макет */
main { max-width: 1440px; margin: 0 auto; padding: var(--s6) var(--s6) 72px; }

.page-head { margin-bottom: var(--s5); }
.eyebrow {
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); font-weight: 620; margin-bottom: 5px;
}
h1 { font-size: var(--t-page); line-height: 1.2; letter-spacing: -.022em;
     margin: 0 0 6px; font-weight: 640; }
h2 { font-size: var(--t-section); line-height: 1.3; letter-spacing: -.012em;
     margin: 0 0 var(--s3); font-weight: 620; }
h3 { font-size: var(--t-card); margin: 0 0 var(--s2); font-weight: 620; }
.lede { color: var(--muted); font-size: var(--t-body); margin: 0; max-width: 78ch; }
.sub  { color: var(--muted); font-size: var(--t-meta); margin: 0 0 var(--s3); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s5);
}
.card + .card { margin-top: var(--s4); }
.card--sunken { background: var(--card-sunken); }
.card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4);
}
.card__head h2, .card__head h3 { margin: 0; }

.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row--tight { gap: var(--s2); }
.spacer { margin-left: auto; }
.stack > * + * { margin-top: var(--s4); }

/* ====================================================== полоса показателей */
/* Один блок, много цифр, разделённых волосяной линией — как сводка в отчёте,
   а не восемь отдельных коробок. */
.metrics {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  overflow: hidden;
}
.metric { padding: var(--s4) var(--s5); border-left: 1px solid var(--line); min-width: 0; }
.metric:first-child { border-left: none; }
.metric__label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 620; margin-bottom: 7px;
  line-height: 1.35; min-height: 2.7em;   /* две строки: цифры остаются на одной линии */
}
.metric__value {
  font-size: var(--t-metric); font-weight: 620; letter-spacing: -.03em;
  line-height: 1.05; color: var(--ink);
}
.metric__value--na { font-size: 19px; color: var(--faint); font-weight: 500;
                     letter-spacing: 0; }
.metric__value--accent { color: var(--accent); }
.metric__value--danger { color: var(--danger); }
.metric__note { font-size: var(--t-caption); color: var(--muted); margin-top: 4px; }
.metric__spark { margin-top: 8px; height: 22px; }

/* ============================================================== плашки */
.tag {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--t-caption);
  font-weight: 580; border: 1px solid transparent; line-height: 1.6;
}
.tag--ok      { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-line); }
.tag--warn    { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.tag--danger  { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.tag--info    { background: var(--info-soft);   color: var(--info);   border-color: var(--info-line); }
.tag--accent  { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.tag--mute    { background: var(--card-sunken); color: var(--muted);  border-color: var(--line); }
.tag--demo    { background: #efe9f6; color: #5b3f86; border-color: #ddd0ee; }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* значок канала: единственное место, где живут цвета каналов */
.ch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 20px; padding: 0 6px; border-radius: var(--r-sm);
  font: 650 10px/1 var(--mono); letter-spacing: .04em; color: #fff; flex: none;
  text-transform: uppercase;
}
.ch--telegram  { background: var(--ch-telegram); }
.ch--sms       { background: var(--ch-sms); }
.ch--whatsapp  { background: var(--ch-whatsapp); }
.ch--vk        { background: var(--ch-vk); }
.ch--max       { background: var(--ch-max); }
.ch--instagram { background: var(--ch-instagram); }
.ch--email     { background: var(--ch-email); }
.ch--phone     { background: var(--ch-phone); }
.ch--website   { background: var(--ch-website); }
.ch--ghost { background: transparent; color: var(--faint);
             box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ============================================================== элементы */
button, .btn {
  font: 550 var(--t-meta)/1.4 var(--font); padding: 7px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--card-sunken); border-color: var(--muted);
                           text-decoration: none; color: var(--ink); }
button:active, .btn:active { transform: translateY(.5px); }
button:disabled, .btn.is-disabled {
  opacity: .45; cursor: not-allowed; transform: none; background: var(--card);
  border-color: var(--line);
}
.btn--primary, button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 580;
}
.btn--primary:hover, button.primary:hover { background: var(--accent-hover);
                                            border-color: var(--accent-hover); color: #fff; }
.btn--danger, button.danger {
  background: var(--card); border-color: var(--danger-line); color: var(--danger);
}
.btn--danger:hover, button.danger:hover { background: var(--danger-soft);
                                          border-color: var(--danger); color: var(--danger); }
.btn--solid-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--solid-danger:hover { background: #7d2823; border-color: #7d2823; color: #fff; }
.btn--sm { padding: 4px 9px; font-size: var(--t-caption); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn--ghost:hover { background: var(--card-sunken); color: var(--ink); }

input, select, textarea {
  font: var(--t-body)/1.45 var(--font); padding: 7px 10px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  transition: border-color var(--fast), box-shadow var(--fast);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
label { display: block; font-size: var(--t-meta); color: var(--muted); margin: 0 0 4px; }
.field + .field { margin-top: var(--s3); }
.form-inline { display: inline; }
select[multiple] { min-height: 150px; }

/* =============================================================== таблицы */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--s5) * -1) calc(var(--s5) * -1);
              padding: 0 var(--s5) var(--s5); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-meta); }
th {
  text-align: left; padding: 8px 12px 8px 0; font-size: var(--t-caption);
  text-transform: uppercase; letter-spacing: .06em; color: var(--faint);
  font-weight: 620; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line);
     vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr { transition: background var(--fast); }
tbody tr:hover { background: var(--card-sunken); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.t-strong { font-weight: 580; color: var(--ink); }
.t-second { font-size: var(--t-caption); color: var(--muted); margin-top: 2px; }

/* ============================================================== сообщения */
.note {
  border-radius: var(--r); padding: 11px var(--s4); font-size: var(--t-meta);
  border: 1px solid var(--line); background: var(--card-sunken); color: var(--ink-soft);
  line-height: 1.55;
}
.note--info   { background: var(--info-soft);   border-color: var(--info-line);   color: var(--info); }
.note--warn   { background: var(--warn-soft);   border-color: var(--warn-line);   color: var(--warn); }
.note--danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.note--ok     { background: var(--ok-soft);     border-color: var(--ok-line);     color: var(--ok); }
.note b { font-weight: 620; }

.msg {
  white-space: pre-wrap; background: var(--card-sunken); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--t-meta);
  line-height: 1.55; color: var(--ink-soft);
}

/* ================================================================== тосты */
.toasts {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 90;
  display: flex; flex-direction: column; gap: var(--s2); max-width: 420px;
}
.toast {
  background: var(--ink); color: #fff; border-radius: var(--r);
  padding: 11px var(--s4); font-size: var(--t-meta); line-height: 1.5;
  box-shadow: var(--shadow-pop); display: flex; gap: var(--s2); align-items: flex-start;
  animation: toast-in var(--slow) both;
}
.toast--error { background: var(--danger); }
.toast__mark { font-weight: 700; flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.toast.is-hiding { animation: toast-out var(--base) both; }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ================================================================= пустое */
.empty { text-align: center; padding: var(--s8) var(--s5); }
.empty__mark {
  width: 44px; height: 44px; margin: 0 auto var(--s3); border-radius: var(--r);
  background: var(--card-sunken); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--faint);
}
.empty h2 { margin-bottom: 6px; }
.empty p { color: var(--muted); font-size: var(--t-meta); margin: 0 auto; max-width: 46ch;
           line-height: 1.6; }
.empty .row { justify-content: center; margin-top: var(--s4); }

/* ================================================================ графики */
.chart { width: 100%; display: block; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .axis-text { fill: var(--faint); font-size: 10.5px; font-family: var(--font); }
.chart .series-line { fill: none; stroke-width: 2; stroke-linejoin: round;
                      stroke-linecap: round; }
.chart .series-area { opacity: .12; }
.chart .dot-marker { stroke: var(--card); stroke-width: 2; }
.draw-in { stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
           animation: draw 700ms cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.fade-in { animation: fade var(--slow) both; }
@keyframes fade { from { opacity: 0; } }
.rise-in { animation: rise var(--slow) both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }

.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 74px; gap: var(--s3);
           align-items: center; font-size: var(--t-meta); }
.bar-track { height: 8px; background: var(--card-sunken); border-radius: var(--r-pill);
             overflow: hidden; border: 1px solid var(--line); }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill);
            transform-origin: left; animation: grow 600ms cubic-bezier(.3,.7,.3,1) both; }
.bar-fill--muted { background: var(--line-strong); }
.bar-fill--warn { background: var(--warn); }
@keyframes grow { from { transform: scaleX(0); } }
.bar-value { text-align: right; font-weight: 580; }

/* воронка */
.funnel { display: flex; flex-direction: column; gap: 2px; }
.funnel__step {
  display: grid; grid-template-columns: 190px 1fr auto; gap: var(--s3);
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-meta);
}
.funnel__step:last-child { border-bottom: none; }
.funnel__bar { display: block; height: 26px; background: var(--accent-soft); border-radius: var(--r-sm);
               border: 1px solid var(--accent-line); transform-origin: left;
               animation: grow 600ms cubic-bezier(.3,.7,.3,1) both; min-width: 2px; }
.funnel__bar--na { background: repeating-linear-gradient(135deg,
                     var(--card-sunken), var(--card-sunken) 5px,
                     var(--paper) 5px, var(--paper) 10px);
                   border-color: var(--line); }
.funnel__num { font-weight: 620; font-size: 15px; min-width: 78px; text-align: right; }
.funnel__num--na { color: var(--faint); font-weight: 500; font-size: var(--t-meta); }

/* индикатор загрузки лимита */
.usage { display: flex; align-items: center; gap: var(--s2); }
.usage__track { width: 54px; height: 5px; border-radius: var(--r-pill);
                background: var(--card-sunken); border: 1px solid var(--line);
                overflow: hidden; }
.usage__fill { display: block; height: 100%; background: var(--accent); }
.usage__fill--warn { background: var(--warn); }
.usage__fill--danger { background: var(--danger); }

/* сигнал модема */
.signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.signal i { width: 3px; background: var(--line-strong); border-radius: 1px; }
.signal i:nth-child(1) { height: 4px; }
.signal i:nth-child(2) { height: 7px; }
.signal i:nth-child(3) { height: 10px; }
.signal i:nth-child(4) { height: 13px; }
.signal i.on { background: var(--ok); }

/* ============================================================== скелетоны */
.skeleton {
  background: linear-gradient(90deg, var(--card-sunken) 25%, #f0eeea 37%,
                                     var(--card-sunken) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease infinite;
  border-radius: var(--r-sm); color: transparent !important;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.is-loading { opacity: .55; transition: opacity var(--fast); }

/* ============================================================ разное */
.divider { height: 1px; background: var(--line); margin: var(--s5) 0; border: 0; }
details.collapse { border: 1px solid var(--line); border-radius: var(--r);
                   background: var(--card); }
details.collapse > summary {
  cursor: pointer; padding: var(--s4) var(--s5); font-weight: 580;
  font-size: var(--t-card); list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s3);
}
details.collapse > summary::-webkit-details-marker { display: none; }
details.collapse > summary::after { content: "▾"; color: var(--faint); font-size: 11px;
                                    transition: transform var(--fast); }
details.collapse[open] > summary::after { transform: rotate(180deg); }
details.collapse > .collapse__body { padding: 0 var(--s5) var(--s5); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line);
        margin-bottom: var(--s5); flex-wrap: wrap; }
.tabs a {
  padding: 9px 13px; font-size: var(--t-meta); color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 520;
  transition: color var(--fast), border-color var(--fast);
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.is-active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tabs .count { color: var(--faint); margin-left: 5px; font-variant-numeric: tabular-nums; }

.pills { display: flex; gap: 5px; flex-wrap: wrap; }
.pill {
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: var(--card); font-size: var(--t-meta); color: var(--muted);
  cursor: pointer; transition: all var(--fast); white-space: nowrap;
}
.pill:hover { border-color: var(--muted); color: var(--ink); text-decoration: none; }
.pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff;
                  font-weight: 550; }

.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 620; font-size: 12px; letter-spacing: -.01em;
}
.avatar--lg { width: 42px; height: 42px; font-size: 15px; }

.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 7px var(--s4);
      font-size: var(--t-meta); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink-soft); }

@media (max-width: 1280px) {
  main { padding-left: var(--s4); padding-right: var(--s4); }
  .topbar__inner, .rail__inner { padding-left: var(--s4); padding-right: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =============================================================================
   Компоненты страниц
   ============================================================================= */

/* --- одиночная плитка показателя (там, где полоса метрик не подходит) ------ */
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s4) var(--s5); min-width: 0;
}
.tile__label { display: block; font-size: var(--t-caption); text-transform: uppercase;
               letter-spacing: .07em; color: var(--faint); font-weight: 620;
               margin-bottom: 6px; }
.tile__value { display: block; font-size: 25px; font-weight: 620; letter-spacing: -.028em;
               line-height: 1.1; }
.tile__value--na { font-size: 16px; color: var(--faint); font-weight: 500;
                   letter-spacing: 0; }
.tile__note { display: block; font-size: var(--t-caption); color: var(--muted); margin-top: 4px; }

/* --- текст сообщения -------------------------------------------------------- */
.bubble {
  white-space: pre-wrap; border-radius: 12px; padding: 10px 13px;
  font-size: var(--t-meta); line-height: 1.55; max-width: 62ch;
}
.bubble--out { background: var(--accent-soft); border: 1px solid var(--accent-line);
               color: var(--ink); }
.bubble--in  { background: var(--card); border: 1px solid var(--line-strong); }

/* --- хронология ------------------------------------------------------------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px;
  background: var(--line);
}
.tl { position: relative; padding: 0 0 var(--s4) 0; }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: ""; position: absolute; left: -20px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--card); border: 2px solid var(--line-strong);
}
.tl--outbound::before { border-color: var(--accent); }
.tl--inbound::before  { border-color: var(--warn); background: var(--warn); }
.tl--suppression::before { border-color: var(--danger); background: var(--danger); }
.tl--stage::before, .tl--campaign::before { border-color: var(--info); }
.tl__meta { font-size: var(--t-caption); color: var(--muted); margin-bottom: 4px;
            display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.tl__meta b { color: var(--ink-soft); font-weight: 600; }
.tl__body { font-size: var(--t-meta); color: var(--ink-soft); line-height: 1.55;
            white-space: pre-wrap; }
.tl--system .tl__body { color: var(--muted); font-style: italic; }

/* --- инбокс ----------------------------------------------------------------- */
.inbox { display: grid; grid-template-columns: 300px minmax(0, 1fr) 292px;
         gap: var(--s3); align-items: start; }
.inbox__list { background: var(--card); border: 1px solid var(--line);
               border-radius: var(--r); padding: 5px; max-height: 74vh;
               overflow-y: auto; }
.inbox__thread { background: var(--card); border: 1px solid var(--line);
                 border-radius: var(--r); padding: var(--s5); max-height: 74vh;
                 overflow-y: auto; scroll-margin-top: 108px; }
.inbox__side { background: var(--card); border: 1px solid var(--line);
               border-radius: var(--r); padding: var(--s5); position: sticky;
               top: 108px; }
.conv { display: flex; gap: var(--s2); padding: 9px 10px; border-radius: var(--r-sm);
        color: inherit; text-decoration: none; transition: background var(--fast); }
.conv:hover { background: var(--card-sunken); text-decoration: none; color: inherit; }
.conv.is-active { background: var(--accent-soft); }
.conv__body { min-width: 0; flex: 1; }
.conv__top { display: flex; align-items: baseline; gap: 6px; }
.conv__name { font-weight: 580; font-size: var(--t-meta); white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
.conv__time { margin-left: auto; font-size: var(--t-caption); color: var(--faint);
              white-space: nowrap; }
.conv__last { font-size: var(--t-caption); color: var(--muted); margin-top: 3px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv__tags { display: flex; gap: 4px; margin-top: 5px; align-items: center;
              flex-wrap: wrap; }
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
              flex: none; margin-top: 6px; }

/* --- сетка каналов на карточке человека ------------------------------------ */
.chgrid { display: grid; gap: var(--s2);
          grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.chcard { border: 1px solid var(--line); border-radius: var(--r-sm);
          padding: 10px 11px; background: var(--card); min-width: 0; }
.chcard--absent, .chcard--awaiting_v3 { background: var(--card-sunken); }
.chcard__top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.chcard__name { font-weight: 580; font-size: var(--t-meta); }
.chcard__value { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--ink);
                 word-break: break-all; }
.chcard__meta { display: block; font-size: var(--t-caption); color: var(--muted); margin-top: 5px;
                line-height: 1.5; }

/* --- конструктор кампании / студия текстов --------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: var(--s4);
         align-items: start; }
.split__aside { position: sticky; top: 108px; }
.step { display: flex; gap: var(--s4); }
.step__num {
  width: 26px; height: 26px; border-radius: 50%; flex: none; margin-top: -2px;
  background: var(--accent-soft); color: var(--accent); font-weight: 650;
  font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.step__body { flex: 1; min-width: 0; }
.choice {
  display: block; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 12px; cursor: pointer; background: var(--card);
  transition: border-color var(--fast), background var(--fast);
}
.choice:hover { border-color: var(--line-strong); }
.choice.is-off { opacity: .55; cursor: not-allowed; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice__top { display: flex; align-items: center; justify-content: space-between;
               gap: var(--s2); }
.choice__name { display: block; font-weight: 580; font-size: var(--t-meta); margin-top: 6px; }
.choice__note { display: block; font-size: var(--t-caption); color: var(--muted); margin-top: 3px;
                line-height: 1.45; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks label { display: flex; gap: 7px; align-items: center; margin: 0;
                color: var(--ink); font-size: var(--t-meta); cursor: pointer; }
.checks label span.muted { font-size: var(--t-caption); }

/* --- превью сообщения ------------------------------------------------------- */
.phone {
  border: 1px solid var(--line-strong); border-radius: 16px; padding: var(--s4);
  background: var(--card-sunken);
}
.phone__head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px;
               border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.phone__name { font-weight: 600; font-size: var(--t-meta); }
.phone__meta { font-size: var(--t-caption); color: var(--muted); }
.sms-meta { display: flex; gap: var(--s4); font-size: var(--t-caption);
            color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
.sms-meta b { color: var(--ink-soft); }
.varchips { display: flex; flex-wrap: wrap; gap: 5px; }
.varchip {
  padding: 4px 10px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong);
  background: var(--card); font-size: var(--t-caption); color: var(--muted);
  cursor: pointer; transition: all var(--fast); font-family: var(--font);
}
.varchip:hover { border-style: solid; border-color: var(--accent);
                 color: var(--accent); background: var(--accent-soft); }
.flash-insert { animation: flash-hl 600ms ease; }
@keyframes flash-hl { 0% { background: var(--accent-soft); } 100% { background: var(--card); } }

/* --- прогресс кампании ------------------------------------------------------ */
.progress { height: 6px; border-radius: var(--r-pill); background: var(--card-sunken);
            border: 1px solid var(--line); overflow: hidden; min-width: 80px; }
.progress__fill { display: block; height: 100%; background: var(--accent);
                  animation: grow 600ms cubic-bezier(.3,.7,.3,1) both;
                  transform-origin: left; }

@media (max-width: 1200px) {
  /* Три колонки не помещаются, и переписка уезжала под список из двух
     десятков диалогов: клик по диалогу выглядел как «ничего не произошло».
     В одну колонку переписка идёт первой — она и есть то, за чем пришли. */
  .inbox { grid-template-columns: 1fr; }
  .inbox__thread { order: -1; max-height: none; }
  .inbox__list { max-height: 46vh; }
  .inbox__side { position: static; }
  .split { grid-template-columns: 1fr; }
  .split__aside { position: static; }
}

/* ============================================================ рабочее место
   Второй слой системы: экраны, где менеджер весь день. Плотнее основного,
   но той же сеткой и теми же токенами. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* колокольчик */
.bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r2); color: var(--faint);
  text-decoration: none; font-size: 15px; transition: background var(--fast), color var(--fast);
}
.bell:hover { background: var(--wash); color: var(--ink); }
.bell--on { color: var(--accent); }
.bell i {
  position: absolute; top: -1px; right: -3px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 8px; background: var(--danger); color: #fff;
  font: 600 9.5px/15px var(--sans); font-style: normal; text-align: center;
}
.badge-count--warn { background: var(--danger); color: #fff; }

/* вкладки со счётчиками */
.tabbar {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.tabbar__tabs { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.tabbar__tools { display: flex; gap: var(--s2); align-items: center; }
.tabbar__tools select, .tabbar__tools input { height: 30px; font-size: var(--t-caption); }
.tabbar__tools input[type=search] { width: 150px; }
.tabx {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px;
  border-radius: var(--r2); color: var(--muted); text-decoration: none;
  font-size: var(--t-caption); font-weight: 560; white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
.tabx:hover { background: var(--wash); color: var(--ink); }
.tabx.is-active { background: var(--ink); color: var(--paper); }
.tabx i {
  font-style: normal; font-variant-numeric: tabular-nums; font-size: 11px;
  color: var(--faint);
}
.tabx.is-active i { color: rgba(255,255,255,.6); }
.tabx--warn i { color: var(--danger); font-weight: 700; }
.tabx--warn.is-active i { color: #ffb4a8; }

/* список диалогов */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3); font-size: var(--t-caption); color: var(--faint);
  border-top: 1px solid var(--line);
}
.conv__tags .tag { font-size: 9.5px; }

/* шапка переписки */
.thread__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.timeline--thread { margin-top: var(--s4); }

/* системная строка в ленте: событие, а не реплика */
.sysline {
  display: flex; align-items: center; gap: var(--s2);
  padding: 3px 0; font-size: var(--t-caption); color: var(--faint);
}
.sysline__dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--line);
  flex: none;
}
.sysline__text { flex: 1; }
.sysline__time { color: var(--faint); font-variant-numeric: tabular-nums; }
.tl--note .notebox {
  border-left: 2px solid var(--warn); background: #fdf8ec;
  padding: var(--s3); border-radius: 0 var(--r2) var(--r2) 0;
  font-size: var(--t-body);
}

/* поле ответа */
.replybox { margin-top: var(--s5); }
.replybox textarea { min-height: 92px; }
.replybox__foot {
  display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2);
  flex-wrap: wrap;
}
.replybox__foot select { height: 30px; font-size: var(--t-caption); max-width: 190px; }
.notebox-form { margin-top: var(--s4); }
.notebox-form textarea { min-height: 56px; background: #fdfbf6; }

/* переключение канала */
.switchbox { margin-top: var(--s4); }
.switchbox summary {
  cursor: pointer; font-size: var(--t-caption); color: var(--muted);
  padding: var(--s2) 0;
}
.switchbox form { padding: var(--s3); border: 1px solid var(--line);
                  border-radius: var(--r2); margin-bottom: var(--s2); }
.switchrow { display: flex; align-items: center; gap: var(--s2);
             font-size: var(--t-caption); margin-bottom: var(--s2); }
.switchrow .arrow { color: var(--faint); }

/* правая колонка */
.inbox__side h2 { font-size: var(--t-label); text-transform: uppercase;
                  letter-spacing: .05em; color: var(--faint);
                  margin: var(--s5) 0 var(--s2); }
.inbox__side h2:first-child { margin-top: 0; }
.owner {
  display: flex; gap: var(--s2); align-items: center; padding: var(--s3);
  background: var(--wash); border-radius: var(--r2);
}
.owner .muted { display: block; font-size: var(--t-caption); }
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.btn--wide { width: 100%; justify-content: center; }
.stack > * + * { margin-top: var(--s2); }

.fu { list-style: none; margin: var(--s2) 0 0; padding: 0;
      font-size: var(--t-caption); }
.fu li { display: flex; justify-content: space-between; gap: var(--s2);
         align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.fu li.is-overdue { color: var(--danger); }

.dealcard {
  padding: var(--s3); border: 1px solid var(--accent); border-radius: var(--r2);
  background: #f3f8f5; margin-bottom: var(--s3); font-size: var(--t-caption);
}
.dealcard__amt { font-size: 19px; font-weight: 640; color: var(--accent);
                 font-variant-numeric: tabular-nums; margin: 3px 0; }

/* напоминания */
.fulist { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.fulist__item {
  display: grid;
  grid-template-columns: minmax(170px, 1.3fr) 96px minmax(0, 1fr) auto auto auto auto;
  gap: var(--s3); align-items: center; padding: var(--s3) 0;
  border-bottom: 1px solid var(--line); font-size: var(--t-caption);
}
.fulist__item > form { justify-self: end; }
.fulist__item:last-child { border-bottom: 0; }
.fulist__who { display: flex; gap: var(--s2); align-items: center;
               text-decoration: none; color: inherit; }
.fulist__who .muted { display: block; font-size: 11px; }
.fulist__when { font-variant-numeric: tabular-nums; color: var(--muted); }
.fulist__item.is-overdue .fulist__when { color: var(--danger); font-weight: 600; }
.fulist__note { color: var(--muted); }
.counter { font-size: var(--t-caption); color: var(--faint);
           font-variant-numeric: tabular-nums; font-weight: 500; }
.card--danger { border-color: #e8c6bd; }
.card--accent { border-color: var(--accent); background: #f4f8f6; }

/* уведомления */
.notif { list-style: none; margin: 0; padding: 0; }
.notif__item {
  display: grid; grid-template-columns: 100px 1fr auto; gap: var(--s3);
  align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-caption);
}
.notif__item:last-child { border-bottom: 0; }
.notif__kind { color: var(--faint); text-transform: uppercase;
               font-size: 10px; letter-spacing: .05em; }
.notif__body .muted { display: block; margin-top: 2px; }
.notif__time { color: var(--faint); font-variant-numeric: tabular-nums; }
.notif__item.is-new .notif__body b::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: middle;
}

/* пароли, выданные один раз */
.creds {
  display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s3);
  align-items: baseline; margin-top: var(--s3); font-size: var(--t-body);
}
.creds span { color: var(--faint); font-size: var(--t-caption); }
.creds b { font-size: 15px; letter-spacing: .02em;
           background: var(--wash); padding: 3px 8px; border-radius: var(--r1);
           justify-self: start; }

/* таблицы отдела */
.tablewrap { overflow-x: auto; margin: 0 calc(-1 * var(--s5)); padding: 0 var(--s5); }
.table td.is-danger { color: var(--danger); font-weight: 600; }
tr.is-muted td { color: var(--faint); }
tr.is-muted a { color: var(--muted); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3);
         align-items: end; }
.grid4 label { display: block; font-size: var(--t-caption); color: var(--muted); }
.grid4 input, .grid4 select, .grid4 button { width: 100%; margin-top: 4px; }
.metrics--secondary .metric__value { font-size: 24px; }
.metric--warn .metric__value { color: var(--warn); }
.metric--danger .metric__value { color: var(--danger); }
.metric__note { font-size: 11px; color: var(--faint); margin-top: 3px; }

.chips { display: flex; gap: 4px; flex-wrap: wrap; }

@media (max-width: 1320px) {
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .fulist__item { grid-template-columns: minmax(150px, 1fr) 92px minmax(0, 1fr) auto auto; }
  .fulist__item > span:nth-child(4), .fulist__item > span:nth-child(5) { display: none; }
}

/* два веса показателей на обзоре */
.metrics--primary { grid-template-columns: repeat(4, minmax(190px, 1fr)); }
.metrics--primary .metric__value { font-size: 40px; letter-spacing: -.02em; }
.metrics--secondary { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.metrics--secondary .metric { padding: var(--s3) var(--s4); }
.metrics--secondary .metric__value { font-size: 22px; }
.metrics--secondary .metric__label { min-height: 0; margin-bottom: 4px; }
.empty--inline { padding: var(--s4); text-align: left; }
.empty--inline p { margin: 0; color: var(--muted); }
@media (max-width: 1320px) {
  .metrics--primary, .metrics--secondary { grid-template-columns: repeat(2, 1fr); }
}

/* компактные списки рабочего дня */
.metric--link { text-decoration: none; color: inherit; display: block;
                transition: border-color var(--fast), transform var(--fast); }
.metric--link:hover { border-color: var(--ink); }
.minilist { list-style: none; margin: 0; padding: 0; }
.minilist li { border-bottom: 1px solid var(--line); }
.minilist li:last-child { border-bottom: 0; }
.minilist a {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0;
  text-decoration: none; color: inherit; position: relative;
}
.minilist a:hover .minilist__body b { color: var(--accent); }
.minilist__body { flex: 1; min-width: 0; }
.minilist__body b { display: block; font-size: var(--t-body); }
.minilist__body .muted { display: block; font-size: var(--t-caption);
                         white-space: nowrap; overflow: hidden;
                         text-overflow: ellipsis; }
.minilist__meta { display: flex; align-items: center; gap: var(--s2);
                  font-size: var(--t-caption); flex: none; }

/* блок работы менеджера на карточке человека */
.card--crm { border-left: 3px solid var(--accent); }
.crmgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3) var(--s4); }
.crmgrid > div { min-width: 0; }
.crmgrid span { display: block; font-size: 10.5px; text-transform: uppercase;
                letter-spacing: .05em; color: var(--faint); margin-bottom: 3px; }
.crmgrid b { font-weight: 560; font-size: var(--t-body); }
.notelist { list-style: none; margin: var(--s2) 0 0; padding: 0;
            font-size: var(--t-caption); }
.notelist li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.notelist li:last-child { border-bottom: 0; }
.notelist__body { display: block; color: var(--ink); }
.notelist .muted { font-size: 11px; }
@media (max-width: 1320px) { .crmgrid { grid-template-columns: repeat(2, 1fr); } }

/* конверсия ступени воронки — рядом с числом, тем же кеглем, но тише */
.funnel__conv { font-style: normal; margin-left: 7px; font-size: var(--t-caption);
                color: var(--faint); font-weight: 500; }
.funnel__bar { min-width: 2px; }

/* --- переписка: сторона разговора читается позой, а не только цветом ------- */
.timeline--thread { padding-left: 0; }
.timeline--thread::before { display: none; }
.timeline--thread .tl { margin-bottom: var(--s3); }
.timeline--thread .tl::before { display: none; }
.timeline--thread .tl--out { display: flex; flex-direction: column;
                             align-items: flex-end; }
.timeline--thread .tl--out .tl__meta { justify-content: flex-end; }
.timeline--thread .tl--out .bubble { border-bottom-right-radius: 4px; }
.timeline--thread .tl--in .bubble { border-bottom-left-radius: 4px; }
.timeline--thread .tl--note { padding-left: 0; }
.timeline--thread .bubble { max-width: 46ch; }

/* компактные метки в списке диалогов: три-четыре чипа обязаны уместиться
   в одну строку, иначе список «дышит» вдвое выше, чем нужно */
.conv__tags { display: flex; gap: 3px; flex-wrap: nowrap; overflow: hidden; }
.conv__tags .tag { font-size: 9px; padding: 1px 5px; white-space: nowrap; }
.conv__tags .ch { font-size: 9px; padding: 1px 5px; }
.conv__mgr { max-width: 62px; overflow: hidden; text-overflow: ellipsis; }

/* Одиннадцать пунктов меню обязаны уместиться в одну строку на ноутбуке:
   перенос навигации сдвигает всю страницу и читается как поломка. */
@media (max-width: 1439px) {
  .nav a { padding: 7px 7px; font-size: 12.5px; }
  .topbar__right { gap: var(--s2); }
  /* Имя остаётся — по нему понятно, под кем ты вошёл; роль видна по меню. */
  .whoami { font-size: 0; }
  .whoami b { font-size: var(--t-caption); }
}
@media (max-width: 1330px) {
  .nav a { padding: 6px 5px; font-size: 12px; }
}

/* запрет писать: единственное место, где красного много — потому что это
   единственное состояние, в котором нельзя ничего отправить */
.dnc {
  border: 1px solid #e0b3a8; background: #fdf3f0; border-radius: var(--r2);
  padding: var(--s3); margin-bottom: var(--s4);
}
.dnc b { color: var(--danger); display: block; margin-bottom: 4px; }
.dnc p { margin: 0; font-size: var(--t-caption); color: var(--muted); }

/* почему клиент требует внимания */
.attn {
  display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3);
  padding: 7px var(--s3); border-radius: var(--r2); background: #fdf8ec;
  font-size: var(--t-caption); color: var(--ink-soft);
}
.attn__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn);
             flex: none; }
.attn--row { background: none; padding: 0; }

/* список «требует внимания» — главный экран менеджера */
.attnlist { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.attnlist li { border-bottom: 1px solid var(--line); }
.attnlist li:last-child { border-bottom: 0; }
.attnlist a {
  display: grid; grid-template-columns: 26px minmax(150px, 1fr) 2fr auto;
  gap: var(--s3); align-items: center; padding: var(--s3) 0;
  text-decoration: none; color: inherit; font-size: var(--t-caption);
}
.attnlist a:hover .attnlist__who b { color: var(--accent); }
.attnlist__who b { display: block; font-size: var(--t-body); }
.attnlist__who .muted { font-size: 11px; }
.attnlist__why { min-width: 0; }
.attnlist__why .muted { display: block; margin-top: 2px; overflow: hidden;
                        text-overflow: ellipsis; white-space: nowrap; }
.attnlist__meta { display: flex; align-items: center; gap: var(--s2);
                  justify-self: end; }

/* краткая сводка и подсказка следующего шага */
.summary {
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2);
  font-size: var(--t-caption); line-height: 1.5; background: var(--wash);
}
.summary--hint { margin-top: var(--s2); border-color: var(--accent-line);
                 background: #f3f8f5; }
.summary--hint b { display: block; font-size: 10.5px; text-transform: uppercase;
                   letter-spacing: .05em; color: var(--faint); margin-bottom: 3px; }
.summary--hint .muted { display: block; margin-top: 4px; font-size: 11px; }

/* ====================================================== лаборатория аккаунтов */
.labtodo { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.labtodo__item {
  display: grid; grid-template-columns: 10px minmax(150px, auto) 1fr auto;
  gap: var(--s3); align-items: baseline; padding: var(--s2) 0;
  border-bottom: 1px solid var(--line); font-size: var(--t-caption);
}
.labtodo__item:last-child { border-bottom: 0; }
.labtodo__mark { width: 6px; height: 6px; border-radius: 50%;
                 background: var(--line); align-self: center; }
.labtodo__item--error .labtodo__mark { background: var(--danger); }
.labtodo__item--blocked .labtodo__mark { background: var(--warn); }
.labtodo__item--hint .labtodo__mark { background: var(--info); }
.labtodo__item span:nth-child(3) { color: var(--muted); }

.bundlegrid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--s5);
              margin-top: var(--s3); }
.bundlecol h3 { font-size: var(--t-label); text-transform: uppercase;
                letter-spacing: .05em; color: var(--faint); margin: 0 0 var(--s2); }
.asset {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-caption);
}
.asset:last-of-type { border-bottom: 0; }
.asset b { font-weight: 600; }
.asset select { height: 26px; font-size: 11px; }
.asset--net { display: block; padding: var(--s3); border: 1px solid var(--line);
              border-radius: var(--r2); background: var(--wash); }
.asset--ok { border-color: var(--accent-line); }
.asset--error { border-color: #e0b3a8; background: #fdf3f0; }
.asset--warning { border-color: #e8d3a8; background: #fdf8ec; }
.kv--tight { margin-top: var(--s2); font-size: var(--t-caption); }
.addform { margin-top: var(--s3); }
.addform summary { cursor: pointer; font-size: var(--t-caption);
                   color: var(--muted); padding: var(--s2) 0; }
.check { display: flex; align-items: center; gap: 6px;
         font-size: var(--t-caption); color: var(--muted); }
.check input { width: auto; margin: 0; }

.signalbars { display: inline-flex; align-items: flex-end; gap: 2px; }
.signalbars i { width: 3px; background: var(--line); border-radius: 1px;
                display: inline-block; }
.signalbars i:nth-child(1) { height: 4px; }
.signalbars i:nth-child(2) { height: 6px; }
.signalbars i:nth-child(3) { height: 8px; }
.signalbars i:nth-child(4) { height: 10px; }
.signalbars i:nth-child(5) { height: 12px; }
.signalbars i.is-on { background: var(--accent); }
.signalbars b { margin-left: 5px; font-size: 10.5px; color: var(--muted);
                font-weight: 500; }

@media (max-width: 1439px) {
  .bundlegrid { grid-template-columns: 1fr 1fr; }
  .bundlecol--wide { grid-column: 1 / -1; }
}

/* чек-лист готовности */
.checklist { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.checklist__item {
  display: flex; align-items: center; gap: var(--s2); padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: var(--t-caption);
}
.checklist__item:last-child { border-bottom: 0; }
.checklist__title { flex: 1; }
.checklist__item.is-done .checklist__title { color: var(--muted); }
.checkbox {
  width: 18px; height: 18px; padding: 0; border: 1px solid var(--line-strong);
  border-radius: 4px; background: var(--card); color: var(--accent);
  font-size: 11px; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.checkbox:hover { border-color: var(--accent); }
.is-done .checkbox { background: var(--accent); color: #fff; border-color: var(--accent); }

/* внешние препятствия: то, что устраняется не кодом */
.blockers { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.blockers__item {
  padding: var(--s3); border-left: 3px solid var(--line); border-radius: 0 var(--r2) var(--r2) 0;
  background: var(--wash); margin-bottom: var(--s2); font-size: var(--t-caption);
}
.blockers__item--blocking { border-left-color: var(--danger); background: #fdf3f0; }
.blockers__item--warning { border-left-color: var(--warn); background: #fdf8ec; }
.blockers__item b { display: block; margin-bottom: 4px; font-size: var(--t-body); }
.blockers__item > div { margin-top: 3px; }

/* вход по QR */
.qrbox { display: flex; justify-content: center; padding: var(--s4);
         background: #fff; border: 1px solid var(--line);
         border-radius: var(--r2); margin: var(--s3) 0; }
.qrbox svg { width: 220px; height: 220px; }
.steps { margin: var(--s3) 0 0; padding-left: 20px; font-size: var(--t-caption);
         line-height: 1.7; }
.steps li { margin-bottom: 6px; }
.plain { list-style: none; margin: var(--s2) 0 0; padding: 0;
         font-size: var(--t-caption); }
.plain li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.plain li:last-child { border-bottom: 0; }

/* предполётная проверка перед входом в аккаунт */
.preflight { width: 100%; border-collapse: collapse; margin-top: var(--s3);
             font-size: var(--t-caption); }
.preflight th { text-align: left; font-weight: 500; color: var(--muted);
                padding: 5px 0; vertical-align: top; width: 46%; }
.preflight td { padding: 5px 0; vertical-align: top; }
.preflight tr { border-bottom: 1px solid var(--line); }
.preflight tr:last-child { border-bottom: 0; }
.preflight .mono { font-size: 11px; display: block; }
/* Заголовок строки набран капителью, пояснение под ним — нет: два уровня
   капители подряд не читаются. */
.preflight th div { text-transform: none; letter-spacing: 0; }

/* список авторизаций аккаунта: своя и чужие */
.authlist { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.authlist__item {
  display: grid; grid-template-columns: 58px 1fr auto; gap: var(--s3);
  align-items: center; padding: var(--s3) 0;
  border-bottom: 1px solid var(--line); font-size: var(--t-caption);
}
.authlist__item:last-child { border-bottom: 0; }
.authlist__mark {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 620; text-align: center; padding: 3px 0; border-radius: 4px;
}
.is-ours .authlist__mark { background: var(--accent); color: #fff; }
.is-foreign .authlist__mark { background: #fdf3f0; color: var(--danger);
                              border: 1px solid #e0b3a8; }
.authlist__body b { display: block; }
.authlist__body .muted { font-size: 11px; }

/* библиотека аватаров */
.avatargrid { display: grid; gap: var(--s4); margin-top: var(--s4);
              grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.avatarcard { margin: 0; border: 1px solid var(--line); border-radius: var(--r2);
              overflow: hidden; background: var(--card); }
.avatarcard img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.avatarcard figcaption { padding: var(--s3); display: flex; flex-direction: column;
                         gap: 4px; font-size: var(--t-caption); }
.avatarcard--pending_approval { border-color: #e8d3a8; }
.avatarcard--rejected { opacity: .5; }
.avatarcard--assigned { border-color: var(--accent-line); }
.avatarcard select { height: 28px; font-size: 11px; }

/* карточка персоны — как её увидит человек */
.personacard { display: flex; flex-direction: column; align-items: center;
               gap: 6px; padding: var(--s4); text-align: center;
               border: 1px solid var(--line); border-radius: var(--r2);
               background: var(--wash); }
.personacard img { width: 96px; height: 96px; border-radius: 50%;
                   object-fit: cover; }
.personacard__blank { width: 96px; height: 96px; border-radius: 50%;
                      background: var(--line); display: flex;
                      align-items: center; justify-content: center;
                      font-size: 11px; color: var(--muted); }
.personacard b { font-size: var(--t-body); }
.personacard .muted { font-size: var(--t-caption); }
.avatarchip { width: 22px; height: 22px; border-radius: 50%;
              object-fit: cover; vertical-align: middle; margin-right: 5px; }

/* ==================================================== мастер подключения
   Тринадцать шагов одной колонкой. Порядок задан нумерацией слева, а
   состояние — цветом кружка: сделано, очередь, мешает. Ничего больше:
   владелец читает сверху вниз и останавливается на первом незакрытом. */
.wiz { list-style: none; margin: 0; padding: 0; }
.wiz__item {
  display: grid; grid-template-columns: 30px 1fr auto; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.wiz__item:last-child { border-bottom: 0; }
.wiz__num {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
  background: var(--card-sunken); color: var(--muted);
  border: 1px solid var(--line);
}
.wiz__item--done .wiz__num {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.wiz__item--blocked .wiz__num {
  background: var(--warn-soft, var(--card-sunken)); color: var(--warn);
  border-color: var(--warn);
}
.wiz__item--next .wiz__num { border-color: var(--accent); color: var(--accent); }
.wiz__title { font-weight: 580; font-size: var(--t-body); }
.wiz__item--done .wiz__title { color: var(--muted); font-weight: 500; }
.wiz__purpose { color: var(--muted); font-size: var(--t-caption);
                margin-top: 2px; line-height: 1.55; max-width: 62ch; }
.wiz__detail { font-size: var(--t-caption); margin-top: 6px; }
.wiz__item--blocked .wiz__detail { color: var(--warn); }
.wiz__facts { list-style: none; margin: 6px 0 0; padding: 0;
              font-size: var(--t-caption); color: var(--muted); }
.wiz__facts li::before { content: "→ "; opacity: .6; }
.wiz__side { text-align: right; white-space: nowrap; }

/* Шкала прохождения — одна строка над списком. */
.wiz-head { display: flex; align-items: baseline; gap: var(--s3);
            margin-bottom: var(--s3); }
.wiz-head__count { font-size: 26px; font-weight: 640;
                   font-variant-numeric: tabular-nums; }

/* ======================================================== ферма модемов
   Десять устройств в одном хабе — это сетка одинаковых карточек, где
   единственное, что различается, и есть содержание: какая SIM, какой
   оператор, какой сигнал, живой ли модем. Поэтому карточка узкая, а
   состояние вынесено в левую полосу цветом. */
.farm { display: grid; gap: var(--s3);
        grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.modem {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) + 4px);
  position: relative; overflow: hidden;
}
.modem::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--line);
}
.modem--ready::before { background: var(--accent); }
.modem--warn::before { background: var(--warn); }
.modem--error::before { background: var(--danger); }
.modem__top { display: flex; align-items: baseline; justify-content: space-between;
              gap: var(--s2); }
.modem__code { font-weight: 620; font-size: var(--t-meta); }
.modem__sim { font-size: var(--t-caption); color: var(--muted); margin-top: 2px; }
.modem__phone { font-size: var(--t-body); font-weight: 560; margin-top: 6px;
                font-variant-numeric: tabular-nums; }
.modem__row { display: flex; justify-content: space-between; gap: var(--s2);
              font-size: var(--t-caption); color: var(--muted); margin-top: 4px; }
.modem__why { font-size: var(--t-caption); color: var(--warn); margin-top: 6px; }

/* Уровень сигнала: пять столбиков, потому что цифра в dBm владельцу
   ничего не говорит, а «две палки» говорит сразу. */
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sig i { width: 3px; background: var(--line); border-radius: 1px; display: block; }
.sig i:nth-child(1) { height: 30%; }
.sig i:nth-child(2) { height: 45%; }
.sig i:nth-child(3) { height: 60%; }
.sig i:nth-child(4) { height: 80%; }
.sig i:nth-child(5) { height: 100%; }
.sig i.on { background: var(--accent); }
.sig--weak i.on { background: var(--warn); }

/* ============================================================== Исходящие */
.ob-kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin-bottom: var(--s5);
}
.ob-kpi__cell {
  background: var(--card); padding: var(--s3) var(--s4);
  display: flex; flex-direction: column; gap: 2px;
}
.ob-kpi__cell--total { background: var(--accent-soft); }
.ob-kpi__cell--err .ob-kpi__n { color: var(--danger); }
.ob-kpi__n { font: 650 22px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); }
.ob-kpi__cell--total .ob-kpi__n { color: var(--accent); }
.ob-kpi__l { font-size: var(--t-caption); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

.ob-filters {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  margin-bottom: var(--s4); padding: var(--s3) var(--s4);
}
.ob-filters input, .ob-filters select {
  font: 500 var(--t-meta)/1.4 var(--font); padding: 6px 9px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); max-width: 190px;
}
.ob-filters input[type=search] { min-width: 220px; }

.ob-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.ob-table { width: 100%; border-collapse: collapse; font-size: var(--t-meta); }
.ob-table thead th {
  text-align: left; font: 600 var(--t-caption)/1.4 var(--font); color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--card-sunken);
}
.ob-table tbody td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.ob-table tbody tr:last-child td { border-bottom: none; }
.ob-table tbody tr:hover { background: var(--card-sunken); }
.ob-row--internal { opacity: .62; }
.ob-ts { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.ob-client { font-weight: 560; }
.ob-dest, .ob-acct { font-family: var(--mono); font-size: var(--t-caption); color: var(--muted); white-space: nowrap; }
.ob-preview { max-width: 320px; color: var(--ink); }
.ob-camp { white-space: nowrap; }
.ob-actor { color: var(--muted); white-space: nowrap; }
.ob-hint { display: block; font-size: 10px; }
.ob-err { color: var(--danger); font-weight: 700; margin-left: 4px; }

.ob-st {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: var(--t-caption); font-weight: 580; white-space: nowrap;
  background: var(--card-sunken); color: var(--muted); border: 1px solid var(--line);
}
.ob-st--sent      { background: var(--info-soft);   color: var(--info);   border-color: var(--info-line); }
.ob-st--delivered { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-line); }
.ob-st--sending   { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.ob-st--queued    { background: var(--card-sunken); color: var(--muted);  border-color: var(--line); }
.ob-st--failed    { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.ob-st--cancelled { background: var(--card-sunken); color: var(--muted);  border-color: var(--line); }
.ob-st--blocked   { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }

.ob-pager { display: flex; align-items: center; gap: var(--s3); justify-content: center; margin-top: var(--s4); }
.tag--sm { padding: 1px 6px; font-size: 10px; background: var(--card-sunken); color: var(--muted); border-color: var(--line); }

/* =============================================================================
   ПОЛИРОВКА v2 — 2026-09-09. Апгрейд визуала без смены структуры:
   редакционная типографика (Spectral для заголовков, Golos Text для интерфейса),
   мягкая глубина у карточек/КПИ, аккуратные таблицы, сегмент-вкладки Исходящих.
   Правила прежней системы уважаем: цвет статуса всегда со словом, цифры табличные.
   ============================================================================= */

/* — фон с едва заметной глубиной, чтобы карточки «лежали» на поверхности — */
body {
  background:
    radial-gradient(1200px 480px at 82% -8%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 420px at -6% 0%, #eef3f0 0%, rgba(238,243,240,0) 55%),
    var(--paper);
  background-attachment: fixed;
}
main { max-width: 1440px; margin: 0 auto; padding: var(--s7) var(--s6) var(--s8); }

/* — верхняя панель: чуть больше «продукта» — */
.topbar { background: rgba(255,255,255,.82); backdrop-filter: saturate(1.4) blur(10px);
          box-shadow: 0 1px 0 var(--line), 0 6px 20px -18px rgba(20,22,26,.5); }
.brand { font-weight: 700; letter-spacing: -.02em; font-size: 15.5px;
         display: inline-flex; align-items: center; gap: 8px; }
.brand::before { content: ""; width: 9px; height: 9px; border-radius: 3px;
  background: linear-gradient(150deg, var(--accent), #2f8f6d); box-shadow: var(--ring); }
.nav a { border-radius: var(--r-pill); padding: 7px 13px; font-weight: 550;
         transition: background var(--fast), color var(--fast); }
.nav a.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.nav a.is-active:hover { background: var(--accent-hover); color: #fff; }

/* — редакционные заголовки страниц — */
.page-head h1, h1 { font-family: var(--font-display); font-weight: 600;
  letter-spacing: -.015em; font-size: 30px; }
.eyebrow { font-family: var(--font); color: var(--accent);
  letter-spacing: .14em; font-weight: 700; opacity: .85; }
.page-head { padding-bottom: var(--s4); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s6); }

/* — карточки: мягкая глубина вместо только-линии — */
.card { border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
        transition: box-shadow var(--base), transform var(--base); }
.card--accent { background: linear-gradient(180deg, #f4f8f6, var(--card)); }

/* — полоса метрик: глубина + акцентные цифры крупнее — */
.metrics { box-shadow: var(--shadow-sm); border-radius: var(--r-lg); }
.metric__value { font-family: var(--font); letter-spacing: -.035em; }

/* — кнопки: у главной — лёгкая подъёмность — */
.btn--primary, button.primary {
  box-shadow: 0 1px 2px rgba(16,81,60,.28), 0 6px 16px -8px rgba(16,81,60,.45); }
.btn--primary:hover, button.primary:hover { transform: translateY(-.5px); }

/* ===================== Исходящие: КПИ ===================== */
.ob-kpi { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border-color: var(--line); }
.ob-kpi__cell { padding: var(--s4) var(--s4) var(--s3); position: relative; gap: 4px; }
.ob-kpi__cell--total { background: linear-gradient(180deg, var(--accent-soft), #fff); }
.ob-kpi__cell--total::before { content: ""; position: absolute; inset: 0 0 auto 0;
  height: 3px; background: linear-gradient(90deg, var(--accent), #47a583); }
.ob-kpi__n { font: 700 26px/1 var(--font); letter-spacing: -.03em; }
.ob-kpi__l { font-weight: 600; letter-spacing: .05em; font-size: 10.5px; color: var(--faint); }

/* ===================== Исходящие: две ветки ===================== */
.ob-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--s5);
  background: var(--card-sunken); border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm); }
.ob-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px;
  border-radius: var(--r-pill); font-size: var(--t-meta); font-weight: 600;
  color: var(--muted); transition: background var(--fast), color var(--fast); white-space: nowrap; }
.ob-tab:hover { color: var(--ink); text-decoration: none; background: rgba(0,0,0,.03); }
.ob-tab.is-active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.ob-tab__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ob-tab__dot--live { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); }
.ob-tab__dot--farm { background: var(--faint); box-shadow: 0 0 0 3px var(--line); }
.ob-tab__n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted);
  background: rgba(0,0,0,.05); border-radius: var(--r-pill); padding: 0 8px; font-size: 11px; line-height: 18px; }
.ob-tab.is-active .ob-tab__n { color: var(--accent); background: var(--accent-soft); }

/* ===================== Исходящие: таблица ===================== */
.ob-table-wrap { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); background: var(--card); }
.ob-table thead th { position: sticky; top: 56px; z-index: 1;
  background: #f3f1ec; color: var(--faint); letter-spacing: .06em;
  padding: var(--s3); border-bottom: 1px solid var(--line-strong); }
.ob-table tbody td { padding: var(--s3); }
.ob-table tbody tr { transition: background var(--fast); }
.ob-table tbody tr:hover { background: var(--accent-soft); }
/* Во вкладке «Ферма» строки не приглушаем — они там все внутренние. */
.ob-row--internal { opacity: 1; }
.ob-client { font-weight: 600; }
.ob-client:hover { color: var(--accent); }

/* — статус-плашки чуть плотнее — */
.ob-st { font-weight: 600; padding: 3px 10px; }

/* — доступность движения — */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card, .btn--primary { transform: none !important; }
}

/* --- предложение модели в диалоге ------------------------------------------ */
/* Модель ничего не отправляет сама. Блок должен читаться как черновик на
   столе, а не как отправленное сообщение, — отсюда пунктир и другой фон. */
.draft { border: 1px dashed var(--accent); border-radius: var(--r);
         background: var(--card-sunken); padding: var(--s4);
         margin-top: var(--s4); }
.draft__head { display: flex; align-items: center; gap: var(--s2);
               flex-wrap: wrap; margin-bottom: var(--s2); }
.draft__why { color: var(--muted); font-size: var(--t-caption);
              margin: 0 0 var(--s3); }
.draft textarea { width: 100%; }