/* Оболочка панели: боковое меню, шапка, полоса сообщений.
 *
 * Все новые правила живут здесь, а не в admin.css: тот описывает содержимое
 * разделов и общий с кабинетом словарь классов. Разъедутся — понятно, где чьё.
 *
 * Подключается ЧЕТВЁРТЫМ, после admin.css.
 */

/* ── раскладка ──────────────────────────────────────────────────────────
   Ширина колонки с содержимым не меняется ни на пиксель: было 1100px и
   осталось. Меняется только то, что появилось слева. */
.ashell{display:grid;grid-template-columns:196px minmax(0,1fr);gap:var(--s5);
  width:100%;max-width:1760px;margin:0 auto;padding:0 clamp(10px,1.4vw,22px)}
/* Селектором .ashell > .aw, а не .aw: тот же класс обслуживает карточку
   входа, которую body.vhod центрирует по экрану. */
.ashell>.aw{max-width:none;margin:0;padding:0}

/* ── меню ─────────────────────────────────────────────────────────────── */
.aside{position:sticky;top:var(--s5);display:flex;flex-direction:column;gap:1px;
  align-self:start;padding:var(--s5) 0}
.aside a{position:relative;display:flex;align-items:center;gap:10px;height:40px;
  padding:0 12px;border-radius:var(--r-s);color:var(--ink2);
  font-size:13.5px;font-weight:560;text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.aside a:hover{background:var(--hover-bg);color:var(--ink)}
.aside a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.aside svg{flex:none;opacity:.85}

/* Активный раздел помечен фоном и весом. Штриха слева нет намеренно: с фоном
   он спорил за ту же роль, а признаков и так два — цвет не остаётся
   единственным носителем смысла. */
.aside a[aria-current]{background:var(--seg-on);color:var(--ink);font-weight:640}
.aside a[aria-current] svg{opacity:1}

.aside .im{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aside .gap{height:var(--s5)}
.aside .gap.niz{margin-top:auto;height:var(--s5)}

/* Счётчики. Итог — тихий, серый: «сколько всего». Долг — тревожная плашка:
   «столько людей ждёт тебя». Ноль не рисуется вовсе (узла просто нет). */
.aside .n{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-weight:500;
  color:var(--muted)}
.aside .n.dolg{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;font-size:11px;
  background:var(--alarm-bg);color:var(--alarm-ink);border:1px solid var(--alarm-line)}

/* ── полоса сообщений ─────────────────────────────────────────────────── */
.a-note{margin:0 0 var(--s4);font-size:13px;color:var(--muted)}
.a-note.ok{color:var(--ok-ink)}
.a-note.bad{color:var(--alarm-ink)}

/* ── узкие экраны ─────────────────────────────────────────────────────── */

/* Средний экран: меню сжимается до значков. Подпись уходит в title и
   aria-label, долг превращается в точку — число в 68 пикселей не влезает. */
@media (max-width:1179px) and (min-width:900px){
  .ashell{grid-template-columns:68px minmax(0,1fr);gap:var(--s5)}
  .aside a{justify-content:center;padding:0}
  .aside .im{display:none}
  .aside .n{display:none}
  .aside .n.dolg{display:block;position:absolute;top:6px;right:8px;
    min-width:6px;width:6px;height:6px;padding:0;border:0;font-size:0;
    background:var(--alarm-ink)}
}

/* Свёрнутое меню по выбору человека: то же, что на среднем экране, но по
   кнопке. Выбор запоминается — сворачивают его один раз и надолго. */
.ashell.uzko{grid-template-columns:64px minmax(0,1fr);gap:var(--s5)}
.ashell.uzko .aside a{justify-content:center;padding:0}
.ashell.uzko .aside .im{display:none}
.ashell.uzko .aside .n{display:none}
.ashell.uzko .aside .n.dolg{display:grid;position:absolute;top:5px;right:6px;
  min-width:16px;height:16px;padding:0 4px;font-size:9.5px;border:0}

/* Кнопка сворачивания — стрелка на самом краю меню, а не пункт списка.
   Пунктом она притворялась разделом и занимала строку; на границе колонок она
   читается как ручка, за которую меню и двигают. */
.a-svorot{position:absolute;top:14px;right:-11px;z-index:3;
  display:grid;place-items:center;width:22px;height:22px;padding:0;
  border:1px solid var(--chip-line);border-radius:50%;background:var(--card);
  color:var(--muted);cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.a-svorot:hover{color:var(--ink);border-color:var(--open-line)}
.a-svorot svg{transition:transform var(--dur) var(--ease)}
.ashell.uzko .a-svorot svg{transform:rotate(180deg)}
@media (max-width:1179px){ .a-svorot{display:none} }

/* Телефон: тот же список становится лентой сверху. Бургера нет намеренно —
   восемь пунктов помещаются в ленту, а лента это одно касание вместо двух и
   не прячет главный сигнал за закрытой шторкой. */
@media (max-width:899px){
  .ashell{display:block;padding:0 var(--s4)}
  .ashell>.aw{max-width:none}
  .aside{position:sticky;top:0;z-index:5;flex-direction:row;gap:6px;
    padding:var(--s3) 0;margin:0 calc(-1 * var(--s4)) var(--s3);
    padding-left:var(--s4);padding-right:var(--s4);
    overflow-x:auto;scroll-snap-type:x proximity;
    background:var(--pane);backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    border-bottom:1px solid var(--hair);scrollbar-width:none}
  .aside::-webkit-scrollbar{display:none}
  .aside a{flex:none;height:36px;border-radius:999px;scroll-snap-align:center;
    border:1px solid var(--chip-line);background:var(--chip-bg)}
  .aside a[aria-current]::before{display:none}
  .aside .gap{display:none}
  .aside svg{width:17px;height:17px}
}

@media (prefers-reduced-motion:reduce){
  .aside a{transition:none}
}

/* ── Обзор ────────────────────────────────────────────────────────────── */

/* Числа наверху. Свои правила, а не общий .facts: тот описывает подписи в
   карточке участника — метка сверху, значение под ней. Здесь наоборот, число
   первое и крупное, потому что за ним и заходят. */
.obzor-chisla{padding:var(--s5) var(--s6);margin-bottom:var(--s5)}
.obzor-chisla .facts{gap:var(--s4) var(--s6)}
.obzor-chisla .fact{display:flex;flex-direction:column;gap:2px}
.obzor-chisla .fact b{font-size:26px;font-weight:640;line-height:1.1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.obzor-chisla .fact i{font-style:normal;font-size:12.5px;color:var(--muted);
  text-transform:none;letter-spacing:0}

/* Значок вида в строке очереди: тихий кружок, чтобы строка читалась именем,
   а не иконкой. */
.rows .row .ic{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:50%;color:var(--muted);background:var(--chip-bg);border:1px solid var(--chip-line)}

/* «Разобрал» — действие второго ряда: оно не должно спорить с самой строкой,
   но и системной серой кнопкой браузера быть не должно. */
.rows .row .quiet{flex:none;height:30px;padding:0 12px;border-radius:999px;
  border:1px solid var(--chip-line);background:transparent;color:var(--muted);
  font:inherit;font-size:12px;cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.rows .row .quiet:hover{color:var(--ink);border-color:var(--open-line)}
.rows .row .meta .d{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* Телефон: слоты строки не помещаются в одну линию — метка налезала на имя.
   Раскладываем в две: сверху значок и имя, снизу метка, дата и действие. */
@media (max-width:700px){
  .rows .row{flex-wrap:wrap;row-gap:10px;gap:var(--s3);padding:12px 14px}
  .rows .row .ic{order:1}
  .rows .row .tx{order:2;flex:1 1 auto}
  .rows .row .meta{order:3}
  .rows .row .quiet{order:4;margin-left:auto}
  .rows .row .tx i{white-space:normal}
  .obzor-chisla{padding:var(--s4) var(--s5)}
  .obzor-chisla .fact b{font-size:22px}
  /* Шапка на узком: логотип и имя в строку, «Выйти» рядом, без переносов. */
  .ashell .ahead{flex-wrap:wrap;row-gap:8px}
  .ashell .ahead h1{font-size:17px}
}

/* ── Поддержка ────────────────────────────────────────────────────────── */

/* Две колонки: очередь и переписка. Список узкий и фиксированный — он для
   выбора, а не для чтения; всё содержательное происходит справа. */
.sup{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--s5);align-items:start}
.sup-list{display:flex;flex-direction:column;gap:6px;position:sticky;top:var(--s5)}
.sup-tabs{display:flex;gap:6px;margin-bottom:var(--s2)}
.sup-tab{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--chip-line);
  background:transparent;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer}
.sup-tab.on{background:var(--seg-on);color:var(--ink);font-weight:640}

.sup-row{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:11px 13px;border-radius:var(--r-s);border:1px solid var(--chip-line);
  background:var(--pane);color:var(--ink);font:inherit;cursor:pointer;
  transition:border-color var(--dur) var(--ease)}
.sup-row:hover{border-color:var(--open-line)}
.sup-row.on{border-color:var(--blue)}
/* Долг помечен полосой слева, а не только цветом метки: цвет один смысл нести
   не может. */
.sup-row.dolg{box-shadow:inset 2px 0 0 var(--alarm-ink)}
.sup-row .who{flex:1;min-width:0}
.sup-row .who b{display:block;font-size:13.5px;font-weight:640;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sup-row .who i{display:block;font-style:normal;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.sup-row .meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.sup-row .meta .d{font-family:var(--mono);font-size:11px;color:var(--muted)}

.sup-thread{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.sup-person{border:1px solid var(--chip-line);border-radius:var(--r-m);background:var(--pane);
  padding:var(--s4) var(--s5)}
.sup-person .p-top b{display:block;font-size:15px;font-weight:650}
.sup-person .p-top i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.sup-person .p-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--s3);margin-top:var(--s4)}
.sup-person .p-facts span{display:flex;flex-direction:column;gap:2px}
.sup-person .p-facts i{font-style:normal;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.sup-person .p-facts b{font-size:13px;font-weight:600}
.sup-person .p-vopr{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hair)}
.sup-person .p-vopr i{font-style:normal;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.sup-person .p-vopr p{margin:6px 0 0;font-size:12.5px;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-person .p-more{display:inline-block;margin-top:var(--s3);font-size:12.5px;color:var(--blue)}

.sup-lenta{display:flex;flex-direction:column;gap:var(--s4);max-height:52vh;overflow-y:auto;
  padding:var(--s4) var(--s5);border:1px solid var(--chip-line);border-radius:var(--r-m);
  background:var(--pane)}
.sup-msg{max-width:82%;font-size:14px;line-height:1.6;white-space:pre-line}
.sup-msg b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.sup-msg i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:4px}
.sup-msg.my{align-self:flex-end;text-align:right}

.sup-in{display:flex;gap:var(--s3);align-items:flex-start}
.sup-in textarea{flex:1;min-height:64px;resize:vertical;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--soft);color:var(--ink);
  font:inherit;font-size:14px;padding:11px 13px;outline:none}
.sup-in textarea:focus{border-color:var(--blue)}

@media (max-width:1024px){
  .sup{grid-template-columns:minmax(0,1fr)}
  .sup-list{position:static}
  .sup-lenta{max-height:none}
}
/* «Закрыть обращение» — второе действие рядом с «Ответить»: тихое, но не
   системная серая кнопка браузера. */
.sup-in .quiet{flex:none;height:38px;padding:0 14px;border-radius:999px;
  border:1px solid var(--chip-line);background:transparent;color:var(--muted);
  font:inherit;font-size:13px;cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.sup-in .quiet:hover{color:var(--ink);border-color:var(--open-line)}
.sup-in .btn{flex:none;height:38px}

/* ── Люди: этапы и карточка ───────────────────────────────────────────── */

.etapy{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s4) 0}
.etapy .et{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--chip-line);
  background:transparent;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.etapy .et:hover{color:var(--ink);border-color:var(--open-line)}
.etapy .et.on{background:var(--seg-on);color:var(--ink);font-weight:640;border-color:transparent}
/* Пустой этап видно, но нажать нельзя: это факт, а не сломанный фильтр. */
.etapy .et.pusto{opacity:.45;cursor:default}

.chelovek{display:flex;flex-direction:column;gap:var(--s5)}

.ch-top{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.ch-top .quiet{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--chip-line);
  background:transparent;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer}
.ch-top .quiet:hover{color:var(--ink);border-color:var(--open-line)}
.ch-kto{flex:1;min-width:0}
.ch-kto b{display:block;font-size:20px;font-weight:650;letter-spacing:-.01em}
.ch-kto i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
/* «Просил звать» — приписка к имени, не второе имя: тем же размером она
   спорила бы с заголовком карточки. */
.ch-zovut{font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap}

/* Долг — то, ради чего карточку открыли: стоит выше всего остального и
   появляется только когда он есть; место под него не резервируется. */
.ch-dolg{border:1px solid var(--alarm-line);background:var(--alarm-bg);
  border-radius:var(--r-m);padding:var(--s3) var(--s4)}
.ch-dolg p{margin:0;font-size:13.5px;color:var(--alarm-ink)}
.ch-dolg p + p{margin-top:4px}

.ch-blok{border:1px solid var(--chip-line);border-radius:var(--r-m);background:var(--pane);
  padding:var(--s4) var(--s5)}
.ch-blok h3{margin:0 0 var(--s3);font-size:13px;font-weight:650;color:var(--sub);
  text-transform:uppercase;letter-spacing:.06em}
.ch-note-in{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s3)}
.ch-note-in textarea{flex:1;min-height:52px;resize:vertical;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--soft);color:var(--ink);
  font:inherit;font-size:13.5px;padding:10px 12px;outline:none}
.ch-note-in textarea:focus{border-color:var(--blue)}
.ch-note-in .btn{flex:none;height:38px}

/* ── Мозг поддержки ───────────────────────────────────────────────────────
 *
 * Экран разговора, а не страница с блоками: занимает всю высоту, лента растёт
 * снизу вверх, поле ввода стоит там, где рука его и ищет — внизу.
 */
.mz{display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--s5);
  align-items:stretch;height:calc(100vh - 132px);min-height:460px}
/* Разговоров ещё нет — колонка истории не нужна вовсе: пустая полоса слева
   сдвигала разговор вправо, и экран читался перекошенным. Кнопка «новый
   разговор» там тоже лишняя: экран и так новый. */
.mz.pusto{grid-template-columns:minmax(0,1fr)}
.mz.pusto .mz-list{display:none}

/* Слева только список. Ни заголовков, ни пояснений: колонка узкая, а список
   объясняет себя сам. */
.mz-list{display:flex;flex-direction:column;gap:2px;min-height:0}
.mz-new{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;margin-bottom:var(--s3);
  border-radius:var(--r-s);border:1px dashed var(--chip-line);background:transparent;
  color:var(--muted);font:inherit;font-size:13px;cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.mz-new:hover{color:var(--ink);border-color:var(--open-line)}
.mz-threads{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin}
.mz-thread{display:flex;flex-direction:column;gap:1px;text-align:left;padding:8px 12px;
  border-radius:var(--r-s);border:0;background:transparent;color:var(--ink2);
  font:inherit;cursor:pointer;min-width:0;max-width:100%;overflow:hidden;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.mz-thread:hover{background:var(--hover-bg);color:var(--ink)}
.mz-thread.on{background:var(--seg-on);color:var(--ink)}
.mz-thread b,.mz-thread i{display:block;max-width:100%;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mz-thread b{font-size:13px;font-weight:560}
.mz-thread i{font-style:normal;font-size:11px;color:var(--muted);margin-top:1px}

/* ⚠️ РАЗГОВОР ДЕРЖИМ ПО ЦЕНТРУ И УЖЕ ЭКРАНА. На широком мониторе правая
   колонка — это полторы тысячи пикселей: растянутая на всю ширину лента
   читается плохо (строка в двести знаков), а поле ввода уезжает к правому
   краю, и весь экран выглядит перекошенным. */
.mz-work{display:flex;flex-direction:column;min-width:0;min-height:0;
  width:100%;max-width:880px;margin:0 auto}
/* justify-content:flex-end — вот из-за этой строки короткий разговор липнет к
   полю ввода, а не висит вверху пустого прямоугольника. */
.mz-lenta{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
  justify-content:flex-end;gap:var(--s5);padding:var(--s5) 0}

.mz-msg{max-width:min(760px,86%);font-size:14.5px;line-height:1.65;white-space:pre-line;
  color:var(--ink)}
/* Ответ мозга — просто текст, без пузыря: его читают целиком, и рамка вокруг
   абзаца мешает. Свою реплику, наоборот, надо отличить с одного взгляда. */
.mz-msg.my{align-self:flex-end;max-width:min(560px,80%);padding:10px 14px;
  border-radius:16px 16px 4px 16px;background:var(--seg-on);color:var(--ink)}
.mz-msg b{display:none}

.mz-tools{display:flex;flex-wrap:wrap;gap:6px;margin:calc(-1 * var(--s4)) 0 0}
.mz-tool{font-size:11px;font-family:var(--mono);color:var(--muted);
  border:1px solid var(--chip-line);border-radius:999px;padding:2px 9px}

.mz-draft{align-self:flex-start;max-width:min(760px,86%);
  border:1px solid var(--chip-line);border-left:2px solid var(--blue);
  border-radius:4px var(--r-m) var(--r-m) 4px;background:var(--pane);padding:var(--s4)}
.mz-draft b{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.mz-draft p{margin:0;font-size:14px;line-height:1.6;white-space:pre-line;color:var(--ink)}
.mz-draft i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:10px}
.mz-draft-act{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.mz-draft-act i{margin:0}

/* Пустой экран — приглашение, а не пустой прямоугольник. */
.mz-pusto{margin:auto 0;text-align:center;padding:var(--s7) 0}
.mz-pusto b{display:block;font-size:19px;font-weight:600;color:var(--ink)}
.mz-pusto span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted)}
.mz-primery{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--s5)}
.mz-primery button{padding:8px 14px;border-radius:999px;border:1px solid var(--chip-line);
  background:transparent;color:var(--ink2);font:inherit;font-size:13px;cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.mz-primery button:hover{color:var(--ink);border-color:var(--open-line)}

/* Поле ввода — одна капсула, кнопка внутри неё.
   ⚠️ НИКАКОЙ ОБВОДКИ НА ФОКУСЕ: ни outline, ни смены цвета рамки. Человек и
   так знает, куда он поставил курсор, а рамка вокруг поля на стекле выглядит
   как ошибка ввода. */
.mz-in{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 16px;
  border-radius:22px;border:1px solid var(--chip-line);background:var(--pane)}
.mz-in textarea{flex:1;min-height:26px;max-height:180px;resize:none;border:0;outline:none;
  background:transparent;color:var(--ink);font:inherit;font-size:14.5px;line-height:1.5;
  padding:8px 0}
.mz-in textarea::placeholder{color:var(--muted)}
.mz-send{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:0;background:var(--blue);color:#fff;cursor:pointer;
  transition:opacity var(--dur) var(--ease)}
.mz-send:disabled{opacity:.35;cursor:default}
.mz-hint{margin:8px 2px 0;font-size:11.5px;color:var(--muted)}

@media (max-width:1024px){
  .mz{grid-template-columns:minmax(0,1fr);height:auto}
  .mz-list{flex-direction:row;align-items:center;gap:8px;overflow-x:auto}
  .mz-threads{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  .mz-thread{flex:none;max-width:200px}
  .mz-lenta{min-height:50vh}
}

/* ── Вопросы ──────────────────────────────────────────────────────────── */

.v-lesson{border:1px solid var(--chip-line);border-radius:var(--r-m);background:var(--pane);
  padding:var(--s4) var(--s5);margin-bottom:var(--s4)}
.v-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.v-head b{font-size:15px;font-weight:650}
.v-head i{font-style:normal;font-size:12.5px;color:var(--muted)}
.v-head .quiet{margin-left:auto;height:30px;padding:0 12px;border-radius:999px;
  border:1px solid var(--chip-line);background:transparent;color:var(--muted);
  font:inherit;font-size:12px;cursor:pointer}
.v-head .quiet:hover{color:var(--ink);border-color:var(--open-line)}
.v-sovet{margin:0 0 var(--s3);font-size:13.5px;line-height:1.6;white-space:pre-line;
  color:var(--ink2);border-left:2px solid var(--blue);padding-left:var(--s3)}

/* Тема — несколько вопросов об одном. «Больно» помечено не только цветом:
   рядом стоит подпись «спрашивают разные люди». */
.v-tema{border-top:1px solid var(--hair);padding-top:var(--s3);margin-top:var(--s3)}
.v-tema-h b{display:block;font-size:13.5px;font-weight:620}
.v-tema-h i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.v-tema.bolno .v-tema-h b{color:var(--alarm-ink)}
.v-odin{border-top:1px solid var(--hair);padding-top:var(--s2);margin-top:var(--s3)}

.v-row{display:flex;align-items:center;gap:var(--s3);padding:8px 0;font-size:13.5px}
.v-row + .v-row{border-top:1px solid var(--hair)}
.v-row .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-kto{flex:none;font-size:12px;color:var(--blue)}
.v-row .d{flex:none;font-family:var(--mono);font-size:11px;color:var(--muted)}
.v-mark{flex:none;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--chip-line);
  background:transparent;color:var(--muted);font:inherit;font-size:11.5px;cursor:pointer}
.v-mark.on{background:var(--ok-bg);color:var(--ok-ink);border-color:transparent}

/* ── Деньги ───────────────────────────────────────────────────────────── */
.d-kassa{margin:0 0 var(--s5);font-size:13px;color:var(--muted);line-height:1.55}
#dpokupki .row .meta b{font-family:var(--mono);font-size:13px;font-weight:640}

/* Логотип в шапке панели: без плашки.
   Класс .mark общий с кабинетом, а там под ним синий градиентный квадрат —
   он был нужен, пока логотипом была буква. Наш знак сам синий и с прозрачным
   фоном: плашка под ним превращалась в квадрат вокруг круга. */
.ashell .ahead .mark{width:40px;height:40px;background:none;box-shadow:none;border-radius:0}
.ashell .ahead .mark img{height:40px;width:auto;display:block}

/* ── Люди: доска по этапам ─────────────────────────────────────────────
 *
 * Список отвечает «где этот человек», доска — «где сейчас все». Второй вопрос
 * в работе с людьми задают чаще, а по списку с метками на него не ответишь:
 * приходится читать каждую строку.
 */
.vidy{display:flex;gap:2px;padding:2px;border-radius:999px;border:1px solid var(--chip-line)}
.vidy .vid{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:999px;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.vidy .vid:hover{color:var(--ink)}
.vidy .vid.on{background:var(--seg-on);color:var(--ink)}

.doska{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);
  gap:var(--s3);align-items:start;overflow-x:auto;padding-bottom:var(--s4);
  scrollbar-width:thin}
.stolb{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-m);
  background:var(--pane);border:1px solid var(--chip-line)}
.stolb-h{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--hair)}
.stolb-h b{font-size:12.5px;font-weight:640}
.stolb-h span{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
/* Цвет здесь — усилитель, а не носитель: этап назван словом в шапке столбца.
   Помечены только две колонки, где нужно действие: деньги и уход. */
.stolb.kupil .stolb-h{box-shadow:inset 0 2px 0 var(--ok-ink)}
.stolb.ostyl .stolb-h{box-shadow:inset 0 2px 0 var(--alarm-ink)}
.stolb-t{display:flex;flex-direction:column;gap:6px;padding:8px;min-height:60px}
.stolb-pusto{margin:auto;font-size:11.5px;color:var(--muted)}

.kart{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:var(--r-s);
  border:1px solid var(--chip-line);background:var(--chip-bg);color:var(--ink);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.kart:hover{border-color:var(--open-line);transform:translateY(-1px)}
.kart b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kart i{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.k-niz{display:flex;align-items:center;gap:8px;margin-top:6px}
.k-prog{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.k-kogda{margin-left:auto;font-size:11px;color:var(--muted)}
/* Долг человека виден прямо на карточке: заявку не должно приходиться искать,
   открывая каждого по очереди. */
.k-dolg{margin-top:6px;font-size:11px;color:var(--alarm-ink);
  background:var(--alarm-bg);border:1px solid var(--alarm-line);border-radius:999px;
  padding:2px 8px;align-self:flex-start}

@media (max-width:900px){
  .doska{grid-auto-columns:minmax(200px,80vw)}
}
@media (prefers-reduced-motion:reduce){ .kart:hover{transform:none} }

/* ── Люди: список колонками ───────────────────────────────────────────
 *
 * Строка отвечает на рабочие вопросы, не открывая человека: что оплатил,
 * сколько прошёл по каждой ступени, чем занят, сколько принёс, когда был.
 * Порядок колонок — порядок этих вопросов.
 */
/* Первая колонка с потолком, а не fr: на широком экране fr раздувал «Человека»
   и растаскивал остальные колонки к правому краю. Всё жмётся влево. */
/* ── Заголовки групп меню ──────────────────────────────────────────────
   Четырнадцать пунктов подряд читаются как стена. Имя группы даёт глазу
   опору, а редкая «Программа» ещё и складывается. В узком меню (одни
   значки) заголовки прячем: подписывать нечего. */
.aside .a-gr{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;
  margin:14px 0 2px;padding:4px 12px;border:0;background:none;text-align:left;
  font:700 10.5px/1.3 Montserrat,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  color:var(--taupe)}
.aside .a-gr.skl{cursor:pointer;border-radius:10px;padding-top:6px;padding-bottom:6px}
.aside .a-gr.skl:hover{background:var(--hover-bg,rgba(255,255,255,.05));color:var(--ink2)}
.aside .a-gr .ch{margin-left:auto;transition:transform var(--dur) var(--ease)}
.aside .a-gr.zakryta .ch{transform:rotate(-90deg)}
.aside .a-gr-body{display:flex;flex-direction:column;gap:2px}
.aside .a-gr-body.spryatan{display:none}
.ashell.uzko .aside .a-gr{display:none}

.plist-h,.plist .pline{display:grid;
  /* Колонка этапа шире прочих: в ней лежит чип с фразой вроде «Изучает
     бесплатные уроки», и в узкой колонке он налезал на LTV. */
  grid-template-columns:minmax(220px,400px) 120px 156px 200px 96px 74px 86px;
  gap:var(--s4);align-items:center;justify-content:start}
.plist-h{padding:0 16px 8px;font-size:10.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.plist .pline{padding:11px 16px;border-radius:var(--r-s);border:1px solid var(--chip-line);
  background:var(--pane);cursor:pointer;
  transition:border-color var(--dur) var(--ease)}
.plist .pline:hover{border-color:var(--open-line)}
.plist .who b{display:block;font-size:13.5px;font-weight:620;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.plist .who i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* ⚠️ min-width:0 обязателен: элемент сетки по умолчанию не сжимается уже
   своего содержимого, и длинный тариф вылезал поверх соседней колонки. */
.c-tarif{font-size:11.5px;color:var(--muted);min-width:0;line-height:1.35}
.c-tarif span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Оплаченный тариф — не то же самое, что открытая ступень: подарок и продажа
   не должны выглядеть одинаково. */
.c-tarif.kuplen{color:var(--ok-ink);font-weight:600}

.c-prog{display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}
.c-prog .pr{display:flex;align-items:center;gap:6px}
.c-prog .pr i{font-style:normal;font-size:10px;color:var(--muted);width:56px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-prog .pr-bar{flex:1;height:4px;border-radius:2px;background:var(--track);overflow:hidden}
.c-prog .pr-bar i{display:block;height:100%;width:0;background:var(--blue)}
.c-prog .pr b{font-family:var(--mono);font-size:10px;color:var(--ink2);font-weight:500}

.c-sprosil{font-family:var(--mono);font-size:12px;color:var(--ink2)}
/* min-width:0 — чтобы длинный чип сжимался вместе с колонкой, а не выпирал
   из неё: элемент сетки по умолчанию не уже своего содержимого. */
.c-etap{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;
  max-width:100%}
.c-etap .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;
  line-height:24px}
/* Долг стоит НАД этапом: этап описывает, где человек, долг — что от нас ждут. */
.c-etap .dolg{font-size:10.5px;color:var(--muted);border:1px solid var(--chip-line);
  border-radius:999px;padding:1px 8px}
.c-etap .dolg.zhdet{color:var(--alarm-ink);background:var(--alarm-bg);border-color:var(--alarm-line)}
.c-ltv{font-family:var(--mono);font-size:12px;color:var(--muted)}
.c-ltv.est{color:var(--ok-ink);font-weight:600}
.c-byl{font-size:11.5px;color:var(--muted)}

@media (max-width:1280px){
  .plist-h,.plist .pline{grid-template-columns:minmax(180px,1.2fr) 104px 176px 84px 70px}
  .plist-h span:nth-child(3),.plist .pline .c-prog{display:none}
  .plist-h span:nth-child(6),.plist .pline .c-byl{display:none}
}
@media (max-width:900px){
  .plist-h{display:none}
  .plist .pline{grid-template-columns:minmax(0,1fr);gap:8px}
  .plist .pline .c-prog{max-width:280px}
}

/* ── Карточка человека: итоги ─────────────────────────────────────────── */
.ch-itogi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4);
  border:1px solid var(--chip-line);border-radius:var(--r-m);background:var(--pane);
  padding:var(--s5)}
.ch-itogi .it{display:flex;flex-direction:column;gap:2px}
.ch-itogi .it b{font-size:20px;font-weight:640;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.ch-itogi .it i{font-style:normal;font-size:11.5px;color:var(--muted)}
.ch-itogi .it.est b{color:var(--ok-ink)}
.ch-itogi .it.zhdet b{color:var(--alarm-ink)}

.ch-pr{display:flex;align-items:center;gap:var(--s3);padding:7px 0}
.ch-pr + .ch-pr{border-top:1px solid var(--hair)}
.ch-pr i{font-style:normal;font-size:13px;color:var(--ink2);width:150px;flex:none}
.ch-pr .pr-bar{flex:1;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.ch-pr .pr-bar i{display:block;width:0;height:100%;background:var(--blue)}
.ch-pr b{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:500;
  white-space:nowrap}

/* Лог действий человека — закрытая вкладка внизу карточки: нужен изредка,
   а места занимал больше всех остальных блоков вместе. */
.ch-log{padding:0}
.ch-log summary{list-style:none;cursor:pointer;padding:var(--s4) var(--s5);
  font-size:13px;font-weight:650;color:var(--sub);text-transform:uppercase;
  letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.ch-log summary::-webkit-details-marker{display:none}
.ch-log summary::before{content:'';width:0;height:0;flex:none;
  border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform var(--dur) var(--ease)}
.ch-log[open] summary::before{transform:rotate(90deg)}
.ch-log summary:hover{color:var(--ink)}
.ch-log .mini{padding:0 var(--s5) var(--s4)}
@media (prefers-reduced-motion:reduce){ .ch-log summary::before{transition:none} }

/* ── Карточка: вопросы с ответами ─────────────────────────────────────── */
.ch-h{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.ch-h h3{margin:0}
.ch-h .quiet{margin-left:auto;height:28px;padding:0 12px;border-radius:999px;
  border:1px solid var(--chip-line);background:transparent;color:var(--muted);
  font:inherit;font-size:12px;cursor:pointer}
.ch-h .quiet:hover{color:var(--ink);border-color:var(--open-line)}
.ch-razbor{margin:0 0 var(--s4);font-size:13.5px;line-height:1.6;white-space:pre-line;
  color:var(--ink2);border-left:2px solid var(--blue);padding-left:var(--s3)}

.ch-vopros{border-top:1px solid var(--hair)}
.ch-vopros summary{display:flex;align-items:baseline;gap:var(--s3);padding:9px 0;
  cursor:pointer;list-style:none;font-size:13.5px;color:var(--ink)}
.ch-vopros summary::-webkit-details-marker{display:none}
.ch-vopros summary span{flex:1;min-width:0}
.ch-vopros summary i{flex:none;font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--muted)}
.ch-vopros[open] summary{color:var(--blue)}
/* Ответ — с отступом и тише вопроса: читают его вторым и не всегда. */
.ch-otvet{margin:0 0 12px;padding:10px 14px;border-radius:var(--r-s);
  background:var(--chip-bg);border:1px solid var(--chip-line);
  font-size:13px;line-height:1.6;color:var(--ink2);white-space:pre-line}
.ch-otvet.net{color:var(--muted);font-style:italic}

/* ── Люди: заявки формата «Для бизнеса» ───────────────────────────────────
 *
 * Заявку кладёт телеграм-бот, и учётки у компании может не быть вовсе — тогда
 * положить её в таблицу участников некуда. Такие висят над списком: заявка не
 * должна теряться только потому, что человек ещё не заходил в кабинет.
 */
.zb-net{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s4)}
.zb-net h3{margin:0;font-size:13px;font-weight:650;color:var(--sub);
  text-transform:uppercase;letter-spacing:.06em}
.zb-kart{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s3) var(--s4);border-radius:var(--r-s);
  border:1px solid var(--chip-line);background:var(--pane)}
/* Новую заявку видно с порога: она и есть то, ради чего сюда смотрят. */
.zb-kart.nov{border-color:var(--alarm-line);background:var(--alarm-bg)}
.zb-kto{flex:1 1 240px;min-width:0}
.zb-kto b{display:block;font-size:14px;font-weight:650}
.zb-kto i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.zb-task{flex:2 1 260px;min-width:0;margin:0;font-size:13px;color:var(--ink2)}

/* Три состояния подряд — сегмент, а не три отдельные кнопки: выбор один, и
   рядом стоящие «кнопки» иначе читаются как три разных действия. */
.zb-state{flex:0 0 auto;display:flex;gap:2px;padding:2px;border-radius:999px;
  border:1px solid var(--chip-line)}
.zb-st{height:28px;padding:0 12px;border-radius:999px;border:0;background:transparent;
  color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.zb-st:hover:not(.on){color:var(--ink)}
.zb-st.on{background:var(--seg-on);color:var(--ink);font-weight:640;cursor:default}
.zb-st:disabled{opacity:.5;cursor:default}

/* ── Заявка в карточке человека ───────────────────────────────────────── */
.zb-when{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.zb-blok .facts{margin-bottom:var(--s4)}
/* Задача — во всю ширину: в колонке на 190 пикселей живой текст превращается
   в лесенку из двух слов. */
.zb-blok .zb-zadacha{grid-column:1/-1;font-size:13.5px;line-height:1.55}
.zb-blok .zb-zadacha span{display:block;font-size:11.5px;color:var(--sub);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.zb-niz{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
/* ⛔ Обводки на самом поле нет: подсвечивается рамка короба (.box:focus-within).
   Рамка на textarea внутри овала рисовалась бы второй рамкой поверх первой. */
.zb-note{flex:1 1 280px;display:flex;flex-direction:column;gap:4px;padding:9px 14px}
.zb-note > span{font-size:11.5px;color:var(--sub);text-transform:uppercase;
  letter-spacing:.06em}
.zb-note textarea{border:0;background:transparent;color:var(--ink);font:inherit;
  font-size:13.5px;line-height:1.5;padding:0;min-height:38px;resize:vertical}
.zb-note textarea::placeholder{color:var(--muted);opacity:1}

/* ── Карточка заявки в разделе «Заявки» ────────────────────────────────
   Тот же вид, что над списком людей, плюс заметка во всю ширину: у заявки с
   сайта учётки нет, и записать по ней больше некуда. */
.zb-titul{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zb-titul b{font-size:14px;font-weight:650}
.zb-polnaya{align-items:flex-start}
.zb-polnaya .zb-note{flex:1 1 100%;margin-top:2px}

@media (max-width:760px){
  .zb-kart{align-items:flex-start}
  .zb-state{width:100%;justify-content:space-between}
}