/* ИстСайд CRM — дизайн-система Botamin-дашборда (тестовое задание/dashboard):
   Manrope, белый сайдбар + серое поле, карточки r20, синий #2F6BFF,
   мягкие пилюли со статус-точкой, drawer справа. 3 страницы: Обзор · Лиды · Путь. */

@font-face { font-family: 'Manrope'; src: url('fonts/Manrope.ttf') format('truetype');
  font-weight: 100 900; font-display: swap; }

:root {
  --app: #FFFFFF; --main: #F6F7F9; --card: #FFFFFF;
  --ink: #11151F; --ink-2: #697086; --ink-3: #A6ABB8;
  --line: #EDEEF2; --line-2: #E3E5EB; --fill: #F5F6F9;
  /* Провод дерева. Темнее обычных разделителей: на 1px светло-серая ветка
     читается как случайный штрих, а не как связь. Общий для дерева продуктов
     и дерева ролей в Академии — третья копия значения разъехалась бы. */
  --wire: #C9CEDA;
  --blue: #2F6BFF; --blue-d: #1E50E6; --navy: #1C2B4A; --blue-tint: #EAF0FF; --navy-soft: #E9ECF4;
  --black: #15161C;
  --green: #18A957; --green-ink: #0E7C3F; --green-soft: #E4F6EC;
  --red: #E5484D; --red-ink: #C42A2F; --red-soft: #FCEBEC;
  --amber: #E0922F; --amber-ink: #9A5B12; --amber-soft: #FBF0DD;
  /* legacy aliases — coral теперь чистый red */
  --coral: #E5484D; --coral-soft: #FCEBEC;
  --r-xl: 20px; --r-lg: 14px; --r-pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #E5E7EC; color: var(--ink);
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 14px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum';
}
::selection { background: var(--blue); color: #fff; }
svg { display: block; flex: none; }
.num { font-feature-settings: 'tnum'; letter-spacing: -.02em; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

.app { display: flex; height: 100vh; overflow: hidden; padding: 10px; gap: 10px; }

/* ════ САЙДБАР ════ */
.side { flex: 0 0 248px; overflow-y: auto; background: var(--app);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 22px 18px; display: flex; flex-direction: column; }
.side::-webkit-scrollbar { width: 0; }
.logo { display: flex; align-items: center; gap: 11px; padding: 0 6px 24px; }
.logo .mk { width: 32px; height: 32px; border-radius: 9px; background: var(--blue);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -.03em; }
.logo .nm { font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.logo .nm small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); margin-top: 1px; }
/* Переключатель рабочих пространств: «Клиенты» / «Самозанятые» / «Финансы». Тот же
   системный рецепт сегмента, что .pay-seg и .due-seg (серая капсула, белая активная
   плашка), только во всю ширину колонки — это не новый контрол, а его пятый экземпляр.
   С третьим пространством равные доли ломают «Самозанятые» на две строки, поэтому
   вкладка занимает ровно свое слово: ширина по содержимому, строка одна. */
/* С ЧЕТВЕРТЫМ пространством («Моя работа») четыре слова в одну строку уже не влезают в
   колонку 248px, поэтому строк может быть две: перенос честнее сжатого до нечитаемости
   шрифта и вечного «Самозан…». */
/* Перенос по содержимому давал рваную плашку: «Клиенты» и «Самозанятые» в первой
   строке, «Финансы» огрызком во второй (Павел 24.09.2026, три пространства). Сетка в
   две колонки держит кнопки одного размера, а нечетная последняя занимает строку
   целиком — плашка остается плашкой при двух, трех и четырех пространствах. */
.spaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  padding: 4px; margin: 0 0 16px; border-radius: 11px; background: var(--fill); }
.spaces button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.spaces button { min-width: 0; padding: 7px 6px; border-radius: 8px; text-align: center;
  font: 600 11px 'Manrope', sans-serif; color: var(--ink-3); transition: .15s;
  letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; position: relative; }
.spaces button:hover { color: var(--ink); }
.spaces button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(15,19,32,.1); }
/* Точка «вас ждет работа» на кнопке своего пространства: пока человек ведет клиентов,
   он туда не смотрит, а задание и акт на подпись ждать не должны. Число тут не нужно —
   важно само «есть или нет», а сколько именно, видно внутри. */
.sp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral);
  display: inline-block; vertical-align: middle; margin-left: 5px; }

.side-sub { padding: 0 6px 18px; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.navi.mt { margin-top: 6px; }
.navi { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: .15s;
  width: 100%; text-align: left; }
.navi svg { color: var(--ink-3); }
.navi:hover { background: var(--fill); color: var(--ink); }
.navi.on { background: var(--blue); color: #fff; }
.navi.on svg { color: #fff; }
.navi .bdg { margin-left: auto; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--coral); border-radius: var(--r-pill); padding: 2px 8px; min-width: 21px; text-align: center; }
.navi.on .bdg { background: rgba(255,255,255,.22); }
.navi .cnt { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.navi.on .cnt { color: rgba(255,255,255,.8); }
.navlab { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); padding: 16px 8px 8px; }
.promo { margin-top: auto; background: var(--blue); border-radius: var(--r-xl); padding: 18px;
  color: #fff; position: relative; overflow: hidden; cursor: pointer; }
.promo::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: rgba(255,255,255,.12); }
.promo .pt { font-size: 15px; font-weight: 600; line-height: 1.25; position: relative; }
.promo .pp { font-size: 12px; color: rgba(255,255,255,.82); margin-top: 7px; position: relative; line-height: 1.5; }
.promo .pb { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; background: #fff;
  color: var(--blue-d); font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--r-pill); position: relative; }

/* ════ MAIN ════ */
.main { flex: 1; min-width: 0; background: var(--main); display: flex; flex-direction: column;
  overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-xl); }
.main::-webkit-scrollbar { width: 0; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 14px 28px; background: var(--app);
  border-bottom: 1px solid var(--line); border-radius: var(--r-xl) var(--r-xl) 0 0; min-height: 67px; }
.tabs { display: flex; gap: 4px; background: var(--fill); border-radius: var(--r-pill); padding: 4px; }
.tab { padding: 9px 18px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; transition: .15s; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { background: var(--blue); color: #fff; }
.tab .n { opacity: .6; margin-left: 5px; font-size: 12px; }
/* Правая часть шапки не сжимается: в финансах вкладки ведомостей длинные и раньше
   рвали имя пользователя на три строки. Сжимается и скроллится список вкладок. */
.tbr { display: flex; align-items: center; gap: 11px; flex: none; }
.topbar > .tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar > .tabs::-webkit-scrollbar { height: 0; }
.icocirc { width: 38px; height: 38px; border-radius: 50%; background: var(--fill);
  display: grid; place-items: center; color: var(--ink-2); cursor: pointer; transition: .15s; }
.icocirc:hover { background: #ECEEF1; }
.profile { display: flex; align-items: center; gap: 11px; background: var(--app);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px 5px 5px;
  cursor: pointer; transition: .15s; }
.profile:hover { background: var(--fill); border-color: var(--line-2); }
.profile.open { background: var(--fill); border-color: var(--line-2); }
.profile .av { width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #2F6BFF, #1C2B4A); display: grid; place-items: center;
  color: #fff; font-weight: 600; font-size: 12.5px; flex: none; }
.profile .pinfo { text-align: left; }
.profile .pn { font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.profile .pe { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.profile .pchev { color: var(--ink-3); display: flex; transition: transform .2s; }
.profile.open .pchev { transform: rotate(180deg); }

/* меню профиля */
#smenu.profmenu { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
#smenu.profmenu .pm-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
#smenu.profmenu .pm-head .av { width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #2F6BFF, #1C2B4A); display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 13px; }
#smenu.profmenu .pm-n { font-size: 14px; font-weight: 600; }
#smenu.profmenu .pm-r { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
#smenu.profmenu button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 11px;
  border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
#smenu.profmenu button svg { color: var(--ink-3); }
#smenu.profmenu button:hover { background: var(--fill); }
#smenu.profmenu button:hover svg { color: var(--blue); }

.content { padding: 26px 32px 48px; }
.chead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 0 2px 26px; flex-wrap: wrap; }
.chead:empty { padding: 0; }
.chead h2 { font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.verdict { font-size: 14px; color: var(--ink-2); margin-top: 9px; display: flex; align-items: flex-start;
  gap: 10px; line-height: 1.55; max-width: 92ch; }
.verdict .vspark { width: 24px; height: 24px; border-radius: 7px; background: var(--blue-tint);
  display: grid; place-items: center; color: var(--blue); flex: none; margin-top: 1px; }
.verdict b { color: var(--ink); font-weight: 600; }
.hactions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.freshchip { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); background: var(--fill); border-radius: var(--r-pill); padding: 9px 14px; }
.freshchip .fok { width: 18px; height: 18px; border-radius: 50%; background: var(--green-soft);
  display: grid; place-items: center; color: var(--green); }

/* ════ контролы (единый стиль) ════ */
/* поиск с иконкой */
.searchwrap { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 180px; max-width: 380px;
  background: var(--fill); border: 1px solid transparent; border-radius: var(--r-pill); padding: 0 16px; transition: .15s; }
.searchwrap svg { color: var(--ink-3); flex: none; }
.searchwrap:focus-within { background: #fff; border-color: #CFE0FF; box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.searchwrap:focus-within svg { color: var(--blue); }
.search { font: 500 13.5px 'Manrope', sans-serif; border: 0; background: none; color: var(--ink);
  padding: 11px 0; outline: none; flex: 1; min-width: 0; }
.search::placeholder { color: var(--ink-3); }
.search::-webkit-search-cancel-button { -webkit-appearance: none; }

/* кастомный дропдаун-триггер */
.cdd { display: inline-flex; align-items: center; gap: 8px; font: 600 13px 'Manrope', sans-serif; color: var(--ink-2);
  background: var(--fill); border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 10px 14px; cursor: pointer; transition: .15s; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.cdd:hover { color: var(--ink); background: #EDEFF3; }
.cdd .cdd-ch { color: var(--ink-3); transition: transform .2s; }
.cdd.open .cdd-ch { transform: rotate(180deg); }
.cdd.active { background: var(--blue-tint); color: var(--blue); }
.cdd.active .cdd-ch { color: var(--blue); }
.cdd.attn { color: var(--red-ink); }
.cdd.attn svg:first-child { color: var(--red); }
.cdd.attn .n { font-weight: 700; background: var(--red-soft); border-radius: var(--r-pill); padding: 1px 8px; font-size: 11.5px; }
.cdd.attn:hover { background: var(--red-soft); }
.cdd.attn.active { background: var(--red); color: #fff; }
.cdd.attn.active svg:first-child, .cdd.attn.active .n { color: #fff; background: rgba(255,255,255,.2); }

/* меню дропдауна (тот же контейнер, что #smenu) */
#smenu.ddmenu button { justify-content: flex-start; }
#smenu.ddmenu button svg { margin-left: auto; color: var(--blue); }

/* выбор ведомости: год -> месяц (тихие фильтры) + ведомость со стрелками (якорь).
   Стрелки — общий контрол .icobtn (не свой рецепт кнопки), бейдж — семья .sev. */
.fin-perpick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fin-perpick .fpk-filters, .fin-perpick .fpk-main { display: flex; align-items: center; gap: 8px; }
.fpk-year { font: 700 13px 'Manrope', sans-serif; color: var(--ink-3); padding: 0 2px; }
.fin-perpick .icobtn { font: 600 18px 'Manrope', sans-serif; line-height: 1; }
.icobtn:disabled { opacity: .35; cursor: default; }
.icobtn:disabled:hover { color: var(--ink-2); border-color: var(--line-2); }

/* переключатель вида (таблица/канбан) — иконки */
.vseg { display: inline-flex; gap: 3px; background: var(--fill); border-radius: var(--r-pill); padding: 4px; margin-left: auto; }
.vseg button { width: 36px; height: 32px; display: grid; place-items: center;
  border-radius: var(--r-pill); color: var(--ink-3); transition: .15s; }
.vseg button:hover { color: var(--ink); }
.vseg button svg { width: 15px; height: 15px; }
.vseg button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(15,19,32,.1); }

/* ════ контейнер списка «Клиенты» (тулбар + тело в одной карточке) ════ */
.listcard { overflow: hidden; }
.list-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px;
  border-bottom: 1px solid var(--line); }
.list-body { position: relative; }
.list-body .kb-wrap { padding: 18px 16px; }

/* кнопка очистки внутри поля поиска */
.searchwrap .s-clear { width: 22px; height: 22px; border-radius: 50%; flex: none; display: none;
  place-items: center; color: var(--ink-3); transition: .15s; }
.searchwrap .s-clear svg { width: 12px; height: 12px; }
.searchwrap.has-val .s-clear { display: grid; }
.searchwrap .s-clear:hover { color: var(--ink); background: #E7E9EE; }

/* счётчик результатов в тулбаре */
.list-count { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  white-space: nowrap; padding-right: 2px; }
.list-count b { color: var(--ink-2); font-weight: 700; }
.list-tools .vseg { margin-left: 12px; }

/* второй ряд тулбара — быстрые срезы (чипы) */
.list-quick { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--line); }
.qchip { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px 'Manrope', sans-serif;
  color: var(--ink-2); background: var(--fill); border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 7px 13px; cursor: pointer; transition: .15s; white-space: nowrap; }
.qchip svg { width: 13px; height: 13px; color: var(--ink-3); }
.qchip:hover { color: var(--ink); background: #EDEFF3; }
.qchip .qn { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.qchip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.qchip.on svg, .qchip.on .qn { color: rgba(255,255,255,.75); }
.qchip.hot.on { background: var(--red); border-color: var(--red); }
.qchip.hot .qn { color: var(--red-ink); }
.qchip.hot.on .qn { color: rgba(255,255,255,.85); }
/* «Убранные» — не еще одно состояние в ряду, а выход в другой набор людей. Поэтому
   отбит воздухом вправо и тише соседей: смотреть туда нужно редко. */
.q-arch { margin-left: auto; background: transparent; color: var(--ink-3); }
.q-arch:hover { background: var(--fill); }

/* премиальные пустые состояния списка */
.list-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 64px 24px; }
.list-empty .le-ic { width: 52px; height: 52px; border-radius: 15px; background: var(--fill);
  display: grid; place-items: center; color: var(--ink-3); margin-bottom: 16px; }
.list-empty .le-t { font-size: 15px; font-weight: 600; color: var(--ink); }
.list-empty .le-s { font-size: 13px; color: var(--ink-2); margin-top: 6px; max-width: 340px; line-height: 1.5; }
.list-empty .le-btn { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px 'Manrope', sans-serif; color: var(--blue); background: var(--blue-tint);
  border-radius: var(--r-pill); padding: 9px 16px; transition: .15s; }
.list-empty .le-btn:hover { background: #DBE6FF; }

/* заметка над списком: свернутые пустые заходы — тихая строка, не строка-лид */
.list-foot { display: flex; align-items: center; gap: 10px; padding: 13px 24px;
  border-bottom: 1px solid var(--line); background: var(--fill); }
.list-foot .lf-ic { width: 24px; height: 24px; border-radius: 7px; background: var(--card);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); flex: none; }
.list-foot .lf-t { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.list-foot .lf-t b { color: var(--ink); font-weight: 700; }
.list-foot .lf-btn { margin-left: auto; flex: none; font: 600 12.5px 'Manrope', sans-serif;
  color: var(--blue); background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); padding: 7px 14px; transition: .15s var(--ease); }
.list-foot .lf-btn:hover { background: var(--blue-tint); border-color: var(--blue-tint); }
@media (max-width: 720px) {
  /* иконка тут декоративная: на узком экране она уезжала на свою строку и рвала блок */
  .list-foot { flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px 16px; }
  .list-foot .lf-ic { display: none; }
  .list-foot .lf-btn { margin-left: 0; }
}

/* скелетон таблицы списка (использует общий .shim от дашборда) */
.sk-list { padding: 0; }
.sk-row { display: grid; align-items: center; gap: 16px; padding: 0 24px; height: 58px;
  border-bottom: 1px solid var(--line); grid-template-columns: 138px 1.4fr 130px 170px 110px 30px; }
.sk-row:last-child { border-bottom: none; }
.sk-cell { height: 12px; }
.sk-cell.pill { height: 26px; width: 96px; border-radius: 8px; }
.sk-cell.w60 { width: 60%; } .sk-cell.w40 { width: 40%; } .sk-cell.w80 { width: 80%; }

/* сетка и карточки — align stretch чтобы парные карточки были равной высоты (без дыр) */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: stretch; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); }
.grid > .card { display: flex; flex-direction: column; }
.sp7 { grid-column: span 7; } .sp5 { grid-column: span 5; } .sp12 { grid-column: 1 / span 12; }
.sp6 { grid-column: span 6; }

.sec-head { display: flex; align-items: center; gap: 11px; }
/* Шапка секции внутри карточки с безотступным телом (лестница, разбивка):
   паддинг несет шапка, а не карточка — тело ложится от края до края. */
.sec-head.pad { padding: 20px 24px 16px; }
.sec-head .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--blue-tint);
  display: grid; place-items: center; color: var(--blue); flex: none; }
.sec-head .ic.warn { background: var(--red-soft); color: var(--red); }
.sec-head .ic.gold { background: var(--amber-soft); color: var(--amber-ink); }
.sec-head .t { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.sec-head .s { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.sec-head .cnt { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--fill); border-radius: var(--r-pill); padding: 8px 14px; white-space: nowrap; }
.sec-head > .bp { margin-left: auto; flex: none; }
/* чип-действие перед основной кнопкой: вправо уезжает он, кнопка держится рядом */
.sec-head > .qchip { margin-left: auto; flex: none; }
.sec-head > .qchip + .bp { margin-left: 8px; }
.sec-head .lnk { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--blue); }
.sec-head .lnk:hover { text-decoration: underline; }

/* ════ KPI ════ */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px 22px; }
.kpi .kl { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kpi .kl .sp { width: 25px; height: 25px; border-radius: 7px; background: var(--blue-tint);
  display: grid; place-items: center; color: var(--blue); }
.kpi .kn { font-size: 32px; font-weight: 600; letter-spacing: -.03em; margin-top: 12px;
  display: flex; align-items: baseline; gap: 9px; }
.kpi .kn small { font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.kpi .ks { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.kpi .kd { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  border-radius: var(--r-pill); padding: 4px 10px; }
.kpi .kd.bad { color: var(--coral); background: var(--coral-soft); }
.kpi .kd.good { color: var(--green); background: var(--green-soft); }
.kpi .kd.mid { color: var(--amber-ink); background: var(--amber-soft); }
.kpi.hot .kn { color: var(--coral); }
.kpi.blue .kn { color: var(--blue); }
.kpi.green .kn { color: var(--green); }

/* ── метрика-полоса (спокойные KPI одной картой) ── */
.statbar { display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; }
/* Пятая плитка появляется там, где к четырем счетчикам добавляются деньги (расход на
   рекламу в маркетинге). Отдельным модификатором, а не auto-fit: в остальных местах
   плиток ровно четыре, и «умная» сетка сломала бы их на промежуточных ширинах. */
.statbar.five { grid-template-columns: repeat(5, 1fr); }
.statbar.five .stat { padding: 16px 18px; }
/* Шестая — «страницу видели» из Метрики на экране запусков. Появляется не всегда:
   Метрика недоступна или счётчик не задан — плиток снова пять. */
.statbar.six { grid-template-columns: repeat(6, 1fr); }
.statbar.six .stat { padding: 16px 14px; }
.stat { min-width: 0; text-align: left; padding: 16px 22px; position: relative; transition: background .12s; border-radius: 14px; }
.stat + .stat::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--line); }
.stat.go { cursor: pointer; }
.stat.go:hover { background: var(--fill); }
.stat.go:hover::before, .stat.go:hover + .stat::before { opacity: 0; }
.stat .sl { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2);
  letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-3); }
.stat .sdot.blue { background: var(--blue); }
.stat .sdot.navy { background: var(--navy); }
.stat .sdot.green { background: var(--green); }
.stat .sdot.coral, .stat .sdot.red { background: var(--red); }
.stat .sdot.amber { background: var(--amber); }
.stat .sv { font-size: 38px; font-weight: 700; letter-spacing: -.04em; color: var(--ink); margin-top: 14px; line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat.go:hover .sv { color: var(--blue); }
.stat .sd { margin-top: 13px; min-height: 24px; display: flex; }
.stat .sd .smut { font-size: 12.5px; color: var(--ink-3); }
.stat .kd { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); padding: 4px 11px; }
.stat .kd.bad { color: var(--red-ink); background: var(--red-soft); }
.stat .kd.good { color: var(--green-ink); background: var(--green-soft); }
.stat .kd.mid { color: var(--ink-2); background: var(--fill); }

/* ════ ДАШБОРД — вертикальный стек с единым ритмом ════ */
.dash { display: flex; flex-direction: column; gap: 20px; }

/* период-сегмент в топбаре (Обзор) */
.dperiod { display: inline-flex; gap: 3px; background: var(--fill); border-radius: var(--r-pill); padding: 4px; }
.dperiod button { padding: 8px 15px; border-radius: var(--r-pill); font: 600 12.5px 'Manrope', sans-serif;
  color: var(--ink-2); transition: .14s; white-space: nowrap; }
.dperiod button:hover { color: var(--ink); }
.dperiod button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(15,19,32,.12); }
.dperiod .dp-custom { display: inline-flex; align-items: center; gap: 6px; }
.dperiod .dp-custom svg { opacity: .85; }
/* Дни эфира в шапке «Путь человека по запуску». Интенсив идёт двумя вечерами, и
   переключатель живёт прямо в шапке карточки. На узком экране он уходит на свою
   строку во всю ширину: иначе второй день обрезается краем карточки (390px). */
.sec-head.wrap { flex-wrap: wrap; }
.lday-seg { margin-left: auto; flex: none; }
@media (max-width: 720px) {
  .lday-seg { margin-left: 0; width: 100%; }
  .lday-seg button { flex: 1; min-width: 0; padding: 8px 10px; }
}
.dp-pop { padding: 14px; }
.dp-pop .dp-ttl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.dp-pop .dp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dp-pop .dp-row label { width: 22px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.dp-pop .dp-row input { flex: 1; font: 500 13px 'Manrope', sans-serif; color: var(--ink); background: var(--fill);
  border: 1px solid transparent; border-radius: 9px; padding: 9px 11px; outline: none; }
.dp-pop .dp-row input:focus { background: #fff; border-color: #DCE7FF; }
.dp-pop .dp-acts { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dp-pop .dp-reset { font: 600 12.5px 'Manrope', sans-serif; color: var(--ink-3); padding: 8px 10px; border-radius: 8px; }
.dp-pop .dp-reset:hover { color: var(--coral); }

/* ════ БЛОК ЗАДАЧ (отдельная карточка) ════ */
.tasks-card .tk-group + .tk-group { border-top: 1px solid var(--line); }
.tk-glabel { display: flex; align-items: center; gap: 9px; padding: 14px 24px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tk-glabel .gn { font-size: 11px; font-weight: 700; color: var(--ink-2);
  background: var(--fill); border-radius: var(--r-pill); padding: 2px 9px; letter-spacing: 0; }
.tk-glabel.over { color: var(--red-ink); }
.tk-glabel.over .gn { color: var(--red-ink); background: var(--red-soft); }
.tk-row { display: grid; grid-template-columns: minmax(0,1fr) auto 28px; gap: 14px; align-items: center;
  padding: 0 24px; height: 54px; cursor: pointer; transition: .14s; position: relative; }
.tk-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0; transition: .14s; }
.tk-row.over::before { background: var(--red); opacity: 1; }
.tk-row:hover { background: #FBFBFC; }
.tk-row:hover::before { opacity: 1; background: var(--blue); }
.tk-row.over:hover::before { background: var(--red); }
.tk-main { min-width: 0; }
.tk-txt { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tk-who { font-size: 12px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-due { font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: right; white-space: nowrap; }
.tk-due.over { color: var(--red-ink); }
.tk-due.soon { color: var(--ink-3); font-weight: 500; }
.tk-go { width: 30px; height: 30px; border-radius: 9px; background: var(--fill);
  display: grid; place-items: center; color: var(--ink-3); transition: .15s; flex: none; }
.tk-row:hover .tk-go { background: var(--blue); color: #fff; }
.tasks-empty { display: flex; align-items: center; gap: 12px; padding: 26px 24px; color: var(--ink-2); font-size: 13.5px; }
.tasks-empty .te-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--green-soft);
  color: var(--green); display: grid; place-items: center; flex: none; }

/* ════ ШИММЕР (единый премиум-лоадер) ════ */
.shim { position: relative; overflow: hidden; background: var(--fill); border-radius: 8px; }
.shim::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85) 50%, transparent);
  animation: shimmer 1.5s var(--ease) infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .shim::after { animation: none; }
  .gl-ring { transition: none; }
}

/* dashboard-скелетон: повторяет layout (полоса KPI + карточки) */
.sk-statbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); }
.sk-stat { padding: 18px 22px; border-left: 1px solid var(--line); }
.sk-stat:first-child { border-left: 0; }
.sk-stat .shim { height: 12px; }
.sk-stat .shim.l { width: 60%; }
.sk-stat .shim.b { height: 34px; width: 46%; margin-top: 16px; border-radius: 10px; }
.sk-stat .shim.s { width: 38%; margin-top: 16px; }
.sk-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 26px; }
.sk-card .sk-h { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.sk-card .sk-h .shim.ic { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.sk-card .sk-h .shim.tt { height: 14px; width: 160px; }
.sk-line { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.sk-line:first-of-type { border-top: 0; }
.sk-line .shim.a { height: 12px; flex: 1; }
.sk-line .shim.c { height: 12px; width: 44px; }

.sp8 { grid-column: span 8; } .sp4 { grid-column: span 4; }
/* колонка-стек: грид-чайлд тянется по высоте ряда, карточка внутри заполняет его */
.grid > .vstack { display: flex; flex-direction: column; gap: 20px; }
.grid > .vstack > .card { flex: 1; display: flex; flex-direction: column; }
.clickcard { cursor: pointer; transition: border-color .14s, box-shadow .14s; }
.clickcard:hover { border-color: #C9D7FB; box-shadow: 0 6px 20px -10px rgba(47,107,255,.25); }
/* «Где теряем людей» — тело центрируется, чтобы заполнить растянутую карточку */
.lose-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.lose-big { display: flex; align-items: baseline; gap: 12px; }
.lose-big b { font-size: 46px; font-weight: 700; letter-spacing: -.045em; color: var(--red); line-height: 1; }
.lose-big span { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.lose-sub { font-size: 13px; color: var(--ink-2); margin-top: 13px; line-height: 1.5; }

/* ════ строки-тикеты (Сегодня, лиды, дроп-лист) ════ */
.trow { display: grid; align-items: center; gap: 16px; padding: 0 24px; height: 58px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: .14s; position: relative; }
.trow:last-child { border-bottom: none; }
.trow:hover { background: #FBFBFC; }
.trow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0; transition: .14s; }
.trow.r-crit::before { background: var(--coral); }
.trow.r-high::before { background: var(--amber); }
.trow.r-mid::before { background: #AEB4C0; }
.trow:hover::before { opacity: 1; }
.trow.thead { height: 38px; cursor: default; background: #FBFBFC; }
.trow.thead::before { display: none; }
.trow.thead:hover { background: #FBFBFC; }
.th { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.th.r { text-align: right; }
.th.sortable { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px;
  margin: -4px -8px; border-radius: 7px; transition: .12s; }
.th.sortable:hover { color: var(--ink-2); background: rgba(15,19,32,.03); }
.th.sortable.act { color: var(--blue); }
.th .dir { display: inline-flex; color: var(--blue); transition: transform .18s var(--ease); }
.th .dir.up { transform: rotate(180deg); }
.th.r.sortable { justify-content: flex-end; }

/* ════ СТАТУС-ПИЛЮЛЯ (.sev) — единый премиальный стиль, БЕЗ точек-индикаторов ════ */
.sev { display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: -.005em; line-height: 1;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap;
  color: var(--ink-2); background: var(--fill); }
.sev .d { display: none; }
/* Состояния, не привязанные к воронке продаж (подключение мессенджера и т.п.).
   Формула та же: -ink текстом, -soft заливкой. */
.sev.n-ok   { color: var(--green-ink); background: var(--green-soft); gap: 5px; }
.sev.n-wait { color: var(--amber-ink); background: var(--amber-soft); }
.sev.n-off  { color: var(--ink-3);     background: var(--fill); }
.sev.s-hot           { color: var(--red-ink);   background: var(--red-soft); }
.sev.s-new           { color: var(--ink-2);     background: var(--fill); }
.sev.s-contacted     { color: var(--amber-ink); background: var(--amber-soft); }
.sev.s-call_scheduled{ color: var(--blue);      background: var(--blue-tint); }
.sev.s-call_done     { color: var(--navy);      background: var(--blue-tint); }
.sev.s-offer_sent    { color: var(--amber-ink); background: var(--amber-soft); }
.sev.s-client        { color: var(--green-ink); background: var(--green-soft); }
.sev.s-rejected      { color: var(--ink-3);     background: var(--fill); }
.sev.s-wait          { color: var(--amber-ink); background: var(--amber-soft); }
/* статусы задач команды (st-) — своя семья, чтобы не путать со статусами лида.
   Формула та же: -soft фон + -ink текст, насыщенной заливки в чипе не бывает.
   «поставлена» намеренно нейтральная: это норма, а не повод для внимания. */
.sev.st-wait         { color: var(--ink-2);     background: var(--fill); }
.sev.st-doing        { color: var(--blue);      background: var(--blue-tint); }
/* «на приемке» и «заблокирована» — разные вещи: первое ждет постановщика,
   второе стоит вообще. Разводим по прецеденту s-call_scheduled / s-call_done:
   один тинт, разные чернила. Амбер остается блокировке — она про заминку. */
.sev.st-review       { color: var(--navy);      background: var(--blue-tint); }
.sev.st-block        { color: var(--amber-ink); background: var(--amber-soft); }
.sev.st-done         { color: var(--green-ink); background: var(--green-soft); }
.sev.st-return       { color: var(--red-ink);   background: var(--red-soft); }
.sev.st-cancel       { color: var(--ink-3);     background: var(--fill); }
/* «Что нового»: неотправленная запись — та же пара, что у блокировки: она ждет. */
.sev.nw-draft        { color: var(--amber-ink); background: var(--amber-soft); }

.t-cell { min-width: 0; }
.t-ttl { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-ttl.anon { color: var(--ink-3); font-weight: 500; }
.t-ttl .nveo { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); margin-right: 7px; vertical-align: 1px; }
.t-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-contact { font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.t-contact a:hover { text-decoration: underline; }
.t-contact .none { color: var(--ink-3); font-weight: 500; }
.t-when { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; display: flex;
  align-items: center; gap: 6px; justify-content: flex-end; }
.t-when.today { color: var(--blue); font-weight: 600; }
.t-go { width: 30px; height: 30px; border-radius: 9px; background: var(--fill);
  display: grid; place-items: center; color: var(--ink-3); transition: .15s; flex: none; }
.trow:hover .t-go { background: var(--blue); color: #fff; }

/* сетки строк */
.ar-grid { grid-template-columns: 104px 1fr 92px 30px; }
.lr-grid { grid-template-columns: 138px 1.4fr 130px 170px 110px 30px; }
.dl-grid { grid-template-columns: 1.4fr 190px 110px 30px; }
.tsk-grid { grid-template-columns: minmax(0,1.7fr) 178px 150px 116px; }
/* Свои задачи: колонки исполнителя нет — в каждой строке стояло бы свое же имя. */
.tsk-grid.mine { grid-template-columns: minmax(0,1.7fr) 150px 116px; }
/* воронка курса в записи на «Маркетинге»: источник, шаги, деньги */
.cf-grid { grid-template-columns: minmax(0,1.4fr) 74px 92px 106px 84px 116px; }
.cf-grid .num { text-align: right; }
.cf-grid .th:not(:first-child) { text-align: right; }
.cf-note { padding: 14px 24px 16px; border-top: 1px solid var(--line); font-size: 12.5px;
  line-height: 1.45; color: var(--ink-2); }

/* мини-шкала балла */
.score { display: flex; align-items: center; gap: 9px; }
.score b { font-size: 14px; font-weight: 600; width: 24px; text-align: right; }
.strack { flex: 1; max-width: 72px; height: 7px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.strack i { display: block; height: 100%; border-radius: 5px; min-width: 5px;
  transition: width .9s var(--ease); }

.empty { text-align: center; color: var(--ink-2); font-size: 13.5px; padding: 52px 24px; }

/* заглушки будущих разделов */
.stub { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 64px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.stub-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--blue-tint); color: var(--blue);
  display: grid; place-items: center; margin-bottom: 18px; }
.stub-t { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.stub-s { font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 460px; margin-top: 10px; }
.stub-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 12px; font-weight: 600;
  color: var(--amber-ink); background: var(--amber-soft); border-radius: var(--r-pill); padding: 6px 14px; }
.stub-tag svg { color: var(--amber-ink); }

/* команда и роли */
.tm-list { display: flex; flex-direction: column; margin-top: 14px; }
.tm-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line-2); }
.tm-row:first-child { border-top: none; }
.tm-av { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 13px; }
/* 212px — минимум, на котором рядом с длинным логином помещается «нет мессенджера»:
   строка про тишину не должна обрезаться в многоточие, ради нее подстрочник и существует */
.tm-i { flex: 1; min-width: 212px; }
.tm-n { font-size: 14px; font-weight: 600; }
/* подстрочник в одну строку: с переносом строки сотрудников разъезжались по высоте
   и список переставал читаться как список */
.tm-l { font-size: 12px; color: var(--ink-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-sel { flex: none; font: 600 13px 'Manrope', sans-serif; color: var(--ink); background: var(--fill);
  border: 1px solid transparent; border-radius: 10px; padding: 9px 12px; outline: none; cursor: pointer; min-width: 168px; }
.tm-sel:focus { background: #fff; border-color: #DCE7FF; }
/* почта сотрудника прямо в строке: без нее не работает восстановление пароля */
.tm-mail { flex: none; width: 150px; font: 500 12.5px 'Manrope', sans-serif; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 11px;
  transition: .15s var(--ease); }
.tm-mail:hover { border-color: #DCE7FF; }
.tm-mail:focus { background: #fff; border-color: var(--blue); }
.tm-mail.none { background: var(--fill); border-style: dashed; }
.tm-mail::placeholder { color: var(--ink-3); }
/* чужая верхняя учетка: видно, кто это, но править нельзя — тише и без курсора */
.tm-sel:disabled, .tm-mail:disabled { color: var(--ink-3); background: var(--fill);
  border-color: transparent; border-style: solid; cursor: default; }
.sec-head .bp.tm-new { margin-left: auto; }
.sec-head .cnt + .bp.tm-new { margin-left: 14px; }

/* руководитель — отдельной строкой под именем: тихий вторичный контрол, чтобы
   плотный ряд (темы, почта, роль) не выдавливал роль за край карточки. Микролейбл
   11px капсом — норма CRM (design.md); выбранное имя читаемое (--ink), а не бледное */
.tm-mgrline { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.tm-mgrlbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); flex: none; }
.tm-mgr { font: 500 12.5px 'Manrope', sans-serif; color: var(--ink);
  background: transparent; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 7px 11px; outline: none; cursor: pointer; max-width: 260px; }
.tm-mgr:hover { border-color: #DCE7FF; }
.tm-mgr:focus { background: #fff; border-color: var(--blue); }
/* метки у имени. «самозанятый» — нейтральный факт-ярлык (зелёный тут читался бы как
   статус-успех). «вся команда» — переключатель (кнопка): точка-индикатор даёт
   аффорданс тумблера, в состоянии on точка и фон несут акцентный синий */
.tm-tags { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.tm-tag { font: 600 10.5px 'Manrope', sans-serif; letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid transparent; line-height: 1.5; }
.tm-tag.smz { background: var(--fill); color: var(--ink-2); }
button.tm-tag.ft { cursor: pointer; background: var(--fill); color: var(--ink-3); border-color: var(--line-2);
  display: inline-flex; align-items: center; gap: 5px; }
button.tm-tag.ft::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid currentColor; box-sizing: border-box; }
button.tm-tag.ft:hover { border-color: #DCE7FF; color: var(--ink-2); }
.tm-tag.ft.on { background: var(--blue-tint); color: var(--blue-d); border-color: transparent; }
.tm-tag.ft.on::before { background: var(--blue); border-color: var(--blue); }
/* Обучение сотрудника: прошел / учится / не начал. Приемки нет — это статус. */
.tm-tag.gd { display: inline-flex; align-items: center; gap: 4px; }
.tm-tag.gd svg { width: 11px; height: 11px; }
.tm-tag.gd-ok { background: var(--green-soft); color: var(--green-ink); }
.tm-tag.gd-mid { background: var(--amber-soft); color: var(--amber-ink); }
.tm-tag.gd-no { background: var(--fill); color: var(--ink-3); }
/* Сводка обучения над списком: одна тихая строка, не якорь экрана. */
.tm-gd-sum { display: flex; align-items: center; gap: 7px; margin: 14px 0 2px;
  font-size: 12.5px; color: var(--ink-2); }
.tm-gd-sum svg { color: var(--blue); flex: none; }
.tm-gd-sum b { color: var(--ink); }

/* темы уведомлений: за что этот человек отвечает. Чипы, а не селект с галочками —
   раскладка команды должна читаться одним взглядом по всему списку, без раскрытия */
.tm-tp { flex: none; display: inline-flex; gap: 4px; padding: 3px; background: var(--fill);
  border-radius: var(--r-pill); }
.tm-tp-b { font: 600 12px 'Manrope', sans-serif; color: var(--ink-2); background: transparent;
  border: 0; border-radius: var(--r-pill); padding: 6px 10px; cursor: pointer;
  transition: .15s var(--ease); white-space: nowrap; }
.tm-tp-b:hover { color: var(--ink); }
.tm-tp-b.on { background: var(--blue); color: #fff; }
.tm-tp-b:disabled { opacity: .55; cursor: default; }
/* Две группы чипов (темы клиентов и виды уведомлений бота) идут отдельной строкой под
   именем на всю ширину: в одну строку с почтой и ролью они не влезают, а прятать чипы
   за прокруткой нельзя — раскладка должна читаться одним взглядом. */
.tm-row { flex-wrap: wrap; row-gap: 8px; }
.tm-tps { flex: 1 1 100%; order: 9; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding-left: 54px; }
@media (max-width: 960px) {
  .tm-tps { padding-left: 0; }
  /* Группа шире экрана телефона: листается внутри себя, страницу вбок не тянет. */
  .tm-tps .tm-tp { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tm-tps .tm-tp::-webkit-scrollbar { display: none; }
}
.tm-tp.bot { align-items: center; padding-left: 8px; color: var(--ink-3); }
.tm-tp.bot svg { flex: none; margin-right: 2px; }
.tm-bt-b { font: 600 12px 'Manrope', sans-serif; color: var(--ink-3); background: transparent; border: 0;
  padding: 4px 8px; border-radius: 8px; cursor: pointer; text-decoration: line-through; text-decoration-color: var(--line-2); }
.tm-bt-b:hover { color: var(--ink); }
.tm-bt-b.on { color: var(--ink); background: var(--card); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.tm-bt-b:disabled { opacity: .55; cursor: default; }
/* тема отмечена, а мессенджер не подключен — доставки нет; предупреждение в самой строке */
.tm-warn { display: inline-flex; align-items: center; gap: 4px; color: var(--amber-ink); font-weight: 600; }
.tm-warn svg { flex: none; }
.tm-nsec { margin-top: 22px; }
.tm-hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; max-width: 640px; margin-bottom: 6px; }
.tm-shared { border-top: 1px solid var(--line-2); }

/* форма «завести сотрудника» — панель внутри карточки, не модалка */
.tm-add { margin-top: 16px; padding: 16px 18px; background: var(--fill);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); }
.tm-add-g { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr 1fr; gap: 12px; }
.tm-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tm-f > span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); }
.tm-f input, .tm-f select { font: 500 13.5px 'Manrope', sans-serif; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px;
  width: 100%; transition: .15s var(--ease); }
.tm-f input:focus, .tm-f select:focus { border-color: var(--blue); }
.tm-add-a { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.tm-add-s { font-size: 12.5px; color: var(--ink-2); margin-right: auto; }

/* выданный доступ: пароль виден один раз */
.tm-made { margin-top: 16px; padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--green-soft); border: 1px solid #C6E9D5; }
.tm-made-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
  color: var(--green-ink); }
.tm-made-b { margin-top: 8px; font-size: 14px; color: var(--ink); }
.tm-made-b b { font-weight: 700; }
.tm-made-s { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; max-width: 620px; }
.tm-made-a { display: flex; gap: 10px; margin-top: 12px; }
/* узкий десктоп и планшет: пять колонок в строку уже не влезают — темы уходят на свою
   строку под именем, а не сжимают подстрочник до многоточия */
@media (max-width: 1180px) {
  .tm-row { flex-wrap: wrap; }
  .tm-tp { order: 5; margin-left: 52px; }
}
@media (max-width: 760px) {
  /* на телефоне имя, почта и роль идут в столбик: селект с длинной ролью
     («Руководитель продукта») не сжимается по контенту и наезжал на имя */
  .tm-sel { min-width: 0; width: 100%; order: 4; }
  .tm-row { flex-wrap: wrap; }
  .tm-mail { width: 100%; order: 3; }
  /* темы идут первой строкой под именем: это то, ради чего сюда заходят с телефона.
     margin-left обнуляем: он от блока 1180px, а тут ширина уже полная — иначе «Продажи»
     уезжают за край карточки */
  .tm-tp { order: 2; width: 100%; margin-left: 0; justify-content: space-between; }
  .tm-tp-b { flex: 1; }
  .tm-add-g { grid-template-columns: 1fr; }
  .tm-add-a { flex-wrap: wrap; }
  .tm-add-s { width: 100%; margin-right: 0; }
  /* на телефоне кнопка и счетчик сжимали заголовок в столбик по слову —
     прячем счетчик, кнопку оставляем иконкой */
  .sec-head:has(.tm-new) .cnt { display: none; }
  .sec-head .bp.tm-new span { display: none; }
}

/* ════ Сейчас (правая колонка обзора) ════ */
.now-rows { display: flex; flex-direction: column; }
.now-r { display: flex; align-items: center; gap: 11px; padding: 14px 0; border-top: 1px solid var(--line);
  width: 100%; text-align: left; }
.now-r:first-of-type { border-top: none; padding-top: 4px; }
.now-r .dd { width: 10px; height: 10px; border-radius: 3px; background: var(--line-2); flex: none; }
.now-r.bad .dd { background: var(--coral); }
.now-r.blue .dd { background: var(--blue); }
.now-r .nm { flex: 1; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.now-r .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.now-r .pc { font-size: 17px; font-weight: 600; }
.now-r.bad .pc { color: var(--coral); }
.now-link { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); display: flex;
  align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer; }

/* ════ график 14 дней ════ */
.chart { display: flex; align-items: flex-end; gap: 8px; height: 170px; padding-top: 14px; }
.ch-day { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; height: 100%; }
.ch-day .b1 { background: var(--navy); border-radius: 7px; min-height: 3px; }
.ch-day .b2 { background: var(--blue); border-radius: 7px; }
.ch-day.today .b1 { background: var(--blue); opacity: .25; }
.ch-labels { display: flex; gap: 8px; margin-top: 10px; }
.ch-labels span { flex: 1; text-align: center; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.ch-legend { display: flex; gap: 18px; margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.ch-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }

/* ── Подсказка на столбике графика ───────────────────────────────────────────
   Нативный title не годится: он появляется почти через секунду, рисуется
   браузером в его собственном стиле и на телефоне не показывается вовсе.
   Здесь — наша плашка, мгновенная (без задержки перехода на появлении) и по
   нажатию тоже: на телефоне наведения не существует, а цифру посмотреть надо.

   Класс отдельный: графики дашборда трогать незачем, там подсказка не нужна. */
.tipchart .chart { padding-top: 40px; }           /* место для плашки над самым высоким столбиком */
.tipchart .ch-day { position: relative; cursor: pointer; }
.tipchart .ch-day .b1 { position: relative; }
.tipchart .ch-day .b1[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 1.25;
  padding: 7px 11px; border-radius: 10px;
  background: var(--navy); color: #fff;
  box-shadow: 0 8px 20px rgba(3, 8, 28, .18);
  opacity: 0; pointer-events: none; transition: opacity .09s var(--ease);
  z-index: 3;
}
.tipchart .ch-day:hover .b1[data-tip]::after,
.tipchart .ch-day:focus-visible .b1[data-tip]::after,
.tipchart .ch-day.on .b1[data-tip]::after { opacity: 1; }
/* Крайние столбики: по центру плашка уезжала бы за край окна. */
/* Попап больше не прокручивается вбок, значит вылезшая за край подсказка будет
   обрезана. Прижимаем к краю ДВА крайних столбика с каждой стороны: у второго от
   края плашка тоже не помещается по центру. */
.tipchart .ch-day:nth-child(-n+2) .b1[data-tip]::after { left: 0; transform: none; }
.tipchart .ch-day:nth-last-child(-n+2) .b1[data-tip]::after { left: auto; right: 0; transform: none; }
.tipchart .ch-day:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.tipchart .ch-day:hover .b1, .tipchart .ch-day.on .b1 { background: var(--blue); }

/* ════ воронка продаж (cvc) ════ */
.cvc-body { display: grid; grid-template-columns: 176px 1fr; gap: 26px; align-items: stretch; margin-top: 18px; }
.cvc-left { display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  background: var(--fill); border-radius: 16px; padding: 24px 22px; }
.cvc-big { font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--blue); }
.cvc-lbl { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; font-weight: 500; }
.cvc-note { font-size: 12.5px; color: var(--ink-2); margin-top: 15px; padding-top: 14px;
  border-top: 1px solid var(--line-2); line-height: 1.5; width: 100%; }
.cvc-note b { color: var(--ink); font-weight: 600; }
.cvc-rows { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.cvc-row { display: grid; grid-template-columns: 150px 1fr 44px 56px; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line); }
.cvc-row:last-child { border-bottom: none; }
.cvc-nm { font-size: 13px; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvc-track { height: 8px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.cvc-fill { height: 100%; border-radius: 5px; background: var(--blue); min-width: 6px;
  transition: width .9s var(--ease); }
.cvc-row.weak .cvc-fill { background: var(--coral); }
.cvc-c { font-size: 15px; font-weight: 600; text-align: right; white-space: nowrap; }
.cvc-p { font-size: 13px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.cvc-row.weak .cvc-p { color: var(--coral); font-weight: 600; }

/* ── Соцстатистика ── */
.soc-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.soc-seg { display: inline-flex; background: var(--fill); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.soc-seg button { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; transition: all .15s var(--ease); }
.soc-seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.soc-badge { display: inline-block; min-width: 22px; text-align: center; color: #fff; font-size: 10px; font-weight: 800; border-radius: 5px; padding: 1px 5px; margin-right: 7px; vertical-align: middle; }
.cvc-link { text-decoration: none; color: inherit; display: flex; }
.cvc-link:hover .cvc-nm { color: var(--blue); }
.soc-tblwrap .soc-scroll { overflow-x: auto; margin-top: 12px; }
.soc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.soc-tbl th { text-align: left; color: var(--ink-3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.soc-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; color: var(--ink); }
.soc-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.soc-tbl td.soc-th { white-space: normal; max-width: 340px; }
.soc-tbl td.soc-th a { color: var(--ink); text-decoration: none; }
.soc-tbl td.soc-th a:hover { color: var(--blue); text-decoration: underline; }
.soc-tbl tbody tr:hover { background: var(--fill); }
.soc-caption { font-size: 13px; color: var(--ink-2); margin: -2px 0 14px 2px; }
.soc-caption b { color: var(--ink); font-weight: 600; }
.soc-bars { display: flex; align-items: flex-end; gap: 14px; height: 168px; margin-top: 16px; overflow-x: auto; padding: 4px 2px 0; }
.soc-bar { flex: 1 0 auto; min-width: 44px; max-width: 90px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.soc-bar-v { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.soc-bar-col { flex: 1; width: 100%; max-width: 56px; display: flex; align-items: flex-end; }
.soc-bar-fill { width: 100%; background: linear-gradient(180deg, var(--blue), var(--blue-d)); border-radius: 7px 7px 3px 3px; min-height: 3px; transition: height .8s var(--ease); }
.soc-bar-x { font-size: 11px; color: var(--ink-3); margin-top: 8px; white-space: nowrap; }
.soc-refresh { border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); cursor: pointer; margin-left: 6px; }
.soc-refresh:hover { color: var(--blue); border-color: var(--blue); }
.soc-out { color: var(--ink-2); text-decoration: none; font-size: 12px; white-space: nowrap; }
.soc-out:hover { color: var(--blue); text-decoration: underline; }

/* донат (распределение) */
.distr-body { display: flex; align-items: center; gap: 30px; margin-top: 16px; }
.dwrap { position: relative; width: 158px; height: 158px; flex: none; }
.dpie { position: absolute; inset: 0; border-radius: 50%; }
.dpie::after { content: ''; position: absolute; inset: 21px; border-radius: 50%; background: var(--card); }
.dctr { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.dctr .dn { font-size: 29px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.dctr .ds { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }
.dleg { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dleg .r { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line); }
.dleg .r:first-child { border-top: none; padding-top: 0; }
.dleg .r:last-child { padding-bottom: 0; }
.dd2 { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dnm { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpc { font-size: 16px; font-weight: 600; }
.dcount { font-size: 12px; color: var(--ink-3); }

/* мини-бейдж в строке лида (задачи/гео) */
.minib { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  color: var(--ink-2); background: var(--fill); border-radius: var(--r-pill); padding: 2px 8px;
  margin-left: 7px; vertical-align: 1px; }
.minib.warn { color: var(--amber-ink); background: var(--amber-soft); }
.minib svg { width: 10px; height: 10px; }

/* колокольчик уведомлений */
.icocirc.bell-on { background: var(--blue-tint); color: var(--blue); }

/* чёрный баннер */
.banner { display: flex; flex-direction: column; background: var(--black); border-radius: var(--r-xl);
  padding: 24px 24px 26px; color: #fff; cursor: pointer; transition: .15s; align-self: stretch; height: 100%; }
.banner:hover { background: #0C0D11; }
.banner-top { display: flex; align-items: center; justify-content: space-between; }
.banner-pill { font-size: 11px; font-weight: 600; color: #CFD3DC; background: rgba(255,255,255,.1);
  border-radius: var(--r-pill); padding: 6px 12px; }
.banner-go { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12);
  display: grid; place-items: center; color: #fff; transition: .15s; }
.banner:hover .banner-go { background: var(--blue); }
.banner-t { font-size: 24px; font-weight: 600; letter-spacing: -.025em; margin-top: auto; line-height: 1.18; padding-top: 26px; }
.banner-s { font-size: 13px; color: #8A90A0; margin-top: 10px; line-height: 1.5; }

/* ════ ПУТЬ ════ */
.lad-row { display: grid; grid-template-columns: 210px 1fr 54px 130px; gap: 16px; align-items: center;
  padding: 0 24px; height: 60px; border-bottom: 1px solid var(--line); cursor: pointer; transition: .14s; position: relative; }
.lad-row:last-child { border-bottom: none; }
.lad-row:hover { background: #FBFBFC; }
.lad-row.sel { background: var(--blue-tint); }
.lad-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0; transition: .14s; }
.lad-row.worst::before { background: var(--coral); opacity: 1; }
.lad-nm { font-size: 14px; font-weight: 600; color: var(--ink); }
.lad-nm small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.lad-track { height: 10px; border-radius: 6px; background: var(--fill); overflow: hidden; }
.lad-fill { height: 100%; border-radius: 6px; background: var(--blue); min-width: 6px; transition: width .9s var(--ease); }
.lad-row.worst .lad-fill { background: var(--coral); }
.lad-n { font-size: 15px; font-weight: 600; text-align: right; }
.lad-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.lad-conv { font-size: 12.5px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.lad-drop { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  color: var(--coral); background: var(--coral-soft); border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap; }
.lad-drop.zero { color: var(--ink-3); background: var(--fill); font-weight: 600; }
/* Разбивка «имя — число» (карточки страницы «Запуски»): строка лестницы без шкалы
   и конверсий. Правило жило только в витрине design/launch.html — в проде строки
   брали сетку 210px/1fr/54px/130px, и число висело посреди карточки. */
.brk { border-top: 1px solid var(--line); }
.brk .lad-row { grid-template-columns: minmax(0, 1fr) auto; }
/* Лестница-витрина без клика: курсор не должен обещать то, чего нет
   (прецедент — комментарий у .mkd-row ниже). Ховер тоже гасим. */
.lad-static .lad-row, .brk .lad-row { cursor: default; }
.lad-static .lad-row:hover, .brk .lad-row:hover { background: transparent; }
/* Строка блока, за которой стоит список людей. Подсветку берём ту же, что у обычной
   строки лестницы, — иначе один и тот же жест выглядел бы в CRM двумя разными. */
.brk .lad-row.brk-open { cursor: pointer; }
.brk .lad-row.brk-open:hover { background: #FBFBFC; }
.brk .lad-row.brk-open:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.mini-funnel { display: flex; align-items: flex-end; gap: 9px; height: 110px; padding: 6px 0 0; }
.fcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 9px; height: 100%; }
.fcol .bar { width: 100%; background: #E5E9F0; border-radius: 6px; transition: .2s; }
.fcol .bar.on { background: var(--blue); }
.fcol .lb { font-size: 10.5px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.fcol .vn { font-size: 12px; font-weight: 600; }

/* ════ ПОДАРКИ (раздел gifts) ════
   Лестница пути — общая с «Путем» (.lad-*), но кликать в подарках некуда: курсор
   не должен обещать то, чего нет. Строка подарка — та же анатомия, что у лестницы
   (имя · шкала · число · итог справа), чтобы два экрана читались одним движением. */
.lad-row.gf-flat { cursor: default; }
/* Шкала ограничена по ширине: во всю строку она перетягивала внимание с лестницы
   пути, а якорь на экране один. */
.gf-row { display: grid; grid-template-columns: 210px minmax(90px, 420px) 54px 1fr;
  gap: 16px; align-items: center;
  padding: 0 24px; height: 58px; border-bottom: 1px solid var(--line); }
.gf-row:last-child { border-bottom: none; }
.gf-row:hover { background: #FBFBFC; }
.gf-nm { font-size: 14px; font-weight: 600; color: var(--ink); }
.gf-nm small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
/* Шкала тоньше, чем в лестнице пути (10px): на экране один якорь — путь подарка,
   а список «что берут» читается как второй голос, а не спорит с ним за внимание. */
.gf-track { height: 6px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.gf-fill { height: 100%; border-radius: 4px; background: var(--blue); min-width: 6px; transition: width .9s var(--ease); }
.gf-n { font-size: 15px; font-weight: 600; text-align: right; }
.gf-got { font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: right; white-space: nowrap; }
.gf-got.zero { color: var(--ink-3); font-weight: 500; }

.gf-srcs { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.gf-src { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--line); }
.gf-src:last-child { border-bottom: none; }
.gf-src-c { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.gf-src-n { font-size: 14px; font-weight: 700; }
.gf-grid { grid-template-columns: 1fr 150px 96px; }


/* ════ КАНБАН ════ */
.kb-wrap { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 16px; align-items: flex-start; }
.kb-wrap::-webkit-scrollbar { height: 8px; }
.kb-wrap::-webkit-scrollbar-thumb { background: #D7DDEA; border-radius: 99px; }
.kb-col { flex: none; width: 248px; border-radius: 16px; padding: 12px 10px 10px;
  background: #ECEEF2; border: 1px solid transparent; }
.kb-col.dragover { border-color: var(--blue); background: var(--blue-tint); }
.kb-head { display: flex; align-items: center; gap: 8px; padding: 2px 10px 11px; }
.kb-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.kb-n { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.kb-cards { display: flex; flex-direction: column; gap: 8px; min-height: 30px; }
.kb-card { border-radius: 13px; padding: 13px 15px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,19,32,.04); transition: .14s; }
.kb-card:hover { border-color: #C9D7FB; }
.kb-card.dragging { opacity: .45; }
.kb-name { font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-name.anon { color: var(--ink-3); font-weight: 500; }
.kb-meta { display: flex; align-items: center; gap: 9px; margin-top: 7px; font-size: 12px; color: var(--ink-2); }
.kb-score { font-weight: 700; }
.kb-when { margin-left: auto; color: var(--ink-3); }

/* Встречи (Задачи → Встречи): журнал записей. Строка — время, название с
   подписью, справа состояние или действие. Дни — тонкими подзаголовками. */
.mt-day { padding: 14px 24px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.mt-row { grid-template-columns: 52px minmax(0, 1fr) auto; height: auto; min-height: 58px; padding: 10px 24px; }
.mt-when { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mt-main { min-width: 0; }
.mt-title { display: block; max-width: 100%; text-align: left; font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 6px; margin-left: -6px; border-radius: 7px; }
.mt-title:hover { background: var(--fill); }
.mt-title-in { width: 100%; max-width: 420px; font-size: 14px; font-weight: 600; }
.mt-sub { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.mt-sub a { color: var(--blue); }
.mt-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mt-right .qchip { display: inline-flex; align-items: center; gap: 6px; }
.mt-drafts { font-size: 12.5px; font-weight: 600; color: var(--amber-ink); }
.mt-rec { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.mt-fold { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  color: var(--ink-2); padding: 4px 6px; border-radius: 8px; }
.mt-fold svg { transition: transform .15s var(--ease); }
.mt-fold.open svg { transform: rotate(90deg); }
.mt-fold:hover { background: var(--fill); }
/* Задачи из встречи: раскрытый список под строкой, шаги с отступом от цели. */
.mt-tasks { padding: 2px 24px 12px 88px; display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--line); }
.mt-task { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 10px; font-size: 13px; color: var(--ink); }
.mt-task:hover { background: var(--fill); }
.mt-task.step { padding-left: 28px; }
.mt-task .sev.mini { margin-left: 0; flex: none; }
.mt-task-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-task-who { margin-left: auto; flex: none; font-size: 12px; color: var(--ink-3); }
.mt-task .tb-due { margin-left: 0; flex: none; }
@media (max-width: 760px) {
  .mt-row { grid-template-columns: 44px minmax(0, 1fr); padding: 10px 16px; }
  .mt-right { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .mt-day { padding: 12px 16px 4px; }
  .mt-tasks { padding: 2px 16px 12px 16px; }
  .mt-task-who { display: none; }
}

/* Доска задач (План → Доска): колонки-статусы на рецепте канбана лидов. Карточка
   тише лидовой: заголовок до трех строк, под ним ученик (.dy-cl) или исполнитель
   кружком (.dy-av), срок справа; просрочка — красной полоской слева, а не рамкой. */
.tb-wrap { padding-top: 2px; }
/* Четыре колонки делят ширину экрана: на ноутбуке доска видна целиком, без
   горизонтальной прокрутки; на узком экране колонки фиксированные и листаются. */
.tb-col { flex: 1 1 0; width: auto; min-width: 200px; min-height: 220px; }
.tb-col.nodrop { cursor: not-allowed; }
.tb-col.nodrop .kb-cards { opacity: .55; }
.tb-card { padding: 12px 14px 11px; position: relative; }
.tb-card.over::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--red); }
.tb-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tb-title .tsk-imp { margin-right: 5px; vertical-align: -1px; }
.tb-cl { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-asg { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.tb-asg span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-card .kb-meta { margin-top: 8px; gap: 6px; }
.tb-card .kb-meta .sev.mini { margin-left: 0; }
.tb-card .kb-meta:empty { display: none; }
.tb-due { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tb-due.due-over { color: var(--red-ink); font-weight: 600; }
.tb-due.due-now { color: var(--amber-ink); font-weight: 600; }
.tb-empty { padding: 18px 10px 12px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.tb-how { margin: -2px 0 14px; }
.tb-how .rh-ht { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.tb-how-m { display: none; }
.tb-who-seg { margin-left: 2px; }
/* Полоса целей над доской отдела: системный .qchip, свое только кольцо и ширина названия. */
.tb-goals { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 12px; margin-top: -4px; scrollbar-width: none; }
.tb-goals::-webkit-scrollbar { display: none; }
.tb-gchip { flex: none; max-width: 260px; padding-left: 9px; }
.tb-gchip .gl-ring { width: 18px; height: 18px; }
.tb-gchip .gl-ring::before { inset: 3px; background: var(--fill); }
.tb-gchip:hover .gl-ring::before { background: #EDEFF3; }
.tb-gchip.on .gl-ring::before { background: var(--blue-tint); }
.tb-gchip .gl-ring b { display: none; }
.tb-gchip .tb-gt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-gchip.on { background: var(--blue-tint); color: var(--blue); border-color: var(--blue); }
.tb-gchip.on .qn { color: var(--blue); }
.tb-top .tb-gsel { display: none; }
.tb-goal { margin-top: 5px; display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); min-width: 0; }
.tb-goal svg { flex: none; }
.tb-goal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .tb-col { flex: none; width: 232px; min-width: 0; }
  /* Переключатель «Мои / Выдал» и поиск в одну строку: минус полоса контролов до доски. */
  .tb-top .tb-who-seg { flex: none; }
  .tb-top .wk-spacer { display: none; }
  .tb-top .wk-search { flex: 1 1 120px; min-width: 120px; }
  /* Цели на телефоне — селект в строке поиска вместо полосы чипов. */
  .tb-goals { display: none; }
  .tb-top .tb-gsel { display: block; flex: 1 1 140px; min-width: 140px; width: auto; }
  .prio-sel { margin-left: 0; }
  .zd-add { opacity: .5; }
  /* 390px: «Отменить?» с тремя кнопками в одну строку не влезает, и отказ
     отрывался от выбора. Вопрос занимает строку, кнопки идут рядом под ним. */
  .zc-delq { flex-basis: 100%; }
  /* Перетаскивания на тач-экране нет — объясняем настоящий путь. */
  .tb-how-d { display: none; }
  .tb-how-m { display: block; }
}

/* ════ МОДАЛКА (карточка клиента) — центр + левая навигация ════ */
.mbg { position: fixed; inset: 0; background: rgba(15,19,32,.42);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 80; }
.mbg.open { opacity: 1; visibility: visible; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: 1020px; max-width: 94vw; height: 86vh; max-height: 884px; background: #fff;
  border-radius: 24px; z-index: 81; display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .26s, transform .3s var(--ease);
  box-shadow: 0 44px 130px -30px rgba(15,19,32,.5); }
.modal.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

/* ── ШАПКА — тихая, чистая иерархия ── */
.m-head { flex: none; padding: 22px 26px 20px; border-bottom: 1px solid var(--line);
  position: relative; display: flex; align-items: center; gap: 16px; }
.m-navfloat { position: absolute; top: 18px; right: 22px; display: flex; align-items: center; gap: 7px; }
.m-arrow { width: 34px; height: 34px; border-radius: 50%; background: var(--fill);
  display: grid; place-items: center; color: var(--ink-2); transition: .15s; }
.m-arrow:hover { background: #ECEEF1; color: var(--ink); }
.m-arrow:disabled { opacity: .32; cursor: default; }
.m-arrow#m-close { background: transparent; }
.m-arrow#m-close:hover { background: var(--red-soft); color: var(--red); }

.m-ava { width: 54px; height: 54px; border-radius: 16px; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 19px; letter-spacing: -.02em;
  background: linear-gradient(140deg, #4C7DFF, var(--navy)); box-shadow: 0 6px 16px -8px rgba(47,107,255,.6); }
.m-id { flex: 1; min-width: 0; padding-right: 128px; }
.m-name-row { display: flex; align-items: center; gap: 9px; }
.m-name { font-size: 23px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-name.anon { color: var(--ink-3); font-weight: 600; }
.m-edit { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  color: var(--ink-3); opacity: 0; transition: .14s; }
.m-name-row:hover .m-edit, .ed-field:hover .m-edit { opacity: 1; }
.m-edit:hover { background: var(--fill); color: var(--blue); }
.m-edit svg { width: 14px; height: 14px; }
.m-sub { display: flex; align-items: center; gap: 11px; margin-top: 9px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-3); }
.m-sub .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); opacity: .55; }
.m-sub .sess { font-feature-settings: 'tnum'; letter-spacing: -.01em; }
/* «Ссылка на клиента» — копирует адрес карточки, чтобы кинуть команде */
.m-copylink { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 10px;
  border-radius: 8px; font: 600 12px 'Manrope', sans-serif; color: var(--ink-2); background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.06); margin-left: 2px;
  transition: color .15s, background .15s, box-shadow .15s; }
.m-copylink svg { width: 12px; height: 12px; color: var(--ink-3); transition: color .15s; }
.m-copylink:hover { color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(47,107,255,.22); }
.m-copylink:hover svg { color: var(--blue); }

/* Ведет — ответственный за клиента в шапке карточки: процент продаж капает именно
   на него, поэтому он на виду, а не спрятан во вкладке «Сейчас». Клик ведет к
   селектору, где его назначают. «не назначен» подсвечен амбером — это повод действия. */
.m-own-head { display: inline-flex; align-items: center; gap: 6px; height: 26px;
  margin-top: 8px; padding: 0 10px 0 8px; border-radius: 8px;
  font: 600 12.5px 'Manrope', sans-serif; background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.06); cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s; }
.m-own-head svg { width: 13px; height: 13px; color: var(--ink-3); transition: color .15s; }
.m-own-head .mo-k { color: var(--ink-3); font-weight: 600; }
.m-own-head .mo-v { color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.m-own-head:hover { background: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(47,107,255,.22); }
.m-own-head:hover svg, .m-own-head:hover .mo-k { color: var(--blue); }
.m-own-head.none { background: var(--amber-soft); box-shadow: inset 0 0 0 1px rgba(224,146,47,.28); }
.m-own-head.none svg, .m-own-head.none .mo-k { color: var(--amber); }
.m-own-head.none .mo-v { color: var(--amber-ink); }

.m-load { padding: 64px 26px; text-align: center; font-size: 13.5px; color: var(--ink-3); }

.m-pulse { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  margin-right: 116px; }
.m-pulse .pv { font-size: 26px; font-weight: 700; letter-spacing: -.04em; line-height: 1;
  display: flex; align-items: baseline; gap: 2px; }
.m-pulse .pv small { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.m-pulse .ptrack { width: 88px; height: 6px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.m-pulse .ptrack i { display: block; height: 100%; border-radius: 5px; min-width: 5px; transition: width .9s var(--ease); }
.m-pulse .plab { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }

/* ── ТЕЛО: nav + контент ── */
.m-body { flex: 1; display: flex; min-height: 0; position: relative; }
/* Разделов пятнадцать, и на невысоком ноутбуке (окно ниже ~700px) в колонку влезает
   семь: остальные листаются. Скроллбар тут был спрятан насовсем, и обрыв списка
   читался как «карточка неполная» — 03.09.2026 из-за этого искали пропавшие
   «Заметки». Тень у нижнего края появляется САМА, только когда ниже есть что
   смотреть: фон на `local` едет со списком и закрывает тень, когда список кончился. */
.m-nav { flex: none; width: 210px; border-right: 1px solid var(--line); padding: 16px 12px;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: #DFE2E8 transparent;
  background:
    linear-gradient(#FBFBFC 62%, rgba(251,251,252,0)) top / 100% 26px no-repeat local,
    linear-gradient(rgba(251,251,252,0), #FBFBFC 38%) bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(15,19,32,.2), rgba(15,19,32,0)) top / 100% 15px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(15,19,32,.2), rgba(15,19,32,0)) bottom / 100% 15px no-repeat scroll,
    #FBFBFC; }
.m-nav::-webkit-scrollbar { width: 6px; }
.m-nav::-webkit-scrollbar-thumb { background: #DFE2E8; border-radius: 99px; }
.m-nav::-webkit-scrollbar-track { background: transparent; }
.m-ni { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 13px; border-radius: 11px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: .14s; }
.m-ni svg { color: var(--ink-3); transition: .14s; }
.m-ni:hover { background: #F1F3F6; color: var(--ink); }
.m-ni.on { background: #fff; color: var(--ink); font-weight: 600;
  box-shadow: 0 2px 6px -2px rgba(15,19,32,.1), inset 0 0 0 1px var(--line); }
.m-ni.on svg { color: var(--blue); }
.m-ni .cnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-3);
  background: var(--fill); border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }
.m-ni.on .cnt { background: var(--blue-tint); color: var(--blue); }
.m-ni .dotw { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft); }
/* Зеленая точка — «у человека тут открыт доступ». Не тревога, а факт: тем же
   размером, что и .dotw, чтобы столбец разделов не прыгал. */
.m-ni .doto { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft); }

/* Невысокий ноутбук: окно 550-700px, и на список разделов в карточке остается
   около 320px при пятнадцати пунктах — видно семь. Отдаем карточке высоту и
   сжимаем шапку с пунктами: разделов помещается на треть больше, листать
   остается меньше. Пропорции те же, меняются только вертикальные отступы. */
@media (max-height: 820px) {
  .modal { height: 94vh; max-height: none; }
  .m-head { padding: 15px 24px 13px; }
  .m-ava { width: 44px; height: 44px; border-radius: 14px; font-size: 17px; }
  .m-name { font-size: 20px; }
  .m-sub { margin-top: 6px; }
  .m-nav { padding: 10px; }
  .m-ni { padding: 7px 12px; }
  .m-foot { padding: 9px 22px; }
  .m-content { padding: 20px 26px 28px; }
}

.m-content { flex: 1; overflow-y: auto; padding: 26px 30px 36px; min-width: 0; }
.m-content::-webkit-scrollbar { width: 7px; }
.m-content::-webkit-scrollbar-thumb { background: #E3E5EB; border-radius: 99px; }
.m-ctitle { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.m-csub { font-size: 13px; color: var(--ink-2); margin-top: 6px; margin-bottom: 26px; line-height: 1.5; }

/* Консультации — воронка продаж на карточке. Собрано ИЗ системных компонентов:
   свод — .pay-board/.pay-cell, пилюли — .sev, поля — .al-in.sm, кнопки — .bp.sm.
   Тут только раскладка раздела, своих рецептов не заводим. */
.pay-cell.warn { background: var(--amber-soft); }
.pay-cell.warn .pc-l, .pay-cell.warn .pc-v { color: var(--amber-ink); }
.cns-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.cns-add .al-in { width: auto; }
.cns-note-in { flex: 1; min-width: 150px; }
.cns-list { display: flex; flex-direction: column; gap: 10px; }
.cns-row { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.cns-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cns-when { font-size: 13px; font-weight: 600; color: var(--ink); }
.cns-role { font-size: 12px; color: var(--ink-3); }
.cns-amt .al-in { width: 106px; }
.cns-del { margin-left: auto; flex: none; border: 0; background: transparent; color: var(--ink-3);
  cursor: pointer; padding: 4px; border-radius: 8px; display: inline-flex; }
.cns-del:hover { color: var(--red); background: var(--fill); }
.cns-note { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
.cns-acts { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.cns-empty { font-size: 13px; color: var(--ink-3); padding: 22px 0; text-align: center; line-height: 1.5; }

.m-foot { flex: none; border-top: 1px solid var(--line); padding: 12px 22px; background: #fff;
  display: flex; gap: 10px; justify-content: flex-end; }
.modal.chat-open .m-foot { display: none; }
.m-archive { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; height: 44px;
  border-radius: 12px; font: 600 13px 'Manrope', sans-serif; color: var(--ink-2); background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.08); transition: color .15s, background .15s, box-shadow .15s; }
.m-archive svg { width: 14px; height: 14px; color: var(--ink-3); transition: color .15s; }
.m-archive#m-hide:hover { color: var(--red); background: var(--red-soft); box-shadow: inset 0 0 0 1px rgba(196,42,47,.2); }
.m-archive#m-hide:hover svg { color: var(--red); }
.m-archive#m-unhide:hover { color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(47,107,255,.25); }
.m-archive#m-unhide:hover svg { color: var(--blue); }
/* «Войти как» — кабинет клиента его глазами. Уводит из CRM, поэтому тон синий,
   как у всего, что открывается на стороне клиента, а не красный, как архив. */
.m-archive#m-sublogin { margin-right: auto; }
.m-archive#m-sublogin:hover { color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(47,107,255,.25); }
.m-archive#m-sublogin:hover svg { color: var(--blue); }

/* ── секции БЕЗ верхней полоски (воздух + подзаголовок) ── */
.m-sec { margin-top: 30px; }
.m-sec:first-child { margin-top: 0; }
.m-sec-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
.m-sec-h .hr { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--blue);
  text-transform: none; letter-spacing: 0; cursor: pointer; }
.m-sec-h .hr:hover { text-decoration: underline; }
/* второе действие в шапке секции встает рядом с первым, а не улетает к другому краю:
   auto-отступ нужен только первому */
.m-sec-h .hr ~ .hr { margin-left: 0; }
/* второстепенное действие (отозвать, отменить) — не такое же синее, как основное */
.m-sec-h .hr.mute { color: var(--ink-3); }

/* секции «Путь»-AI (dr-sec оставлен для совместимости старых вызовов sec()) */
.dr-sec { padding: 0 0 22px; }
.dr-sec + .dr-sec { padding-top: 22px; border-top: 1px solid var(--line); }
.dr-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 13px; display: flex; align-items: baseline; gap: 10px; }
.dr-h .hr { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--blue);
  text-transform: none; letter-spacing: 0; cursor: pointer; }

.bp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px;
  border-radius: 12px; background: var(--blue); color: #fff; font-size: 13.5px; font-weight: 600;
  transition: .15s; text-decoration: none; }
.bp:hover { background: var(--blue-d); }
.bp.ghost { background: var(--card); border: 1px solid var(--line-2); color: var(--ink); }
.bp.ghost:hover { background: var(--fill); }
.bp.sm { padding: 9px 14px; font-size: 12.5px; }
.bpwide { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; border-radius: 12px; background: var(--black); color: #fff; font-size: 13.5px;
  font-weight: 600; transition: .15s; letter-spacing: -.01em; }
.bpwide:hover { background: #0A0B0F; }

/* ── Быстрый счёт (вкладка «Оплаты») ── */
.qi-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.qi-grid { grid-template-columns: 130px 1fr; }
.qi-form input { width: 100%; }
.qi-row .qi-acts { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
.qi-done { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--green-ink); }
/* Красная пульсирующая «Отправить клиенту»: счёт выставлен, но клиенту ещё не ушёл —
   кнопку нельзя пропустить. Пульс «в такт сердцебиению» (просьба Веры 07.09.2026). */
.qi-send { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px;
  background: var(--red); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(229, 72, 77, .5); animation: qi-heartbeat 1.4s ease-in-out infinite; }
.qi-send:hover { background: var(--red-ink); }
.qi-send:disabled { opacity: .6; animation: none; }
@keyframes qi-heartbeat {
  0%   { transform: scale(1);     box-shadow: 0 0 0 0 rgba(229, 72, 77, .5); }
  14%  { transform: scale(1.045); box-shadow: 0 0 0 4px rgba(229, 72, 77, .18); }
  28%  { transform: scale(1);     box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
  42%  { transform: scale(1.045); box-shadow: 0 0 0 5px rgba(229, 72, 77, .12); }
  56%  { transform: scale(1);     box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
  100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}
@media (prefers-reduced-motion: reduce) { .qi-send { animation: none; } }

/* ── «Сейчас»: херо «что делать» ── */
.now-do { border-radius: 16px; padding: 20px 22px; position: relative; overflow: hidden;
  background: var(--blue-tint); border: 1px solid #DCE7FF; }
.now-do.calm { background: var(--green-soft); border-color: #C7EBD6; }
.now-do.warn { background: linear-gradient(180deg, #FFF6EC, #FDEFDD); border-color: #F4DBB6; }
.now-do .nd-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.now-do.calm .nd-k { color: var(--green-ink); }
.now-do.warn .nd-k { color: var(--amber-ink); }
.now-do .nd-k::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.now-do .nd-t { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-top: 10px; line-height: 1.3; }
.now-do .nd-s { font-size: 13px; color: var(--ink-2); margin-top: 7px; line-height: 1.55; }
.now-do.warn .nd-s { color: #7A6438; }
.now-do .nd-act { display: flex; gap: 9px; margin-top: 17px; flex-wrap: wrap; }

/* ── «Сейчас»: карточка «Кто это» (редактируемая сводка) ── */
.who { background: var(--fill); border-radius: 15px; padding: 6px 16px; }
.ed-field { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.ed-field:first-child { border-top: none; }
.ed-field .ef-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ed-field .ef-k { font-size: 12.5px; color: var(--ink-3); flex: none; width: 64px; }
.ed-field .ef-v { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
/* .ef-v.empty случайно ловил глобальный .empty (padding 52px) — гасим: поле не должно растягиваться */
.ed-field .ef-v.empty { color: var(--ink-3); font-weight: 500; padding: 0; text-align: left; font-size: 13.5px; }
.ed-field .ef-v a { color: var(--blue); }
.ed-field .ef-v a:hover { text-decoration: underline; }
.ed-field .ef-copy { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center;
  color: var(--ink-3); opacity: 0; transition: .14s; }
.ed-field:hover .ef-copy { opacity: 1; }
.ed-field .ef-copy:hover { color: var(--blue); background: #fff; }

.ed-input { flex: 1; min-width: 0; font: 600 14px 'Manrope', sans-serif; color: var(--ink);
  background: #fff; border: 1px solid var(--blue); border-radius: 9px; padding: 8px 11px; outline: none;
  box-shadow: 0 0 0 3px rgba(47,107,255,.12); }
.ed-input.big { font-size: 19px; font-weight: 700; letter-spacing: -.02em; padding: 6px 10px; }
.ed-save { font-size: 11px; color: var(--green-ink); font-weight: 600; }
.ed-save.err { color: var(--red-ink); }

/* «Главное» — верхняя плашка статус + балл */
.main-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--fill); border-radius: 15px; padding: 16px 18px; margin-bottom: 4px; }
.main-hero .mh-st { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.main-hero .mh-slot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--blue); background: var(--blue-tint); border-radius: var(--r-pill); padding: 5px 11px; }
.main-hero .mh-score { text-align: right; flex: none; }
.main-hero .mh-score b { font-size: 26px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.main-hero .mh-score b small { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.main-hero .mh-score span { display: block; font-size: 11.5px; font-weight: 600; margin-top: 3px; }

/* dropzone в состоянии загрузки */
.dropzone.loading { border-style: solid; border-color: #DCE7FF; background: var(--blue-tint); color: var(--blue); cursor: default; }
.dropzone.loading .dz-ic { background: #fff; color: var(--blue); }

.slotchip { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--blue); background: var(--blue-tint);
  border-radius: var(--r-pill); padding: 8px 14px; }
.slotchip svg { color: var(--blue); }

/* кто ведет карточку и первое касание — строка над воронкой.
   Тихая: серая заливка, вторичная кнопка. Якорь секции — херо «что делать», и
   спорить с ним этой строке нельзя. Цветом здесь говорит только скорость ответа. */
.own { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 10px 14px;
  border-radius: 13px; background: var(--fill); }
.own-p { display: flex; align-items: center; gap: 10px; min-width: 0; }
.own-p .tm-sel { max-width: 200px; }
.own-t { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.own-t .ql-l { flex: none; }
.own-when { font-size: 12px; font-weight: 500; color: var(--ink-3); }
/* скорость первого ответа: ориентир 15 минут, после часа это уже потеря */
.own-sp { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); }
.own-sp.fast { background: var(--green-soft); color: var(--green-ink); }
.own-sp.mid { background: var(--amber-soft); color: var(--amber-ink); }
.own-sp.slow { background: var(--red-soft); color: var(--red-ink); }
.own-wait { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.own-wait.late { color: var(--amber-ink); }
.own-go svg { color: var(--blue); }
.own-go:disabled { opacity: .55; }
@media (max-width: 560px) {
  .own { flex-wrap: wrap; gap: 10px; }
  .own-p { width: 100%; }
  .own-p .tm-sel { flex: 1; max-width: none; }
  .own-t { width: 100%; margin-left: 0; }
  .own-t .own-go { margin-left: auto; }
}

/* степпер воронки */
.stage-sec { margin-top: 30px; }
.dr-rej { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-3);
  text-transform: none; letter-spacing: 0; transition: .15s; }
.dr-rej:hover { color: var(--red); }
.pipe { display: flex; gap: 7px; }
.pstep { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 12px 12px 13px; border-radius: 13px; background: var(--fill); cursor: pointer; transition: .15s;
  border: 1px solid transparent; position: relative; }
.pstep .pdot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); opacity: .4; transition: .15s; }
.pstep .plbl { font-size: 11.5px; font-weight: 600; color: var(--ink-3); line-height: 1.25; text-align: left; }
.pstep:hover { background: #EDEFF3; }
.pstep.past .pdot { background: var(--blue); opacity: 1; }
.pstep.past .plbl { color: var(--ink-2); }
.pstep.cur { background: var(--blue); }
.pstep.cur .pdot { background: #fff; opacity: 1; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.pstep.cur .plbl { color: #fff; }
.pstep.cur.s-client { background: var(--green); }
.pstep.next:hover .pdot { opacity: .7; }
.rej-banner { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: var(--fill); border-radius: 13px; padding: 14px 16px; }
.rej-banner svg { color: var(--ink-3); }

/* ════ КВАЛИФИКАЦИЯ ЛИДА ════
   Одна секция, два уровня, и плотность у них разная намеренно: сверху вердикт
   системы (MQL) — его читают, а не трогают; снизу галочки менеджера (SQL) — их
   трогают. Ничего красного: непройденный критерий это факт, а не авария. */
.ql-verd { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--ink-3); background: var(--fill); border-radius: var(--r-pill); padding: 5px 12px; }
.ql-verd.on { color: var(--green-ink); background: var(--green-soft); }
.ql-crit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ql-c { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 13px;
  border-radius: 13px; background: var(--fill); }
.ql-c i { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  background: #DEE2EA; color: #fff; }
.ql-c i svg { width: 9px; height: 9px; }
.ql-c.on i { background: var(--green); }
.ql-c b { min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-3); line-height: 1.2; }
.ql-c.on b { color: var(--ink-2); }
/* поля, которых нет в анкете: менеджер вносит их сам — это ввод данных, не оценка */
.ql-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.ql-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ql-l { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ql-f .tm-sel { width: 100%; min-width: 0; }
.ql-f .tm-sel.auto { color: var(--ink-2); font-weight: 500; }
/* граница между вердиктом системы и работой менеджера */
.ql-split { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; }
.ql-split span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ql-split i { flex: 1; height: 1px; background: var(--line); }
/* вердикт — не микролейбл: у двух вердиктов секции один вид, капсом они не пишутся */
.ql-split .ql-verd { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.ql-sql { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ql-chk { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 13px;
  border-radius: 13px; background: var(--fill); cursor: pointer; transition: .15s; }
.ql-chk:hover { background: #EDEFF3; }
.ql-chk u { flex: none; width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center;
  border: 1.5px solid #C5CCDA; background: #fff; color: transparent; transition: .15s; }
.ql-chk u svg { width: 11px; height: 11px; }
.ql-chk:hover u { border-color: var(--blue); }
.ql-chk.on u { background: var(--blue); border-color: var(--blue); color: #fff; }
.ql-chk span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); line-height: 1.3; }
.ql-chk.on span { color: var(--ink); }
.ql-rej { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 12px 14px;
  border-radius: 13px; background: var(--fill); }
.ql-rej .ql-l { flex: none; }
.ql-rej .tm-sel { flex: 1; min-width: 0; }
.ql-rej.empty .tm-sel { box-shadow: inset 0 0 0 1.5px var(--amber); }
@media (max-width: 560px) {
  .ql-crit { grid-template-columns: repeat(2, 1fr); }
  /* галочки продаж на телефоне в одну колонку: в двух текст ломается на три строки */
  .ql-sql, .ql-fields { grid-template-columns: 1fr; }
  .ql-rej { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ════ ДУБЛИ: похоже, это тот же человек ════
   Подсказка, а не приговор: система нашла совпадение, решает менеджер. Поэтому тут нет
   ни красного, ни автодействия — амбер на «карточка помечена дублем» (это состояние,
   которое меняет работу) и обычные строки со списком кандидатов. */
.dup-note { display: flex; align-items: center; gap: 11px; margin-bottom: 16px;
  padding: 13px 15px; border-radius: 14px; background: var(--amber-soft); }
.dup-note svg { flex: none; color: var(--amber-ink); }
.dup-note > div { flex: 1; min-width: 0; }
.dup-note b { display: block; font-size: 13px; font-weight: 700; color: var(--amber-ink); }
.dup-note small { display: block; font-size: 11.5px; color: #7A6438; margin-top: 2px; }
.dup-hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: -6px 0 12px; }
.dup-cnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-2);
  background: var(--fill); border-radius: var(--r-pill); padding: 3px 9px; }
.dup-list { background: var(--fill); border-radius: 15px; padding: 2px 15px; }
.dup-row { display: flex; align-items: center; gap: 10px; padding: 12px 0;
  border-bottom: 1px solid var(--line); }
.dup-row:last-child { border-bottom: none; }
.dup-nm { flex: 1; min-width: 0; }
.dup-nm b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup-nm small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup-b { flex: none; font: 600 12px 'Manrope', sans-serif; color: var(--ink-2);
  background: var(--fill); border-radius: 10px; padding: 8px 12px; transition: .15s; }
.dup-b:hover { background: #EDEFF3; color: var(--ink); }
.dup-b.primary { color: #fff; background: var(--blue); }
.dup-b.primary:hover { background: var(--blue-d); }
.dup-b:disabled { opacity: .5; cursor: default; }
@media (max-width: 560px) {
  .dup-row { flex-wrap: wrap; }
  .dup-nm { flex-basis: 100%; }
  .dup-note { flex-wrap: wrap; }
  .dup-note > div { flex-basis: calc(100% - 30px); }
}

/* ════ ПУТЬ И ИСПОЛЬЗОВАНИЕ ════ */
.uz { display: flex; flex-direction: column; gap: 15px; margin-top: 2px; }

/* — герой-пульс — */
.uz-hero { display: flex; gap: 16px; align-items: stretch; border-radius: 18px; padding: 20px 22px;
  background: linear-gradient(180deg, #fff, #FBFCFE); box-shadow: inset 0 0 0 1px rgba(17,21,31,.07),
    inset 0 1px 0 rgba(255,255,255,.9); }
.uz-hm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uz-hm-l { font-size: 12px; font-weight: 600; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.uz-st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  background: var(--fill); border-radius: var(--r-pill); padding: 3px 10px; }
.uz-st-d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.uz-hm-t { font-size: 21px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); margin-top: 8px; line-height: 1.12; text-wrap: balance; }
.uz-hm-s { font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.4; }
.uz-prof { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.uz-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--ink-2);
  background: var(--fill); border-radius: var(--r-pill); padding: 4px 11px; box-shadow: inset 0 0 0 1px rgba(17,21,31,.05); }
.uz-chip svg { color: var(--green); }
.uz-chip.on { color: var(--green-ink); background: var(--green-soft); box-shadow: none; }
.uz-chip i { font-style: normal; color: var(--ink-3); font-size: 10.5px; }
.uz-pulse { flex: none; width: 132px; display: flex; flex-direction: column; gap: 8px; }
.uz-pz { background: #fff; border-radius: 12px; padding: 10px 13px; box-shadow: inset 0 0 0 1px rgba(17,21,31,.06); }
.uz-pz-v { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.uz-pz-l { font-size: 11px; color: var(--ink-3); margin-top: 4px; font-weight: 500; }

/* — сетка панелей — */
.uz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 11px; }
.uz-p { border-radius: 14px; padding: 14px 15px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.07); display: flex; flex-direction: column; }
.uz-p.wide { padding: 16px 17px; }
.uz-p.mute { background: var(--fill); box-shadow: inset 0 0 0 1px rgba(17,21,31,.045); }
.uz-p-h { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.uz-p-ic { width: 27px; height: 27px; border-radius: 8px; flex: none; display: grid; place-items: center;
  color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(47,107,255,.12); }
.uz-p.mute .uz-p-ic { color: var(--ink-3); background: #EEF0F4; box-shadow: none; }
.uz-p-t { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.uz-go { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px;
  font-weight: 600; color: var(--ink-3); padding: 4px 6px; border-radius: 8px; transition: color .15s, background .15s; }
.uz-go svg { transition: transform .15s; }
.uz-go:hover { color: var(--blue); background: var(--blue-tint); }
.uz-go:hover svg { transform: translateX(2px); }
.uz-p-b { display: flex; flex-direction: column; }
.uz-big { font-size: 25px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.uz-big span { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.uz-line { font-size: 12px; color: var(--ink-2); margin-top: 8px; line-height: 1.45; }
.uz-line b { font-weight: 700; color: var(--ink); }
.uz-mini { font-size: 10.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 7px; }
.uz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.uz-empty { font-size: 12.5px; color: var(--ink-3); }

/* — панель поступления (широкая) — */
.uz-prog { display: flex; align-items: center; gap: 12px; }
.uz-prog-bar { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.05); }
.uz-prog-bar span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--blue);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: width .5s var(--ease); }
.uz-prog-n { flex: none; font-size: 13px; font-weight: 700; color: var(--ink); }
.uz-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.uz-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500;
  border-radius: var(--r-pill); padding: 4px 10px; color: var(--ink-2); background: var(--fill); }
.uz-tag b { font-weight: 700; }
.uz-tag--rev { color: var(--blue); background: var(--blue-tint); }
.uz-tag--ret { color: var(--amber-ink); background: var(--amber-soft); }
.uz-tag--cli { color: var(--ink-2); background: var(--fill); }
.uz-tag--team { color: var(--green-ink); background: var(--green-soft); }
.uz-next { display: flex; align-items: center; gap: 9px; margin-top: 13px; font-size: 12.5px; color: var(--ink);
  font-weight: 500; padding-top: 12px; border-top: 1px solid var(--line); }
.uz-next-l { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--ink-3); }
.uz-next-o { margin-left: auto; flex: none; font-size: 11px; font-weight: 600; color: var(--ink-2);
  background: var(--fill); border-radius: var(--r-pill); padding: 3px 9px; }
.uz-next.done { color: var(--green-ink); }
.uz-next.done svg { color: var(--green); }

/* заголовок-разделитель перед таймлайном */
.uz-jh { display: flex; align-items: center; gap: 14px; margin: 20px 0 4px; }
.uz-jh span { flex: none; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.uz-jh i { flex: 1; height: 1px; background: var(--line); }

/* — таймлайн событий (переработан) — */
.path-tl { position: relative; padding-left: 2px; }
.pt-step { position: relative; display: flex; gap: 14px; }
.pt-rail { flex: none; width: 26px; display: flex; flex-direction: column; align-items: center; }
.pt-node { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #fff; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-2); z-index: 1; transition: .15s;
  font-size: 11px; font-weight: 700; }
.pt-node svg { width: 12px; height: 12px; }
.pt-line { flex: 1; width: 2px; background: var(--line); margin: 3px 0; min-height: 12px; border-radius: 2px; }
.pt-step.done .pt-node { background: var(--green); color: #fff; box-shadow: inset 0 0 0 1.5px var(--green),
  0 0 0 3px var(--green-soft); }
.pt-step.done .pt-line { background: #CDEAD9; }
.pt-step.cur .pt-node { background: var(--blue); color: #fff; box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px var(--blue-tint); }
.pt-step.drop .pt-node { background: #fff; color: var(--amber-ink); box-shadow: inset 0 0 0 1.5px var(--amber), 0 0 0 3px var(--amber-soft); }
.pt-step.todo .pt-node { background: #fff; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pt-step:last-child .pt-line { display: none; }
.pt-body { flex: 1; min-width: 0; padding-bottom: 17px; }
.pt-step:last-child .pt-body { padding-bottom: 2px; }
.pt-t { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 9px; }
.pt-step.todo .pt-t { color: var(--ink-3); font-weight: 500; }
.pt-t .pt-when { margin-left: auto; flex: none; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.pt-tag { font-size: 10px; font-weight: 700; border-radius: var(--r-pill); padding: 2.5px 9px; flex: none; }
.pt-tag.drop { color: var(--amber-ink); background: var(--amber-soft); }
.pt-tag.cur { color: var(--blue); background: var(--blue-tint); }
.pt-s { font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.pt-step.drop .pt-s { color: var(--amber-ink); font-weight: 500; }
.pt-subs { margin-top: 9px; display: flex; flex-direction: column; gap: 6px;
  border-left: 1.5px solid var(--line); padding-left: 12px; margin-left: 1px; }
.pt-sub { display: flex; align-items: baseline; gap: 9px; font-size: 12px; color: var(--ink-2); }
.pt-sub::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); flex: none; transform: translateY(-2px); }
.pt-sub.hi { color: var(--ink); font-weight: 600; }
.pt-sub.hi::before { background: var(--blue); }
.pt-sub.comm::before { background: var(--green); }
.pt-sub .sw { margin-left: auto; flex: none; font-size: 11px; color: var(--ink-3); font-weight: 500; }

/* — шаги по кабинету: заходы человека (buildCabinetSteps) — */
.cab-steps { display: flex; flex-direction: column; gap: 10px; }
.cab-v { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 0 0 1px rgba(17,21,31,.06); }
.cab-v .uz-mini { margin-bottom: 8px; }
.cab-v .pt-subs { display: flex; flex-direction: column; gap: 5px; }
.cab-v .pt-sub { word-break: break-word; }
.pt-sub.err { color: var(--red-ink); font-weight: 600; }
.pt-sub.err::before { background: var(--red); }

@media (max-width: 560px) {
  .uz-hero { flex-direction: column; }
  .uz-pulse { width: auto; flex-direction: row; }
  .uz-pulse .uz-pz { flex: 1; }
}

/* ── ДОКУМЕНТЫ ── */
.doc-row, .pay-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.doc-row:last-child, .pay-row:last-child { border-bottom: none; }
.doc-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--blue-tint); color: var(--blue); }
.doc-b { flex: 1; min-width: 0; }
.doc-n { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-m { font-size: 12px; color: var(--ink-3); margin-top: 3px; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.doc-mt { white-space: nowrap; }
/* Категория документа. Это поле, а не подпись: именно она закрывает пункт пакета в
   кабинете семьи, и менеджер должен видеть, что ее можно поменять. Но и кричать ей
   незачем — в покое выглядит как часть меты, рамка проявляется на наведении. */
.doc-kind { font: inherit; font-size: 12px; color: var(--ink-2); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 2px 4px; max-width: 220px;
  cursor: pointer; transition: .15s; }
.doc-kind:hover { border-color: var(--line-2); background: #fff; }
.doc-kind:focus { outline: none; border-color: #C9D7FB; background: #fff; color: var(--ink); }
.doc-kind:disabled { opacity: .5; cursor: default; }
/* Выбор категории перед загрузкой — здесь она не тихая: пропустить ее значит
   отправить файл, который не закроет строку в кабинете. */
.doc-kindrow { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.doc-kindlbl { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.doc-kind--new { border-color: var(--line-2); background: #fff; padding: 6px 9px; font-size: 12.5px; }
/* Кто загрузил — первое, что спрашивают о файле в общей семейной карточке, поэтому
   строка начинается с автора и он на ступень темнее остальной меты. Свои файлы
   («Мы») не выделяем: интересно, что принесла семья. */
/* Причина разворота — тот же текст, что читает семья в кабинете. Амбра, а не
   красный: это не авария, а просьба переделать. */
.doc-why { margin-top: 5px; font-size: 12px; line-height: 1.45; color: #8A5A15;
  background: rgba(224, 146, 47, .09); border-radius: 8px; padding: 6px 9px; }
.doc-why[hidden] { display: none; }
/* Строки, вписанные семьей руками (телефон и адрес в Китае). Файла у них нет, и
   строкой документа они быть не могут — но спрашиваются в том же пакете, поэтому
   стоят над архивом плотным блоком, без иконок и кнопок: тут нечего открывать. */
.doc-flds { margin-bottom: 12px; border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; }
.doc-fld { display: flex; gap: 12px; padding: 8px 11px; font-size: 12.5px; }
.doc-fld + .doc-fld { border-top: 1px solid var(--line-2); }
.doc-fld-l { flex: 0 0 40%; color: var(--ink-2); font-weight: 600; }
.doc-fld-v { flex: 1 1 auto; min-width: 0; color: var(--ink-1); word-break: break-word; }
.doc-by { color: var(--ink-2); font-weight: 600; }
.doc-by-own { color: var(--ink-3); font-weight: 500; }
.doc-act { display: flex; gap: 6px; flex: none; }
.icobtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: #fff;
  display: grid; place-items: center; color: var(--ink-2); transition: .15s; }
.icobtn:hover { color: var(--blue); border-color: #C9D7FB; }
.icobtn.del:hover { color: var(--red); border-color: #F4CFD0; }
.dropzone { margin-top: 10px; border: 1.5px dashed var(--line-2); border-radius: 14px; padding: 26px 22px;
  text-align: center; color: var(--ink-2); font-size: 13px; cursor: pointer; transition: .15s; }
.dropzone .dz-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--fill); color: var(--ink-2);
  display: grid; place-items: center; margin: 0 auto 11px; transition: .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); }
.dropzone:hover .dz-ic, .dropzone.over .dz-ic { background: #fff; color: var(--blue); }
.dropzone b { color: var(--blue); font-weight: 600; }
.linkrow { display: flex; gap: 8px; margin-top: 10px; }
.linkrow input { flex: 1; min-width: 0; outline: none; font: 500 13px 'Manrope', sans-serif; color: var(--ink);
  background: var(--fill); border: 1px solid transparent; border-radius: 10px; padding: 11px 13px; transition: .15s; }
.linkrow input:focus { background: #fff; border-color: #DCE7FF; box-shadow: inset 0 0 0 1px #DCE7FF; }

/* ════ оплаты (карточка клиента) ════ */
.pay-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.pay-cell { background: var(--fill); border-radius: 14px; padding: 14px 16px; }
.pay-cell.lead { background: var(--blue-tint); }
.pay-cell .pc-l { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.pay-cell.lead .pc-l { color: var(--blue); }
.pay-cell .pc-v { font-size: 23px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); margin-top: 9px; line-height: 1; }
.pay-cell.lead .pc-v { color: var(--blue-d); }
.pay-cell.muted .pc-v { color: var(--ink-3); }
.pay-amt { font-size: 15px; font-weight: 700; flex: none; }
.pay-amt.refunded { color: var(--ink-3); text-decoration: line-through; }
.pay-amt.pending { color: var(--amber-ink); }
.pay-form { display: flex; flex-direction: column; gap: 10px; }
.pay-form > input { outline: none; font: 500 13px 'Manrope', sans-serif; color: var(--ink);
  background: var(--fill); border: 1px solid transparent; border-radius: 10px; padding: 11px 13px; }
.pay-form > input:focus { background: #fff; border-color: #DCE7FF; }
.pay-seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 11px; background: var(--fill); align-self: flex-start; }
.pay-seg button { color: var(--ink-2); font: 600 12px 'Manrope', sans-serif; padding: 7px 13px; border-radius: 8px; transition: .15s; }
.pay-seg button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(15,19,32,.1); }
.pay-seg button[data-v="paid"].on { color: var(--green-ink); }
.pay-seg button[data-v="refunded"].on { color: var(--red-ink); }
.pay-seg button[data-v="signed"].on { color: var(--green-ink); }   /* документы исполнителя */
.pay-grid { display: grid; grid-template-columns: 1fr 150px 150px; gap: 8px; }
.pay-grid input { outline: none; font: 500 13px 'Manrope', sans-serif; color: var(--ink);
  background: var(--fill); border: 1px solid transparent; border-radius: 10px; padding: 11px 13px; min-width: 0; }
.pay-grid input:focus { background: #fff; border-color: #DCE7FF; }
.pay-form .bp { align-self: flex-start; }
.pay-form .ord-sel { outline: none; font: 500 13px 'Manrope', sans-serif; color: var(--ink);
  background: var(--fill); border: 1px solid transparent; border-radius: 10px; padding: 11px 13px;
  appearance: none; -webkit-appearance: none; cursor: pointer; }
.pay-form .ord-sel:focus { background: #fff; border-color: #DCE7FF; }
.pay-grid input:disabled { opacity: .45; cursor: not-allowed; }
/* Счет за уроки школы: кнопка тут длиннее «Добавить», в 150px она ломается на две строки */
.pay-grid.sch { grid-template-columns: 1fr 150px 176px; }

/* Конструктор счета */
.ord-b { display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
  padding: 14px; border-radius: 14px; background: var(--fill); border: 1px solid rgba(21,32,59,.05); }
.ord-newh { font: 700 12px 'Manrope', sans-serif; color: var(--ink-2); }
.ord-addwrap { position: relative; }
.ord-addbtn { display: inline-flex; align-items: center; gap: 7px; width: 100%; justify-content: flex-start;
  font: 600 13px 'Manrope', sans-serif; color: var(--blue); cursor: pointer;
  background: #fff; border: 1px dashed rgba(45,107,228,.4); border-radius: 10px; padding: 11px 13px;
  transition: border-color .15s, background .15s; }
.ord-addbtn:hover, .ord-addbtn.on { border-style: solid; border-color: var(--blue); background: #F5F9FF; }
.ord-addbtn svg:last-child { margin-left: auto; transform: rotate(90deg); opacity: .6; transition: transform .15s; }
.ord-addbtn.on svg:last-child { transform: rotate(-90deg); }
.ord-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto; padding: 12px; border-radius: 12px;
  background: #fff; border: 1px solid rgba(21,32,59,.1); box-shadow: 0 18px 44px rgba(15,23,42,.16); }
.ordm-g { font: 700 10.5px 'Manrope', sans-serif; text-transform: uppercase; color: var(--ink-3); letter-spacing: .06em; margin: 4px 2px 7px; }
.ordm-g:not(:first-child) { margin-top: 12px; }
.ordm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ordm-chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 600 12.5px 'Manrope', sans-serif; color: var(--ink); padding: 8px 11px; border-radius: 9px;
  background: var(--fill); border: 1px solid transparent; transition: background .13s, border-color .13s; }
.ordm-chip:hover { background: #EEF4FF; border-color: rgba(45,107,228,.3); }
.ordm-chip.tar { background: #EAF1FF; color: var(--blue); }
.ordm-chip.tar:hover { background: #DDE9FF; }
.ordm-chip .ordm-p { color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.ordm-chip.tar .ordm-p { color: var(--blue); opacity: .7; }
.ordm-chip.custom { color: var(--ink-2); border: 1px dashed rgba(21,32,59,.18); background: transparent; }

/* Аккордеон ручного учета */
.pay-manual, .m-fold { margin-top: 16px; border-top: 1px solid rgba(21,32,59,.07); }
.pay-manual > summary, .m-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 14px 2px 4px; user-select: none; }
.pay-manual > summary::-webkit-details-marker, .m-fold > summary::-webkit-details-marker { display: none; }
.pay-manual .pm-t, .m-fold .pm-t { font: 700 13px 'Manrope', sans-serif; color: var(--ink); }
.pay-manual .pm-h, .m-fold .pm-h { font: 500 12px 'Manrope', sans-serif; color: var(--ink-3); }
.pay-manual > summary svg, .m-fold > summary svg { margin-left: auto; color: var(--ink-3); transform: rotate(90deg); transition: transform .18s; }
.pay-manual[open] > summary svg, .m-fold[open] > summary svg { transform: rotate(-90deg); }
.pay-manual__body, .m-fold__body { padding-top: 10px; }
.ord-items { display: flex; flex-direction: column; gap: 7px; }
.ord-empty { text-align: center; color: var(--ink-3); font-size: 12.5px; padding: 16px 10px;
  background: var(--fill); border-radius: 10px; border: 1px dashed rgba(21,32,59,.12); }
.ord-row { display: grid; grid-template-columns: 1fr 118px 34px; gap: 7px; align-items: center; }
.ord-row input { outline: none; font: 500 13px 'Manrope', sans-serif; color: var(--ink);
  background: var(--fill); border: 1px solid transparent; border-radius: 9px; padding: 10px 12px; min-width: 0; }
.ord-row input:focus { background: #fff; border-color: #DCE7FF; }
.ord-row .ord-it-a { text-align: right; font-variant-numeric: tabular-nums; }
.ord-total { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 2px;
  font: 600 13px 'Manrope', sans-serif; color: var(--ink-2); }
.ord-total .num { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.ord-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.ord-n-wrap { display: inline-flex; align-items: center; gap: 7px; font: 600 12px 'Manrope', sans-serif; color: var(--ink-2); }
.ord-n { width: 52px; outline: none; text-align: center; font: 600 13px 'Manrope', sans-serif; color: var(--ink);
  background: var(--fill); border: 1px solid transparent; border-radius: 9px; padding: 8px; font-variant-numeric: tabular-nums; }
.ord-n:focus { background: #fff; border-color: #DCE7FF; }
/* Свой график рассрочки: строки дата+сумма, «разбить помесячно» и полоса сходимости */
.ord-sched { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px;
  background: var(--fill); border-radius: 12px; }
.osch-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.osch-hint { font: 500 11.5px 'Manrope', sans-serif; color: var(--ink-3); line-height: 1.3; }
.osch-fill { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--blue);
  font: 600 12px 'Manrope', sans-serif; }
.osch-fill:hover { text-decoration: underline; }
.osch-rows { display: flex; flex-direction: column; gap: 7px; }
.osch-row { display: grid; grid-template-columns: 1fr 118px 34px; gap: 7px; align-items: center; }
.osch-row input { outline: none; font: 500 13px 'Manrope', sans-serif; color: var(--ink);
  background: #fff; border: 1px solid transparent; border-radius: 9px; padding: 9px 11px; min-width: 0; }
.osch-row input:focus { border-color: #DCE7FF; }
.osch-row .osch-a { text-align: right; font-variant-numeric: tabular-nums; }
.osch-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  color: var(--blue); font: 600 12px 'Manrope', sans-serif; }
.osch-add:hover { text-decoration: underline; }
.osch-sum { font: 700 12px 'Manrope', sans-serif; padding: 8px 11px; border-radius: 9px;
  font-variant-numeric: tabular-nums; }
.osch-sum.ok { color: var(--green-ink); background: var(--green-soft); }
.osch-sum.bad { color: var(--amber-ink); background: var(--amber-soft); }
/* Раскрытый график выставленного счёта: взносы со статусом и ручной отметкой оплаты */
.pay-row.ord-oh { cursor: pointer; }
.ord-caret { display: inline-flex; color: var(--ink-3); margin-right: 5px; transition: transform .15s; vertical-align: middle; }
.ord-caret.on { transform: rotate(90deg); }
.oi-box { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 10px; padding: 10px 12px;
  background: var(--fill); border-radius: 11px; }
.oi-hint { font: 500 11.5px 'Manrope', sans-serif; color: var(--ink-3); line-height: 1.3; margin-bottom: 2px; }
.oi-row { display: grid; grid-template-columns: 74px 84px 1fr auto auto; gap: 8px; align-items: center;
  font: 600 12.5px 'Manrope', sans-serif; color: var(--ink); }
.oi-n { color: var(--ink-2); }
.oi-d { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.oi-a { text-align: right; font-variant-numeric: tabular-nums; }
.oi-st { justify-self: start; }
.oi-mark { justify-self: end; color: var(--blue); font: 600 12px 'Manrope', sans-serif; white-space: nowrap; }
.oi-mark:hover { text-decoration: underline; }
.oi-mark.off { color: var(--ink-3); }
.oi-lock { justify-self: end; color: var(--ink-3); font: 500 11.5px 'Manrope', sans-serif; white-space: nowrap; }
.oi-item { display: flex; flex-direction: column; gap: 3px; }
.oi-note { display: flex; align-items: baseline; gap: 8px; padding-left: 82px; }
.oi-note-t { font: 500 11.5px 'Manrope', sans-serif; color: var(--ink-2); line-height: 1.3; }
.oi-note-b { color: var(--blue); font: 600 11.5px 'Manrope', sans-serif; white-space: nowrap; }
.oi-note-b:hover { text-decoration: underline; }
.oi-note-b.add { color: var(--ink-3); }
.oi-note-ed { display: flex; align-items: center; gap: 8px; padding-left: 82px; }
.oi-note-i { flex: 1; min-width: 0; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px;
  font: 500 12px 'Manrope', sans-serif; color: var(--ink); background: var(--bg); }
.oi-note-i:focus { outline: none; border-color: var(--blue); }
.oi-note-ed .oi-mark { justify-self: auto; }
.field-empty { text-align: center; color: var(--ink-3); font-size: 13px; padding: 26px 10px; }

/* загрузчик (запасной — финансы/прочее) */
.loadwrap { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 120px 0; }
.loaddot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); opacity: .35; animation: loadb 1s ease-in-out infinite; }
.loaddot:nth-child(2) { animation-delay: .15s; }
.loaddot:nth-child(3) { animation-delay: .3s; }
@keyframes loadb { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }

/* ── ЗАМЕТКИ ── */
.note-ta { width: 100%; min-height: 76px; resize: vertical; outline: none;
  font: 500 13.5px/1.55 'Manrope', sans-serif; color: var(--ink);
  background: var(--fill); border: 1px solid transparent; border-radius: 13px; padding: 13px 15px; transition: .15s; }
.note-ta::placeholder { color: var(--ink-3); }
.note-ta:focus { background: #fff; border-color: #DCE7FF; box-shadow: inset 0 0 0 1px #DCE7FF; }
.note-state { font-size: 11px; color: var(--ink-3); margin-top: 6px; min-height: 14px; }
/* Разбор заметки в задачи. Кнопка и состояние автосохранения стоят в одной
   строке: обе относятся к заметке, и второй ряд ради них — пустой воздух. */
.note-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.note-foot .note-state { margin-top: 0; }
/* Список предложений — тот же рецепт, что у импорта встречи (.mi-*): своя
   оправа только затем, чтобы отделить предложенное от сохраненного. */
.nt-box { margin-top: 12px; padding: 12px 14px 14px; background: var(--fill);
  border: 1px solid var(--line); border-radius: var(--r-lg); }
.nt-h { display: flex; align-items: center; gap: 6px; font: 700 10.5px 'Manrope', sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.nt-h svg { color: var(--blue); }
/* Здесь это задачи, а не цели: заголовок берем в рецепте шага (.mi-steps),
   иначе десять строк по 15px/700 читаются как десять целей. */
.nt-box .mi-title { font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.4;
  padding: 9px 12px; border-radius: 10px; background: #fff; }
.nt-box .mi-title:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(17,21,31,.07); }
.nt-box .mi-item + .mi-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.nt-box .mi-skip { background: #fff; }
.nt-box .mi-skip:hover { background: #ECEEF1; }
.nt-act { display: flex; gap: 8px; margin-top: 12px; }

/* раздел «Написать» — уведомления клиенту через бота */
.ntf-mode { display: inline-flex; gap: 3px; padding: 4px; border-radius: 11px; background: var(--fill); margin-bottom: 10px; }
.ntf-mode button { color: var(--ink-2); font: 600 12px 'Manrope', sans-serif; padding: 7px 13px; border-radius: 8px; transition: .15s; }
.ntf-mode button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(15,19,32,.1); }
.ntf-act { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ntf-state { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.ntf-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line-2); }
.ntf-row:first-child { border-top: none; }
.ntf-ic { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-ink); }
.ntf-row.skip .ntf-ic { background: var(--amber-soft); color: var(--amber-ink); }
.ntf-b { flex: 1; min-width: 0; }
.ntf-t { font-size: 13px; color: var(--ink); line-height: 1.4; }
.ntf-m { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.m-sec-h .hr { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* задачи — благородная просрочка (без заливки) */
.task { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  background: var(--fill); border-radius: 13px; margin-top: 8px; position: relative; overflow: hidden; }
.task:first-of-type { margin-top: 0; }
.task.overdue::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--amber); }
.task-chk { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid #C5CCDA; background: #fff; display: grid; place-items: center; color: transparent; transition: .15s; }
.task-chk:hover { border-color: var(--blue); }
.task.done .task-chk { background: var(--blue); border-color: var(--blue); color: #fff; }
.task-chk svg { width: 11px; height: 11px; }
.task-body { min-width: 0; flex: 1; }
.task-text { font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.4; word-break: break-word; }
.task.done .task-text { text-decoration: line-through; color: var(--ink-3); }
.task-due { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }
.task.overdue .task-due { color: var(--amber-ink); font-weight: 600; }
.task-del { flex: none; color: var(--ink-3); padding: 2px; border-radius: 6px; }
.task-del:hover { color: var(--red); }
.task-add { display: flex; gap: 8px; margin-top: 10px; }
.task-add input { flex: 1; min-width: 0; outline: none; font: 500 13px 'Manrope', sans-serif;
  color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 11px; padding: 11px 13px; }
.task-add input::placeholder { color: var(--ink-3); }
.task-add input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.due-seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 11px; background: var(--fill); }
.due-seg button { color: var(--ink-2); font: 600 11px 'Manrope', sans-serif; padding: 6px 10px; border-radius: 8px; }
.due-seg button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(15,19,32,.1); }

/* ════ ПОСТУПЛЕНИЕ — конструктор задач по этапам (чистый сине-белый) ════ */
.m-ni .cnt.warn { background: var(--blue-tint); color: var(--blue); }

/* сводка по всему пути — стеклянная плашка с якорным числом */
.rm-summary { display: flex; align-items: center; gap: 18px; margin-top: 2px; margin-bottom: 4px;
  padding: 15px 18px; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.06), 0 14px 34px -26px rgba(21,32,59,.28); }
.rm-sum-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 15px; }
.rm-sum-figure { flex: none; display: flex; align-items: baseline; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; }
.rm-sum-figure b { font-size: 27px; font-weight: 700; color: var(--ink); line-height: 1; }
.rm-sum-figure span { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.rm-sum-meta { flex: 1; min-width: 0; }
.rm-sum-l { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px; }
.rm-prog-bar { height: 6px; border-radius: 5px; background: #E9ECF3; overflow: hidden; }
.rm-prog-bar i { display: block; height: 100%; border-radius: 5px; min-width: 6px;
  background: linear-gradient(90deg, var(--blue), #4C8DFF); transition: width .8s var(--ease); }
.rm-review-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 12px; font-size: 12.5px; font-weight: 600; color: var(--blue); background: var(--blue-tint);
  box-shadow: inset 0 0 0 1px rgba(47,107,255,.18); transition: transform .15s var(--ease), box-shadow .15s; }
.rm-review-cta:hover { box-shadow: inset 0 0 0 1px rgba(47,107,255,.42); transform: translateY(-1px); }
.rm-review-cta svg { color: var(--blue); }
.rm-review-cta .num { font-variant-numeric: tabular-nums; font-weight: 700; }
.rm-allclear { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px;
  border-radius: 12px; font-size: 12.5px; font-weight: 600; color: var(--green-ink); background: var(--green-soft); }
.rm-allclear svg { color: var(--green-ink); }

/* лента этапов — спина-таймлайн */
.rm-flow { margin-top: 24px; }
.rm-stage { display: flex; gap: 16px; }
.rm-rail { flex: none; width: 28px; display: flex; flex-direction: column; align-items: center; }
.rm-node { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: #fff;
  color: var(--ink-3); box-shadow: inset 0 0 0 1.5px rgba(17,21,31,.13); transition: box-shadow .2s, background .2s; }
.rm-line { flex: 1; width: 2px; background: rgba(17,21,31,.08); margin: 6px 0; min-height: 14px; }
.rm-stage:last-child .rm-line { display: none; }
.rm-stage.cur .rm-node { background: var(--blue); color: #fff;
  box-shadow: 0 0 0 4px var(--blue-tint), 0 6px 14px -6px rgba(47,107,255,.55); }
.rm-stage.done .rm-node { background: var(--blue); color: #fff; box-shadow: none; }
.rm-stage.done .rm-line { background: rgba(47,107,255,.30); }

.rm-body { flex: 1; min-width: 0; padding-bottom: 26px; }
.rm-stage:last-child .rm-body { padding-bottom: 4px; }
.rm-stage.empty .rm-body { padding-bottom: 16px; }
.rm-shead { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.rm-stitle { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; }
.rm-stage.todo .rm-stitle, .rm-stage.empty .rm-stitle { color: var(--ink-2); font-weight: 600; }
.rm-shead-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint); }
.rm-scount { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.rm-stag { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); }
.rm-ssub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.rm-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 13px;
  border-radius: 11px; background: var(--amber-soft); color: var(--amber-ink);
  font-size: 11.5px; font-weight: 500; line-height: 1.5; box-shadow: inset 0 0 0 1px rgba(154,91,18,.12); }
.rm-hint svg { color: var(--amber-ink); margin-top: 1px; flex: none; }

.rm-tasks { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }

/* карточка задачи — тихая, поднимается на hover/раскрытии */
.rm-task { position: relative; background: #fff; border-radius: 13px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.07); transition: box-shadow .15s, transform .15s; }
.rm-task:hover { box-shadow: inset 0 0 0 1px rgba(47,107,255,.28); }
.rm-task.open { box-shadow: inset 0 0 0 1px rgba(47,107,255,.34), 0 16px 36px -24px rgba(21,32,59,.32); }
/* тонкий левый кант по владельцу: клиент — сапфир, мы — нейтральный */
.rm-task::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px;
  border-radius: 0 2px 2px 0; background: rgba(17,21,31,.12); }
.rm-task.o-client::before { background: rgba(47,107,255,.5); }
/* «на проверке» — единственный громкий якорь среди строк */
.rm-task.st-review { background: linear-gradient(0deg, rgba(47,107,255,.055), rgba(47,107,255,.055)), #fff;
  box-shadow: inset 0 0 0 1px rgba(47,107,255,.34); }
.rm-task.st-review::before { background: var(--blue); }
.rm-task.st-return { box-shadow: inset 0 0 0 1px rgba(224,146,47,.42); }
.rm-task.st-return::before { background: var(--amber); }
.rm-task.st-done { background: #FCFCFD; }
.rm-task.st-done:hover { box-shadow: inset 0 0 0 1px rgba(17,21,31,.1); }

.rm-task-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; }
.rm-ck { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(17,21,31,.22); background: #fff; display: grid; place-items: center;
  color: transparent; transition: box-shadow .15s, background .15s; }
.rm-ck:hover { box-shadow: inset 0 0 0 1.5px var(--blue); }
.rm-task.st-doing .rm-ck { box-shadow: inset 0 0 0 5px var(--blue-tint), inset 0 0 0 1.5px rgba(47,107,255,.5); }
.rm-task.st-review .rm-ck { box-shadow: inset 0 0 0 5px #DCE7FF, inset 0 0 0 1.5px var(--blue); }
.rm-task.st-return .rm-ck { box-shadow: inset 0 0 0 1.5px var(--amber); }
.rm-task.st-done .rm-ck { background: var(--blue); box-shadow: none; color: #fff; }

.rm-tb { flex: 1; min-width: 0; }
.rm-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; word-break: break-word; }
.rm-task.st-done .rm-title { color: var(--ink-2); }
.rm-sub-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 5px;
  font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.rm-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); opacity: .5; }
.rm-who-t { font-weight: 600; color: var(--ink-2); }
.rm-task.o-client .rm-who-t { color: var(--blue); }
.rm-need-mini { display: inline-flex; align-items: center; gap: 5px; }
.rm-need-mini i { display: inline-flex; color: var(--ink-3); }
.rm-cnt-mini { display: inline-flex; align-items: center; gap: 5px; }
.rm-cnt-mini svg { color: var(--ink-3); }
.rm-cnt-mini.hl { color: var(--blue); font-weight: 600; }
.rm-cnt-mini.hl svg { color: var(--blue); }

.rm-side { flex: none; display: flex; align-items: center; gap: 8px; padding-top: 1px; }
.rm-due { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--ink-2); background: var(--fill); box-shadow: inset 0 0 0 1px rgba(17,21,31,.07); }
.rm-due svg { width: 11px; height: 11px; color: var(--ink-3); }
.rm-due.soon { color: var(--amber-ink); background: var(--amber-soft); box-shadow: inset 0 0 0 1px rgba(154,91,18,.14); }
.rm-due.soon svg { color: var(--amber-ink); }
.rm-due.over { color: var(--red-ink); background: var(--red-soft); box-shadow: inset 0 0 0 1px rgba(196,42,47,.16); }
.rm-due.over svg { color: var(--red-ink); }
.rm-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; color: var(--ink-2); background: var(--fill); }
.rm-status.st-doing { color: var(--blue); background: var(--blue-tint); }
.rm-status.st-review { color: #fff; background: var(--blue); }
.rm-status.st-return { color: var(--amber-ink); background: var(--amber-soft); }
.rm-pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: rm-pulse 1.6s ease-in-out infinite; }
@keyframes rm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.rm-exp { color: var(--ink-3); display: grid; place-items: center; margin-top: 1px;
  transition: transform .2s var(--ease); }
.rm-task.open .rm-exp { transform: rotate(90deg); color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .rm-pulse { animation: none; } }

/* раскрытая часть задачи */
.rm-detail { padding: 4px 16px 16px 46px; }
.rm-task.st-review .rm-detail, .rm-task.st-return .rm-detail, .rm-task.open .rm-detail {
  border-top: 1px solid rgba(17,21,31,.06); margin-top: 2px; padding-top: 14px; }
.rm-dsec { margin-top: 16px; }
.rm-dsec:first-child { margin-top: 0; }
.rm-dh { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.rm-dh-n { font-size: 10px; font-weight: 700; color: var(--blue); background: #fff;
  border-radius: var(--r-pill); padding: 1px 7px; box-shadow: inset 0 0 0 1px rgba(47,107,255,.3); letter-spacing: 0; }
.rm-need { font-size: 13px; color: var(--ink); line-height: 1.55; }
/* пошаговая инструкция «Как выполнить» — то, что ученик видит шагами в попапе */
/* «Кто делает и когда» в раскрытой задаче доски */
.rm-assign { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-assign .al-selwrap { flex: 1; min-width: 200px; }
.rm-assign .al-sel { font-size: 13px; padding: 9px 34px 9px 12px; }
.rm-a-due { flex: none; outline: none; font: 500 12.5px 'Manrope', sans-serif; color: var(--ink);
  background: #fff; border: 1px solid rgba(17,21,31,.1); border-radius: 10px; padding: 9px 11px;
  transition: border-color .15s, box-shadow .15s; }
.rm-a-due:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.rm-ahint { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }
.rm-howto { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.rm-howto li { font-size: 13px; color: var(--ink); line-height: 1.5; }
.rm-howto li::marker { color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; }
.rm-tip { color: var(--ink-2); }
/* тип ответа ученика: сегмент file / text / both / none */
.rm-submit-seg { display: inline-flex; gap: 4px; background: var(--fill); border-radius: 10px; padding: 3px; }
.rm-sub-t { border: 0; cursor: pointer; font: 600 12px/1.4 inherit; font-family: inherit; color: var(--ink-2);
  background: transparent; border-radius: 8px; padding: 5px 11px; transition: background .14s, color .14s, box-shadow .14s; }
.rm-sub-t:hover { color: var(--ink); }
.rm-sub-t.on { color: var(--blue); background: #fff; box-shadow: inset 0 0 0 1px rgba(47,107,255,.28); }
/* шиммер по задачам, которые только что изменил AI: полоса света слева направо */
.rm-task.rm-flash { position: relative; overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(47,107,255,.4); }
.rm-task.rm-flash::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 30%, rgba(47,107,255,.14) 48%, rgba(255,255,255,.65) 52%, rgba(47,107,255,.1) 58%, transparent 72%);
  animation: rm-shine 1.3s cubic-bezier(.4,.2,.2,1) .12s 2; }
@keyframes rm-shine { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .rm-task.rm-flash::after { animation: none; } }
.rm-achips { display: flex; flex-wrap: wrap; gap: 7px; }
.rm-achip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-2); background: #fff; border-radius: var(--r-pill); padding: 5px 11px 5px 9px;
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.1); }
.rm-achip svg { color: var(--blue); }

/* присланное клиентом */
.rm-subs { display: flex; flex-wrap: wrap; gap: 9px; }
.rm-subs-empty { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3);
  background: var(--fill); border-radius: 11px; padding: 11px 14px; box-shadow: inset 0 0 0 1px rgba(17,21,31,.06); }
.rm-subs-empty svg { color: var(--ink-3); }
.rm-sub { text-decoration: none; }
.rm-sub-img { display: flex; flex-direction: column; gap: 6px; width: 104px; }
.rm-sub-thumb { display: block; width: 104px; height: 74px; border-radius: 10px; background-size: cover;
  background-position: center; box-shadow: inset 0 0 0 1px rgba(17,21,31,.08); transition: box-shadow .15s; }
.rm-sub-img:hover .rm-sub-thumb { box-shadow: inset 0 0 0 1px var(--blue), 0 8px 20px -12px rgba(47,107,255,.5); }
.rm-sub-cap { font-size: 11px; color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 104px; }
.rm-sub-file { display: inline-flex; align-items: center; gap: 9px; background: #fff; border-radius: 11px;
  padding: 9px 12px; box-shadow: inset 0 0 0 1px rgba(17,21,31,.1); transition: box-shadow .15s; }
.rm-sub-file:hover { box-shadow: inset 0 0 0 1px rgba(47,107,255,.4); }
.rm-sub-fic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--blue-tint); color: var(--blue); }
.rm-sub-nm { font-size: 12.5px; font-weight: 600; color: var(--ink); max-width: 200px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rm-sub-open { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--blue); }
.rm-sub-open svg { color: var(--blue); }
.rm-sub-text { flex-basis: 100%; display: flex; gap: 9px; background: #fff; border-radius: 12px;
  padding: 12px 14px; box-shadow: inset 3px 0 0 var(--blue), inset 0 0 0 1px rgba(17,21,31,.08); }
.rm-sub-text svg { color: var(--blue); flex: none; margin-top: 2px; }
.rm-sub-text span { font-size: 13px; color: var(--ink); line-height: 1.55; }
/* карточка вложения ждёт резолва doc_id → реальной ссылки (см. resolveDocLink) */
.rm-sub-thumb--load { background-color: rgba(17, 21, 31, .045);
  background-image: linear-gradient(100deg, transparent 30%, rgba(17,21,31,.05) 50%, transparent 70%);
  background-size: 200% 100%; animation: rmSubPulse 1.3s ease-in-out infinite; }
.rm-sub-loading { opacity: .55; pointer-events: none; }
@keyframes rmSubPulse { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }

/* приёмка */
.rm-review-act { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.rm-return { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px;
  border-radius: 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: #fff; box-shadow: inset 0 0 0 1px rgba(17,21,31,.12); transition: color .15s, box-shadow .15s; }
.rm-return:hover { color: var(--amber-ink); box-shadow: inset 0 0 0 1px rgba(224,146,47,.5); }
.rm-ret-box { display: flex; gap: 8px; margin-top: 9px; }
.rm-ret-box[hidden] { display: none; }
.rm-ret-in { flex: 1; min-width: 0; outline: none; font: 500 13px 'Manrope', sans-serif; color: var(--ink);
  background: #fff; border: 1px solid var(--blue); border-radius: 11px; padding: 11px 13px;
  box-shadow: 0 0 0 3px rgba(47,107,255,.1); }

/* комментарии по задаче */
.rm-cmts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rm-cmt { max-width: 86%; border-radius: 13px; padding: 9px 13px; }
.rm-cmt.by-mgr { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }
.rm-cmt.by-client { align-self: flex-start; background: #fff; box-shadow: inset 0 0 0 1px rgba(17,21,31,.09);
  border-bottom-left-radius: 5px; }
.rm-cmt-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; }
.rm-cmt-who { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.rm-cmt.by-mgr .rm-cmt-who { color: rgba(255,255,255,.82); }
.rm-cmt.by-client .rm-cmt-who { color: var(--blue); }
.rm-cmt-when { font-size: 10.5px; font-weight: 500; }
.rm-cmt.by-mgr .rm-cmt-when { color: rgba(255,255,255,.6); }
.rm-cmt.by-client .rm-cmt-when { color: var(--ink-3); }
.rm-cmt-t { font-size: 13px; line-height: 1.5; }
.rm-cmt.by-client .rm-cmt-t { color: var(--ink); }
.rm-cmt-empty { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }

/* вложения внутри пузыря комментария */
.rm-catts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.rm-catt { text-decoration: none; }
.rm-catt.img { display: block; width: 118px; height: 84px; border-radius: 10px; background-size: cover;
  background-position: center; box-shadow: inset 0 0 0 1px rgba(17,21,31,.1); transition: transform .15s, box-shadow .15s; }
.rm-catt.img:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(47,107,255,.5), 0 10px 22px -12px rgba(21,32,59,.4); }
.rm-catt.file { display: inline-flex; align-items: center; gap: 8px; max-width: 230px; padding: 8px 11px;
  border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.1); transition: box-shadow .15s; }
.rm-catt.file:hover { box-shadow: inset 0 0 0 1px rgba(47,107,255,.4); }
.rm-catt.file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-catt.file svg { color: var(--blue); flex: none; }
.rm-cmt.by-mgr .rm-catt.img { box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.rm-cmt.by-mgr .rm-catt.file { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.rm-cmt.by-mgr .rm-catt.file svg { color: #fff; }

/* композер: зона превью + строка (скрепка · поле · отправка) */
.rm-cmt-add { display: flex; flex-direction: column; gap: 9px; }
.rm-cmt-bar { display: flex; gap: 8px; align-items: center; }
.rm-cmt-drafts { display: none; }
.rm-cmt-drafts.has { display: flex; flex-wrap: wrap; gap: 9px; padding: 2px 1px; }
.rm-cdraft { position: relative; }
.rm-cdraft.up { opacity: .7; }
.rm-cdraft-spin { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); border-top-color: var(--blue); animation: rm-spin .7s linear infinite; }
@keyframes rm-spin { to { transform: rotate(360deg); } }
.rm-cdraft.img { width: 58px; height: 58px; border-radius: 10px; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.12); }
.rm-cdraft.file { display: inline-flex; align-items: center; gap: 7px; padding: 9px 30px 9px 11px; border-radius: 10px;
  font-size: 12px; font-weight: 600; color: var(--ink); background: var(--fill); box-shadow: inset 0 0 0 1px rgba(17,21,31,.1); }
.rm-cdraft.file svg { color: var(--blue); flex: none; }
.rm-cdraft-nm { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-cdraft-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 2px 6px rgba(15,19,32,.3);
  transition: transform .15s; }
.rm-cdraft-x:hover { transform: scale(1.1); }
.rm-cdraft-x svg { width: 11px; height: 11px; }
.rm-cdraft.file .rm-cdraft-x { top: 50%; right: 7px; transform: translateY(-50%); box-shadow: none;
  background: transparent; color: var(--ink-3); width: 16px; height: 16px; }
.rm-cdraft.file .rm-cdraft-x:hover { color: var(--red); transform: translateY(-50%) scale(1.12); }
.rm-cmt-clip { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  color: var(--ink-3); background: var(--fill); box-shadow: inset 0 0 0 1px rgba(17,21,31,.08);
  transition: color .15s, background .15s, box-shadow .15s; }
.rm-cmt-clip:hover { color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(47,107,255,.25); }
.rm-cmt-in { flex: 1; min-width: 0; outline: none; font: 500 13px 'Manrope', sans-serif; color: var(--ink);
  background: #fff; border: 1px solid rgba(17,21,31,.1); border-radius: 11px; padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s; }
.rm-cmt-in::placeholder { color: var(--ink-3); }
.rm-cmt-in:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.rm-cmt-send { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--blue); color: #fff; transition: background .15s, transform .15s; }
.rm-cmt-send:hover { background: var(--blue-d); }
.rm-cmt-send:active { transform: scale(.96); }

.rm-dfoot { margin-top: 16px; }
.rm-del { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--ink-3); padding: 6px 2px; transition: color .14s; }
.rm-del:hover { color: var(--red); }

/* добавление задачи */
.rm-add-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 13px;
  border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--fill); transition: color .15s, background .15s; }
.rm-add-btn svg { color: var(--ink-3); transition: color .15s, transform .2s var(--ease); }
.rm-add-btn:hover { color: var(--blue); background: var(--blue-tint); }
.rm-add-btn:hover svg { color: var(--blue); }
.rm-add-btn.open { color: var(--blue); background: var(--blue-tint); }
.rm-add-btn.open svg { color: var(--blue); transform: rotate(45deg); }
.rm-add { margin-top: 10px; padding: 16px; border-radius: 14px; background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.07); }
.rm-add-own { display: inline-flex; gap: 3px; padding: 4px; border-radius: 11px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.06); }
.rm-add-own button { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2);
  font: 600 12px 'Manrope', sans-serif; padding: 7px 12px; border-radius: 8px;
  transition: color .15s, background .15s, box-shadow .15s; }
.rm-add-own button svg { color: var(--ink-3); }
.rm-add-own button.on { background: var(--blue-tint); color: var(--blue); box-shadow: inset 0 0 0 1px rgba(47,107,255,.25); }
.rm-add-own button.on svg { color: var(--blue); }
.rm-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.rm-add[data-o="client"] .rm-chip.o-team,
.rm-add[data-o="team"] .rm-chip.o-client { display: none; }
.rm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px 7px 9px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: #fff; box-shadow: inset 0 0 0 1px rgba(17,21,31,.1); transition: color .15s, background .15s, box-shadow .15s; }
.rm-chip svg { color: var(--ink-3); transition: color .15s; }
.rm-chip:hover { color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(47,107,255,.3); }
.rm-chip:hover svg { color: var(--blue); }
.rm-form { margin-top: 14px; padding-top: 15px; border-top: 1px solid rgba(17,21,31,.08); }
.rm-form > input { width: 100%; outline: none; font: 500 13px 'Manrope', sans-serif; color: var(--ink);
  background: #fff; border: 1px solid rgba(17,21,31,.1); border-radius: 11px; padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s; margin-bottom: 8px; }
.rm-form > input::placeholder { color: var(--ink-3); }
.rm-form > input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.rm-f-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px;
  align-items: start; margin: 13px 0 15px; }
.rm-f-cell-due { justify-self: end; }
.rm-f-l { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.rm-f-opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-3); opacity: .85; }
.rm-f-attach { display: flex; flex-wrap: wrap; gap: 7px; }
.rm-f-due { outline: none; font: 500 12.5px 'Manrope', sans-serif; color: var(--ink); background: #fff;
  border: 1px solid rgba(17,21,31,.1); border-radius: 10px; padding: 8px 11px;
  transition: border-color .15s, box-shadow .15s; }
.rm-f-due:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.rm-at-t { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; color: var(--ink-2); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.1); transition: color .15s, background .15s, box-shadow .15s; }
.rm-at-t svg { color: var(--ink-3); transition: color .15s; }
.rm-at-t:hover { color: var(--blue); box-shadow: inset 0 0 0 1px rgba(47,107,255,.3); }
.rm-at-t.on { color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px var(--blue); }
.rm-at-t.on svg { color: var(--blue); }
.rm-f-add { width: 100%; justify-content: center; }

/* обсуждение по задаче — триггер, открывает чат */
.rm-discuss { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-top: 16px;
  padding: 12px 14px; border-radius: 12px; background: var(--fill); box-shadow: inset 0 0 0 1px rgba(17,21,31,.06);
  transition: background .15s, box-shadow .15s; }
.rm-discuss:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(47,107,255,.3), 0 10px 26px -18px rgba(21,32,59,.3); }
.rm-discuss-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1px rgba(17,21,31,.07); }
.rm-discuss-main { flex: 1; min-width: 0; }
.rm-discuss-t { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.rm-discuss-t .num { color: var(--ink-3); font-weight: 700; margin-left: 3px; font-variant-numeric: tabular-nums; }
.rm-discuss-prev { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rm-discuss-go { flex: none; color: var(--ink-3); transition: transform .15s var(--ease), color .15s; }
.rm-discuss:hover .rm-discuss-go { color: var(--blue); transform: translateX(2px); }

/* чат-оверлей по задаче — просторный, лёгкий */
.rm-chat { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: #fff;
  animation: rm-chat-in .24s var(--ease); }
@keyframes rm-chat-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.rm-chat-head { flex: none; display: flex; align-items: center; gap: 14px; padding: 16px 26px;
  border-bottom: 1px solid var(--line); background: #fff; }
.rm-chat-back { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-2); background: var(--fill); transition: background .15s, color .15s; }
.rm-chat-back svg { transform: rotate(180deg); }
.rm-chat-back:hover { background: #ECEEF1; color: var(--ink); }
.rm-chat-hid { flex: 1; min-width: 0; }
.rm-chat-title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-chat-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.rm-chat-meta .rm-who-t { font-weight: 600; color: var(--ink-2); }
.rm-chat-meta .rm-who-t.cl { color: var(--blue); }
.rm-chat-head .rm-status { flex: none; }
.rm-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 26px 10px; background: var(--main); }
.rm-chat-scroll::-webkit-scrollbar { width: 8px; }
.rm-chat-scroll::-webkit-scrollbar-thumb { background: #E3E5EB; border-radius: 99px; }
.rm-chat-col { max-width: 680px; margin: 0 auto; }
.rm-chat-foot { flex: none; padding: 16px 26px 22px; border-top: 1px solid var(--line); background: #fff; }
.rm-chat-foot .rm-chat-col { display: block; }
/* в чате пузыри просторнее и читабельнее */
.rm-chat .rm-cmts { gap: 14px; margin-bottom: 0; }
.rm-chat .rm-cmt { max-width: 78%; padding: 12px 15px; border-radius: 16px; }
.rm-chat .rm-cmt.by-mgr { border-bottom-right-radius: 6px; }
.rm-chat .rm-cmt.by-client { border-bottom-left-radius: 6px; }
.rm-chat .rm-cmt-h { margin-bottom: 5px; }
.rm-chat .rm-cmt-t { font-size: 14px; line-height: 1.6; }
.rm-chat .rm-catt.img { width: 150px; height: 108px; }
.rm-chat-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  color: var(--ink-3); padding: 64px 24px; font-size: 13.5px; line-height: 1.6; }
.rm-chat-empty svg { color: var(--ink-3); opacity: .45; }

/* ── ОБСУЖДЕНИЯ: инбокс переписок по задачам ── */
/* тумблер инбокса: «Диалоги» ↔ «Обсуждения» — одна поверхность, две ленты */
.ibsw { display: flex; gap: 3px; margin: 12px 12px 2px; padding: 3px; background: var(--fill);
  border-radius: var(--r-pill); flex: none; }
.ibsw-b { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2);
  padding: 7px 10px; border-radius: var(--r-pill); transition: color .15s, background .15s; }
.ibsw-b:hover { color: var(--ink); }
.ibsw-b.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15,19,32,.06); }
.ibsw-n { font-size: 10.5px; font-weight: 700; color: #fff; background: var(--coral);
  border-radius: var(--r-pill); padding: 1px 6px; }
.ib-solo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-solo .ibsw { max-width: 344px; }
.ib-solo .tg-blank { flex: 1; }

.th-lhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 16px 0; }
.th-lh-t { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.th-lh-n { flex: none; font-size: 11.5px; font-weight: 600; color: var(--amber-ink); background: var(--amber-soft);
  padding: 3px 9px; border-radius: var(--r-pill); }
.th-lh-all { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--green-ink); }
.th-lh-all svg { width: 12px; height: 12px; }
/* строка обсуждения — та же .tg-row, тег задачи вместо статуса бота */
.th-row.on .tg-tag.st { background: #fff; }

.th-chat-in { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
/* тело обсуждения = лента «Диалогов» (.tg-thread), футер-композер во всю ширину */
.th-foot { flex: none; padding: 12px 18px 16px; border-top: 1px solid var(--line); background: #fff; }
.tg-thread-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; color: var(--ink-3); font-size: 13px; line-height: 1.5; max-width: 320px; }
.tg-thread-empty svg { color: var(--ink-3); opacity: .4; }
.tg-txt { display: block; }
.tg-atts { display: flex; flex-wrap: wrap; gap: 7px; }
.tg-bub .tg-atts:not(:last-child) { margin-bottom: 7px; }
.tg-msg.out .rm-catt.file { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.tg-msg.out .rm-catt.file svg { color: #fff; }
.tg-msg.out .rm-catt.img { box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
/* Присланный скриншот показываем самой картинкой: менеджер спрашивает «какая ошибка?»
   и должен увидеть ее, а не слово «[изображение]». Высоту ограничиваем — переписку
   должно быть видно вокруг вложения. */
.tg-img { display: block; max-width: min(320px, 100%); border-radius: 12px; overflow: hidden;
  background: var(--fill); box-shadow: inset 0 0 0 1px var(--line-2); }
.tg-img img { display: block; width: 100%; max-height: 380px; object-fit: contain; }
/* contain, а не cover: скриншот присылают, чтобы показать ОШИБКУ, а обрезка по
   центру съедает как раз ее. Вертикальный снимок с телефона ложится в кадр
   целиком, полный размер открывается нажатием. */
.tg-img:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.tg-img.gone { max-width: none; padding: 7px 11px; font-size: 12px; color: var(--ink-3); }
.tg-img.gone img { display: none; }
.tg-img.gone::after { content: 'вложение не открылось'; }
.tg-msg.out .tg-img { box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
/* шапка обсуждения = шапка диалога (.tg-chead), плюс мета задачи */
.th-chead { padding: 11px 18px; }
.th-chead .tg-cs { font-size: 12px; color: var(--ink-3); }
.th-chead .tg-cs b { font-weight: 600; color: var(--ink-2); }
.th-chead .rm-who-t { font-weight: 600; color: var(--ink-2); }
.th-chead .rm-who-t.cl { color: var(--blue); }
.th-cstage { color: var(--ink-3); }
.th-chead .rm-status { flex: none; }
.th-open { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  border-radius: 10px; font: 600 12.5px 'Manrope', sans-serif; color: var(--ink-2); background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.07); transition: color .15s, background .15s, box-shadow .15s; }
.th-open svg { width: 14px; height: 14px; color: var(--ink-3); transition: color .15s; }
.th-open:hover { color: var(--blue); background: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(47,107,255,.25); }
.th-open:hover svg { color: var(--blue); }
@media (max-width: 760px) { .th-open span { display: none; } .th-open { padding: 0 11px; } }

/* ── ДОБАВИТЬ КЛИЕНТА: модальная форма ── */
.al-ov { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(17,21,31,.34); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .18s var(--ease); }
.al-ov.show { opacity: 1; }
/* Форма выше экрана — обычное дело на телефоне: семь полей в 390px не помещаются
   никогда. Поэтому карточка это колонка с фиксированной высотой, прокручивается
   внутри только тело, а шапка и кнопка сохранения стоят на месте. Без этого
   карточка центрировалась целиком, уезжала за оба края экрана, и кнопка
   «Поставить задачу» оказывалась там, куда нельзя доскроллить. */
.al-card { width: 100%; max-width: 460px; background: #fff; border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  box-shadow: 0 30px 80px -24px rgba(17,21,31,.5), 0 2px 8px rgba(17,21,31,.08);
  transform: translateY(10px) scale(.985); opacity: 0; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.al-card > .al-head, .al-card > .al-sub, .al-card > .al-foot { flex: none; }
.al-card > .al-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; }
.al-ov.show .al-card { transform: none; opacity: 1; }
.al-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 0; }
.al-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.al-title { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin-top: 4px; }
.al-x { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--ink-3); background: var(--fill); transition: color .15s, background .15s; }
.al-x:hover { color: var(--ink); background: #ECEEF1; }
.al-sub { padding: 8px 24px 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.al-body { padding: 18px 24px 4px; display: flex; flex-direction: column; gap: 13px; }
.al-row { display: flex; gap: 12px; }
.al-row .al-f { flex: 1; min-width: 0; }
.al-f { display: flex; flex-direction: column; gap: 6px; }
/* поле, которое в текущем режиме формы не спрашивают (например направление у
   шага цели — он берет его у цели) */
.al-f.hid { display: none; }
.al-l { font-size: 11.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.al-l i { color: var(--blue); font-style: normal; }
/* border: 0 — иначе браузер рисует свою серую рамку поверх нашей inset-обводки,
   и поле выбивается из системы (видно было на баллах DET и ссылке на тест) */
.al-in { width: 100%; font: 500 14px 'Manrope', sans-serif; color: var(--ink); background: var(--fill);
  border: 0; border-radius: 11px; padding: 11px 13px; box-shadow: inset 0 0 0 1px rgba(17,21,31,.07);
  transition: box-shadow .15s, background .15s; }
.al-in::placeholder { color: var(--ink-3); }
.al-in:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 3px rgba(47,107,255,.1); outline: none; }
.al-in.al-err { box-shadow: inset 0 0 0 1.5px var(--red), 0 0 0 3px rgba(196,42,47,.1); background: #fff; }
.al-ta { resize: vertical; min-height: 46px; line-height: 1.5; }
/* подсказка под полем — там, где выбор неочевиден по подписи (направление цели) */
.al-hint { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }

/* ── Помощник в форме постановки ────────────────────────────────────────────
   Единственный цветной блок формы: он приглашает начать отсюда, а не с поля
   «что сделать». Остальные поля остаются тихими. */
.al-ai { display: flex; flex-direction: column; gap: 9px; padding: 13px;
  border-radius: 14px; background: var(--blue-tint); }
.al-ai-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 700; color: var(--navy); }
.al-ai-h svg { color: var(--blue); }
.al-ai .al-in { background: #fff; }
.al-ai-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.al-ai-row .bp { flex: none; }
.al-ai-row .bp.loading { opacity: .6; pointer-events: none; }
.al-ai-note { font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
.al-ai-note.ask { color: var(--navy); font-weight: 600; }
/* Микрофон — главное действие блока: задачу чаще диктуют на ходу, чем печатают.
   Пока идет запись, кнопка сама становится счетчиком и красной точкой: другого
   признака, что тебя слышат, у человека нет. */
.al-mic { display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 36px; padding: 0 15px; border: 0; border-radius: var(--r-pill);
  font: 700 12.5px 'Manrope', sans-serif; color: #fff; background: var(--navy);
  cursor: pointer; transition: background .15s var(--ease), transform .12s var(--ease); }
.al-mic:hover { background: #142138; }
.al-mic:active { transform: scale(.98); }
.al-mic svg { color: currentColor; }
.al-mic-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.al-mic.rec { background: var(--red); font-feature-settings: 'tnum'; }
.al-mic.rec:hover { background: var(--red-ink); }
.al-mic.rec svg { display: none; }
.al-mic.rec .al-mic-dot { display: block; animation: micPulse 1.1s var(--ease) infinite; }
.al-mic.busy { background: var(--ink-3); pointer-events: none; }
@keyframes micPulse { 0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.72); } }
@media (prefers-reduced-motion: reduce) { .al-mic.rec .al-mic-dot { animation: none; } }
.al-selwrap { position: relative; display: block; }
.al-sel { width: 100%; appearance: none; -webkit-appearance: none; font: 500 14px 'Manrope', sans-serif;
  color: var(--ink); background: var(--fill); border: 0; border-radius: 11px; padding: 11px 34px 11px 13px;
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.07); cursor: pointer; transition: box-shadow .15s, background .15s; }
.al-sel:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 3px rgba(47,107,255,.1); outline: none; }
.al-selwrap::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.al-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 18px 24px 22px; }
/* Скрытый футер модалки: у .al-foot свой display, и без этого правила атрибут
   hidden браузер проигрывает классу (та же грабля, что у .tsk-sec[hidden]). */
.al-foot[hidden] { display: none; }

/* Личные уведомления сотрудника (меню профиля → «Уведомления»). Живет внутри
   модалки-формы: свой рецепт не заводим, берем .al-* и сегмент .dperiod. */
/* сегмент тянется на всю карточку, кнопки делят ширину поровну: на 390px «Не беспокоить»
   иначе вылезает за край (padding из .dperiod рассчитан на широкий топбар) */
.np-seg { display: flex; width: 100%; }
.np-seg button { flex: 1; min-width: 0; padding: 8px 9px; gap: 6px;
  display: inline-flex; align-items: center; justify-content: center; }
.np-seg button svg { width: 13px; height: 13px; }
/* на телефоне иконки в сегменте уступают место подписи: «Не беспокоить» иначе обрезается
   внутри своей кнопки (треть от 294px не вмещает иконку и текст) */
@media (max-width: 480px) { .np-seg button svg { display: none; } .np-seg button { gap: 0; } }
/* вариантов четыре («Оба» — отдельный), в одну строку на телефоне они не помещаются:
   раскладываем сегмент в две строки, иначе «Не беспокоить» уезжает за край карточки */
@media (max-width: 520px) {
  .np-seg { flex-wrap: wrap; }
  .np-seg button { flex: 1 1 calc(50% - 3px); }
}
.np-state { display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.np-hint { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
/* «Оба» = два подключения: шаги разделяем линией, иначе два абзаца с кнопками
   читаются как один и человек делает только первый */
.np-step + .np-step { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.np-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.np-act .bp { padding: 10px 15px; font-size: 13px; text-decoration: none; }
.np-act .al-cancel { padding: 10px 14px; display: inline-flex; align-items: center; gap: 7px; }
/* за какие темы клиенты приходят вам — справка, не настройка: тише основного блока */
.np-topics { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.np-topics b { color: var(--ink); font-weight: 700; }
.np-skel { height: 46px; }
.np-wait { opacity: .55; pointer-events: none; transition: opacity .15s var(--ease); }
.al-cancel { height: 42px; padding: 0 16px; border-radius: 11px; font: 600 13.5px 'Manrope', sans-serif;
  color: var(--ink-2); background: var(--fill); transition: color .15s, background .15s; }
.al-cancel:hover { color: var(--ink); background: #ECEEF1; }
.al-save { height: 42px; }
.al-save.loading { opacity: .6; pointer-events: none; }
.lead-add { gap: 6px; }

/* Пригласить пачкой (этап 11): загрузка реестра и отчет по строкам */
.czb-tpl { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 8px 12px; border-radius: 10px; font: 600 13px 'Manrope', sans-serif;
  color: var(--blue-d); background: var(--blue-tint); transition: background .15s; }
.czb-tpl:hover { background: #DEE8FF; }
.czb-drop { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 26px 18px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--fill); color: var(--ink-2); cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s, color .15s; }
.czb-drop:hover { border-color: var(--blue); color: var(--ink); }
.czb-drop.has { border-style: solid; border-color: var(--green); background: var(--green-soft);
  color: var(--green-ink); }
.czb-drop-i { color: var(--ink-3); }
.czb-drop.has .czb-drop-i { color: var(--green-ink); }
.czb-drop-t { font-weight: 600; font-size: 13.5px; word-break: break-all; }
.czb-list { display: flex; flex-direction: column; gap: 2px; }
.czb-row { display: grid; grid-template-columns: 28px 1fr auto minmax(0, 40%);
  align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.czb-row:last-child { border-bottom: 0; }
.czb-n { color: var(--ink-3); font-feature-settings: 'tnum'; font-size: 12.5px; text-align: right; }
.czb-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.czb-msg { color: var(--ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .al-row { flex-direction: column; gap: 13px; } .lead-add span { display: none; } }
/* Телефон: форма встает листом снизу — так же, как везде на мобильных. Экран
   отдан ей целиком, кнопка сохранения всегда на виду над нижним краем, а
   поля прокручиваются под ней. Отступ снизу учитывает индикатор жестов iPhone. */
@media (max-width: 560px) {
  .al-ov { align-items: flex-end; padding: 0; }
  .al-card { max-width: none; border-radius: 18px 18px 0 0;
    max-height: 94vh; max-height: 94dvh; transform: translateY(24px); }
  .al-head { padding: 18px 18px 0; }
  .al-sub, .al-body, .al-foot { padding-left: 18px; padding-right: 18px; }
  /* Тело едет под шапкой — без линии верхнее поле выглядит просто обрезанным. */
  .al-card > .al-body { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 12px; }
  .al-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); gap: 8px;
    border-top: 1px solid var(--line); background: #fff; }
  .al-foot .al-save { flex: 1; }
}

/* ════ ЗАДАЧИ КОМАНДЫ ════════════════════════════════════════════════════════
   Строка списка и карточка задачи. Тех же рецептов, что весь список лидов:
   плоско, плотно, семантика цветом только по формуле -soft + -ink. */
.tsk-who { display: flex; align-items: center; gap: 9px; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tsk-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: -.01em;
  background: linear-gradient(140deg, var(--blue), var(--navy)); }
.tsk-nobody { color: var(--ink-3); font-weight: 500; }
.dy-today { opacity: 0; transition: opacity .14s; }
.trow.dy-row:hover .dy-today, .trow.dy-row:focus-within .dy-today { opacity: 1; }
@media (max-width: 720px) { .dy-today { opacity: 1; } }
.tsk-due { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; }
.tsk-due svg { color: var(--ink-3); }
.tsk-due.due-none { color: var(--ink-3); font-weight: 500; }
.tsk-due.due-now { color: var(--amber-ink); }
.tsk-due.due-soon { color: var(--ink-2); }
/* просрочка — единственное красное в списке: большое красное = только негатив */
.tsk-due.due-over { color: var(--red-ink); }
.tsk-due.due-over svg { color: var(--red-ink); }

/* Прогресс цели в строке списка. Единственная шкала здесь намеренно тонкая:
   строка списка — не дашборд, полоса подсказывает движение боковым зрением, а
   точное «сколько» дочитывается цифрой рядом. Растет тем же width .9s, что и
   шкалы дашборда. */
/* Строка с полосой выше фиксированных 58px. Смешанных списков не бывает: цель с
   шагами живет только в срезе «Цели», а туда попадают одни цели — ряд остается
   ровным. */
.trow.tsk-grid.has-prog { height: auto; min-height: 74px; padding-top: 12px; padding-bottom: 12px; }
.tsk-prog { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.tsk-prog-b { width: 132px; flex: none; height: 4px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.tsk-prog-b i { display: block; height: 100%; border-radius: 999px; background: var(--blue);
  transition: width .9s var(--ease); }
.tsk-prog-n { font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: -.02em; }

/* Пометка цели в строке задачи. Не чип-статус и не тег: это ссылка на смысл
   задачи, поэтому тихая, но кликабельная — синеет только на наведении.
   Строка с пометкой выше фиксированных 58px: та же логика, что у строки цели
   с прогрессом (.tsk-grid.has-prog). */
.trow.tsk-grid.has-goal { height: auto; min-height: 78px; padding-top: 12px; padding-bottom: 12px; }
.tsk-goal { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  max-width: 100%; font: 600 11.5px 'Manrope', sans-serif; color: var(--ink-2);
  background: var(--fill); border-radius: var(--r-pill); padding: 3px 9px 3px 7px;
  transition: .14s var(--ease); overflow: hidden; }
.tsk-goal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-goal svg { flex: none; color: var(--ink-3); }
.tsk-goal:hover { background: var(--blue-tint); color: var(--blue); }
.tsk-goal:hover svg { color: var(--blue); }

/* Свое дело в списке: галочка слева и тихий перенос на завтра справа. Оба
   действия появляются только там, где человек и исполнитель, и постановщик —
   в чужой задаче отметка «сделано» это приемка, и одним кликом ее не ставят. */
/* Свое дело в списке задач — строка сетки, а не блок «ответственный» из карточки
   лида (.own ниже по файлу — другой компонент с тем же именем, он делал строку
   flex с серой заливкой). Возвращаем строке ее сетку явно. */
.trow.tsk-grid.own { display: grid; margin-top: 0; padding: 0 24px; background: none; border-radius: 0; }
.trow.tsk-grid.own:hover { background: #FBFBFC; }
.trow.tsk-grid.own .t-cell { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.trow.tsk-grid.own .t-ttl,
.trow.tsk-grid.own .t-sub { flex-basis: calc(100% - 30px); }
.tsk-chk { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid #C5CCDA; background: #fff; display: grid; place-items: center;
  color: transparent; cursor: pointer; transition: .15s var(--ease); }
.tsk-chk:hover { border-color: var(--blue); color: var(--blue); }
.tsk-chk svg { width: 11px; height: 11px; }
.trow.tsk-grid.done { opacity: .45; }
.trow.tsk-grid.done .t-ttl { text-decoration: line-through; color: var(--ink-3); }
.trow.tsk-grid.done .tsk-chk { background: var(--blue); border-color: var(--blue); color: #fff; }
.tsk-move { display: none; align-items: center; gap: 4px; margin-left: 8px;
  font: 600 11.5px 'Manrope', sans-serif; color: var(--ink-3); background: var(--fill);
  border: 0; border-radius: var(--r-pill); padding: 3px 9px 3px 7px; cursor: pointer;
  transition: .14s var(--ease); }
.tsk-move svg { flex: none; }
.trow.tsk-grid.own:hover .tsk-move { display: inline-flex; }
.tsk-move:hover { background: var(--blue-tint); color: var(--blue); }

/* ── Мой день ────────────────────────────────────────────────────────────────
   Список дел на проверку после диктовки. Строка тут не карточка и не поле формы:
   галочка, текст и срок в одну линию, потому что человек пробегает список
   глазами и снимает лишнее, а не заполняет анкету. */
.dp-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.dp-h { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); margin-bottom: 2px; }
.dp-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 8px;
  border-radius: 11px; background: var(--fill); cursor: pointer; transition: background .14s var(--ease); }
.dp-row:hover { background: #EFF1F6; }
.dp-chk { position: absolute; opacity: 0; pointer-events: none; }
.dp-mark { width: 19px; height: 19px; flex: none; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 1.5px #C5CCDA; display: grid; place-items: center;
  color: transparent; transition: .14s var(--ease); }
.dp-chk:checked + .dp-mark { background: var(--blue); box-shadow: none; color: #fff; }
.dp-in { flex: 1; min-width: 0; font: 600 13.5px 'Manrope', sans-serif; color: var(--ink);
  background: transparent; border: 0; border-radius: 8px; padding: 3px 6px; }
.dp-in:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); outline: none; }
.dp-chk:not(:checked) ~ .dp-in { color: var(--ink-3); text-decoration: line-through; }
.dp-when { flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }

/* ── Срез «Цели» ─────────────────────────────────────────────────────────────
   Цели по направлениям: заголовок отдела, под ним его цели с процентом. */
/* Цели компании — первый блок и единственный акцент экрана: остальные
   направления это зоны ответственности внутри того же вектора. */

/* ── Дерево «Вся команда» ────────────────────────────────────────────────────
   Три уровня: направления, цели направления, шаги цели. Разворачивающихся
   веток нет намеренно — на экране всегда один тип объектов, а где ты сейчас,
   говорит путь сверху. */
.tr-path { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--line); }
.tr-crumb { font: 600 12.5px 'Manrope', sans-serif; color: var(--ink-3);
  transition: color .14s var(--ease); }
button.tr-crumb:hover { color: var(--blue); }
.tr-crumb.on { color: var(--ink); font-weight: 700; }
.tr-sep { display: inline-flex; color: var(--ink-3); opacity: .6; }
.tr-grid { grid-template-columns: minmax(180px,1fr) 190px 96px 110px 30px; }
.tr-goal { grid-template-columns: minmax(180px,1fr) 190px 150px 30px; }
.tr-task { grid-template-columns: minmax(180px,1fr) 150px 116px; }
.tr-name { display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; }
.tr-name .t-sub { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.tr-prog { min-width: 0; }
.tr-prog .tsk-prog { margin-top: 0; }
.tr-go { width: 30px; height: 30px; border-radius: 9px; background: var(--fill);
  display: grid; place-items: center; color: var(--ink-3); transition: .15s var(--ease); }
.trow:hover .tr-go { background: var(--blue); color: #fff; }
/* Подзаголовок внутри списка: «3 цели в работе», «2 задачи вне целей». Тот же
   капс-микролейбл, что у шапок таблиц, — второй рецепт заголовка не заводим. */
.tr-sec { padding: 15px 24px 7px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tr-goalhead { display: flex; flex-direction: column; gap: 12px;
  padding: 18px 24px; border-bottom: 1px solid var(--line); }
.tr-gh-t { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  text-wrap: balance; }
.tr-gh-r { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.tr-gh-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tr-goalhead .tsk-prog { margin-top: 0; }
.tr-goalhead .tsk-prog-b { flex: 1 1 160px; width: auto; max-width: 320px; }
/* Подпись «1 из 4» не сжимаем: на узком экране она иначе переносится по слову
   и встает в три строки столбиком. */
.tr-goalhead .tsk-prog-n { flex: none; white-space: nowrap; }
.tr-open { margin: 14px 24px 18px; align-self: flex-start; }

/* ── Срез «Готово» ───────────────────────────────────────────────────────────
   Сделанное за период, сгруппированное по целям. Зеленый здесь один и только
   на галочке принятой задачи: если красить зеленым все, экран превращается в
   поздравительную открытку и перестает читаться. */
.dn-sum { padding: 13px 24px; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2); }
.dn-sum b { color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
.dn-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.dn-g { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.dn-g.closed { border-color: #CFE7D9; }
.dn-gh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--fill); }
.dn-g.closed .dn-gh { background: var(--green-soft); }
.dn-g.nogoal .dn-gt { color: var(--ink-2); }
.dn-gt { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-gn { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ink-3); flex: none; }
.dn-flag { display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green-ink); }
.dn-gh .tsk-prog { margin-top: 0; }
.dn-t { display: grid; grid-template-columns: 22px minmax(0,1fr) 150px 110px 78px; align-items: center;
  gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); cursor: pointer;
  transition: background .14s var(--ease); }
.dn-t:hover { background: #FBFBFC; }
.dn-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-ink); }
.dn-tt { font-size: 13.5px; color: var(--ink); display: flex; align-items: baseline; gap: 8px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-cl { font-size: 12px; color: var(--ink-3); flex: none; }
.dn-who { font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-when { font-size: 12.5px; color: var(--ink-3); text-align: right; }

/* ── Табло «По людям» ────────────────────────────────────────────────────────
   Свод по сотрудникам за период: строка на человека, пять чисел. Это таблица
   чисел, поэтому все украшение здесь — типографика. Нули приглушены (глаз
   ищет, где работа есть, а не пересчитывает пустые клетки), красное одно —
   просрочка, зеленое одно — принятое. Никакой зебры и вертикальных линеек. */
/* Имя тянется, но не бесконечно: на широком мониторе колонка в 1.6fr отрывает
   человека от его же чисел на пол-экрана. */
.brd-grid { grid-template-columns: minmax(200px, 460px) repeat(5, minmax(94px, 1fr)); }
.brd-grid .th:not(:first-child), .brd-n { text-align: right; }
.brd-who { display: flex; align-items: center; gap: 10px; min-width: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink); }
.brd-nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.brd-nm .t-sub { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.brd-n { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.brd-n.zero { color: var(--ink-3); font-weight: 500; }
.brd-n.bad  { color: var(--red-ink); }
.brd-n.ok   { color: var(--green-ink); }
/* Итог отделен линией, а не заливкой: заливка здесь читалась бы как еще один
   человек, только выделенный. Ховера у него нет — кликать не по чему. */
.brd-total { border-top: 1px solid var(--line-2); }
.brd-total:hover { background: none; }
.brd-total .brd-who { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.brd-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.brd-label { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  min-width: 138px; text-align: center; }
.brd-arrow { width: 28px; height: 28px; border-radius: 9px; }
.brd-arrow.prev svg { transform: rotate(180deg); }
.brd-note { padding: 12px 24px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
/* Отчет за день внутри строки: занимает всю ширину под числами, поэтому строка
   становится выше — как строка цели с прогрессом (.tsk-grid.has-prog). */
.trow.brd-grid.has-note { height: auto; min-height: 58px; padding-top: 12px; padding-bottom: 12px; }
.brd-note-row { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px;
  margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.brd-note-row svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.brd-idle { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 13px 24px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3); }
.brd-il { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); flex: none; }
.brd-more { font-weight: 700; color: var(--ink-2); }

/* ── План на период и отчет за него ──────────────────────────────────────────
   Экран ритуала, а не еще один список: сверху две плашки сдачи, под ними то,
   что в план не разложено, и только потом сами задачи. Плашка сдачи — мини-
   карточка на серой заливке, как и все мини-карточки CRM: ни тени, ни рамки,
   глубина заливкой. Кнопка стоит только там, где сдача еще нужна, поэтому на
   экране всегда ровно один призыв к действию, а не два одинаковых. */
.rh-body { padding-top: 4px; }
/* «Как это работает» — объяснение на самом экране, а не в инструкции, которую
   надо искать. Синий тинт, а не серая заливка плашек: это подсказка, а не еще
   один блок данных, и человек должен видеть разницу с первого взгляда.
   Скрывается насовсем, поэтому позволяет себе занять место на первом заходе. */
.rh-how { margin: 16px 24px 2px; padding: 14px 18px 15px; border-radius: 14px;
  background: var(--blue-tint); }
.rh-hh { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue-d); }
.rh-hh svg { color: var(--blue); }
.rh-hx { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 8px; color: var(--blue-d); opacity: .55; transition: .14s var(--ease); }
.rh-hx:hover { opacity: 1; background: rgba(47,107,255,.1); }
.rh-hl { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.rh-hl li { font-size: 12.5px; line-height: 1.5; color: #2C3A57; }
.rh-hl li::marker { font-weight: 700; color: var(--blue); }
/* Пустой план: текст и действие рядом, иначе объяснение упирается в тупик. */
.rh-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rh-empty span { max-width: 420px; }

.rh-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 24px 4px; }
.rh-p { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 15px;
  border-radius: 14px; background: var(--fill); }
/* Пропущенный срок — единственное красное на экране. Полоской слева, а не
   заливкой всей плашки: это состояние одной строки работы, а не авария. */
.rh-p.miss { box-shadow: inset 3px 0 0 var(--red); }
.rh-ph { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rh-l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
.rh-ph .sev { margin-left: auto; }
.rh-n { font-size: 32px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); }
.rh-s { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.rh-said { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.rh-said svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.rh-pf { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.rh-due { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.rh-pf .bp, .rh-pf .qchip { margin-left: auto; }
.rh-hint { margin-left: auto; font-size: 12px; color: var(--ink-3); }
/* Тихая кнопка на серой плашке: у .qchip заливка ровно того же серого, и на
   --fill он растворяется в фоне до состояния «просто текст». Белый с тонкой
   рамкой — тот же тихий уровень, но кнопка снова видна как кнопка. */
.rh-p .qchip, .rh-loose .qchip { background: #fff; border-color: var(--line); }
.rh-p .qchip:hover, .rh-loose .qchip:hover { background: #F0F2F6; }
/* Состояния сдачи — своя семья рядом с .sev.st-*: словари не смешиваем. */
.sev.rh-miss { color: var(--red-ink);   background: var(--red-soft); }
.sev.rh-late { color: var(--amber-ink); background: var(--amber-soft); }

/* Цели без шагов в периоде: то, ради чего экран и нужен. Стоят выше списка
   задач — «чего я не запланировал» важнее, чем «что я делаю». */
.rh-loose { margin: 16px 24px 4px; border-radius: 14px; background: var(--fill); padding: 4px 16px 8px; }
.rh-lh { display: flex; align-items: center; gap: 8px; padding: 13px 0 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rh-lh svg { color: var(--amber); }
.rh-lh .cnt { margin-left: auto; }
.rh-lr { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); cursor: pointer; }
.rh-lt { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-add { flex: none; }
.rh-list { margin-top: 12px; border-top: 1px solid var(--line); }
/* В своем плане колонки исполнителя нет — он один и тот же в каждой строке. */
.rh-list .trow.tsk-grid { grid-template-columns: minmax(0,1fr) 150px 116px; }

/* Срез руководителя: кто сдал, кто нет. Две колонки состояния и два числа. */
.rh-grid { grid-template-columns: minmax(180px, 380px) 190px 190px minmax(90px,1fr) minmax(90px,1fr); }
.rh-grid .th:nth-child(n+4), .rh-grid .brd-n { text-align: right; }
/* Переключатель «Мой / Команда» — тот же сегмент .vseg, но с текстом вместо
   иконок: 36px под иконку обрезают слово. */
.rh-who button { width: auto; padding: 0 14px; font: 600 12.5px 'Manrope', sans-serif; }
.rh-c { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Строка человека под числами — во всю ширину, как отчет дня в табло: рядом с
   чипом она обрезается до трех слов, а читают ее целиком. */
.trow.rh-grid.has-note { height: auto; min-height: 58px; padding-top: 12px; padding-bottom: 12px; }
.rh-note { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px;
  margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.rh-note svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.rh-note b { font-weight: 700; color: var(--ink-3); }

/* ── Приемка отчета ──────────────────────────────────────────────────────────
   Метка судьбы отчета рядом со «сдан»: ждет приемки (амбер — это дело
   руководителя), принят (зеленый), на доработке (красный — вернулось). */
.rh-rv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 2px;
  background: none; border: 0; cursor: pointer; min-width: 0; }
/* Метка приемки — та же семья, что все чипы: модификатор на .sev, не свой чип.
   Иначе рядом со «сдан» (тоже .sev) она другой высоты и скругления. */
.sev.rv-wait { color: var(--amber-ink); background: var(--amber-soft); }
.sev.rv-ok   { color: var(--green-ink); background: var(--green-soft); }
.sev.rv-back { color: var(--red-ink);   background: var(--red-soft); }
.rh-rv-btn:hover .sev { filter: brightness(.97); }
/* Сколько ждет приемки — строка над таблицей. Амбер: это очередь действий. */
.rh-await { display: flex; align-items: center; gap: 9px; margin: 14px 24px 2px;
  padding: 11px 15px; border-radius: 12px; background: var(--amber-soft);
  color: var(--amber-ink); font-size: 13px; font-weight: 500; }
.rh-await svg { flex: none; color: var(--amber-ink); }
.rh-await b { font-weight: 700; }
/* Судьба отчета в своей плашке «Отчет за период». */
.rh-rvline { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
  font-size: 12.5px; line-height: 1.45; font-weight: 500; }
.rh-rvline svg { flex: none; margin-top: 2px; }
.rh-rvline.ok { color: var(--green-ink); }
.rh-rvline.back { color: var(--red-ink); }

/* Карточка приемки (модалка). */
.rv-badge { align-self: flex-start; margin-bottom: 4px; }
.rv-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 4px;
  font-size: 13px; color: var(--ink-2); }
.rv-facts b { color: var(--ink); font-weight: 700; }
.rv-facts .rv-bad b { color: var(--red-ink); }
.rv-said { margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--fill); font-size: 13.5px; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; }
.rv-said.muted { color: var(--ink-3); }
.rv-lbl { font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.rv-state { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px;
  font-size: 13px; font-weight: 600; line-height: 1.45; }
.rv-state svg { flex: none; margin-top: 1px; }
.rv-state.ok { color: var(--green-ink); }
.rv-state.back { color: var(--red-ink); }
.rv-note { margin-top: 14px; }
.rv-foot .al-cancel { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.rv-foot .al-cancel svg { flex: none; }
.rv-foot .al-cancel.armed { color: var(--red-ink); background: var(--red-soft); }

/* Согласованные сроки. Настройка команды, поэтому лежит на экране команды, а
   не в отдельном разделе: правило и его исполнение видны рядом. */
.rh-sched { padding: 16px 24px 20px; border-top: 1px solid var(--line); }
.rh-shh { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px; }
.rh-sr { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 0;
  border-top: 1px solid var(--line); }
/* Выключенный период гасим целиком: правила у него остаются, но спрашивать по
   ним никого не будут, и на экране это должно читаться сразу. */
.rh-sr.off { opacity: .55; }
.rh-sp { min-width: 76px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
/* Тумблер периода: включенный — синим тинтом, а не темной пилюлей .qchip.on.
   Три навы подряд в правом краю таблицы весят больше, чем сами сроки. */
.rh-onoff { margin-left: auto; }
.rh-onoff.on { background: var(--blue-tint); color: var(--blue); border-color: transparent; }
.rh-onoff.on:hover, .qchip.zm-rep.on:hover { background: #DCE6FF; color: var(--blue-d); }
.rh-sl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
/* Поля в строке — по содержимому, а не во всю ширину: у .al-in width 100%, и
   без этого каждый селект уезжает на свою строку. */
.rh-sr .al-in { width: auto; }
.rh-t { width: 92px; }
.rh-d { width: 152px; }
.rh-sf { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rh-sf .rh-hint { margin-left: 0; }
.rh-sf .bp { margin-left: auto; }

/* карточка задачи: та же модалка, но шире — внутри лента истории */
.tsk-card { max-width: 580px; display: flex; flex-direction: column;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
.tsk-load { display: flex; gap: 7px; justify-content: center; padding: 60px; }
.tsk-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 24px 0;
  position: relative; }

/* Перенос срока (только cap tasks_due). Плашка-кнопка отличается от подписи
   шевроном и ховером: срок остается тем же чипом, а не превращается в контрол
   ради права его менять. */
.tsk-duebtn { cursor: pointer; border-radius: var(--r-pill); padding: 3px 9px 3px 8px; margin: -3px 0;
  transition: background .14s, color .14s; }
.tsk-duebtn .cdd-ch { width: 11px; height: 11px; color: var(--ink-3); }
.tsk-duebtn:hover { background: var(--blue-tint); color: var(--blue-d); }
.tsk-duebtn:hover svg { color: var(--blue); }
.tsk-duebtn.due-over:hover { background: var(--red-soft); color: var(--red-ink); }
.tsk-duebtn.due-over:hover svg { color: var(--red-ink); }
.due-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 24px; width: 300px; max-width: calc(100% - 32px);
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: 0 14px 40px -16px rgba(20,25,40,.28); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; animation: rmPop .16s ease; }
.due-pop > .due-seg { align-self: flex-start; flex-wrap: wrap; }
.due-pop > .due-seg button:hover { color: var(--blue); }
.due-row { display: flex; align-items: center; gap: 8px; }
.due-row .due-day { flex: 1; min-width: 0; }
/* «Снять срок» — тихое действие последней строкой: оно редкое и необратимое на
   глаз, кнопкой одного веса с «Поставить» его нажимали бы промахом. */
.due-off { align-self: flex-start; font: 600 12.5px 'Manrope', sans-serif; color: var(--ink-3);
  padding: 2px; transition: color .14s; }
.due-off:hover { color: var(--coral); }
.tsk-mwho { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); }
.tsk-mwho svg { color: var(--ink-3); }
.tsk-mwho.dim { color: var(--ink-3); font-weight: 500; }
/* Наблюдатель: чип-кнопка в той же строке, что исполнитель и постановщик;
   по клику на его месте встает выбор человека. */
.tsk-mwho.tsk-watch { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--blue); }
.tsk-mwho.tsk-watch:hover { color: var(--blue); }
.tsk-mwho.tsk-edit { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--blue); }
.tsk-mwho.tsk-edit svg { color: var(--blue); }
.tsk-sec[hidden] { display: none; }
/* Участники: чипы и «+ участник» — в форме и на месте чипа в карточке. */
.pp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; border-radius: var(--r-pill);
  background: var(--fill); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pp-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0;
  border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
.pp-x:hover { background: var(--card); color: var(--ink); }
.pp-add { width: auto; min-width: 120px; height: 28px; padding: 0 28px 0 10px; font-size: 12.5px; }
.tsk-card .al-body { overflow-y: auto; gap: 16px; padding-bottom: 16px; }
.tsk-sec { display: flex; flex-direction: column; gap: 7px; }
.tsk-l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tsk-p { font-size: 13.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
/* критерий приемки — единственный выделенный блок карточки: по нему спорят */
.tsk-sec.tsk-crit .tsk-p { background: var(--blue-tint); border-radius: 12px; padding: 12px 14px;
  color: var(--navy); font-weight: 500; }

/* ── Цель и шаги ────────────────────────────────────────────────────────────
   Глубина одна: цель и ее шаги (см. шапку миграции 068). Шаг — не вложенная
   карточка, а строка-кнопка: клик закрывает текущую карточку и открывает
   карточку шага, вложенных модалок в системе нет. */
/* Синий, а не чернильный: это единственное действие в шапке карточки, и оно
   должно читаться как действие, а не как еще одна подпись. */
.tsk-up { color: var(--blue); transition: .15s; }
.tsk-up svg { color: var(--blue); }
.tsk-up:hover { color: var(--blue-d); }
.tsk-up:hover svg { color: var(--blue-d); }
.tsk-l.tsk-lrow { display: flex; align-items: center; gap: 10px; }
.tsk-addstep { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); transition: .15s; }
.tsk-addstep svg { width: 12px; height: 12px; }
.tsk-addstep:hover { color: var(--blue-d); }
.tsk-steps { display: flex; flex-direction: column; }
.tsk-step { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 10px;
  align-items: center; text-align: left; width: 100%; padding: 9px 10px; border-radius: 10px;
  border-top: 1px solid var(--line); transition: .12s; }
.tsk-step:first-child { border-top: none; }
.tsk-step:hover { background: #FBFBFC; }
.tsk-step-t { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-step-m { grid-column: 1; font-size: 11.5px; color: var(--ink-3); }
.tsk-step-m i { font-style: normal; }
.tsk-step-m i.due-over { color: var(--red-ink); font-weight: 600; }
.tsk-step-m i.due-now { color: var(--amber-ink); font-weight: 600; }
.tsk-step .sev { grid-column: 2; grid-row: 1 / span 2; }
.tsk-nosteps { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* Своей высоты у ленты нет намеренно: скроллится тело карточки, и колесо не
   застревает во вложенной области. */
.tsk-feed { display: flex; flex-direction: column; gap: 2px; }
.tsk-ev { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.tsk-ev:first-child { border-top: none; }
.tsk-ev-ic { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: var(--fill); color: var(--ink-3); }
.tsk-ev.cm .tsk-ev-ic { background: var(--blue-tint); color: var(--blue); }
.tsk-ev-b { min-width: 0; }
.tsk-ev-t { font-size: 13px; line-height: 1.45; color: var(--ink); word-wrap: break-word; }
.tsk-ev-m { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ── Общий чат задач (в окне «Бот задач») ────────────────────────────────────
   Блок про канал, а не про людей, поэтому стоит отдельной плашкой над списком
   команды: сначала «куда идут уведомления», потом «кто их получает». */
.tgg { background: var(--fill); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
.tgg-h { font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 7px; }
.tgg-on { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.tgg-on svg { color: var(--green-ink); }
.tgg-acts { margin-left: auto; display: flex; gap: 8px; }
.tgg-s { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.tgg-s b { font-weight: 700; color: var(--ink); }
.tgg-b { margin-top: 10px; font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); transition: .15s; }
.tgg-b:hover { color: var(--blue-d); }
.tgg-b[disabled] { color: var(--ink-3); }
.tgg-acts .tgg-b { margin-top: 0; }
.tgg-b.off { color: var(--ink-3); }
/* Кого касается чат: подпись, ряд ролей и пояснение. Отбивка сверху больше
   внутренних отступов ряда — это отдельная мысль, а не продолжение строки о
   подключении. */
.tgg-roles { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.tgg-rh { font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
          color: var(--ink-3); margin-bottom: 8px; }
.tgg-rl { display: flex; flex-wrap: wrap; gap: 4px; }
.tgg-roles .tgg-s { margin-top: 8px; }
.tgg-b.off:hover { color: var(--red-ink); }
.tgg-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tgg-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  font-size: 13px; font-weight: 600; color: var(--ink); transition: .12s; }
.tgg-row:hover { border-color: var(--blue); }
.tgg-row i { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }

/* список подключений к боту задач (раздел «Команда») */
.tgl-list { display: flex; flex-direction: column; }
.tgl-row { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line); }
.tgl-row:first-child { border-top: none; }
.tgl-i { min-width: 0; }
.tgl-n { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.tgl-s { font-size: 11.5px; color: var(--amber-ink); margin-top: 2px; }
.tgl-list.nobot .tgl-s { color: var(--ink-3); }
/* Подключен человек или нет — говорит подпись, а не аватар: инициалы это
   идентичность, навешивать на нее статус значит читать строку дважды. */
.tgl-row.on .tgl-s { color: var(--green-ink); }
/* Аккаунты человека — служебная строка под подписью: показывается только когда
   их больше одного, то есть когда есть что решать (какой из них лишний). */
.tgl-accs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tgl-ac { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px;
  font-size: 11px; color: var(--ink-2); background: var(--fill); border-radius: var(--r-pill); }
.tgl-un { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border: none; border-radius: 50%;
  background: none; color: var(--ink-3); cursor: pointer; transition: color .12s, background .12s; }
.tgl-un:hover { color: var(--red-ink); background: var(--red-soft); }

/* ── Срез «По ученикам» ──────────────────────────────────────────────────────
   Группа = ученик, внутри группы — подгруппы по роли исполнителя. Своих карточек
   с бордером внутри списка не заводим: это тот же список, только с заголовками,
   поэтому разделитель — линия, а иерархия — весом и кеглем (design.md §3). */
.stu-body { padding: 0; }
.stu { padding: 16px 18px 14px; border-top: 1px solid var(--line); }
.stu:first-child { border-top: none; }
/* Строка ученика свернута: имя, этап, кто ведет и счетчики. Раскрывается кликом —
   на 1000 учеников развернуть всем задачи сразу нельзя. Вся шапка и есть кнопка. */
.stu-h { width: 100%; display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  text-align: left; background: none; padding: 2px 0; transition: .12s; }
.stu-chev { color: var(--ink-3); display: inline-flex; transition: transform .18s var(--ease); }
.stu-chev.on { transform: rotate(90deg); }
.stu-h:hover .stu-n { color: var(--blue); }
.stu-n { font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.02em;
  transition: .12s; }
.stu-own { font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.stu-stage { font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
/* Кто ведет ученика — аватары исполнителей его открытых задач: отвечает на «не
   видно, на кого поставлено» прямо в свернутой строке. */
.stu-av-row { margin-left: auto; display: inline-flex; align-items: center; }
.stu-av-row .stu-av + .stu-av { margin-left: -6px; }
.stu-av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font: 700 9.5px 'Manrope', sans-serif; color: var(--ink-2);
  background: var(--fill); box-shadow: 0 0 0 2px #fff; }
.stu-av.more { background: #E7EAF0; color: var(--ink-3); }
.stu-av.none { background: var(--amber-soft); color: var(--amber-ink); }
.stu-cs { display: flex; align-items: center; gap: 10px; }
.stu-c { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.stu-c.over { color: var(--red-ink); }
/* Заметка тьютора — контекст, а не содержание экрана: две строки и тише всего
   остального. Полностью она читается в карточке ученика. */
.stu-note { margin-top: 9px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
  background: var(--fill); border-radius: 10px; padding: 8px 11px; }
/* Обрезка живет на внутреннем span, а не на самой плашке: overflow:hidden режет
   по padding-box, и третья строка проглядывала бы в нижнем отступе — блок
   выглядел бы сломанным, а не сокращенным. */
.stu-note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.stu-g { margin-top: 12px; }
.stu-gl { font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px; }
/* Работа, которую никто не взял, — состояние «внимание», а не поломка: красный
   в этом экране занят просрочкой. */
/* Раскрытая часть: воздух сверху отделяет ее от свернутой шапки. */
.stu-body-in { margin-top: 4px; animation: stu-open .18s var(--ease); }
@keyframes stu-open { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.stu-acts { margin-top: 12px; display: flex; align-items: center; gap: 16px; }
.stu-add, .stu-open { display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); transition: .15s; }
.stu-open { color: var(--ink-3); }
.stu-add:hover { color: var(--blue-d); }
.stu-open:hover { color: var(--ink); }

/* Тулбар среза: переключатель мои/все (системный сегмент .pay-seg), фильтр по
   исполнителю, чип просрочки. */
.stu-tools { flex-wrap: wrap; gap: 8px 10px; }
.stu-whowrap { flex: none; }
.stu-more { display: block; width: calc(100% - 36px); margin: 8px 18px 4px;
  padding: 10px; text-align: center; border-radius: 10px; background: var(--fill);
  font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); transition: .14s; }
.stu-more:hover { background: #EDEFF3; color: var(--ink); }
.stu-trunc { padding: 8px 18px 14px; font-size: 12px; color: var(--ink-3); }

/* ── Задачи в карточке ученика ───────────────────────────────────────────────
   Тот же контур задач, вид покороче: в карточке важнее «кто и когда», а вести
   задачу человек уходит в ее собственную карточку. */
.ct-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px;
  align-items: center; padding: 10px 0; border-top: 1px solid var(--line);
  cursor: pointer; transition: .12s; }
.ct-row:first-child { border-top: none; }
.ct-row:hover { background: #FBFBFC; }
.ct-t { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.ct-m { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ct-m i { font-style: normal; }
.ct-m i.due-over { color: var(--red-ink); font-weight: 600; }
.ct-m i.due-now { color: var(--amber-ink); font-weight: 600; }
/* Закрытые лежат ниже и тише: они здесь как память, а не как работа. */
.ct-row.off .ct-t { color: var(--ink-2); font-weight: 500; }
.ct-off-l { font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 0 2px; }
.ct-skel { height: 44px; border-radius: 10px; background: var(--fill); margin-bottom: 6px; }
.ct-add { margin-top: 12px; }
.ct-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-acts .ct-add { margin-top: 12px; }

/* ── Зум: форма и недельная сетка ─────────────────────────────────────────── */
.zm-dayrow { display: flex; align-items: center; gap: 10px; }
.zm-dayrow .al-in.sm { width: auto; flex: 1; min-width: 0; }
.zm-free { min-height: 18px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.zm-free.ok { color: var(--ink-2); }
.zm-free.busy, .zm-free.warn { color: var(--amber-ink); font-weight: 600; }
.zw { padding: 18px 24px 14px; margin-bottom: 14px; }
/* Шапка переносится на любой ширине, а не только на телефоне. В ней шесть
   контролов: половины, «Неделя/День», стрелки с датой и три действия. На
   ноутбуке 1280 они в одну строку не помещаются, а переносить было нечему —
   и последнее действие уезжало за край карточки. */
.zw-head { margin-bottom: 8px; flex-wrap: wrap; row-gap: 10px; }
.zw-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.zw-nav .icobtn:first-child svg { transform: rotate(180deg); }
.zw-new { margin-left: 6px; white-space: nowrap; }
.zw-range { white-space: nowrap; }
.zw-seg { margin-left: 12px; }
/* Переключатель половин «Встреч» («Зумы» / «Расписание») стоит в месте заголовка
   секции и работает за него: своего заголовка ни одной половине не нужно. Рецепт
   сегмента тот же, но кеглем и весом заголовка секции (.sec-head .t), иначе в
   строке не остается ни одного якоря — глазу не за что зацепиться. */
.mt-lens { flex: none; padding: 5px; border-radius: 13px; }
.mt-lens button { font-size: 15px; padding: 8px 15px; letter-spacing: -.015em; }
/* Группы разделяет фиксированный отступ, а не остаток свободного места: на
   узком экране остатка нет, и «auto» переставал что-либо разделять. Внутри
   группы шаг 11px (.sec-head gap), между группами 28px — разница видна глазом
   независимо от ширины. Действия уезжают вправо своим margin-left: auto из
   общего правила .sec-head > .bp. */
.mt-lens + .zw-seg { margin-left: 28px; }
.mt-lens + .zw-seg + .zw-nav { margin-left: 12px; }
/* Действия — один блок, а не две кнопки-соседа. Общее правило .sec-head > .bp
   дает «вправо до упора» КАЖДОЙ кнопке-потомку, и при переносе они расходились
   по разным рядам с разным выравниванием. В своем блоке они переносятся вместе
   и держат правый край шапки. */
.zw-acts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
/* Подпись кнопки в две строки («Мое\nвремя») — не перенос, а поломка: ряд
   действий становится разновысоким. Ширины хватает даже на 390px. */
.zw-acts .bp { white-space: nowrap; flex: none; }
/* «В гугл-календарь» — третье действие в шапке, поэтому тихое: акцент на экране
   один, и он достается главному действию, а не вспомогательной ссылке. */
.sc-gcal { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.sc-gcal:hover { color: var(--blue); }
.sc-gcal svg { opacity: .7; }
.zw-range { border: 0; background: none; padding: 4px 6px; border-radius: 8px; }
.zw-range:not(.now):hover { color: var(--blue); background: var(--blue-tint); }
.zw-fltrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.zw-fltrow .zw-flt { margin: 0; }
.zw-acc { margin-left: auto; min-width: 180px; }
.zw-acc .al-sel { padding-top: 7px; padding-bottom: 7px; font-size: 12.5px; }
/* День по часам: тонкие строки, час слева табличными цифрами, текущий час — той же
   заливкой, что «сегодня» в недельной сетке. Окна людей — тихим текстом, без чипов:
   чип здесь только у зума, по нему кликают. */
.zd-row { display: flex; align-items: flex-start; gap: 12px; padding: 5px 0; min-height: 30px; border-top: 1px solid var(--line); }
.zd-row:first-child { border-top: 0; }
.zd-row.now { background: var(--blue-tint); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 8px; border-top-color: transparent; }
.zd-row.now + .zd-row { border-top-color: transparent; }
.zd-h { flex: 0 0 48px; font-size: 12px; color: var(--ink-3); padding-top: 4px; font-variant-numeric: tabular-nums; }
.zd-row.now .zd-h { color: var(--blue); font-weight: 700; }
.zd-c { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.zd-acc { margin-left: 6px; color: var(--ink-3); font-weight: 500; }
.zd-win { font-size: 12px; line-height: 1.5; color: var(--ink-3); padding: 3px 0; }
.zd-win b { font-weight: 600; color: var(--ink-2); }
.zd-win.busy { color: var(--ink-2); }
/* Телефон: шапка укладывается в три ряда и не больше. Первый — половины во всю
   ширину, это заголовок экрана. Второй — «какой период»: дата со стрелками слева,
   ссылка на календарь справа. Третий — действия. Порядок не случайный: после
   «какая половина» человек спрашивает «какой день я смотрю», а не «что нажать».
   Раньше рядов набиралось шесть, и первый час расписания начинался ниже середины
   экрана — на телефоне это дороже всего. */
@media (max-width: 960px) {
  .zw-head { flex-wrap: wrap; row-gap: 8px; }
  .mt-lens { order: 0; width: 100%; display: flex; }
  .mt-lens button { flex: 1; }
  .zw-seg { order: 1; margin-left: 0; }
  .zw-seg button { padding: 5px 9px; }
  .mt-lens + .zw-seg { margin-left: 0; }
  .zw-nav { order: 2; width: auto; margin-left: 0; gap: 4px; }
  .mt-lens + .zw-seg + .zw-nav { margin-left: 0; }
  /* Ссылка делит ряд с датой, а не занимает свой: 16px текста на целую строку —
     дырка в самом плотном месте. Высота тапа как у соседних контролов. */
  .sc-gcal { order: 2; margin-left: auto; min-height: 30px; align-items: center; }
  /* Сброс margin-left надо писать с той же силой, что и общее правило
     .sec-head > .bp { margin-left: auto } — медиазапрос сам по себе силы не
     добавляет, и без «.sec-head >» кнопка молча осталась бы прижатой вправо,
     а ряд действий не начинался бы от края карточки. */
  .zw-new { order: 3; }
  .sec-head > .zw-new { margin-left: 0; }
  .zw-acts { order: 3; margin-left: 0; width: 100%; }
  .zw-nav .icobtn { width: 28px; height: 28px; min-width: 28px; }
  .zw-range { padding: 4px 2px; }
  .zw-td { display: none; }
  .zw-fltrow { flex-wrap: nowrap; gap: 8px; }
  .zw-fltrow .zw-flt { flex: 1 1 auto; min-width: 0; }
  .zw-acc { margin-left: 0; flex: 0 0 132px; min-width: 0; }
  .zd-h { flex-basis: 42px; }
  .zd-row .zw-chip { white-space: normal; flex-wrap: wrap; }
  .zd-row .zd-acc { flex: 1 1 100%; margin-left: 0; padding-left: 12px; font-size: 11.5px; }
}
.zw-range { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.zw-row { display: flex; align-items: flex-start; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.zw-row.head { border-top: 0; padding-bottom: 4px; }
.zw-row.today { background: var(--blue-tint); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 8px; }
.zw-row.today + .zw-row { border-top-color: transparent; }
.zw-d { flex: 0 0 56px; font-size: 12px; color: var(--ink-3); padding-top: 3px; }
.zw-d b { color: var(--ink); font-weight: 700; }
.zw-row.today .zw-d b { color: var(--blue); }
.zw-c { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; min-height: 22px; align-items: center; }
.zw-c.off { opacity: .45; }
.zw-err { font-size: 11px; font-weight: 600; color: var(--amber-ink); margin-left: 8px; }
.zw-chip { display: inline-flex; align-items: center; border: 0; cursor: pointer; text-align: left; font-family: inherit; gap: 5px; max-width: 100%; padding: 3px 8px; border-radius: 7px; background: var(--fill); font-size: 12px; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zw-chip:hover { background: var(--blue-tint); }
.zw-row.today .zw-chip:hover, .zd-row.now .zw-chip:hover { background: #fff; }
/* Точка типа: команда синяя, консультация зеленая, занятие янтарное, без типа пустая. */
.zw-chip i, .zw-mm i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); opacity: .55; }
.zw-mm i { display: inline-block; margin-right: 6px; vertical-align: middle; }
.k-team_product i, .k-team_marketing i, .k-team_sales i { background: var(--blue); opacity: 1; }
.k-consult i { background: var(--green); opacity: 1; }
.k-lesson i { background: var(--amber); opacity: 1; }
.k-none i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.zw-flt { margin: 0 0 10px; align-self: flex-start; display: inline-flex; }
.zw-flt .tab { padding: 6px 12px; font-size: 12.5px; }
/* На телефоне фильтр шире экрана: листается пальцем, полосу прокрутки не рисуем. */
@media (max-width: 960px) {
  .zw-flt { display: flex; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .zw-flt::-webkit-scrollbar { display: none; }
  .zw-flt .tab { flex: none; white-space: nowrap; }
}
/* ── Расписание команды (раздел «Расписание») ───────────────────────────────
   Сетка недели: строка — час, колонка — день. На телефоне недели нет вовсе
   (app.js рисует день), поэтому горизонтальной прокрутки у страницы не бывает. */
.sc .zw-fltrow { align-items: center; }
.sc-who { min-width: 220px; }
/* Оба фильтра ряда — один кегль и одна высота. Правило было написано только под
   «Все люди», и «Все зумы» рядом с ним стоял на четыре пикселя выше. */
.sc-who .al-sel, .sc-kind .al-sel { padding-top: 7px; padding-bottom: 7px; font-size: 12.5px; }
.sc-legend { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sc-legend .sc-chip { cursor: default; }
/* На телефоне легенда стоила целой строки шапки, а расшифровывала то, что и так
   написано словами в самих плашках («Козубенко (урок)»). Пятый ряд управления
   уводил первый час расписания ниже середины экрана — это дороже подсказки. */
/* На телефоне легенда раньше пряталась совсем, и ключа к цветам не оставалось
   вовсе. Оставляем ее, но компактной строкой под фильтрами. */
@media (max-width: 700px) {
  .sc-legend { margin-left: 0; width: 100%; gap: 6px; flex-wrap: wrap; }
  .sc-legend .sc-chip { font-size: 10.5px; padding: 2px 6px; }
}

.sc-grid { border-top: 1px solid var(--line); }
.sc-row { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: stretch; border-bottom: 1px solid var(--line); }
.sc-row.head { border-bottom: 1px solid var(--line-2); padding-bottom: 6px; margin-bottom: 2px; }
.sc-h { font-size: 11.5px; color: var(--ink-3); padding: 6px 8px 6px 0; text-align: right; font-variant-numeric: tabular-nums; }
.sc-d { font-size: 12px; color: var(--ink-3); padding: 8px 4px 0; text-transform: lowercase; }
.sc-d b { color: var(--ink); font-weight: 700; margin-left: 3px; }
.sc-d.now { color: var(--blue); }
.sc-d.now b { color: var(--blue); }
.sc-cell { display: flex; flex-direction: column; gap: 3px; padding: 4px 2px; min-height: 30px; min-width: 0; border-radius: 8px; }
.sc-cell.today { background: var(--fill); }   /* колонка сегодня видна и ниже шапки */
.sc-cell.pick { cursor: pointer; transition: background .12s var(--ease); }
.sc-cell.pick:hover { background: var(--blue-tint); }
.sc-cell.pick:empty::after { content: '+'; color: var(--ink-3); font-size: 13px; line-height: 22px; text-align: center; opacity: 0; transition: opacity .12s var(--ease); }
.sc-cell.pick:hover:empty::after { opacity: 1; }

.sc-chip { display: block; max-width: 100%; padding: 3px 7px; border-radius: 7px; font-size: 11.5px; line-height: 1.35; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-chip.free { background: var(--green-soft); color: var(--green-ink); }
/* Свой час — тот же чип с тонкой оправой: человек находит свои окна в чужой сетке,
   и ничего кроме оправы для этого не нужно. */
.sc-chip.free.mine { outline: 1px solid var(--green); outline-offset: -1px; }
.sc-chip.busy { background: var(--blue-tint); color: var(--blue-d); }
.sc-chip.meet { background: var(--navy-soft); color: var(--navy); }
/* Планерка на два часа стоит в двух строках сетки. Чтобы это читалось как одна
   встреча, а не две, стыкующиеся углы делаем прямыми — блок выглядит разрезанным
   линией часа. */
.sc-chip.meet.long { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
.sc-chip.meet.cont { border-top-left-radius: 2px; border-top-right-radius: 2px; }
/* Зум — единственный чип без своего цвета, и на клетке «сегодня» (тоже --fill) он
   сливался с фоном, а в легенде читался просто словом, а не образцом. Тонкое
   кольцо внутрь: заливка остается тихой, границу видно. */
.sc-chip.zoom { background: var(--fill); color: var(--ink);
  outline: 1px solid var(--line-2); outline-offset: -1px; }
/* Зум в слоте: название открывает карточку встречи, иконка рядом копирует ссылку.
   Кнопка копирования тихая и проявляется по наведению — в плотной сетке лишняя
   иконка в каждой клетке читалась бы как шум (тот же прием, что у .dn-undo). */
.sc-chip.zoom.has-link { display: flex; align-items: center; gap: 4px; padding-right: 3px; }
.sc-zopen { flex: 1; min-width: 0; text-align: left; font: inherit; color: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-zcopy { flex: none; width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 5px; color: var(--ink-3); opacity: 0; transition: .15s; }
.sc-chip.zoom:hover .sc-zcopy, .sc-zcopy:focus-visible { opacity: 1; }
.sc-zcopy:hover { color: var(--blue); background: var(--blue-tint); }
/* На телефоне наведения нет: кнопка видна всегда, только приглушенно. */
@media (hover: none) { .sc-zcopy { opacity: .5; } }
/* Название планерки в узкой колонке недели важнее одной ровной строки: «Планерка
   продаж» и «Планерка продукта» обрезаются в одно и то же «Планерка прод…». */
.sc-grid .sc-chip.meet { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* У зума ровно та же беда, и она дороже: человек пришел в клетку за ссылкой и
   должен видеть, чью ссылку берет. «Китайский (Гр…» и «Китайский (Ко…» — не видит. */
.sc-grid .sc-chip.zoom .sc-zopen { white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sc-chip.act { cursor: pointer; }
.sc-chip.act:hover { background: var(--line-2); }
.sc-chip.off { cursor: pointer; }
.sc-chip.off:hover { background: var(--red-soft); color: var(--red-ink); }
.zd-c .sc-chip { display: inline-block; }

.sc-add { border: 1px dashed var(--line-2); background: none; color: var(--ink-3); border-radius: 7px; padding: 2px 8px; cursor: pointer; line-height: 0; }
.sc-add:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }

.sc-claim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--fill); font-size: 13px; color: var(--ink-2); }
.sc-claim svg { color: var(--ink-3); flex: none; }
.sc-claimsel { min-width: 260px; margin-left: auto; }
.sc-claimnone { margin-left: auto; color: var(--ink-3); }

/* Подсказка над сеткой: почему фильтр типов «ничего не делает». Тихая, как
   .sc-claim рядом: это объяснение, а не предупреждение. */
.zw-note { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--fill);
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.zw-note svg { color: var(--ink-3); flex: none; margin-top: 1px; }

/* Поиск по списку участников: строка над списком, а не рядом с ним — список и
   поиск читаются как одно поле. Спрятанную поиском строку убираем display: none,
   иначе flex у .sc-p сильнее атрибута hidden и человек видит пустые места. */
.sc-find { margin-bottom: 8px; }
/* Факты серии и последствия правки — тихие строки под своим полем: это не
   предупреждение об опасности, а описание того, что сейчас произойдет. */
.sc-sfacts { margin-top: 7px; font-size: 12px; color: var(--ink-3); }
.sc-shint { margin: -2px 0 2px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.sc-shint[hidden] { display: none; }
/* Сегмент области правки — ровно тот же рецепт, что в карточке зума (.due-seg),
   своего размера ему не заводим: вопрос один и тот же. */
.sc-scope { align-self: flex-start; }
/* Снятие встречи — действие в другую сторону, поэтому уезжает к левому краю
   футера, подальше от «Сохранить». */
.sc-mdrop { margin-right: auto; }
.sc-mdrop:hover { color: var(--red-ink); }
.sc-p[hidden] { display: none; }
.sc-pnone { padding: 6px 2px; font-size: 12.5px; color: var(--ink-3); }
.sc-pcnt { margin-top: 6px; font-size: 12px; color: var(--ink-3); }

.sc-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; max-height: 210px; overflow-y: auto; }
.sc-p { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13px; color: var(--ink); cursor: pointer; }
.sc-p input { width: 16px; height: 16px; accent-color: var(--blue); flex: none; cursor: pointer; }
.sc-p span { min-width: 0; overflow-wrap: anywhere; }   /* «Митрофанова Мария В…» — не тот случай, где можно обрезать */
@media (max-width: 960px) {
  /* Телефон: раньше стрелки разводило по краям, потому что слева от дат было
     пусто. Теперь этот ряд делит с ними ссылка «В гугл-календарь», и растягивать
     навигацию не нужно — иначе ссылке приходится занимать свою строку.
     Легенда цветов уходит на свою строку: в общем ряду она складывалась в колонку
     из четырех чипов и съедала пол-экрана. */
  .sc .zw-nav { width: auto; margin-left: 0; }
  .sc .zw-fltrow { flex-wrap: wrap; }
  /* Два фильтра делят одну строку поровну. Порознь они вставали лесенкой: «Все
     люди» во всю ширину, «Все зумы» вполовину — и ряд читался как две разные
     вещи, хотя это один набор. */
  .sc-who, .sc-kind { min-width: 0; flex: 1 1 140px; }
  .sc-legend { margin-left: 0; width: 100%; }
  .sc-claimsel { margin-left: 0; width: 100%; }
  .zd-c .sc-chip { white-space: normal; }
  /* Список участников на телефоне едет вместе с телом модалки: два вложенных
     скролла прячут половину людей, и руководитель решает, что их там нет. */
  .sc-people { grid-template-columns: 1fr; max-height: none; overflow: visible; }
}

.zc-link { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zc-url { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-nolink { font-size: 13px; color: var(--ink-2); }
.zc-del { margin-right: auto; color: var(--red-ink); }
.zc-del:hover { background: var(--red-soft); color: var(--red-ink); }

/* Регулярная встреча (Ольга и Павел, 16.09.2026). Чип-тумблер «Повторять» —
   системный .qchip, правило повтора — мягкая коробка на --fill, как плашки
   сдачи периода: глубина заливкой, ни рамки, ни тени. Дни недели живут в том же
   сегменте .due-seg, что и «сегодня/завтра», просто включенных плашек может
   быть несколько — третьего рецепта сегмента не заводим (design.md §7.4). */
.zm-repf { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Включенный тумблер — синим тинтом, а не темной пилюлей .qchip.on: тот же
   прием, что у тумблера периода .rh-onoff, иначе он весит больше синей кнопки
   формы и перетягивает якорь экрана на себя. */
.qchip.zm-rep.on { background: var(--blue-tint); color: var(--blue); border-color: transparent; }
.qchip.zm-rep.on svg { color: var(--blue); }

.zm-reph { font-size: 12px; color: var(--ink-3); }
.zm-repbox { display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border-radius: 12px; background: var(--fill); }
.zm-repbox[hidden] { display: none; }
.zm-repbox .al-in { background: #fff; }
.zm-repbox .al-sel { background: #fff; }
.zm-days { align-self: flex-start; flex-wrap: wrap; }
.zm-days button { min-width: 36px; }

/* Карточка встречи: правило серии рядом с датой, форма правки и выбор «одну или
   всю серию» вместо системного confirm с единственным «ок». */
.zc-ser { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  font-weight: 600; color: var(--ink-2); }
.zc-ser svg { width: 12px; height: 12px; color: var(--ink-3); }
.zc-editf[hidden] { display: none; }
/* Поле даты рисуется браузером и в 150px обрезает год («09/14/202»), поэтому
   день занимает строку целиком, а время с длительностью идут парой — ровно
   так же, как в форме создания встречи. Своих правил ширины не заводим. */
.al-body > [data-zcsec][hidden] { display: none; }
.zc-delbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px; background: var(--red-soft); }
.zc-delbox[hidden] { display: none; }
.zc-delq { font-size: 12.5px; font-weight: 700; color: var(--red-ink); }
.zc-delbox .qchip { background: #fff; }
/* «не надо» — тихая, но не бледная: на узкой ширине строка переносится, и
   отказ, уехавший в правый край самым слабым чернилом, читался как обрывок. */
.zc-delbox .zc-delno { background: none; color: var(--ink-2); }
.zc-delh { flex-basis: 100%; font-size: 12px; line-height: 1.45; color: var(--red-ink); opacity: .8; }

/* Пустой слот в сетке: тихая кнопка на ховере строки, как «снять с готово» в
   отчете периода. Ховера нет на телефоне — там она видна всегда, но приглушена. */
.zd-add { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 0; border-radius: 7px; background: none;
  color: var(--ink-3); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.zd-add svg { width: 12px; height: 12px; }
.zd-row:hover .zd-add, .zw-c:hover .zd-add, .zd-add:focus-visible { opacity: 1; }
.zd-add:hover { background: var(--blue-tint); color: var(--blue); }
.zw-chip b { font-weight: 700; flex: none; }
/* Строка встречи на телефоне в две строки: день и аккаунт сверху, время и название целиком снизу. */
.zw-mrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; }
.zw-mrow:first-child { border-top: 0; }
.zw-md { font-size: 12px; color: var(--ink-3); }
.zw-ma { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.zw-mm { flex: 1 1 100%; order: 3; min-width: 0; line-height: 1.35; }
.zw-mm b { font-weight: 700; }
.zw-off, .zw-hint { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
.zw-empty { padding: 14px 0; font-size: 13px; color: var(--ink-3); }
@media (max-width: 720px) {
  .zw { padding: 14px 14px 12px; }
}
.ct-hint { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
/* ── Консультации в карточке: что осталось от встречи ──
   Запись живет ссылкой, а в системе остается конспект. Строка тихая: якорь секции
   «Заметки» — сама заметка, а не список прошедших разговоров. */
.cl-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cl-row:last-of-type { border-bottom: none; }
.cl-h { display: flex; align-items: center; gap: 9px; }
.cl-ic { display: inline-flex; color: var(--ink-3); }
.cl-m { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-st { font: 600 10.5px 'Manrope', sans-serif; padding: 2px 7px; border-radius: var(--r-pill); }
.cl-st.transcribing { color: var(--blue); background: var(--blue-tint); }
.cl-st.failed { color: var(--red-ink); background: var(--red-soft); }
.cl-sum { margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--ink);
  display: flex; flex-direction: column; gap: 10px; }
.cl-sum .cl-p { margin: 0; }
/* Что продавали и главное обещание — единственный акцент конспекта: тонированная
   плашка без рамки, подписи мелким капсом, значения обычным весом. */
.cl-deal { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  border-radius: 12px; background: var(--blue-tint); }
.cl-kv { display: grid; grid-template-columns: 128px 1fr; gap: 2px 12px; align-items: baseline; }
.cl-k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.4; }
.cl-kv .cl-k { padding-top: 2px; }
.cl-kv.promise .cl-v { font-weight: 600; color: var(--navy); }
.cl-sec { display: flex; flex-direction: column; gap: 3px; }
.cl-ul { margin: 0; padding-left: 16px; }
.cl-ul li { margin: 0; padding-left: 2px; }
.cl-ul li::marker { color: var(--ink-3); }
@media (max-width: 520px) {
  .cl-kv { grid-template-columns: 1fr; gap: 1px; }
}
.cl-empty { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.cl-acts { display: flex; gap: 8px; margin-top: 8px; }

/* Ученик в шапке карточки задачи — ссылка в его карточку. */
.al-eyelink { font: inherit; color: var(--blue); transition: .12s; }
.al-eyelink:hover { color: var(--blue-d); }
.al-eyelink[disabled] { color: inherit; cursor: default; }

/* быстрые сроки в форме постановки — тот же сегмент, что в карточке лида */
.al-f > .due-seg { align-self: flex-start; flex-wrap: wrap; }

.tsk-say { display: flex; gap: 8px; align-items: center; }
.tsk-say .al-in { flex: 1; min-width: 0; }
/* режим возврата: причину пишут в том же поле, что и комментарии — она и
   ложится в ленту рядом с ними. Отдельного окна для этого не нужно. */
.tsk-ret { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.tsk-ret[hidden] { display: none; }
.tsk-ret b { color: var(--red-ink); font-weight: 700; }
.tsk-ret button { color: var(--ink-3); font-size: 12px; font-weight: 600; text-decoration: underline; }
.tsk-ret button:hover { color: var(--ink); }
.tsk-say.ret .al-in { border-color: var(--red); box-shadow: 0 0 0 3px rgba(229,72,77,.1); }
.tsk-acts { flex-wrap: wrap; }
.tsk-acts[hidden] { display: none; }

/* ── Результат задачи ────────────────────────────────────────────────────────
   Ответ исполнителя на критерий приемки: пара строк и приложенные файлы. Стоит
   сразу под критерием, поэтому своей рамки не просит — читается как его пара. */
.tsk-resat { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ink-3);
  text-transform: none; letter-spacing: 0; }
.tsk-resat + .tsk-addstep { margin-left: 12px; }
.tsk-files { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.tsk-file { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 11px;
  border-radius: 10px; background: var(--fill); color: var(--ink);
  font-size: 13px; font-weight: 600; transition: background .15s; }
.tsk-file:hover { background: #ECEEF1; }
.tsk-file svg { flex: none; color: var(--ink-3); }
.tsk-file-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsk-file-m { flex: none; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }

/* Панель сдачи: текст плюс файлы уезжают вместе, одним событием. */
.tsk-resform { display: flex; flex-direction: column; gap: 9px; padding: 14px;
  border-radius: 14px; background: var(--blue-tint); }
.tsk-resform[hidden] { display: none; }
.tsk-resform .al-in { background: #fff; }
.tsk-resrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tsk-attach { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--blue); }
.tsk-attach:hover { color: var(--blue-d); }
.tsk-zoom { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.tsk-zoom + .tsk-attach { margin-left: 14px; }
.tsk-reshint { font-size: 11.5px; color: var(--ink-3); }
.tsk-resrow .al-cancel { margin-left: auto; height: 36px; }
.tsk-resrow .bp { height: 36px; }
/* Редактор задачи: та же панель, что у сдачи результата, поля формы как в «Новой задаче». */
.tsk-editform .al-f { gap: 5px; }
.tsk-editform .al-sel { background: #fff; }
.tsk-editform .tsk-resrow { justify-content: flex-end; }
.tsk-editform .tsk-resrow .al-cancel { margin-left: 0; }
/* Порядок задач: системный селект .al-sel.sm по содержимому, не во всю ширину.
   Выбранный порядок подсвечен синим тинтом, как тумблер периода .rh-onoff. */
.prio-sel { display: inline-block; width: auto; margin-left: 10px; }
.prio-sel .al-sel { width: auto; }
.prio-sel.on .al-sel { background: var(--blue-tint); color: var(--blue); }
/* Соседние сегменты в шапке плана: внешний зазор больше внутреннего, иначе восемь пилюль читаются одной лентой. */
.wk-top > .pay-seg + .pay-seg { margin-left: 8px; }
.tsk-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.tsk-picked:empty { display: none; }
.tsk-pick { display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 8px 5px 10px; border-radius: 999px; background: #fff;
  font-size: 12px; font-weight: 600; color: var(--ink); }
.tsk-pick button { display: inline-flex; color: var(--ink-3); }
.tsk-pick button:hover { color: var(--red-ink); }
@media (max-width: 560px) {
  .tsk-resrow .al-cancel { margin-left: 0; }
  .tsk-resrow .bp, .tsk-resrow .al-cancel { flex: 1; justify-content: center; }
}
@media (max-width: 760px) {
  /* Общая мобильная сетка строк (.trow) прибита !important под три колонки лида —
     у задачи их четыре, поэтому переопределяем с большей специфичностью, а не
     порядком правил. Исполнителя на телефоне прячем: свои задачи и так свои,
     а в срезе команды имя уходит в подпись под названием. */
  .trow.tsk-grid { grid-template-columns: minmax(0,1fr) auto !important;
    gap: 5px 10px; height: auto; padding: 13px 16px; align-items: start; }
  .trow.tsk-grid.thead { display: none; }
  /* Название — во всю ширину: на телефоне это единственный признак, по которому
     задачу узнают, и отжимать его чипом статуса нельзя. Срок со статусом идут
     второй строкой (вместе они и есть вопрос «горит ли»), исполнитель третьей —
     в трех колонках на 390px имя схлопывается в «Свод…». */
  .trow.tsk-grid .t-cell { grid-column: 1 / -1; grid-row: 1; }
  .trow.tsk-grid .tsk-due { grid-column: 1; grid-row: 2; justify-self: start; font-size: 12px; }
  .trow.tsk-grid > div:last-child { grid-column: 2; grid-row: 2; justify-self: end; }
  .trow.tsk-grid .tsk-who { grid-column: 1 / -1; grid-row: 3; font-size: 12.5px; }
  .trow.tsk-grid .tsk-who .tsk-av { width: 20px; height: 20px; font-size: 9px; }
  /* на телефоне название переносим в две строки: обрезанная задача не читается */
  .trow.tsk-grid .t-ttl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
  .trow.tsk-grid.mine .tsk-who { display: none; }
  /* Ховера на телефоне нет: перенос своего дела виден сразу, иначе его там нет. */
  .trow.tsk-grid.own .tsk-move { display: inline-flex; }
  /* Риски на телефоне: имя и уровень первой строкой, флаги во всю ширину второй —
     иначе общая .trow прибивает строку под три колонки лида. */
  .trow.rsk-grid { grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px 12px; height: auto; padding: 14px 16px; align-items: center; }
  .trow.rsk-grid.thead { display: none; }
  .trow.rsk-grid .rsk-flags { grid-column: 1 / -1; }
  /* Отчет план-факт на телефоне: имя во всю ширину, под ним числа в две колонки —
     шапка спрятана, поэтому каждое число называет себя из data-l. Сводка сворачивается
     в 2×2 сама — это .mo-stats. */
  .trow.rep-grid { grid-template-columns: 1fr 1fr !important; gap: 12px 14px;
    height: auto; padding: 14px 16px; align-items: start; }
  .trow.rep-grid.thead { display: none; }
  .trow.rep-grid .rep-name { grid-column: 1 / -1; }
  .trow.rep-grid .rep-num { text-align: left; }
  .trow.rep-grid .rep-num::before { content: attr(data-l); display: block;
    font: 600 10px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 2px; }
  /* Табло на телефоне: шесть колонок не влезают, поэтому человек занимает всю
     строку, а числа идут под ним в три колонки. Шапку прячем, значит каждое
     число обязано назвать себя само — подпись берется из data-l. */
  .trow.brd-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px 12px; height: auto; padding: 14px 16px; align-items: start; }
  .trow.brd-grid.thead { display: none; }
  .trow.brd-grid .brd-who { grid-column: 1 / -1; }
  .trow.brd-grid .brd-n { text-align: left; display: flex; flex-direction: column-reverse; gap: 2px; }
  .trow.brd-grid .brd-n::before { content: attr(data-l); font-size: 10.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  /* План на телефоне: плашки в колонку, а срез команды — имя во всю строку и
     состояния под ним. Шапка скрыта, поэтому каждая клетка называет себя сама. */
  .rh-plates { grid-template-columns: 1fr; padding: 14px 16px 2px; }
  .rh-how { margin: 14px 16px 0; padding: 13px 15px 14px; }
  .rh-loose { margin: 14px 16px 2px; }
  .rh-sched { padding: 14px 16px 18px; }
  .trow.rh-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px 12px; height: auto; padding: 14px 16px; align-items: start; }
  .trow.rh-grid.thead { display: none; }
  .trow.rh-grid .brd-who { grid-column: 1 / -1; }
  /* Подпись сверху, значение под ней: у клетки состояния внутри два элемента
     (чип и строка человека), и переворачивать их порядок, как у голого числа
     в табло, нельзя — строка уехала бы вперед чипа. */
  .trow.rh-grid .rh-c, .trow.rh-grid .brd-n { display: flex; flex-direction: column;
    align-items: flex-start; gap: 4px; text-align: left; }
  .trow.rh-grid .rh-c::before, .trow.rh-grid .brd-n::before { content: attr(data-l);
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3); }
  /* Отчет + метка приемки в узкой клетке: даем перенос, иначе «на доработке»
     обрезается за краем колонки. */
  .trow.rh-grid .rh-rv-btn { flex-wrap: wrap; align-items: flex-start; gap: 6px; }
  .brd-nav { margin-left: 0; }
  .brd-label { min-width: 0; flex: 1; }
  /* Дерево на телефоне: у направления числа уходят под название и называют
     себя сами (шапка скрыта), у цели и задачи вторая строка — срок и статус. */
  .trow.tr-grid { grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px 12px; height: auto; padding: 14px 16px; align-items: center; }
  .trow.tr-grid.thead { display: none; }
  .trow.tr-grid .tr-name, .trow.tr-grid .tr-prog { grid-column: 1 / -1; }
  .trow.tr-grid .brd-n { grid-column: auto; text-align: left;
    display: flex; flex-direction: column-reverse; gap: 2px; }
  .trow.tr-grid .brd-n::before { content: attr(data-l); font-size: 10.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .trow.tr-grid .tr-go { display: none; }
  .trow.tr-goal, .trow.tr-task { grid-template-columns: minmax(0,1fr) auto !important;
    gap: 6px 10px; height: auto; padding: 13px 16px; align-items: start; }
  .trow.tr-goal .tr-name, .trow.tr-task .tr-name { grid-column: 1 / -1; }
  .trow.tr-goal .tr-prog { grid-column: 1 / -1; }
  .trow.tr-goal .tr-go { display: none; }
  .tr-goalhead { padding: 16px; }
  .tr-open { margin: 12px 16px 16px; }
  /* «Готово» на телефоне: исполнитель и дата уходят под название задачи —
     в четыре колонки на 390px название схлопывается до трех слов. */
  .dn-t { grid-template-columns: 22px minmax(0,1fr); gap: 4px 10px; padding: 12px 14px; }
  .dn-tt { grid-column: 2; white-space: normal; }
  .dn-who, .dn-when { grid-column: 2; text-align: left; font-size: 12px; }
  .dn-when { color: var(--ink-3); }
  /* Семь направлений в три ряда на 390px съедают экран целиком, а список под
     ними — одну строку. Уводим в один ряд с горизонтальным скроллом. */
  .list-quick.depts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .list-quick.depts::-webkit-scrollbar { display: none; }
  .list-quick.depts .qchip { flex: none; }
  /* «По ученикам» на телефоне: название задачи во всю ширину, под ним человек и
     срок, статус справа. В четыре колонки на 390px имя схлопывается в «Ть…». */
  .stu { padding: 14px 16px 12px; }
  .stu-cs { margin-left: 0; width: 100%; }
  /* Обрезанное название шага на телефоне не читается — переносим в две строки,
     как и название задачи в строке списка. */
  .tsk-step-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
  .tsk-card { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .sec-head > .qchip { order: 2; margin-left: 0; }
}

/* журнал контактов — без верхней полоски */
.comm-btns { display: flex; gap: 8px; }
.comm-btns button { flex: 1; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2);
  border-radius: 12px; padding: 12px 8px; font: 600 12.5px 'Manrope', sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: .15s; }
.comm-btns button svg { width: 14px; height: 14px; color: var(--ink-3); transition: .15s; }
.comm-btns button:hover { border-color: #C9D7FB; color: var(--blue); background: var(--blue-tint); }
.comm-btns button:hover svg { color: var(--blue); }
.comm-log { margin-top: 12px; display: flex; flex-direction: column; }
.comm-row { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); padding: 9px 0;
  border-top: 1px solid var(--line); }
.comm-row:first-child { border-top: none; }
.comm-row .ci { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--fill); color: var(--ink-2); }
.comm-row .ct { flex: 1; min-width: 0; }
.comm-row .when { margin-left: auto; flex: none; font-size: 11.5px; color: var(--ink-3); }

/* блок «продажа» (рекомендация) — в Разборе AI */
.rec { display: flex; gap: 12px; background: var(--blue-tint); border: 1px solid #DCE7FF;
  border-radius: 13px; padding: 15px 17px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.rec .ri { width: 26px; height: 26px; border-radius: 8px; background: var(--blue); color: #fff;
  display: grid; place-items: center; flex: none; margin-top: 1px; }
.rec b { font-weight: 600; }
.rec .sub { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.prod-r { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; align-items: baseline; }
.prod-r:last-child { border-bottom: none; }
.prod-r b { font-weight: 600; white-space: nowrap; }
.prod-r span { color: var(--ink-2); }
.mech { font-size: 14px; line-height: 1.62; color: #3A3F4C; }
.mech b { color: var(--ink); font-weight: 600; }

/* ── РАЗБОР AI ── */
.ai-hero { background: linear-gradient(140deg, #F1F5FF, #EAF0FF); border: 1px solid #DCE7FF;
  border-radius: 16px; padding: 20px 22px; }
.ai-hero .ah-k { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.ai-hero .ah-k svg { color: var(--blue); }
.ai-hero .ah-t { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 10px; line-height: 1.35; }
.ai-hero .ah-s { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.55; }
.ai-gap { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 16px;
  background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #DCE7FF; }
.ai-gap .gr { display: flex; gap: 12px; padding: 11px 14px; font-size: 13px; }
.ai-gap .gr + .gr { border-top: 1px solid var(--line); }
.ai-gap .gk { flex: none; width: 56px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 1px; }
.ai-gap .gv { font-weight: 500; color: var(--ink); line-height: 1.45; }

/* ── Диагностика: верхний блок балл-кольцо + вердикт ── */
.diag-top { display: flex; gap: 22px; align-items: center; margin-bottom: 4px;
  background: linear-gradient(140deg, #F1F5FF, #E9F0FF); border: 1px solid #DCE7FF;
  border-radius: 18px; padding: 20px 24px; }
.diag-ring { --p: 0; --rc: var(--blue); flex: none; width: 98px; height: 98px; border-radius: 50%;
  background: conic-gradient(var(--rc) calc(var(--p) * 1%), #E1E8F4 0); display: grid; place-items: center; }
.diag-ring .dr-in { width: 76px; height: 76px; border-radius: 50%; background: #fff; display: grid;
  place-items: center; box-shadow: 0 2px 10px rgba(28,43,74,.10); }
.diag-ring .dr-in b { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.diag-ring .dr-in small { font-size: 10px; color: var(--ink-3); font-weight: 600; margin-top: 3px; }
.diag-vtext { min-width: 0; }
.diag-vlabel { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.diag-vlabel svg { color: currentColor; }
.diag-vh { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 9px; line-height: 1.32; }
.diag-vs { font-size: 13px; color: var(--ink-2); margin-top: 7px; line-height: 1.55; }

/* Балла нет в шапке «Главного»: тихая кнопка вместо пустоты — ведет в «Диагностику»,
   где сказано, что с расчетом. */
.mh-nodiag { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--fill);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 7px 13px; transition: .15s; }
.mh-nodiag:hover { background: #fff; color: var(--ink); }

/* Разбора еще нет: состояние расчета вместо пустого места. Отдельный тон у отказа —
   «считается» и «упало» требуют от менеджера разных действий (см. app.js diagStateCard). */
.diag-wait { border: 1px solid var(--line-2); border-radius: 18px; padding: 22px 24px;
  background: var(--fill); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.diag-wait b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.diag-wait span { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.diag-wait .bp { margin-top: 10px; }
.diag-wait.bad { background: var(--red-soft); border-color: #F5C9CB; }
.diag-wait.bad b { color: var(--red-ink); }

/* метрики-чипы */
.diag-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dmetric { background: var(--fill); border-radius: 14px; padding: 14px 16px; }
.dmetric .dm-v { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.dmetric .dm-k { display: block; font-size: 12px; color: var(--ink-2); margin-top: 4px; font-weight: 500; }
.dmetric .dm-n { display: block; font-size: 11px; color: var(--ink-3); margin-top: 5px; line-height: 1.4; }
.dmetric.good { background: var(--green-soft); } .dmetric.good .dm-v { color: var(--green-ink); }
.dmetric.bad  { background: var(--coral-soft); } .dmetric.bad .dm-v  { color: var(--coral); }
.dmetric.mid  { background: var(--amber-soft); } .dmetric.mid .dm-v  { color: var(--amber-ink); }

/* категории — шкалы во всю ширину */
.diag-cats .catr { grid-template-columns: 132px 1fr 44px; }
.diag-cats .strack { max-width: none; height: 8px; }

/* компактная карточка «Кто это» */
.who.compact { padding: 3px 14px; }
.who.compact .ed-field { padding: 9px 0; gap: 11px; }
.who.compact .ed-field .ef-ic { width: 27px; height: 27px; border-radius: 8px; }
.who.compact .ed-field .ef-v { font-size: 13.5px; }

/* квитанция в строке оплаты + в форме */
.pay-rcpt { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--ink-3); background: var(--fill); border-radius: var(--r-pill); padding: 5px 11px;
  flex: none; transition: .14s; }
.pay-rcpt svg { opacity: .85; }
.pay-rcpt:hover { color: var(--blue); background: var(--blue-tint); }
.pay-rcpt.has { color: var(--green-ink); background: var(--green-soft); }
.pay-rcpt.add { width: 100%; justify-content: center; margin-top: 4px; padding: 10px;
  border: 1px dashed var(--line); background: transparent; color: var(--ink-2); }
.pay-rcpt.add:hover { border-color: #DCE7FF; }
.pay-rcpt.add.on { color: var(--blue); border-color: var(--blue); background: var(--blue-tint); }

/* свёрнутая анкета */
.qa-fold .m-sec-h { cursor: pointer; }
.qa-fold .m-sec-h .hr::after { content: ' ▾'; }
.qa-fold.open .m-sec-h .hr::after { content: ' ▴'; }
.qa-wrap { display: none; }
.qa-fold.open .qa-wrap { display: block; }

/* ── SKELETON shimmer (модалка) ── */
.sk { position: relative; height: 13px; border-radius: 7px; margin-top: 11px; overflow: hidden;
  background: var(--fill); }
.sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: shimmer 1.3s infinite; }
.sk.w35 { width: 35%; } .sk.w55 { width: 55%; } .sk.w75 { width: 75%; } .sk.w90 { width: 90%; }
.sk.tall { height: 84px; border-radius: 14px; }
.sk.row { height: 52px; border-radius: 12px; }
.sk:first-child { margin-top: 0; }
.sk-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* факты/метрики (ab-блок) */
.ab { background: var(--fill); border-radius: var(--r-lg); padding: 18px 20px; }
.ab .r { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0;
  border-top: 1px solid var(--line-2); font-size: 13.5px; }
.ab .r:first-child { border-top: none; padding-top: 0; }
.ab .r:last-child { padding-bottom: 0; }
.ab .k { color: var(--ink-2); flex: none; }
.ab .v { font-weight: 600; text-align: right; }
.ab .v.good { color: var(--green); } .ab .v.bad { color: var(--coral); } .ab .v.mid { color: var(--amber-ink); }

/* категории-шкалы */
.catr { display: grid; grid-template-columns: 120px 1fr 46px; gap: 12px; align-items: center; padding: 9px 0; }
.catr .k { font-size: 13px; font-weight: 500; }
.catr .p { font-size: 13.5px; font-weight: 600; text-align: right; }

/* вузы */
.uni-r { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.uni-r:last-child { border-bottom: none; }
.uni-nm { font-size: 14px; font-weight: 600; }
.uni-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.uni-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-2); background: var(--fill); border-radius: 7px; padding: 3px 8px; flex: none; }
.uni-right { margin-left: auto; text-align: right; flex: none; }
.uni-ch { font-size: 14px; font-weight: 600; }
.uni-gr { font-size: 11.5px; color: var(--green); font-weight: 600; }

/* сильное/рост */
.sg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sg-h { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.sg-h.ok { color: var(--green); } .sg-h.grow { color: var(--coral); }
.sg ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sg li b { font-weight: 600; font-size: 13.5px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.sg li span { color: var(--ink-2); font-size: 12.5px; display: block; margin-top: 2px; line-height: 1.45; }
.crit { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: var(--r-pill); padding: 2.5px 8px; }
.crit.block { color: var(--coral); background: var(--coral-soft); }
.crit.imp { color: var(--amber-ink); background: var(--amber-soft); }
.crit.nice { color: var(--ink-2); background: var(--fill); }

/* план */
.stage { display: flex; gap: 13px; padding: 11px 0; }
.stage-n { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--blue-tint);
  color: var(--blue); font-weight: 700; font-size: 12.5px; display: grid; place-items: center; margin-top: 1px; }
.stage-t { font-weight: 600; font-size: 14px; }
.stage-t span { color: var(--blue); font-size: 11.5px; font-weight: 600; background: var(--blue-tint);
  border-radius: var(--r-pill); padding: 3px 9px; margin-left: 8px; white-space: nowrap; }
.stage ul { margin: 6px 0 0; padding-left: 17px; color: var(--ink-2); font-size: 13px;
  display: flex; flex-direction: column; gap: 3px; }

/* таймлайн */
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; border-left: 1.5px dashed var(--line-2); }
.tl-row { position: relative; display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 13px; }
.tl-dot { position: absolute; left: -22px; top: 11px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-2); border: 2px solid #fff; }
.tl-row.hi .tl-dot { background: var(--blue); }
.tl-row.comm .tl-dot { background: var(--green); }
.tl-text { color: var(--ink-2); font-weight: 500; }
.tl-row.hi .tl-text { color: var(--ink); font-weight: 600; }
.tl-when { margin-left: auto; flex: none; color: var(--ink-3); font-size: 12px; }

/* анкета key-value */
.qa-r { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.qa-r:first-child { border-top: none; padding-top: 0; }
.qa-r .k { color: var(--ink-2); flex: none; max-width: 46%; }
.qa-r .v { font-weight: 600; text-align: right; }

.d-fail { text-align: center; color: var(--ink-2); padding: 20px 0; font-size: 13.5px; }
.d-fail button { border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  border-radius: 10px; padding: 8px 14px; font: 600 12.5px 'Manrope', sans-serif; margin-left: 8px; }
.dots-anim::after { content: ''; animation: dotsAnim 1.4s steps(4, end) infinite; }
@keyframes dotsAnim { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* статус-меню (клик по пилюле в таблице) */
#smenu.ddmenu--over-modal { z-index: 90; }   /* выпадашка из карточки — поверх нее (.modal z-index 81) */
#smenu { position: fixed; z-index: 70; background: #fff; border: 1px solid var(--line-2);
  border-radius: 14px; padding: 6px; box-shadow: 0 14px 40px -16px rgba(15,19,32,.3);
  display: flex; flex-direction: column; gap: 1px; min-width: 188px; }
#smenu button { display: flex; align-items: center; gap: 9px; text-align: left; padding: 9px 12px;
  border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ink); }
#smenu button:hover { background: var(--fill); }
#smenu button.cur { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
/* статус-меню: пункт = пилюля статуса (без точек), текущий помечен галочкой */
#smenu.smenu-status button { gap: 10px; padding: 8px 10px; }
#smenu.smenu-status button .sev { pointer-events: none; }
#smenu.smenu-status button .chk { margin-left: auto; color: var(--blue); opacity: 0; flex: none; }
#smenu.smenu-status button.cur { background: var(--fill); }
#smenu.smenu-status button.cur .chk { opacity: 1; }

/* Тост всегда поверх всего: он объясняет, почему действие не прошло, и уезжать под
   карточку ему нельзя — иначе отказ выглядит как «кнопка не работает». */
#toast { position: fixed; left: 50%; transform: translate(-50%, 8px); bottom: 22px; z-index: 120;
  background: var(--black); color: #fff; border-radius: 13px; padding: 13px 18px;
  font: 600 13.5px 'Manrope', sans-serif; cursor: pointer;
  box-shadow: 0 16px 44px -12px rgba(15,19,32,.5);
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 360px; }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast span { color: #9FC0FF; font-weight: 500; }

/* ── ДВИЖЕНИЕ: появление контента (всё гасится при reduced-motion ниже) ── */
@keyframes viewFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.view-anim { animation: viewFade .2s var(--ease) both; }
/* карточки дашбордов появляются каскадом */
.grid > * { animation: riseIn .34s var(--ease) both; }
.grid > *:nth-child(1) { animation-delay: .02s; }
.grid > *:nth-child(2) { animation-delay: .06s; }
.grid > *:nth-child(3) { animation-delay: .10s; }
.grid > *:nth-child(4) { animation-delay: .14s; }
.grid > *:nth-child(5) { animation-delay: .18s; }
.grid > *:nth-child(n+6) { animation-delay: .2s; }
/* тред инбокса мягко проявляется при смене диалога */
.tg-thread { animation: viewFade .16s var(--ease) both; }
/* балл-кольцо диагностики «доезжает» от 0 */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.diag-ring { animation: ringFill 1.05s var(--ease) both; }
@keyframes ringFill { from { --p: 0; } }
@media (prefers-reduced-motion: reduce) {
  .view-anim, .grid > *, .tg-thread, .diag-ring, .gate-split { animation: none !important; }
}

/* GATE — full-bleed сплит: бренд-панель на пол-экрана + форма */
#gate { min-height: 100vh; min-height: 100dvh; background: #fff; }
.gate-split { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 100vh; min-height: 100dvh; }
.gate-brand { position: relative; padding: 56px 60px; color: #fff; overflow: hidden;
  background: linear-gradient(150deg, var(--blue) 0%, var(--blue-d) 50%, var(--navy) 100%);
  display: flex; flex-direction: column; }
.gate-brand::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  right: -180px; bottom: -210px; background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%); }
.gate-brand::before { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  left: -120px; top: -120px; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); }
.gate-brand .logo.light .mk { background: #fff; color: var(--blue); }
.gate-brand .logo.light .nm, .gate-brand .logo.light .nm b { color: #fff; }
.gate-brand .logo.light .nm small { color: rgba(255,255,255,.62); }
.gate-brand .gb-mid { margin-top: auto; position: relative; z-index: 1; }
.gb-h { font-size: 34px; font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.gb-s { font-size: 14.5px; color: rgba(255,255,255,.84); line-height: 1.6; margin-top: 16px; max-width: 380px; }
.gb-foot { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; position: relative; z-index: 1;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.78); }
.gb-foot svg { color: rgba(255,255,255,.9); }
.gate-card { padding: 48px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.gate-card > * { width: 100%; max-width: 372px; }
.gate-card h1 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.gate-card p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 22px; line-height: 1.55; }
.gate-card input { font: 500 14.5px 'Manrope', sans-serif; color: var(--ink);
  background: var(--fill); border: 1px solid transparent; border-radius: 12px;
  padding: 13px 14px; outline: none; margin-bottom: 10px; transition: .15s; }
.gate-card input:focus { background: #fff; border-color: #DCE7FF; box-shadow: 0 0 0 3px rgba(47,107,255,.12); }
.lg-passwrap { position: relative; margin-bottom: 0; }
.lg-passwrap input { width: 100%; margin-bottom: 0; padding-right: 84px; }
.lg-eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: auto;
  font: 600 12px 'Manrope', sans-serif; color: var(--ink-3); padding: 6px 10px; border-radius: 8px; transition: .14s; }
.lg-eye:hover { color: var(--blue); background: var(--blue-tint); }
.gate-card .bp { margin-top: 14px; }
.gate-err { color: var(--coral); font-size: 13px; margin-top: 12px; display: none; }
/* Второстепенное действие карточки входа — текстом, не второй кнопкой:
   на экране должно быть ровно одно очевидное действие. */
.gate-link { width: auto; margin-top: 16px; align-self: center; background: none;
  font: 600 13px 'Manrope', sans-serif; color: var(--ink-2); padding: 6px 8px;
  border-radius: 8px; transition: color .14s, background .14s; }
.gate-link:hover { color: var(--blue); background: var(--blue-tint); }
/* Разделитель между паролем и телеграмом: линия сквозь слово, без рамок и коробок. */
.lg-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; }
.lg-or::before, .lg-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lg-or span { font: 600 11.5px 'Manrope', sans-serif; color: var(--ink-3);
  text-transform: lowercase; }
.gate-card .bp.ghost { margin-top: 0; }
/* КОД ВХОДА — единственный якорь экрана: крупные табличные цифры, все остальное тише. */
.tgl-code { position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--fill); border-radius: 14px; padding: 18px 16px; margin-bottom: 14px; }
.tgl-code b { font: 800 34px/1 'Manrope', sans-serif; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: var(--ink); }
/* Мертвый код гасим, чтобы человек не пытался отправить его еще раз. */
.tgl-code.dead b { color: var(--ink-3); }
.tgl-code.dead .tgl-copy { display: none; }
.tgl-copy { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: auto;
  color: var(--ink-3); padding: 8px; border-radius: 9px; transition: .14s; }
.tgl-copy:hover { color: var(--blue); background: var(--blue-tint); }
.tgl-hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-bottom: 16px; }
/* Ожидание — три точки, которые дышат по очереди: экран не выглядит замершим. */
.tgl-wait { display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 12.5px 'Manrope', sans-serif; color: var(--ink-3); }
.tgl-wait i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
  opacity: .3; animation: tglDot 1.2s var(--ease) infinite; }
.tgl-wait i:nth-child(2) { animation-delay: .16s; }
.tgl-wait i:nth-child(3) { animation-delay: .32s; }
.tgl-wait span { margin-left: 6px; font-variant-numeric: tabular-nums; }
@keyframes tglDot { 0%, 100% { opacity: .25; transform: translateY(0); }
                    40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .tgl-wait i { animation: none; } }
@media (max-width: 760px) {
  .gate-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .gate-brand { padding: 32px 28px 28px; }
  .gb-h { font-size: 25px; } .gb-s { display: none; } .gb-foot { margin-top: 18px; }
  /* На телефоне форма идет сразу под шапкой. По центру колонки она «плавала» бы
     посреди экрана: над ней и под ней оставалась пустота в треть высоты. */
  .gate-card { padding: 28px 28px 40px; align-items: stretch; justify-content: flex-start; }
  .gate-card > * { max-width: none; }
}

/* ── Матрица Эйзенхауэра: важность как второй признак задачи ─────────────────
   Важность помечается амбером по формуле §3.2 (soft-фон + ink-текст), а не
   красным: красное на экране задач одно — просрочка, и второй сигнал того же
   веса свел бы оба на нет. */
.tsk-imp { display: inline-flex; align-items: center; flex: none; margin-right: 6px;
  color: var(--amber-ink); vertical-align: -1px; }
.tsk-imp svg { width: 11px; height: 11px; }

/* Полоса-разделитель внутри списка дня: «Срочно и важно» и все остальное.
   Отдельным блоком наверху те же задачи не выносим — они задваивались бы. */
.tsk-band { display: flex; align-items: baseline; gap: 9px; padding: 14px 16px 7px;
  border-top: 1px solid var(--line); }
.list-body > .tsk-band:first-child { border-top: 0; padding-top: 10px; }
.tsk-band-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); }
/* Имя человека в полосе секции («Застряло» группирует просрочку по людям).
   Капс и разрядка — для названий категорий («НИЧЬИ»), а имя в капсе читается
   как окрик, и разговор про просрочку так начинать не стоит. */
.tsk-band-t.name { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-1); }
.tsk-band-h { font-size: 11.5px; color: var(--ink-3); }
.tsk-band-n { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }

/* Тумблер важности в карточке — рядом со сроком: две оси решаются вместе. */
.tsk-mimp { display: inline-flex; align-items: center; gap: 6px; flex: none;
  font: 600 12.5px 'Manrope', sans-serif; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px 10px 3px 8px;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); }
.tsk-mimp svg { width: 12px; height: 12px; color: var(--ink-3); }
.tsk-mimp:hover { color: var(--ink-2); border-color: var(--ink-3); }
.tsk-mimp.on { background: var(--amber-soft); color: var(--amber-ink); border-color: transparent; }
.tsk-mimp.on svg { color: var(--amber-ink); }
button.tsk-mimp { cursor: pointer; }

/* Чип важности в форме постановки. Это тот же .qchip, только «включенное»
   состояние амберное, а не navy: включенный фильтр и помеченная важной задача —
   разные вещи, и цвет их разводит. */
.nt-impf { flex-direction: column; align-items: flex-start; gap: 7px; margin-bottom: 6px; }
.qchip.nt-imp.on { background: var(--amber-soft); color: var(--amber-ink); border-color: transparent; }
.qchip.nt-imp.on svg { color: var(--amber-ink); }

/* Сама матрица: четыре квадранта 2×2. Рамок между ними нет — разделяет
   заливка, как у всех мини-карточек CRM. Акцент один: срочное и важное. */
.eis { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px;
  padding: 14px 16px 16px; align-items: start; }
.eis-q { background: var(--fill); border-radius: var(--r-lg); padding: 13px 14px 6px;
  display: flex; flex-direction: column; min-width: 0; }
.eis-q.eis-q-iu { background: var(--amber-soft); }
.eis-h { display: flex; align-items: baseline; gap: 8px; }
.eis-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); }
.eis-q-iu .eis-t { color: var(--amber-ink); }
.eis-n { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.eis-q-iu .eis-n { color: var(--amber-ink); }
.eis-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.eis-q-iu .eis-hint { color: var(--amber-ink); opacity: .72; }
.eis-body { margin-top: 10px; display: flex; flex-direction: column; }
.eis-t-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
  border-top: 1px solid rgba(15,19,32,.06); cursor: pointer; min-width: 0;
  transition: color .14s var(--ease); }
.eis-body > .eis-t-row:first-child { border-top: 0; }
.eis-t-row:hover .eis-tt { color: var(--blue); }
.eis-tt { font-size: 13px; color: var(--ink); min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.eis-td { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.eis-empty { font-size: 12px; color: var(--ink-3); padding: 10px 0 10px; }

/* Снять с готово прямо в отчете периода: действие тихое и появляется на
   ховере строки — разбирают отчет глазами, а не кнопками. Место под кнопку
   держится всегда (.dn-undo-gap), иначе строки без нее едут по сетке. */
.dn-undo-gap { display: block; }
.dn-undo { display: inline-flex; align-items: center; gap: 5px; flex: none;
  font: 600 11.5px 'Manrope', sans-serif; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 3px 9px 3px 7px;
  opacity: 0; transition: opacity .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease); }
.dn-undo svg { width: 12px; height: 12px; }
.dn-t:hover .dn-undo { opacity: 1; }
.dn-undo:hover { color: var(--ink); border-color: var(--ink-3); }
.dn-undo:focus-visible { opacity: 1; }

/* Телефон. Блок стоит ПОСЛЕ базовых правил выше намеренно: у мобильного
   переопределения та же специфичность, и, стоя раньше, оно проигрывало бы. */
@media (max-width: 760px) {
  /* Матрица — колонкой: два квадранта в ряд на 390px превращают названия задач
     в два слова с многоточием. */
  .eis { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 12px 14px 14px; }
  /* Ховера на телефоне нет: «вернуть» стоит видимой под датой, иначе до нее не
     добраться вовсе. Пустую ячейку в двухколоночной строке не держим. */
  .dn-undo { grid-column: 2; opacity: 1; justify-self: start; }
  .dn-undo-gap { display: none; }
}

/* ════ ФИНАНСЫ ════ */
.fin-money { color: var(--ink-2); font-weight: 500; }
.fin-money b { color: var(--ink); font-weight: 700; }
.stat .sdot.gold { background: var(--amber); }
.fin-banner { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); background: var(--amber-soft); border-radius: var(--r-pill);
  padding: 9px 14px; margin-bottom: 18px; }
.fin-banner svg { color: var(--amber-ink); flex: none; }
.fin-banner b { color: var(--amber-ink); font-weight: 700; }
.fin-stack { height: 16px; border-radius: 8px; background: var(--fill); overflow: hidden;
  display: flex; margin-top: 18px; }
.fin-stack i { display: block; height: 100%; min-width: 0; transition: width .9s var(--ease); }
.fin-stack i.paid { background: var(--green); }
.fin-stack i.pending { background: var(--amber); }
.fin-stack i.refunded { background: var(--red); }
.fin-leg { display: flex; flex-direction: column; margin-top: 16px; }
.fin-leg .r { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line); }
.fin-leg .r:first-child { border-top: none; padding-top: 4px; }
.fin-leg .r:last-child { padding-bottom: 0; }
.fin-leg .dd2 { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fin-leg .nm { flex: 1; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.fin-leg .am { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.fin-leg .am.muted { color: var(--ink-3); }
.fin-months { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 14px; }
.fin-mcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 100%; }
.fin-mcol .bar { background: var(--blue); border-radius: 7px; min-height: 3px; transition: height .2s; }
.fin-mcol .bar.peak { background: var(--navy); }
.fin-mlabels { display: flex; gap: 10px; margin-top: 10px; }
.fin-mlabels span { flex: 1; text-align: center; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.fin-client { display: grid; grid-template-columns: 1fr 90px; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: .14s; }
.fin-client:last-child { border-bottom: none; }
.fin-client:hover { background: #FBFBFC; }
.fin-client .fc-l { min-width: 0; }
.fin-client .fc-nm { font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-client .fc-track { height: 7px; border-radius: 5px; background: var(--fill); overflow: hidden; margin-top: 7px; }
.fin-client .fc-track i { display: block; height: 100%; border-radius: 5px; background: var(--blue);
  min-width: 5px; transition: width .9s var(--ease); }
.fin-client .fc-am { text-align: right; }
.fin-client .fc-sum { font-size: 14.5px; font-weight: 700; }
.fin-client .fc-cnt { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ════ ОМНИКАНАЛЬНЫЙ БОТ — инбокс / диалог / аналитика ════ */
.ib-banner { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--ink-2);
  background: var(--blue-tint); border: 1px solid #DCE7FF; border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; line-height: 1.45; }
.ib-banner svg { color: var(--blue); flex: none; }

/* канальный чип (с --c цветом канала) */
.ch-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--c, var(--blue)); background: color-mix(in srgb, var(--c, #2F6BFF) 12%, #fff); border-radius: var(--r-pill); padding: 5px 11px; }
.ch-badge svg { color: var(--c, var(--blue)); }
.list-quick .qchip[data-ch] svg { color: var(--c, var(--ink-3)); }
.list-quick .qchip.on[data-ch] { background: var(--c, var(--navy)); border-color: var(--c, var(--navy)); color: #fff; }
.list-quick .qchip.on[data-ch] svg, .list-quick .qchip.on[data-ch] .qn { color: rgba(255,255,255,.8); }

/* ════ Telegram-инбокс: две панели (список + чат) ════ */
.tg { display: flex; height: 72vh; min-height: 480px; border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden; background: #fff; }
.tg-list { width: 344px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.tg-search { padding: 12px 12px 8px; }
.tg-search .searchwrap { width: 100%; max-width: none; min-width: 0; }
.tg-fchips { display: flex; gap: 6px; padding: 0 12px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tg-fch { display: inline-flex; align-items: center; gap: 5px; font: 600 12px 'Manrope', sans-serif; color: var(--ink-2);
  background: var(--fill); border-radius: var(--r-pill); padding: 6px 11px; transition: .14s; }
.tg-fch svg { color: var(--c, var(--ink-3)); }
.tg-fch:hover { color: var(--ink); }
.tg-fch.on { background: var(--navy); color: #fff; }
.tg-fch.on svg { color: #fff; }
.tg-fch .tg-fn { color: var(--ink-3); font-size: 11px; }
.tg-fch.on .tg-fn { color: rgba(255,255,255,.7); }
.tg-rows { flex: 1; overflow-y: auto; min-height: 0; }
.tg-rows::-webkit-scrollbar { width: 7px; } .tg-rows::-webkit-scrollbar-thumb { background: #E3E5EB; border-radius: 99px; }
.tg-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px;
  cursor: pointer; transition: .12s; border-bottom: 1px solid #F4F5F8; }
.tg-row:hover { background: #F7F8FA; }
.tg-row.on { background: var(--blue-tint); }
.tg-ava { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .01em;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c,#2F6BFF) 92%, #fff), var(--c, #2F6BFF) 55%, color-mix(in srgb, var(--c,#2F6BFF) 86%, #000)); }
.tg-ava.sm { width: 38px; height: 38px; font-size: 13px; }
.tg-ch { position: absolute; right: -2px; bottom: -2px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; border: 2px solid #fff; }
.tg-ch svg { width: 8px; height: 8px; }
.tg-rb { flex: 1; min-width: 0; }
.tg-r1 { display: flex; align-items: baseline; gap: 8px; }
.tg-nm { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-nm.anon { color: var(--ink-3); font-weight: 500; }
.tg-row.unread .tg-nm { font-weight: 700; }
.tg-tm { margin-left: auto; flex: none; font-size: 11.5px; color: var(--ink-3); }
.tg-r2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.tg-pv { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-row.unread .tg-pv { color: var(--ink-2); }
.tg-badge { margin-left: auto; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.tg-badge.wait { background: var(--amber); }
.tg-r3 { margin-top: 5px; }
.tg-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; border-radius: var(--r-pill); padding: 2px 8px; }
.tg-tag svg { width: 10px; height: 10px; }
.tg-tag.ai { color: var(--blue); background: var(--blue-tint); }
.tg-tag.wait { color: var(--amber-ink); background: var(--amber-soft); }
.tg-tag.mgr { color: var(--green-ink); background: var(--green-soft); }
.tg-tag.st { color: var(--ink-3); background: var(--fill); font-weight: 600; }
.tg-r3 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tg-r3 .tg-tag { min-width: 0; white-space: nowrap; }
.tg-tag.tsk { min-width: 0; }
.tg-tag.tsk svg { flex: none; }
.tg-tag-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tg-tag.st { max-width: 44%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.tg-empty-list { padding: 40px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* правая панель — чат */
.tg-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tg-blank { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--ink-3); font-size: 14px; background: #F3F5F8; }
.tg-blank-ic { width: 64px; height: 64px; border-radius: 20px; background: #fff; display: grid; place-items: center;
  color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.tg-chead { flex: none; display: flex; align-items: center; gap: 12px; padding: 11px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.tg-back { display: none; width: 32px; height: 32px; border-radius: 9px; color: var(--ink-2); transform: rotate(180deg); }
.tg-back:hover { background: var(--fill); }
.tg-ci { flex: 1; min-width: 0; }
.tg-cn { font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-cs { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.tg-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.tg-st svg { width: 11px; height: 11px; }
.tg-st.ai { color: var(--blue); } .tg-st.hot { color: var(--amber-ink); } .tg-st.mgr { color: var(--ink-2); }
/* кнопка «Карточка» в шапке диалога: тихая таблетка рядом с тумблером бота —
   якорь экрана это переписка, а не кнопки над ней */
.tg-cwrap { flex: none; display: inline-flex; }
.tg-cact { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); background: var(--fill); border-radius: var(--r-pill); padding: 8px 13px; transition: .15s; }
.tg-cact:hover { background: #EDEFF3; color: var(--ink); }
.tg-cact.new { color: var(--blue); background: var(--blue-tint); }
.tg-cact.new:hover { background: #DCE7FF; }
.tg-cact.off { opacity: .45; pointer-events: none; }
.tg-cact[disabled] { opacity: .6; pointer-events: none; }
.tg-cact .tg-cls { display: none; }   /* короткая подпись — только на телефоне */
.tg-cact .tg-cw { font-size: 10.5px; font-weight: 600; color: var(--amber-ink); background: var(--amber-soft);
  border-radius: var(--r-pill); padding: 1px 6px; }
/* «Привязать ученика» — соседка «Карточки», та же тихая таблетка. Привязанный
   ученик светится зеленым: это не действие, а подтвержденное состояние, и читать
   его надо не читая — по нему видно, будет бот говорить про занятия или молчать. */
.tg-cact.sch.on { color: var(--ink); }
.tg-cact.sch.on .sch-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* Выбор ученика. Живет в общем .modal, но с размером под задачу: там одно поле и
   короткий список, а полотно 1020x86vh для этого пустое. Отсюда .modal.pick —
   новый размер общего окна, а не свое окно. */
.modal.pick { width: 560px; height: auto; max-height: 76vh; }
.sl-wrap { display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 22px; min-height: 0; }
.sl-h { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.sl-sub { font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.sl-cur { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600;
  color: var(--green-ink); background: var(--green-soft); border-radius: var(--r-pill); padding: 5px 6px 5px 12px; }
.sl-x { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  color: var(--green-ink); opacity: .55; transition: .15s; }
.sl-x:hover { opacity: 1; background: rgba(14,124,63,.12); }
.sl-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; margin: 0 -8px; padding: 0 8px; }
/* Строка списка — без рамок: разделяет воздух и вес имени, а не линии вокруг каждой */
.sl-row { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  border-radius: 10px; padding: 9px 11px; transition: background .12s; }
.sl-row:hover { background: var(--fill); }
.sl-nm { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sl-t { font-size: 12px; color: var(--ink-3); margin-right: auto; }
.sl-ok { font-size: 11px; font-weight: 700; color: var(--green-ink); }
.sl-row.on .sl-nm { color: var(--green-ink); }
.sl-empty { font-size: 13px; line-height: 1.5; color: var(--ink-2); padding: 14px 11px; }
.tg-thread { flex: 1; overflow-y: auto; min-height: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; background: #F3F5F8; }
.tg-thread::-webkit-scrollbar { width: 7px; } .tg-thread::-webkit-scrollbar-thumb { background: #DFE2E8; border-radius: 99px; }
.tg-msg { max-width: 74%; display: flex; flex-direction: column; }
.tg-msg.in { align-self: flex-start; }
.tg-msg.out { align-self: flex-end; align-items: flex-end; }
.tg-bub { font-size: 13.5px; line-height: 1.45; padding: 8px 12px 7px; border-radius: 14px; white-space: normal; word-break: break-word; }
.tg-msg.in .tg-bub { background: #fff; color: var(--ink); border-bottom-left-radius: 5px; box-shadow: 0 1px 1px rgba(15,19,32,.05); }
/* исходящие (бот + менеджер) — синие пузыри, белый текст. AI и менеджер различаются оттенком. */
.tg-msg.out .tg-bub { background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }
.tg-msg.out.mgr .tg-bub { background: var(--navy); }
.tg-msg.out .tg-bub b { font-weight: 700; }
.tg-msg.out .tg-bub a { color: #fff; text-decoration: underline; }
.tg-msg.out .tg-bub code { background: rgba(255,255,255,.18); border-radius: 4px; padding: 1px 4px; font-size: 12px; }
.tg-msg.out .tg-bub pre { background: rgba(255,255,255,.14); border-radius: 8px; padding: 8px 10px; margin: 4px 0; white-space: pre-wrap; font-size: 12px; overflow-x: auto; }
.tg-msg.in .tg-bub code { background: #EEF1F6; border-radius: 4px; padding: 1px 4px; font-size: 12px; }
.tg-msg.in .tg-bub pre { background: #F3F5F8; border-radius: 8px; padding: 8px 10px; margin: 4px 0; white-space: pre-wrap; font-size: 12px; overflow-x: auto; }
.tg-bub .li { display: block; padding-left: 2px; }
.tg-mt { font-size: 10px; margin-left: 10px; float: right; position: relative; top: 5px; }
.tg-msg.in .tg-mt { color: var(--ink-3); }
.tg-msg.out .tg-mt { color: rgba(255,255,255,.7); }
.tg-by { font-size: 10px; font-weight: 600; color: var(--ink-3); margin-top: 2px; display: inline-flex; align-items: center; gap: 3px; }
.tg-by svg { opacity: .8; }
.tg-msg.in .tg-by { color: var(--blue); }
.tg-msg.out.ai .tg-by { color: var(--blue); }
.tg-msg.out.mgr .tg-by { color: var(--navy); }
.tg-by.warn { color: var(--red-ink); }
.tg-msg.undelivered .tg-bub { box-shadow: inset 0 0 0 1px var(--red); }
.tg-msg.out.undelivered .tg-bub { opacity: .82; }
/* Фотография в переписке пузыря не требует: рамка вокруг снимка растягивала белую
   плашку на всю колонку, а кадр оставался узким. Время — поверх кадра, как в
   мессенджерах, поэтому пузырь тут позиционируемый. */
.tg-msg.pic { max-width: min(320px, 74%); }
.tg-msg.in .tg-bub.pic, .tg-msg.out .tg-bub.pic { padding: 0; position: relative;
  background: none; box-shadow: none; border-radius: 12px; }
.tg-bub.pic .tg-atts { margin-bottom: 0; }
.tg-msg.in .tg-bub.pic .tg-mt, .tg-msg.out .tg-bub.pic .tg-mt { position: absolute; float: none;
  right: 7px; bottom: 7px; top: auto; margin: 0; padding: 1px 7px 2px; border-radius: var(--r-pill);
  background: rgba(3,8,28,.55); color: #fff; }
/* разделитель дня в треде (Сегодня / Вчера / дата) */
.tg-day { display: flex; justify-content: center; margin: 10px 0 4px; }
.tg-day:first-child { margin-top: 0; }
.tg-day span { font-size: 11px; font-weight: 600; color: var(--ink-2); background: #fff;
  border-radius: var(--r-pill); padding: 4px 13px; box-shadow: 0 1px 2px rgba(15,19,32,.06); }
/* скелетон загрузки сообщений — заметные пузыри */
.tg-sk { display: flex; flex-direction: column; gap: 12px; padding: 8px 2px; }
.tg-skb { height: 38px; border-radius: 16px; }
.tg-skb.in { align-self: flex-start; border-bottom-left-radius: 5px; }
.tg-skb.out { align-self: flex-end; border-bottom-right-radius: 5px; }
/* скелетон списка диалогов (первичная загрузка) */
.tg-skrow { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.tg-skava { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.tg-skrb { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tg-skl { height: 11px; border-radius: 6px; }
.tg-skl.w50 { width: 50%; } .tg-skl.w30 { width: 30%; } .tg-skl.w60 { width: 60%; } .tg-skl.w48 { width: 48%; } .tg-skl.w40 { width: 40%; }
.tg-skava.sm { width: 34px; height: 34px; border-radius: 50%; }
.tg-chead.sk { padding: 14px 16px; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
/* подсказка-режим над композером (бот вкл/выкл) */
.tg-hint { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 16px;
  font-size: 12px; line-height: 1.4; border-top: 1px solid var(--line); }
.tg-hint svg { flex: none; }
.tg-hint.ai { color: var(--ink-2); background: #F3F7FF; }
.tg-hint.ai svg { color: var(--blue); }
.tg-hint.mgr { color: #7A6438; background: var(--amber-soft); }
.tg-hint.mgr svg { color: var(--amber-ink); }
.tg-hint b { font-weight: 700; color: var(--ink); }
.tg-hint.mgr b { color: var(--amber-ink); }
/* действия над сообщением (изменить, убрать) — по наведению на пузырь */
.tg-msg { position: relative; }
.tg-acts { position: absolute; top: -7px; display: flex; gap: 4px; opacity: 0; transition: .12s; z-index: 2; }
.tg-msg.in .tg-acts { right: -9px; }
.tg-msg.out .tg-acts { left: -9px; }
.tg-msg:hover .tg-acts { opacity: 1; }
.tg-acts > button { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--ink-3);
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(15,19,32,.16); transition: color .12s; }
.tg-del:hover { color: var(--coral); }
.tg-edit:hover { color: var(--blue); }
/* Правка прямо в пузыре: текст остается на своём месте в переписке, и видно, что
   именно человек уже прочитал. Поле светлое даже у исходящего — на синем фоне
   собственный ввод не читается. */
.tg-msg.editing .tg-bub, .tg-msg.editing.out .tg-bub, .tg-msg.editing.out.mgr .tg-bub {
  background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px var(--blue) inset; padding: 8px; }
.tg-edin { width: 100%; min-width: 240px; border: 0; resize: vertical; font: inherit; color: var(--ink);
  line-height: 1.45; background: transparent; outline: none; }
.tg-edrow { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.tg-edrow button { height: 26px; padding: 0 11px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.tg-edx { color: var(--ink-3); }
.tg-edx:hover { color: var(--ink); }
.tg-edok { background: var(--blue); color: #fff; }
.tg-edok:hover { filter: brightness(1.06); }
/* Отозванное сообщение. Не прячем: пропавшая реплика читается как «менеджер соврал»,
   а зачёркнутая честно говорит, что мы отправили и убрали. Кнопки удаления у него уже
   нет — сервер не отдаёт can_delete на удалённое. */
.tg-msg.gone .tg-bub { opacity: .55; text-decoration: line-through; text-decoration-color: var(--ink-3); }
.tg-msg.gone .tg-mt { text-decoration: none; }
/* композер: написать сообщение (перехват у бота).
   Поле — textarea: Enter отправляет, Shift+Enter переносит строку, высота растёт по тексту
   (до 128px, дальше свой скролл), поэтому длинный ответ виден целиком, а не одной строкой. */
.tg-compose { flex: none; display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--line); }
.tg-compose textarea { flex: 1; min-width: 0; outline: none; font: 500 13.5px/1.45 'Manrope', sans-serif; color: var(--ink);
  background: var(--fill); border: 1px solid transparent; border-radius: 21px; padding: 11px 16px; transition: border-color .15s, background .15s, box-shadow .15s;
  resize: none; max-height: 128px; overflow-y: auto; display: block; }
.tg-compose textarea:focus { background: #fff; border-color: #CFE0FF; box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.tg-compose .tg-send, .m-dlg-compose .tg-send { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--blue); color: #fff; transition: .15s; }
.tg-compose .tg-send:hover, .m-dlg-compose .tg-send:hover { background: var(--blue-d); }
/* скрепка: отправить клиенту файл прямо из переписки. Тихая, в отличие от синей
   кнопки отправки: основное действие здесь всё-таки ответ словами. */
.tg-clip { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.tg-clip:hover { background: var(--fill); color: var(--blue); }
.tg-compose .tg-clip, .m-dlg-compose .tg-clip { order: -1; }
/* имя файла: основа сжимается, расширение остаётся целым */
.rm-catt.file .fnm { display: flex; min-width: 0; align-items: baseline; }
.rm-catt.file .fnm > span { min-width: 0; }
.rm-catt.file .fnm > i { font-style: normal; flex: none; }
/* размер файла рядом с именем — тише имени, цифры табличные */
.rm-catt.file .sz { font-style: normal; font-size: 11px; color: var(--ink-3); flex: none; }
.tg-msg.out .rm-catt.file .sz { color: rgba(255,255,255,.7); }
.tg-chead .ai-toggle { flex: none; }

/* инбокс на всю высоту: контейнер фиксируется под экран, скроллит только внутри */
body.inbox-mode .main { overflow: hidden; }
body.inbox-mode .content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 20px; overflow: hidden; }
body.inbox-mode #chead { display: none; }
body.inbox-mode #view { flex: 1; min-height: 0; display: flex; }
body.inbox-mode .tg { height: 100%; width: 100%; }

/* баннер хэндоффа — тёплый янтарь, не красный */
.handoff-banner { display: flex; align-items: flex-start; gap: 12px; background: var(--amber-soft);
  border: 1px solid #F2DEB5; border-radius: 14px; padding: 13px 16px; margin: 0 20px; margin-top: 14px; }
.handoff-banner > span:first-child svg, .handoff-banner svg { color: var(--amber-ink); flex: none; margin-top: 2px; }
.handoff-banner b { display: block; font-size: 13.5px; color: var(--amber-ink); }
.handoff-banner span { display: block; font-size: 12.5px; color: #8A6A2E; margin-top: 2px; line-height: 1.4; }

/* действия в баре диалога */
.dlg-acts { display: flex; align-items: center; gap: 8px; }
.bc-foot { justify-content: space-between; align-items: center; }
.bc-foot .ai-toggle { margin-right: auto; }

/* Раздел «Диалог» в карточке лида. Рецепт переписки один на продукт — тот же .tg-*,
   что в «Диалогах»; здесь только оправа под модалку: свой скролл треду и поле ответа
   снизу. Прежний второй рецепт (.msg-*, зеленый пузырь менеджера) убран — два разных
   вида одной переписки читались как два разных места. */
.m-dlg { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.m-dlg-h { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.m-dlg-h .bp { margin-left: auto; }
.m-dlg-thread { max-height: min(46vh, 460px); overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 8px; background: #F3F5F8; }
.m-dlg-thread::-webkit-scrollbar { width: 7px; }
.m-dlg-thread::-webkit-scrollbar-thumb { background: #DFE2E8; border-radius: 99px; }
.m-dlg-compose { display: flex; align-items: flex-end; gap: 10px; padding: 11px 12px; border-top: 1px solid var(--line); }
.m-dlg-compose textarea { flex: 1; min-width: 0; outline: none; resize: none; font: 500 13.5px/1.45 'Manrope', sans-serif;
  color: var(--ink); background: var(--fill); border: 1px solid transparent; border-radius: 12px; padding: 11px 13px; }
.m-dlg-compose textarea:focus { background: #fff; border-color: #CFE0FF; box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.m-dlg-none { display: flex; gap: 12px; align-items: flex-start; background: var(--fill); border-radius: 14px; padding: 16px; }
.m-dlg-none > svg { color: var(--ink-3); flex: none; margin-top: 2px; }
.m-dlg-none b { display: block; font-size: 13.5px; color: var(--ink); }
.m-dlg-none span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.m-dlg-by { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--amber-ink); margin-top: 10px; }
.m-dlg-by svg { color: var(--amber-ink); flex: none; }
.m-dlg-more { font-size: 12.5px; color: var(--ink-2); margin-top: 12px; }
@media (max-width: 560px) {
  .m-dlg-h { flex-wrap: wrap; }
  .m-dlg-h .bp { margin-left: 0; width: 100%; justify-content: center; }
  .m-dlg-thread { max-height: 52vh; padding: 12px; }
}
.ai-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); background: var(--fill); border-radius: var(--r-pill); padding: 8px 14px; transition: .15s; }
.ai-toggle .ait-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--line-2); position: relative; transition: .15s; }
.ai-toggle.on { color: var(--blue); background: var(--blue-tint); }
.ai-toggle.on .ait-dot { box-shadow: inset 0 0 0 6px var(--blue); background: #fff; }
.ai-toggle:hover { background: #EDEFF3; }

/* ════ МОБИЛА ════ */
.mtabs { display: none; }
@media (max-width: 1180px) {
  .sp7, .sp5 { grid-column: 1 / span 12; }
  .cvc-body { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  body { overflow: auto; }
  .app { display: block; height: auto; min-height: 100vh; padding: 8px 8px 92px; }
  .side { display: none; }
  .main { overflow: visible; }
  .topbar { padding: 12px 16px; border-radius: var(--r-xl) var(--r-xl) 0 0; position: static; flex-wrap: wrap; }
  /* Вкладки раздела шире экрана телефона. Без этого они молча обрезались
     справа: «На приемку», «Готово» и «По ученикам» не существовало, пока
     телефон не повернешь горизонтально.
     Скроллится ОБЕРТКА (#tb-left), а не сама капсула: браузер, показывая
     активную вкладку, прокручивает ближайшего прокручиваемого предка. Если им
     оказывается страница, весь экран уезжает влево и содержимое раздела просто
     пропадает — так и было, пока капсула скроллилась «сама в себе». */
  #tb-left { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #tb-left::-webkit-scrollbar { display: none; }
  .tabs { flex-wrap: nowrap; width: max-content; }
  .tab { flex: none; }
  /* Профиль на узком экране сжимается до аватара, но не прячется: за ним
     «Уведомления» и смена аккаунта, и на телефоне это единственный вход в них
     (сайдбар с «Выйти» здесь скрыт). Места он теперь занимает ровно столько,
     чтобы не спорить со скроллом вкладок. */
  .tbr .profile { padding: 4px; gap: 0; border-radius: var(--r-pill); flex: none; }
  .tbr .profile .pinfo, .tbr .profile .pchev { display: none; }
  .content { padding: 16px 16px 36px; }
  .chead h2 { font-size: 23px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .sp8, .sp4 { grid-column: 1 / span 12; }
  .statbar, .statbar.five, .statbar.six { grid-template-columns: repeat(2, 1fr); padding: 6px; gap: 2px; }
  .stat, .statbar.five .stat, .statbar.six .stat { padding: 14px 16px; }
  .stat .sv { font-size: 32px; }
  .stat + .stat::before { display: none; }
  .sg2 { grid-template-columns: 1fr; }
  .trow { grid-template-columns: 100px 1fr 80px !important; gap: 10px; padding: 0 14px; }
  .trow .hidem { display: none; }
  /* на телефоне ряд воронки ломается на две строки: сверху название, число и
     конверсия, снизу полоса во всю ширину. Раньше число прятали, и ряд оставался
     без главной цифры, а длинное название вылезало из фиксированной высоты */
  .lad-row { grid-template-columns: 1fr auto auto; gap: 8px 10px; padding: 11px 14px;
    height: auto; min-height: 62px; }
  .lad-row .lad-nm { grid-column: 1; grid-row: 1; }
  .lad-row .lad-n { grid-column: 2; grid-row: 1; }
  .lad-row .lad-right { grid-column: 3; grid-row: 1; }
  .lad-row .lad-track { grid-column: 1 / -1; grid-row: 2; }
  /* на телефоне у воронки курса остаются источник, заходы, покупки и деньги */
  .trow.cf-grid { grid-template-columns: minmax(0,1fr) 54px 54px 86px !important; }
  .gf-row { grid-template-columns: 1fr 54px; height: auto; padding: 14px 18px; row-gap: 8px; }
  .gf-track { display: none; }
  .gf-got { grid-column: 1 / -1; text-align: left; }
  /* Общая .trow прибита под три колонки лида с !important — свою сетку задаём тем же
     весом, иначе имя и причина схлопываются в «не выбрал пода…». */
  .trow.gf-grid { grid-template-columns: minmax(0, 1fr) 84px !important; height: auto;
    padding: 12px 18px; row-gap: 2px; }
  .trow.gf-grid .t-ttl, .trow.gf-grid .t-sub { white-space: normal; overflow: visible; }
  /* Шкала на телефоне не читается — вместо неё остаются шаг, число и потери. */
  .lad-row.gf-flat { grid-template-columns: minmax(0, 1fr) 46px; height: auto;
    padding: 14px 18px; row-gap: 6px; }
  .lad-row.gf-flat .lad-track { display: none; }
  .lad-row.gf-flat .lad-nm small { white-space: normal; }
  .lad-row.gf-flat .lad-right { grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: flex-start; gap: 8px; }
  /* В подарках число — главное, проценты вторичны: возвращаем его.
     В «Пути» наоборот, поэтому правило точечное. */
  .lad-row.gf-flat .lad-n { display: block; text-align: right; }
  .search { width: 100%; }
  .modal { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none;
    border-radius: 0; top: 0; left: 0; transform: none; }
  .modal.open { transform: none; }
  .m-head { flex-wrap: wrap; gap: 12px; padding: 16px 16px 14px; }
  .m-id { padding-right: 110px; }
  /* узкий экран: подстрочник и так переносится — техническую «сессию» и точки-
     разделители убираем, чтобы «Ссылка на клиента» встала в одну строку */
  .m-sub { gap: 8px 10px; }
  .m-sub .sess, .m-sub .dot-sep { display: none; }
  .m-pulse { margin-right: 0; flex-direction: row; align-items: center; gap: 10px; width: 100%; }
  .m-pulse .ptrack { flex: 1; width: auto; }
  .m-name { font-size: 20px; }
  .m-body { flex-direction: column; }
  .m-nav { width: auto; flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 12px 14px;
    border-right: 0; border-bottom: 1px solid var(--line); }
  .m-ni { flex-direction: column; gap: 5px; padding: 8px 12px; white-space: nowrap; font-size: 11px; min-width: 64px; position: relative; }
  .m-ni .cnt, .m-ni .dotw, .m-ni .doto { position: absolute; top: 3px; right: 4px; margin: 0;
    font-size: 10px; padding: 1px 5px; }
  .m-content { padding: 20px 18px 28px; }
  .pipe { flex-wrap: wrap; }
  .pstep { flex: 1 1 28%; }
  .rm-summary { flex-wrap: wrap; }
  .rm-review-cta, .rm-allclear { order: -1; }
  .rm-f-grid { grid-template-columns: 1fr; }
  .rm-f-cell-due { justify-self: start; }
  .pay-grid, .pay-grid.sch { grid-template-columns: 1fr; }
  .pay-board { grid-template-columns: 1fr; }
  .fin-months { gap: 5px; }
  /* инбокс на мобиле: одна панель за раз (список ИЛИ чат) */
  .tg { height: calc(100vh - 200px); min-height: 420px; }
  .tg-list { width: 100%; }
  .tg-chat { display: none; }
  .tg.show-chat .tg-list { display: none; }
  .tg.show-chat .tg-chat { display: flex; }
  .tg-back { display: grid; place-items: center; }
  /* Шапка чата на телефоне: 390px делят имя и две таблетки, поэтому «Карточка»
     ужимается до значка, пометка «по нику» уходит (она видна в самой карточке), а
     подстрочник целиком прячется — канал виден в строке списка, откуда пришли, а
     состояние бота написано подсказкой над полем ввода. */
  .tg-chead { gap: 8px; padding: 10px 12px; }
  .tg-chead .tg-cs { display: none; }
  /* тумблер бота на телефоне — один кружок: его состояние тут же написано словами
     в подсказке над полем ввода, а имя человека важнее подписи на кнопке */
  .tg-chead .ai-toggle { padding: 8px 10px; gap: 0; font-size: 0; }
  /* «Ученик» на телефоне остается со словом, как «Завести карточку»: у «Карточки»
     иконка говорит сама за себя, а точка привязки — нет. */
  .tg-cact:not(.new):not(.sch) { padding: 8px 10px; gap: 0; font-size: 0; }
  .tg-cact.sch { padding: 8px 11px; gap: 6px; font-size: 12.5px; }
  .tg-cact .tg-cl { display: none; }
  .tg-cact .tg-cls { display: inline; }
  .tg-cact svg { width: 15px; height: 15px; }
  .tg-cact .tg-cw { display: none; }
  /* Разделов больше, чем влезает в ширину телефона: у руководителя их девять.
     Раньше лишние просто обрезались краем плашки — пункт «Продукты» с экрана
     пропадал совсем. Теперь ряд скроллится, а при малом числе разделов кнопки
     по-прежнему растягиваются на всю ширину. Подпись не переносится: со вторым
     словом («Планы работ») вкладка иначе становится вдвое выше соседних. */
  .mtabs { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 50;
    background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px; gap: 4px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    box-shadow: 0 14px 36px -10px rgba(15,19,32,.28); }
  .mtabs::-webkit-scrollbar { display: none; }
  .mtab { flex: 1 0 auto; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--ink-3); font: 600 10.5px 'Manrope', sans-serif; padding: 8px 2px; border-radius: 11px;
    position: relative; white-space: nowrap; }
  .mtab svg { width: 18px; height: 18px; }
  .mtab.on { color: #fff; background: var(--blue); }
  .mtab .bdg { position: absolute; top: 4px; left: calc(50% + 8px); font-size: 9.5px; font-weight: 800;
    color: #fff; background: var(--coral); border-radius: var(--r-pill); padding: 1px 5.5px; }
  /* переход в другое пространство — не вкладка страницы, поэтому тише и всегда слева,
     где его видно: лента вкладок на узком экране обрезается справа */
  .mtab-sp { background: var(--fill); color: var(--ink-2); }
  /* На телефоне точка садится на значок вкладки — подписи там короткие и жмутся. */
  .mtab-sp .sp-dot { position: absolute; top: 6px; left: calc(50% + 7px); margin: 0; }
  .mtab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* список «Еще»: тот же рецепт меню профиля, только всплывает над таббаром */
  #smenu.mtmore { max-height: calc(100vh - 140px); overflow-y: auto; }
  #smenu.mtmore button.cur { background: var(--blue-tint); color: var(--blue); }
  #smenu.mtmore button.cur svg { color: var(--blue); }
  #smenu.mtmore .bdg { margin-left: auto; font-size: 10px; font-weight: 800; color: #fff;
    background: var(--coral); border-radius: var(--r-pill); padding: 1px 6px; }
}

/* Телефон. Идет ПОСЛЕ блока 960px: там метрики стоят в две колонки, а в половине
   ширины «18 006 620 ₽» переносится и знак рубля уезжает на отдельную строку. */
@media (max-width: 480px) {
  .statbar, .statbar.five, .statbar.six { grid-template-columns: 1fr; }
  .stat + .stat::before { display: none; }
  /* Пять плиток одной колонкой — 650px скролла до содержимого, и последняя
     (на «Запусках» это «До эфира») уезжала за экран. Пятая — во всю ширину. */
  .statbar.five, .statbar.six { grid-template-columns: 1fr 1fr; }
  .statbar.five .stat:last-child { grid-column: 1 / -1; }
}

/* ════ ШАБЛОНЫ пути поступления ════ */
.tpl-wrap { padding: 22px 24px; }
.tpl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.tpl-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.tpl-card .sec-head { margin: 0; }
.tpl-card .sec-head .ic { width: 30px; height: 30px; }
.tpl-actions { display: flex; gap: 8px; }
.tpl-actions .bp { flex: 1; }
.tpl-edit-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.tpl-meta { display: grid; grid-template-columns: 1fr 200px; gap: 10px; margin-bottom: 18px; }
.tpl-meta .tpl-desc { grid-column: 1 / -1; }
.tpl-fld { width: 100%; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--fill); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; outline: none;
  transition: border-color .15s, background .15s; font-family: inherit; resize: vertical; }
.tpl-fld:focus { border-color: var(--blue); background: var(--card); }
.tpl-fld::placeholder { color: var(--ink-3); }
.tpl-area { min-height: 60px; line-height: 1.5; }
.tpl-due { font-size: 12.5px; }
.tpl-stages { display: flex; flex-direction: column; gap: 14px; }
.tpl-stage { background: var(--fill); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.tpl-stage-h { display: flex; gap: 10px; align-items: center; }
.tpl-stage-h .tpl-stage-t { font-weight: 600; font-size: 14px; }
/* Этап пути, на который лягут задачи стадии: подчиненное поле рядом с названием */
.tpl-stage-h .tpl-stage-k { flex: 0 0 auto; width: 230px; font-size: 12.5px; color: var(--ink-2); }
.tpl-stage > .tpl-fld[data-f="sabout"] { font-size: 12.5px; }
.tpl-tasks { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.tpl-task { background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.tpl-task-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tpl-own { display: inline-flex; background: var(--fill); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 2px; gap: 2px; }
.tpl-own-b { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--ink-3); padding: 5px 11px; border-radius: var(--r-pill); transition: all .15s; }
.tpl-own-b svg { width: 12px; height: 12px; }
.tpl-own-b.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(20,25,40,.08); }
.tpl-task-title { font-weight: 600; }
.tpl-mini-del { width: 26px; height: 26px; border-radius: 8px; color: var(--ink-3); display: grid; place-items: center; transition: all .15s; flex: none; }
.tpl-mini-del:hover { background: var(--red-soft); color: var(--red); }
.tpl-mini-del svg { width: 12px; height: 12px; }
.tpl-add-task { align-self: flex-start; margin-top: 2px; }
.tpl-add-stage { margin-top: 14px; }
.tpl-empty { font-size: 12.5px; color: var(--ink-3); padding: 6px 2px; }
.tpl-edit-foot { margin-top: 18px; }
.tpl-edit-foot .s { font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* ════ ТУЛБАР плана в доске «Поступление» ════ */
.rm-plan-tb { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--fill); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 14px; margin-bottom: 14px; }
.rm-pub { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.rm-pub-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.rm-pub.on { color: var(--green-ink); }
.rm-pub.on .rm-pub-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.rm-pub.off { color: var(--ink-2); }
.rm-plan-tb-act { display: inline-flex; gap: 8px; align-items: center; }
/* Почему план не ушел семье — не «ошибка», а список того, что чинить */
.rm-block { background: var(--amber-soft); border-radius: var(--r-lg); padding: 13px 15px; margin: -6px 0 14px; }
.rm-block-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650;
  color: var(--amber-ink); letter-spacing: -.005em; }
.rm-block-h svg { color: var(--amber); flex: none; }
.rm-block-l { margin: 8px 0 0; padding-left: 26px; display: flex; flex-direction: column; gap: 3px; }
.rm-block-l li { font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.rm-rollout-wrap { position: relative; }
.rm-rollout-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 240px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: 0 14px 40px -12px rgba(20,25,40,.22); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.rm-rollout-i { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left;
  padding: 9px 11px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ink); transition: background .12s; }
.rm-rollout-i:hover { background: var(--fill); }
.rm-rollout-i .num { color: var(--ink-3); font-size: 11.5px; }
.rm-rollout-empty { padding: 10px 12px; font-size: 12.5px; color: var(--ink-3); }
/* фикс: display на классе перебивал атрибут hidden — меню открывалось всегда */
.rm-rollout-menu[hidden] { display: none; }
.rm-rollout-menu { animation: rmPop .16s ease; }


/* ── Маркетинг: воронки + трекинг-ссылки ─────────────────────────────────── */
.mk-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.mk-row.off { opacity: .55; }
.mk-i { flex: 1; min-width: 0; }
.mk-n { font-size: 14px; font-weight: 600; color: var(--ink); }
.mk-off { font-size: 11px; color: var(--red-ink); background: var(--red-soft);
  border-radius: var(--r-pill); padding: 1px 8px; font-weight: 600; margin-left: 6px; }
.mk-l { font-size: 12px; color: var(--ink-2); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mk-code { background: var(--fill); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 1px 7px; font-size: 11.5px; color: var(--ink); }
.mk-kw { background: var(--blue-tint); color: var(--blue-d); border-radius: var(--r-pill);
  padding: 1px 8px; font-size: 11px; font-weight: 600; }
.mk-st { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.mk-chips { display: flex; gap: 4px; }
.mk-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; color: var(--ink-2); background: var(--fill);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 4px 9px; cursor: pointer;
  transition: all .12s; }
.mk-chip:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-tint); }
.mk-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  color: var(--ink); background: var(--card); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 7px 12px; cursor: pointer; transition: all .12s; white-space: nowrap; }
.mk-btn:hover { border-color: var(--ink-3); }
.mk-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.mk-btn.primary:hover { background: var(--blue-d); }
.mk-btn.danger:hover { color: var(--red-ink); border-color: var(--red); background: var(--red-soft); }
.mk-btn.sm { padding: 4px 8px; font-size: 11.5px; border-radius: 8px; }
.mk-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }
.mk-form { border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 12px;
  margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mk-fr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mk-inp { flex: 1; min-width: 140px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--fill); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 11px;
  outline: none; transition: border-color .12s; }
.mk-inp:focus { border-color: var(--blue); background: var(--card); }
.mk-inp.sm { flex: 0 1 160px; min-width: 100px; }
.mk-inp[disabled] { opacity: .6; }
textarea.mk-inp { width: 100%; resize: vertical; line-height: 1.45; }
.mk-tgl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.mk-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.mk-step { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.mk-step-h { display: flex; align-items: center; gap: 8px; }
.mk-step-h .mk-inp.sm { flex: 0 1 220px; }
.mk-step-n { font-size: 11px; color: var(--ink-3); flex: 1; }
.mk-ans { margin-top: 12px; }
.mk-ans-t { font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase;
  letter-spacing: .4px; margin-bottom: 6px; }
.mk-ans-r { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink);
  padding: 6px 10px; border-bottom: 1px solid var(--line); }
.mk-ans-r:last-child { border-bottom: none; }
.mk-ans-r .num { color: var(--ink-2); font-weight: 600; }
@media (max-width: 960px) {
  .mk-row { flex-wrap: wrap; }
  .mk-st { order: 3; }
}
/* внутри шага (flex-column) инпуты не тянутся по высоте; ключ/часы — компактные */
.mk-step > .mk-inp { flex: none; width: 100%; }
.mk-step > input.mk-inp.sm { width: 260px; }
/* мастер создания ссылки: вопросы + чипы-выборы + карточка результата */
.mk-q { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-top: 4px; }
.mk-q-s { font-weight: 500; color: var(--ink-3); }
.mk-chan { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-chip2 { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--fill); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 7px 14px; cursor: pointer; transition: all .14s var(--ease); }
.mk-chip2:hover { border-color: var(--ink-3); color: var(--ink); }
.mk-chip2.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.mk-done { border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: var(--r-lg); padding: 14px 16px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.mk-done-t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--green-ink); }
.mk-done-r { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--fill); border-radius: 10px; }
.mk-done-w { font-size: 12px; font-weight: 600; color: var(--ink-2); flex: 0 0 260px; }
.mk-done-u { flex: 1; font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-in { animation: mk-in .24s var(--ease); }
@keyframes mk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mk-in { animation: none; } }
@media (max-width: 960px) { .mk-done-r { flex-wrap: wrap; } .mk-done-w { flex-basis: 100%; } }
/* «взведённая» кнопка выключения — второй клик подтверждает */
.mk-btn.arm { background: var(--red-soft); border-color: var(--red); color: var(--red-ink); font-weight: 700; }
/* всплывашка подтверждения удаления + тумблер воронки */
.mk-ovl { position: fixed; inset: 0; background: rgba(3,8,28,.5); z-index: 200;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: mk-fade .18s ease; }
.mk-modal { position: relative; background: var(--card); border-radius: var(--r-xl); padding: 22px 24px;
  width: min(560px, calc(100vw - 40px)); box-shadow: 0 24px 64px rgba(0,0,0,.28);
  display: flex; flex-direction: column; gap: 10px;
  animation: mk-pop .22s var(--ease); }
.mk-modal-t { font-size: 16px; font-weight: 800; color: var(--ink); }
.mk-modal-s { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.mk-btn.del { background: var(--red); border-color: var(--red); color: #fff; }
.mk-btn.del:hover { background: var(--red-ink); border-color: var(--red-ink); }
.mk-tgl input { display: none; }
.mk-sw { width: 34px; height: 20px; border-radius: 999px; background: var(--line-2);
  position: relative; flex: none; transition: background .15s; }
.mk-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .15s var(--ease); }
.mk-tgl input:checked + .mk-sw { background: var(--blue); }
.mk-tgl input:checked + .mk-sw::after { transform: translateX(14px); }

@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-pop { from { opacity: 0; transform: scale(.95) translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mk-ovl, .mk-modal { animation: none; } }
.mk-note { display: block; width: 100%; color: var(--ink-3); font-size: 11.5px; font-style: italic; }
/* кнопки-варианты вопроса воронки */
.mk-opts { display: flex; flex-direction: column; gap: 6px; }
.mk-opt { display: flex; gap: 6px; align-items: center; }
.mk-opt > .mk-inp { flex: 1; width: auto; max-width: 420px; }
/* сайдбар: при нехватке высоты — скролл, а не сжатие блоков (промо «съезжал») */
.side > * { flex-shrink: 0; }
/* логики: кликабельная строка + разворот аналитики шагов */
.mk-click { cursor: pointer; }
.mk-click:hover { border-color: var(--line-2); background: var(--fill); }
.mk-row.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mk-arr { color: var(--ink-3); transform: rotate(90deg); transition: transform .15s var(--ease); display: inline-flex; }
.mk-arr.up { transform: rotate(-90deg); }
.mk-detail { border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 14px 16px; margin-top: -8px; background: var(--card); }
.mk-sl { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.mk-sl-t { font-size: 12.5px; font-weight: 600; color: var(--ink); flex: 0 0 130px; }
.mk-sl-p { font-size: 12px; color: var(--ink-3); flex: 0 1 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-sl-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.mk-sl-fill { height: 100%; border-radius: 999px; background: var(--blue); transition: width .3s var(--ease); }
.mk-sl-n { font-size: 12px; color: var(--ink-2); flex: 0 0 70px; text-align: right; }
/* попап аналитики логики: шире + большие цифры */
.mk-modal.wide { width: min(720px, calc(100vw - 40px)); max-height: calc(100vh - 60px);
  overflow-y: auto;
  /* Вбок попап не прокручивается НИКОГДА. Без этого браузер сам ставит overflow-x: auto
     (достаточно задать overflow по одной оси), и любой абсолютный элемент внутри —
     например подсказка над столбиком графика — рисует внизу ненужную полосу. */
  overflow-x: hidden;
  overscroll-behavior: contain; }
/* Прокрутка попапа — тонкая, в стиле остальных панелей. Ползунок держим на три
   пикселя от края прозрачной рамкой: прижатый вплотную, он упирался в скругление
   карточки и выглядел вылезающим наружу. */
/* scrollbar-width/scrollbar-color здесь НЕ задаём намеренно: в Chrome они старше
   правил ::-webkit-scrollbar и отменяют отступ ползунка от края — ровно то, из-за
   чего он и выглядел вылезающим. */
.mk-modal.wide::-webkit-scrollbar { width: 12px; }
.mk-modal.wide::-webkit-scrollbar-thumb { background: #E3E5EB; border-radius: 99px;
  border: 3px solid transparent; background-clip: padding-box; }
.mk-modal.wide::-webkit-scrollbar-thumb:hover { background: #D2D6DF; background-clip: padding-box; }
.mk-modal.wide::-webkit-scrollbar-track { background: transparent; margin: 20px 0; }
/* крестик закрытия: absolute — не участвует в потоке, отступы попапа не плывут */
.mk-xbtn { position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 32px; height: 32px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.mk-xbtn:hover { background: var(--fill); color: var(--ink); }
.mk-kpis { display: flex; gap: 10px; margin-top: 4px; }
.mk-kpi { flex: 1; background: var(--fill); border-radius: var(--r-lg); padding: 12px 16px; }
.mk-kpi-n { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.mk-kpi-l { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.mk-modal-t { display: flex; align-items: center; gap: 8px; }
.mk-sourcebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
/* попап уже открыт → пере-рендер содержимого без переигрывания появления (блинк) */
.mk-ovl.no-anim, .mk-ovl.no-anim .mk-modal { animation: none; }
.mk-logic-empty { padding: 13px 14px; border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--fill); color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.mk-logic-badge { flex: none; border-radius: var(--r-pill); padding: 5px 9px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.mk-logic-badge.ok { color: var(--green-ink); background: var(--green-soft); }
.mk-logic-badge.wait { color: var(--amber-ink); background: var(--amber-soft); }
.mk-kind { display: inline-flex; align-items: center; justify-content: center; min-width: 32px;
  padding: 2px 6px; border-radius: 7px; background: var(--blue-tint); color: var(--blue);
  font-size: 10px; font-weight: 800; letter-spacing: .2px; }
.mk-field-grid { display: grid; grid-template-columns: 1fr 180px; gap: 10px; }
.mk-field-grid .mk-qblock + .mk-qblock { margin: 0; padding: 0; border: 0; }
/* мастер ссылки: чёткие блоки-вопросы вместо сплошной колонки */
.mk-qblock { display: flex; flex-direction: column; gap: 8px; }
.mk-qblock + .mk-qblock { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.mk-code-row { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.mk-lbl { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .3px; }
/* ── Дашборд маркетинга: сквозная воронка, каналы, размещения ──
   Отдельная вкладка раздела «Маркетинг». Строки таблиц собраны на общем рецепте
   ховер-строки с левой полоской, чтобы не заводить третий вид списка в CRM. */
.mkd-sub { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.mkd-tbl { border-top: 1px solid var(--line); }
.mkd-th, .mkd-tr { display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(140px, 1.5fr) repeat(5, minmax(46px, .4fr))
                         repeat(3, minmax(72px, .55fr)) 92px;
  padding: 0 24px; }
.mkd-th { height: 34px; border-bottom: 1px solid var(--line); background: var(--fill); }
.mkd-th span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); text-align: right; }
.mkd-th span:first-child { text-align: left; }
.mkd-tr { height: 54px; border-bottom: 1px solid var(--line); position: relative;
  transition: background .14s var(--ease); }
.mkd-tr:last-child { border-bottom: none; }
.mkd-tr:hover { background: #FBFBFC; }
.mkd-tr::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue); opacity: 0; transition: opacity .14s var(--ease); }
.mkd-tr:hover::before { opacity: 1; }
.mkd-nm { min-width: 0; }
.mkd-nm b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkd-nm small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkd-v { text-align: right; font-size: 14px; font-weight: 600; color: var(--ink); }
.mkd-v.zero { color: var(--ink-3); font-weight: 500; }
.mkd-cv { text-align: right; font-size: 12.5px; font-weight: 700; }
.mkd-cv.good { color: var(--green-ink); }
.mkd-cv.weak { color: var(--red-ink); }
.mkd-cv.none { color: var(--ink-3); font-weight: 500; }
/* столбики динамики по дням: два тонких столбика на день рядом, не друг на друге —
   так видно и объем трафика, и сколько из него дошло до бота */
.mkd-card { display: flex; flex-direction: column; }
.mkd-days { display: flex; align-items: stretch; gap: 5px; flex: 1; min-height: 168px;
  padding: 6px 0 0; border-bottom: 1px solid var(--line); }
.mkd-day { flex: 1; min-width: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 7px; }
.mkd-day .st { width: 100%; display: flex; align-items: flex-end; justify-content: center;
  gap: 2px; flex: 1; }
.mkd-day .b1, .mkd-day .b2 { flex: 1; max-width: 9px; border-radius: 3px 3px 0 0;
  transition: height .9s var(--ease); }
.mkd-day .b1 { background: var(--blue); }
.mkd-day .b2 { background: var(--navy); }
.mkd-day .lb { height: 12px; font-size: 9.5px; font-weight: 600; color: var(--ink-3);
  white-space: nowrap; }
.mkd-lg { display: flex; gap: 14px; margin-top: 12px; }
.mkd-lg span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  font-weight: 600; color: var(--ink-2); }
.mkd-lg i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
/* честный список того, чего в цифрах пока нет */
.mkd-gap { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 13px 24px; border-bottom: 1px solid var(--line); }
.mkd-gap:last-child { border-bottom: none; }
.mkd-gap b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mkd-gap small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3);
  margin-top: 2px; }
/* ── Расход на рекламу: ввод по дням и внесенное ──
   Форма строкой, а не модалкой: расход вносят пачкой за неделю, и открывать окно на
   каждую строку — это шесть лишних кликов. Список внесенного собран на таблице
   дашборда (.mkd-*), чтобы не заводить третий вид списка. */
.sp-form { display: grid; gap: 12px; margin-top: 18px; align-items: end;
  grid-template-columns: 150px 150px minmax(120px, 1fr) minmax(110px, 1fr)
                         92px 92px 110px auto; }
.sp-form .al-f { min-width: 0; }
.sp-form .bp { height: 42px; white-space: nowrap; }
/* Ввод посетителей страницы запуска. Колонки уже, чем у расхода: полей пять,
   и растягивать их на всю ширину карточки незачем — форма читается как строка. */
.lt-form { display: grid; gap: 12px; margin-top: 18px; align-items: end;
  grid-template-columns: 150px 150px 110px 110px minmax(140px, 1fr) auto; }
.lt-form .al-f { min-width: 0; }
.lt-form .bp { height: 42px; white-space: nowrap; }
.lt-was { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2); }
.lt-was b { color: var(--ink); }
@media (max-width: 900px) {
  .lt-form { grid-template-columns: 1fr 1fr; }
  /* Заметка и кнопка — во всю ширину: в половине колонки заметка не читается,
     а кнопка рядом с полем выглядит как его часть. */
  .lt-form .al-f:nth-child(5), .lt-form .bp { grid-column: 1 / -1; }
}

.sp-total { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.sp-chs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.sp-ch { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 13px;
  border-radius: var(--r-pill); background: var(--fill); }
.sp-ch b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sp-ch span { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.mkd-th.sp-tbl, .sp-tbl .mkd-tr {
  grid-template-columns: minmax(150px, 2fr) repeat(3, minmax(70px, .5fr)) 34px; }
.sp-del { justify-self: end; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; color: var(--ink-3); transition: .15s; }
.sp-del:hover { color: var(--red); background: var(--red-soft); }

@media (max-width: 900px) {
  .sp-form { grid-template-columns: 1fr 1fr; }
  .sp-form .bp { grid-column: 1 / -1; }
  /* итог за период на телефоне ломает заголовок на три строки; та же сумма видна
     чипами каналов сразу под формой */
  .sp-total { display: none; }
  .mkd-th.sp-tbl, .sp-tbl .mkd-tr {
    grid-template-columns: minmax(110px, 2fr) repeat(2, minmax(56px, .5fr)) 30px; }
  /* на телефоне остаются пять колонок: кто, сколько людей, сколько из них годных,
     сколько денег и качество. Клики и цены прячутся — это разбор за столом. */
  .mkd-th, .mkd-tr { grid-template-columns: minmax(76px, 1.1fr) repeat(2, minmax(32px, .45fr))
                       minmax(72px, .8fr) 52px;
    gap: 8px; padding: 0 16px; }
  /* сумма не переносится: «62 000 ₽» в две строки ломает высоту ряда */
  .mkd-tr .mkd-v { white-space: nowrap; }
  .mkd-th span.hidem, .mkd-tr .hidem { display: none; }
  /* заголовки на телефоне длиннее своих колонок — пускаем в две строки, а не режем */
  .mkd-th { height: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
  .mkd-th span { font-size: 9.5px; line-height: 1.15; white-space: normal;
    min-width: 0; overflow-wrap: anywhere; }
}
/* попап кликов по дням */
.mk-cd-chart { display: flex; align-items: flex-end; gap: 5px; height: 70px; }
.mk-cd-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; background: var(--fill); border-radius: 4px; overflow: hidden; }
.mk-cd-fill { width: 100%; background: var(--blue); border-radius: 4px 4px 0 0; min-height: 2px; transition: height .3s var(--ease); }
@media (max-width: 700px) {
  .mk-field-grid { grid-template-columns: 1fr; }
  .mk-kpis { flex-wrap: wrap; }
  .mk-kpi { min-width: 120px; }
  .mk-logic-badge { order: 3; }
}
/* ── AI-композер плана поступления (нейтральный премиум, много воздуха) ──── */
.rm-ai-btn { background: var(--blue); }
.rm-ai-btn.on, .rm-ai-btn:hover { background: var(--blue-d); }
/* тот же фикс hidden для панели и лоадера (у них есть display на классе) */
.rm-ai[hidden], .rm-ai-load[hidden] { display: none; }
.rm-ai { margin-top: 16px; padding: 22px 24px; background: var(--fill);
  border: 1px solid var(--line-2); border-radius: var(--r-xl); animation: rmPop .18s ease; }
.rm-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--ink-2); letter-spacing: -.004em; }
.rm-ai-head svg { flex: none; color: var(--ink-3); }
/* margin-bottom: у textarea снизу прижимался футер — поле упиралось в кнопки.
   Свой отступ на поле, а не только margin-top у соседа: так поле дышит и когда
   его растянули ручкой resize. */
.rm-ai-note { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px;
  margin: 0 0 4px; padding: 15px 17px; border: 1px solid var(--line-2); border-radius: 13px;
  background: var(--card); color: var(--ink); font-family: inherit; font-size: 13.5px;
  line-height: 1.55; outline: none; transition: border-color .15s, box-shadow .15s; }
.rm-ai-note::placeholder { color: var(--ink-3); }
.rm-ai-note:focus { border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(20,25,40,.05); }
.rm-ai-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.rm-ai-mode { display: inline-flex; background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); padding: 3px; }
.rm-ai-m { border: 0; background: transparent; color: var(--ink-2); font-family: inherit;
  font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: var(--r-pill); cursor: pointer; transition: .14s; }
.rm-ai-m:hover { color: var(--ink); }
.rm-ai-m.on { background: var(--ink); color: #fff; }
.rm-ai-go { background: var(--blue); box-shadow: 0 4px 14px -2px rgba(47,107,255,.32); }
.rm-ai-go:hover { background: var(--blue-d); }
.rm-ai-load { display: flex; align-items: center; gap: 11px; margin-top: 16px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.rm-ai-dots { flex: none; display: inline-flex; gap: 4px; }
.rm-ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: rmDot 1s ease-in-out infinite; }
.rm-ai-dots i:nth-child(2) { animation-delay: .16s; }
.rm-ai-dots i:nth-child(3) { animation-delay: .32s; }

/* ── «Как AI собрал этот план»: логика решения для тьютора ──────────────── */
.rm-why { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.rm-why-h { display: flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.012em; }
.rm-why-h svg { flex: none; color: var(--blue); }
.rm-why-track { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.rm-why-pill { flex: none; padding: 4px 11px; border-radius: var(--r-pill); background: var(--card);
  border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 650; color: var(--ink); }
.rm-why-txt { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
/* Решения — не маркированный список: точки-буллеты тут визуальный мусор. Каждое
   решение отделено волосяной линией и читается как абзац. */
.rm-why-list { margin: 0; padding: 0; list-style: none; }
.rm-why-list li { padding: 8px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.rm-why-list li + li { border-top: 1px solid var(--line); }
.rm-why-list.skip b { color: var(--ink); font-weight: 650; }
.rm-why-sub { margin: 16px 0 4px; font-size: 13px; font-weight: 700; color: var(--ink); }
.rm-why-warn { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; padding: 10px 12px;
  border-radius: 10px; background: rgba(214, 106, 60, .08); font-size: 13px; line-height: 1.45; color: #8a4520; }
.rm-why-warn svg { flex: none; margin-top: 2px; }

/* ── ЧАТ ПРАВОК ПЛАНА: колонка справа от доски ──────────────────────────────
   Окно шире, пока чат открыт, — иначе доска слева сжимается до нечитаемой. */
/* Ширина карточки — свойство самого экрана, а не состояния JS: есть правый столбец
   (чат плана или витрины) — карточка широкая. :has() снимает вопрос «в какой-то момент
   класс не проставился»: правило смотрит на реальный DOM, а не на порядок перерисовок.
   Класс .pchat-open оставлен запасным путем для браузеров без :has(). */
.modal.pchat-open,
.modal:has(.pchat) { width: 1400px; }
/* Узкий ноутбук: чат ужимаем, но экран не схлопываем — контент важнее полей чата. */
@media (max-width: 1440px) {
  .modal.pchat-open, .modal:has(.pchat) { width: min(1400px, calc(100vw - 48px)); }
  .pchat { flex-basis: 340px; }
}
/* контейнер правого столбца: пустой — не занимает места, с чатом — фиксированная колонка */
#m-side { display: contents; }
.pchat { flex: 0 0 396px; display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--line); background: #FBFBFC;
  animation: pchat-in .22s var(--ease); }
@keyframes pchat-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.pchat-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 15px 18px 14px;
  border-bottom: 1px solid var(--line); }
.pchat-head > svg { color: var(--blue); }
.pchat-title { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.pchat-x { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center;
  color: var(--ink-3); transition: .14s; }
.pchat-x:hover { background: #ECEEF1; color: var(--ink); }

.pchat-list { flex: 1; overflow-y: auto; padding: 20px 18px 24px; display: flex; flex-direction: column; }
.pchat-list::-webkit-scrollbar { width: 7px; }
.pchat-list::-webkit-scrollbar-thumb { background: #E3E5EB; border-radius: 99px; }
/* Воздух неравномерный: реплика жмётся к своему отчёту, но между ходами диалога — пауза.
   Так видно, где кончается один обмен и начинается следующий. */
.pchat-m { display: flex; flex-direction: column; gap: 10px; max-width: 100%; animation: pchat-m-in .2s var(--ease); }
.pchat-m + .pchat-m { margin-top: 10px; }
.pchat-m.ai + .pchat-m.me { margin-top: 26px; }
.pchat-m.me { align-items: flex-end; }
@keyframes pchat-m-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Реплика помощника — якорь панели: она без рамки и крупнее отчёта, потому что её
   читают, а отчёт сверяют. Реплика тьютора — плотная синяя пилюля. */
.pchat-b { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pchat-m.me .pchat-b { padding: 10px 14px; border-radius: 15px; border-bottom-right-radius: 6px;
  background: var(--blue); color: #fff; max-width: 88%; font-size: 13.5px; }
.pchat-m.ai .pchat-b { padding: 0 2px; color: var(--ink); }
.pchat-wait { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.pchat-wait-t { font-size: 13.5px; }
.pchat-dots { flex: none; display: inline-flex; gap: 4px; }
.pchat-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
  animation: pchat-dot 1.1s ease-in-out infinite; }
.pchat-dots i:nth-child(2) { animation-delay: .15s; }
.pchat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pchat-dot { 0%, 100% { opacity: .22; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-3px); } }

/* ── Отчёт о правках ────────────────────────────────────────────────────────
   Главное в панели — РЕЧЬ помощника, отчёт вторичен. Поэтому никаких карточек с
   рамками на каждую правку (стопка боксов кричала громче самой реплики) и никаких
   маркеров-точек: правки привязаны к реплике одной вертикальной линией, как цитата,
   и разделены волосяной линией. */
.pchat-rep { margin-left: 2px; padding-left: 13px; border-left: 2px solid var(--line-2);
  display: flex; flex-direction: column; }
.pchat-rw { padding: 9px 0; }
.pchat-rw + .pchat-rw { border-top: 1px solid var(--line); }
.pchat-rw:first-child { padding-top: 2px; }
.pchat-rw:last-child { padding-bottom: 2px; }
.pchat-rw-h { display: flex; align-items: center; gap: 8px; }
/* тип правки несёт цвет самого глагола — отдельная плашка тут лишняя */
.pchat-rw-v { font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.pchat-rw.add .pchat-rw-v { color: var(--green-ink); }
.pchat-rw.edit .pchat-rw-v { color: var(--blue); }
.pchat-rw.remove .pchat-rw-v { color: var(--red-ink); }
.pchat-rw.bad .pchat-rw-v { color: var(--amber-ink); }
.pchat-rw-st { padding: 2px 8px; border-radius: var(--r-pill); background: var(--fill);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.pchat-rw-t { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.pchat-rw.remove .pchat-rw-t { text-decoration: line-through; color: var(--ink-3); }
.pchat-rw.bad .pchat-rw-t { color: var(--ink-2); }

.pchat-diff { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.pchat-df { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 13px; line-height: 1.45; }
.pchat-df-f { color: var(--ink-3); }
.pchat-df-a { color: var(--ink-3); text-decoration: line-through; }
.pchat-df-ar { color: var(--ink-3); }
.pchat-df-b { font-weight: 650; color: var(--ink); }

.pchat-empty { margin: auto 0; text-align: center; padding: 8px 6px; }
.pchat-empty-t { font-size: 15px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.pchat-empty-s { margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pchat-hints { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.pchat-hint { padding: 10px 13px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--card);
  font-size: 13.5px; line-height: 1.4; color: var(--ink-2); text-align: left; transition: .14s; }
.pchat-hint:hover { border-color: var(--blue); color: var(--ink); }

.pchat-foot { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px 14px;
  border-top: 1px solid var(--line); background: #fff; }
.pchat-in { flex: 1; min-width: 0; resize: none; max-height: 132px; padding: 11px 13px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 13.5px; line-height: 1.5; outline: none; transition: border-color .15s; }
.pchat-in:focus { border-color: var(--blue); }
.pchat-in:disabled { background: var(--fill); color: var(--ink-3); }
.pchat-go { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--blue); color: #fff; transition: .14s; }
.pchat-go:hover:not(:disabled) { background: var(--blue-d); }
.pchat-go:disabled { background: var(--line-2); color: var(--ink-3); cursor: default; }

/* Кнопка «План с AI» в секции и крестик в шапке чата живут только на узком экране:
   на широком чат стоит рядом с доской и закрывать его незачем. */
.m-side-open { display: none; }
.pchat-x { display: none; }
/* узкий экран: чат вместо доски, а не рядом — иначе обе колонки нечитаемы.
   Открывается кнопкой из секции, закрывается крестиком: путь назад есть всегда. */
@media (max-width: 1180px) {
  .modal.pchat-open { width: 1020px; }
  .modal.pchat-open .m-content, .modal.pchat-open .m-nav { display: none; }
  .pchat { flex: 1; border-left: 0; }
  .pchat-x { display: grid; }
  .m-side-open { display: inline-flex; margin-bottom: 14px; }
}
@keyframes rmPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rmDot { 0%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }


/* ═══ Витрина продуктов (карточка лида) + каталог «Продукты» ═══ */
.of-bar { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; }
.of-cnt { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--fill);
  border-radius: var(--r-pill); padding: 7px 14px; }
.of-cnt.has { color: var(--blue); background: var(--blue-tint); }
.of-ai { margin: 10px 0 4px; padding: 14px; background: var(--fill); border-radius: var(--r-lg);
  animation: rmPop .18s var(--ease); }
.of-ai textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--card); font-family: inherit; font-size: 13px; color: var(--ink); padding: 10px 12px; resize: vertical; }
.of-ai textarea::placeholder { color: var(--ink-3); }
.of-ai textarea:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(20,25,40,.05); }
.of-ai-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.of-ai-load { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.of-group { margin: 18px 0 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.of-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--card); margin-bottom: 8px; transition: border-color .14s, background .14s; }
.of-row.on { border-color: rgba(47,107,255,.35); background: #FBFCFF; }
.of-row.bought { opacity: .62; }
.of-tgl { flex: none; margin-top: 2px; padding: 4px; border: 0; background: transparent; cursor: pointer; border-radius: var(--r-pill); }
.of-info { flex: 1; min-width: 0; }
.of-name { font-size: 13.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.of-b { font-size: 10.5px; font-weight: 700; color: var(--green-ink); background: var(--green-soft);
  border-radius: var(--r-pill); padding: 3px 9px; }
.of-src { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
  color: var(--blue); background: var(--blue-tint); border-radius: var(--r-pill); padding: 3px 8px; }
.of-desc { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.of-reason { width: 100%; box-sizing: border-box; margin-top: 9px; border: 1px solid rgba(47,107,255,.28);
  border-radius: 9px; background: var(--blue-tint); font-family: inherit; font-size: 12.5px; color: var(--ink); padding: 8px 11px; }
.of-reason::placeholder { color: rgba(47,107,255,.55); }
.of-reason:focus { outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.of-price { flex: none; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 4px; white-space: nowrap; }

/* ── ВИТРИНА v2: то, что видит родитель, собрано в том же порядке ────────────── */
.of-mode { font-size: 12px; font-weight: 600; color: var(--green-ink); background: var(--green-soft);
  border-radius: var(--r-pill); padding: 5px 11px; }
.of-mode.mgr { color: var(--ink-2); background: var(--fill); }
.of-bar { flex-wrap: wrap; }

.of-banner { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; padding: 14px;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--fill); }
.of-bt, .of-bn { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--card); font-family: inherit; color: var(--ink); padding: 9px 11px; }
.of-bt { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.of-bn { font-size: 12.5px; }
.of-bt:focus, .of-bn:focus, .of-hl:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,107,255,.1); }

.of-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
/* Карточка витрины = то, что редактирует тьютор, и одновременно превью для родителя.
   Поля без рамок-коробок: подчеркнутая строка читается как сам текст, а не как форма. */
.of-card { position: relative; padding: 16px 18px 14px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--card);
  display: flex; flex-direction: column; gap: 12px; transition: border-color .14s; }
.of-card:focus-within { border-color: rgba(47,107,255,.4); }
.of-c-h { display: flex; align-items: center; gap: 9px; }
.of-num { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px;
  font-size: 11px; font-weight: 700; color: var(--blue); background: var(--blue-tint); }
.of-c-n { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.of-c-sp { flex: 1; }
.of-ord { display: inline-flex; gap: 2px; }
.of-mv, .of-rm { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px;
  color: var(--ink-3); background: transparent; cursor: pointer; transition: .14s; }
.of-mv svg { transform: rotate(-90deg); }
.of-mv.dn svg { transform: rotate(90deg); }
.of-mv:hover:not(:disabled) { color: var(--ink); background: var(--fill); }
.of-mv:disabled { opacity: .3; cursor: default; }
.of-rm:hover { color: var(--coral); background: var(--coral-soft); }

.of-f { display: flex; flex-direction: column; gap: 5px; }
.of-lb { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.of-hl, .of-card .of-reason, .of-pitch-in { width: 100%; box-sizing: border-box; border: 0;
  border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent;
  font-family: inherit; color: var(--ink); padding: 5px 0 7px; resize: none;
  transition: border-color .14s; }
.of-hl { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.of-card .of-reason { font-size: 13px; line-height: 1.5; margin: 0; min-height: 42px; }
.of-hl:focus, .of-card .of-reason:focus, .of-pitch-in:focus { outline: none;
  border-bottom-color: var(--blue); box-shadow: none; }
.of-hl::placeholder, .of-card .of-reason::placeholder, .of-pitch-in::placeholder { color: var(--ink-3); font-weight: 400; }

.of-pitch { border-top: 1px solid var(--line); padding-top: 11px; }
.of-pitch summary { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; }
.of-pitch summary::-webkit-details-marker { display: none; }
.of-pitch summary:hover .of-lb { color: var(--ink); }
.of-pl { font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--fill);
  border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }
.of-pl.has { color: var(--blue); background: var(--blue-tint); }
.of-pitch-in { margin-top: 10px; font-size: 13px; line-height: 1.6; resize: vertical;
  border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px; background: var(--fill); }
.of-pitch-in:focus { border-color: var(--blue); background: var(--card); }

.of-c-f { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 11px; }
.of-pr { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.of-pr input { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; }
.of-c-price { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }

.of-empty { margin-top: 12px; padding: 22px 18px; border-radius: var(--r-lg);
  border: 1px dashed var(--line-2); background: var(--fill); text-align: center; }
.of-empty-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.of-empty-s { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

.of-sub-h { margin: 22px 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.of-bought { display: flex; flex-wrap: wrap; gap: 7px; }
.of-bt-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--green-ink); background: var(--green-soft); border-radius: var(--r-pill); padding: 5px 11px; }

.of-more { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.of-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2); list-style: none; }
.of-more summary::-webkit-details-marker { display: none; }
.of-more summary::before { content: "+ "; color: var(--ink-3); }
.of-more[open] summary::before { content: "− "; }
.of-more summary:hover { color: var(--ink); }
.of-add { display: flex; align-items: center; gap: 14px; padding: 11px 13px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--card); margin-bottom: 7px; }
.of-a-i { flex: 1; min-width: 0; }
.of-plus { flex: none; }

/* ── КАТАЛОГ ПРОДУКТОВ: читаемая колонка, явный тумблер продажи ── */
.pd-wrap { max-width: 1040px; margin: 0 auto; }
.pd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.pd-h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.pd-sub { max-width: 560px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.pd-cnt { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--fill); border-radius: var(--r-pill); padding: 7px 14px; }
.pd-cnt b { color: var(--ink); }

.pd-grp { margin-bottom: 30px; }
.pd-grp-h { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.pd-grp-t { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pd-grp-n { font-size: 12px; font-weight: 600; color: var(--ink-3); }

.pd-row { display: flex; align-items: center; gap: 20px; padding: 16px 18px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--card); margin-bottom: 10px;
  transition: border-color .14s, background .14s; }
.pd-row:hover { border-color: var(--line-2); }
.pd-row.off { background: #FAFBFC; }
.pd-row.off .pd-nm, .pd-row.off .pd-desc, .pd-row.off .pd-price { opacity: .5; }
.pd-row.open { border-color: var(--blue); background: #FBFCFF; }
.pd-info { flex: 1; min-width: 0; cursor: pointer; }
.pd-nm { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink); }
.pd-desc { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.pd-price { flex: none; min-width: 170px; text-align: right; font-size: 13px; font-weight: 600;
  color: var(--ink); white-space: nowrap; }
.pd-edit-hint { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600;
  color: var(--ink-3); opacity: 0; transition: opacity .14s; }
.pd-info:hover .pd-edit-hint { opacity: 1; }

/* тумблер «в продаже / выключен» — с подписью, чтобы состояние читалось без догадок */
.pd-sw { flex: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-3); background: transparent; border: 0; padding: 4px 0; }
.pd-sw-l { min-width: 66px; text-align: right; transition: color .14s; }
.pd-sw-t { position: relative; width: 38px; height: 22px; border-radius: var(--r-pill);
  background: var(--line-2); transition: background .16s; }
.pd-sw-k { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15,19,32,.18); transition: transform .16s var(--ease); }
.pd-sw.on { color: var(--blue); }
.pd-sw.on .pd-sw-t { background: var(--blue); }
.pd-sw.on .pd-sw-k { transform: translateX(16px); }
.pd-sw:hover .pd-sw-t { filter: brightness(.96); }
.pd-edit { margin: -2px 0 10px; padding: 14px; background: var(--fill); border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 10px; animation: rmPop .18s var(--ease); }
.pd-edit label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.pd-in { border: 1px solid var(--line-2); border-radius: 9px; background: var(--card); font-family: inherit;
  font-size: 13px; color: var(--ink); padding: 9px 11px; resize: vertical; }
.pd-in:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(20,25,40,.05); }
.pd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-foot { display: flex; gap: 10px; }
@media (max-width: 720px) {
  .pd-cols { grid-template-columns: 1fr; } .of-price { display: none; }
  .pd-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pd-row { flex-wrap: wrap; gap: 12px; }
  .pd-info { flex: 1 1 100%; }
  .pd-sw { margin-left: auto; }
}

/* ════ БАГ-ТРЕКЕР — футер сайдбара + панель ════ */
.side-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.side-bug { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 11px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.05); transition: color .15s, background .15s, box-shadow .15s; }
.side-bug svg { color: var(--ink-3); transition: color .15s; }
.side-bug:hover { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(47,107,255,.28); }
.side-bug:hover svg { color: var(--blue); }
.side-bug span:first-of-type { flex: 1; text-align: left; }
.side-bug-n { min-width: 18px; text-align: center; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--amber); border-radius: var(--r-pill); padding: 1px 6px; }

/* панель */
.bug-card { max-width: 620px; display: flex; flex-direction: column; max-height: 88vh; }
.bug-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 24px 0; }
.bug-title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.bug-sub { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 4px; max-width: 42ch; }
.bug-tabs { display: flex; gap: 4px; padding: 16px 24px 0; }
.bug-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); transition: color .15s, background .15s; }
.bug-tab svg { color: var(--ink-3); transition: color .15s; }
.bug-tab:hover { background: var(--fill); color: var(--ink); }
.bug-tab.on { background: var(--blue); color: #fff; }
.bug-tab.on svg { color: #fff; }
.bug-tab-n { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill);
  background: rgba(17,21,31,.08); color: var(--ink-2); }
.bug-tab.on .bug-tab-n { background: rgba(255,255,255,.24); color: #fff; }
.bug-body { padding: 18px 24px 24px; overflow-y: auto; }

/* форма */
.bug-form { display: flex; flex-direction: column; gap: 17px; }
.bug-fld { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.bug-lab { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.bug-segs { display: flex; gap: 8px; flex-wrap: wrap; }
.bug-seg { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 11px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.06); transition: .15s; }
.bug-seg svg { color: var(--ink-3); }
.bug-seg:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(47,107,255,.3); }
.bug-seg.on { color: var(--blue); background: var(--blue-tint); font-weight: 600;
  box-shadow: inset 0 0 0 1.5px rgba(47,107,255,.4); }
.bug-seg.on svg { color: var(--blue); }
.bug-sev { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--fill);
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.06); transition: .15s; }
.bug-sev:hover { color: var(--ink); }
.bug-sev.on { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(47,107,255,.4); background: #fff; }
.bug-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bug-ta, .bug-in { width: 100%; font: 500 14px 'Manrope', 'Inter', sans-serif; color: var(--ink); background: var(--fill);
  border: 0; outline: none; border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 1px rgba(17,21,31,.07);
  transition: box-shadow .15s, background .15s; line-height: 1.5; }
.bug-ta { resize: vertical; min-height: 92px; }
.bug-ta::placeholder, .bug-in::placeholder { color: var(--ink-3); }
.bug-ta:focus, .bug-in:focus { background: #fff; outline: none;
  box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 3px rgba(47,107,255,.1); }
.bug-ta.bug-err { box-shadow: inset 0 0 0 1.5px var(--red), 0 0 0 3px rgba(196,42,47,.1); background: #fff; }
.bug-row2 { display: flex; gap: 16px; }
.bug-row2 .bug-fld { flex: 1; }
.bug-foot { display: flex; justify-content: flex-end; margin-top: 2px; }
.bug-send { height: 44px; }
.bug-send.loading { opacity: .6; pointer-events: none; }

/* список */
.bug-filters { display: flex; gap: 7px; margin-bottom: 14px; }
.bug-fchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--fill); transition: .15s; }
.bug-fchip:hover { color: var(--ink); }
.bug-fchip.on { color: #fff; background: var(--navy); }
.bug-fn { font-size: 11px; font-weight: 700; opacity: .7; }
.bug-list { display: flex; flex-direction: column; gap: 10px; }
.bug-item { border-radius: 14px; padding: 14px 15px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17,21,31,.07); transition: box-shadow .15s; }
.bug-item:hover { box-shadow: inset 0 0 0 1px rgba(47,107,255,.22); }
.bug-item.closed { background: var(--fill); box-shadow: inset 0 0 0 1px rgba(17,21,31,.05); }
.bug-item.closed .bug-text { color: var(--ink-2); }
.bug-itop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bug-kind { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.bug-kind svg { color: var(--ink-3); }
.bug-when { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.bug-text { font-size: 13.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.bug-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; }
.bug-sts { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.bug-st { font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill);
  color: var(--ink-2); background: var(--fill); box-shadow: inset 0 0 0 1px rgba(17,21,31,.06); transition: .15s; }
.bug-st:hover { color: var(--ink); }
.bug-st.on.bug-st--blue { color: #fff; background: var(--blue); box-shadow: none; }
.bug-st.on.bug-st--amber { color: #fff; background: var(--amber); box-shadow: none; }
.bug-st.on.bug-st--green { color: #fff; background: var(--green); box-shadow: none; }
.bug-st.on.bug-st--mute { color: #fff; background: var(--ink-3); box-shadow: none; }
.bug-empty { padding: 34px 10px; text-align: center; font-size: 13px; color: var(--ink-3); }
.bug-sk { height: 92px; border-radius: 14px; background: linear-gradient(100deg, var(--fill) 30%, #fff 50%, var(--fill) 70%);
  background-size: 220% 100%; animation: bugShim 1.3s infinite; }
@keyframes bugShim { to { background-position: -120% 0; } }
@media (max-width: 620px) { .bug-row2 { flex-direction: column; gap: 17px; } }

/* ════ ИСПОЛНИТЕЛИ-САМОЗАНЯТЫЕ (раздел «Исполнители», модуль самозанятых) ════
   Список тем же рецептом, что лиды (.listcard + .trow), — раздел рабочий, а не
   витринный. Смысловая нагрузка одна: видно ли с первого взгляда, кому можно
   ставить задание и платить. Отсюда семантика статусов по формуле цвет/-ink/-soft
   и красная полоска строки у тех, кому платить нельзя. */
.cz-grid { grid-template-columns: 1.5fr 132px 132px 1.6fr 128px 30px; }
.cz-inn { font-size: 13px; color: var(--ink-2); letter-spacing: -.01em; }
.cz-cell { min-width: 0; font-size: 12.5px; }
/* Колонка, ради которой открывают экран, — ей разрешены две строки. Многоточие тут
   съедало ровно тот кусок, который нужен: «...статус самозанятого пров…». */
.cz-prob { color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.cz-prob.on { color: var(--red-ink); font-weight: 600; }
/* ожидание анкеты — синий, а не красный: мяч на стороне человека, а не авария у нас */
.cz-prob.wait, .cz-mobprob.wait { color: var(--blue-d); }
.cz-more { color: var(--ink-3); font-weight: 500; margin-left: 6px; white-space: nowrap; }
.cz-fine { color: var(--ink-3); }
.cz-docs { text-align: right; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.cz-docs .num { font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: -.02em; }
.cz-docs.full .num { color: var(--green-ink); }
.cz-add { margin-left: auto; }

/* статусы готовности: тот же чип .sev, свои значения семантики */
.sev.cz-ok  { color: var(--green-ink); background: var(--green-soft); }
.sev.cz-bad { color: var(--red-ink);   background: var(--red-soft); }
.sev.cz-new { color: var(--amber-ink); background: var(--amber-soft); }
/* приглашен — ожидание, а не проблема: синий, а не янтарь. Янтарь тут читался бы
   «человек виноват», хотя мяч на его стороне и делать нам пока нечего */
.sev.cz-wait { color: var(--blue-d);   background: var(--blue-tint); }
.sev.cz-off { color: var(--ink-3);     background: var(--fill); }

/* ── карточка исполнителя ── */
/* Блок-ответ вверху карточки: можно платить или нет и что мешает. */
.cz-ready { border-radius: var(--r-lg); padding: 16px 18px; background: var(--fill); }
.cz-ready.cz-ok  { background: var(--green-soft); }
.cz-ready.cz-bad { background: var(--red-soft); }
.cz-ready.cz-new { background: var(--amber-soft); }
.cz-ready.cz-wait { background: var(--blue-tint); }
.cz-ready-t { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
/* содержимое цветной плиты держим в своей семье: цвет / -ink текст / -soft фон */
.cz-ready.cz-ok  .cz-ready-t, .cz-ready.cz-ok  .cz-plist li { color: var(--green-ink); }
.cz-ready.cz-bad .cz-ready-t, .cz-ready.cz-bad .cz-plist li { color: var(--red-ink); }
.cz-ready.cz-new .cz-ready-t, .cz-ready.cz-new .cz-plist li { color: var(--amber-ink); }
.cz-ready.cz-wait .cz-ready-t, .cz-ready.cz-wait .cz-plist li { color: var(--blue-d); }
.cz-ready-s { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.cz-ready.cz-ok .cz-ready-s { color: var(--green-ink); opacity: .8; }
.cz-plist { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.cz-plist li { font-size: 13px; color: var(--ink); line-height: 1.45; padding-left: 15px; position: relative; }
.cz-plist li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor; opacity: .45; }

/* история проверок в налоговой: доказательство «на такую-то дату статус был» */
.cz-hist { display: flex; flex-direction: column; }
.cz-h { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.cz-h:first-child { border-top: none; }
.cz-h-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); }
.cz-h-d { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.cz-h.ok .cz-h-t   { color: var(--green-ink); }
.cz-h.bad .cz-h-t  { color: var(--red-ink); font-weight: 600; }
.cz-h.mute .cz-h-t { color: var(--ink-3); }

.cz-year-v { font-size: 30px; font-weight: 700; letter-spacing: -.035em; }
.cz-year .strack.wide { max-width: none; width: 100%; height: 8px; margin-top: 10px; display: block; }
.cz-year .strack.wide i { background: var(--blue); }
.cz-year-s { font-size: 12.5px; color: var(--ink-3); margin-top: 9px; line-height: 1.5; }

/* Поля карточки — только сетка: сами контролы берем системные (.al-f/.al-l/.al-in),
   те же, что в форме заведения. Третьего рецепта инпута в системе нет (design.md §7.4). */
.cz-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cz-form .al-f { min-width: 0; }

/* Ссылка на анкету. Адрес длинный и не для чтения глазами — его копируют, поэтому
   он в моношрифте, одной строкой с обрезкой, а не переносится на три строки. */
.cz-inv-s { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.cz-inv-l { display: flex; align-items: center; gap: 10px; margin-top: 12px;
  background: var(--fill); border-radius: var(--r-lg); padding: 10px 10px 10px 13px; }
.cz-inv-l.big { margin-top: 0; padding: 13px 14px; }
.cz-inv-u { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--ink-2); }
/* кнопка копирования не переносится по словам: иконка отдельно от слова «Скопировать»
   читается как две разные кнопки и налезает на адрес */
.cz-inv-l .hr { flex: none; white-space: nowrap; }
.cz-inv-h { font-size: 12px; color: var(--ink-3); margin-top: 9px; line-height: 1.5; }
/* Выбор сотрудника и кнопка связи — одной строкой: это один жест, а не форма. */
.cz-link-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cz-link-row .al-selwrap { flex: 1; min-width: 220px; }
/* подпись под чужими данными: кто их внес и почему мы их не правим */
.cz-src { font-size: 12px; color: var(--ink-3); margin-top: 10px; line-height: 1.5; }

/* «Имя в расчётном листе» — редкое переопределение (в листе имя записано иначе, чем ФИО).
   Прячем в необязательный разворот, чтобы для большинства людей поля вообще не было видно. */
.cz-alt { margin-top: 12px; }
.cz-alt > summary { font-size: 12px; color: var(--ink-2); cursor: pointer;
  list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.cz-alt > summary::-webkit-details-marker { display: none; }
.cz-alt > summary::before { content: '+'; color: var(--ink-3); font-weight: 600; }
.cz-alt[open] > summary::before { content: '–'; }
.cz-alt > summary:hover { color: var(--blue); }
.cz-alt-b { margin-top: 10px; }

/* история смены счета: тихий журнал под реквизитами — не «еще одна секция», а сноска
   к ним, поэтому без капс-заголовка секции и на сером поле */
.cz-pay-h { margin-top: 14px; padding: 12px 14px; background: var(--fill); border-radius: 12px; }
.cz-pay-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.cz-pay-r { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; }
.cz-pay-r .num { font-size: 13px; font-weight: 600; color: var(--ink); }
.cz-pay-d { font-size: 12px; color: var(--ink-2); margin-left: auto; text-align: right; }

/* документы: строка + системный сегмент .pay-seg */
.cz-doc { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.cz-doc:first-of-type { border-top: none; }
.cz-doc-n { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); }
.cz-doc .pay-seg { flex: none; }
/* документ, принятый самим человеком: отметка вместо переключателя — снять его нельзя */
.cz-doc-fixed { flex: none; display: flex; align-items: center; gap: 10px; }
.cz-doc-when { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

.cz-foot { display: flex; align-items: center; gap: 8px; }
.cz-foot .cz-save { margin-left: auto; }
.cz-foot .cz-save:disabled { opacity: .4; cursor: default; }

.cz-mobprob { display: none; }
.cz-mobprob.on { color: var(--red-ink); font-weight: 600; }

@media (max-width: 960px) {
  /* !important здесь не украшательство: общий мобильный сброс строк
     (.trow, style.css:2146) сам объявлен через !important и иначе перебивает
     колонки этого раздела. */
  .trow.cz-grid { grid-template-columns: 1.4fr 122px 1.2fr 30px !important; }
  .cz-grid > :nth-child(2), .cz-grid > :nth-child(5) { display: none; }
  .cz-form { grid-template-columns: 1fr; }
  .cz-doc { flex-direction: column; align-items: flex-start; gap: 9px; }
}
@media (max-width: 700px) {
  /* На телефоне таблицы нет: строка — это карточка. Имя переносится целиком,
     под ним контакт и причина, справа чип готовности. Обрезанные многоточиями
     столбцы не читаются и заставляют открывать каждого, чтобы понять, кто есть кто. */
  .trow.cz-grid { grid-template-columns: 1fr auto !important; gap: 6px 12px; }
  .cz-grid > :nth-child(4), .cz-grid > :nth-child(6) { display: none; }
  .cz-grid.thead { display: none; }
  .trow.cz-grid { height: auto; padding: 14px 16px; align-items: start; }
  .cz-grid .t-ttl, .cz-grid .t-sub { white-space: normal; overflow: visible; }
  .cz-mobprob { display: block; margin-top: 4px; }
  /* ФИО исполнителя должно совпадать с получателем платежа — обрезать его нельзя */
  .m-name.cz-name { white-space: normal; overflow: visible; line-height: 1.2; }
}

/* ════ РАЗДЕЛ «Английский» — входной тест DET ════
   Рецепты берем готовые: плашка-метрика = .pay-cell, тумблер = .pd-sw, чип = .sev.
   Свое тут только герой с баллом и сетка автопроверки. */
/* Плита нейтральная: цвет на ней несет вердикт и дельта, а не фон (§3.2 — семантика
   ходит парой цвет/-soft, две семьи на одной поверхности гасят друг друга). */
.det-hero { display: flex; align-items: center; gap: 22px; padding: 20px 22px;
  background: var(--fill); border-radius: var(--r-lg); margin-bottom: 10px; }
.det-hero.empty { gap: 16px; }
.det-hero-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; color: var(--blue); }
.det-score { flex: none; display: flex; align-items: baseline; gap: 7px; }
.det-num { font-size: 46px; font-weight: 800; letter-spacing: -.045em; line-height: .9; color: var(--ink); }
.det-scale { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.det-hero-b { min-width: 0; }
.det-verdict { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; color: var(--navy); line-height: 1.35; }
.det-verdict.good { color: var(--green-ink); }
.det-verdict.warn { color: var(--amber-ink); }
.det-verdict.bad { color: var(--red-ink); }
.det-verdict.muted { color: var(--ink-2); font-weight: 600; }
.det-partial { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px;
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill);
  color: var(--amber-ink); background: var(--amber-soft); }
.det-partial svg { color: var(--amber-ink); }
.det-hero-m { margin-top: 7px; font-size: 12.5px; color: var(--ink-2); }
.det-note { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.det-empty-t { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.det-empty-s { margin-top: 5px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.det-board { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.det-board .pc-v { font-size: 20px; }

.det-delta { flex: none; font-size: 12.5px; font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.det-delta.up { color: var(--green-ink); background: var(--green-soft); }
.det-delta.down { color: var(--red-ink); background: var(--red-soft); }

.det-row { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: var(--r-lg);
  cursor: pointer; position: relative; transition: background .13s; }
.det-row:hover { background: #FBFBFC; }
.det-row:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--blue); }
.det-row:hover::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 3px; background: var(--blue); }
.det-row.open { background: var(--fill); }
.det-row-v { flex: none; min-width: 46px; font-size: 21px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.det-row-b { flex: 1; min-width: 0; }
.det-row-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.det-row-m { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.det-row-go { flex: none; color: var(--ink-3); transition: transform .15s var(--ease); }
.det-row.open .det-row-go { transform: rotate(90deg); color: var(--blue); }

.det-detail { padding: 4px 14px 18px; }
.det-lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }
.det-marks { display: flex; flex-wrap: wrap; gap: 5px; }
.det-mark { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--fill); }
.det-mark.ok { color: var(--green-ink); background: var(--green-soft); }
.det-mark.part { color: var(--amber-ink); background: var(--amber-soft); }
.det-mark.bad { color: var(--red-ink); background: var(--red-soft); }

.det-open { margin-top: 16px; padding: 14px 15px; background: #fff; border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line-2); }
.det-open-h { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.det-open-h i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.det-open-q { margin-top: 7px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.det-open-a { margin: 10px 0; padding: 11px 13px; background: var(--fill); border-radius: 11px;
  font-size: 13px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.det-open-a.muted { color: var(--ink-3); }

/* разбор сочинения моделью. Плашка тише формы преподавателя: это мнение, а не решение */
.det-ai { margin-top: 14px; padding: 14px 15px; background: #fff; border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line-2); }
.det-ai.old { opacity: .62; }
.det-ai-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.det-ai-h i { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.det-ai-c { margin-top: 11px; display: grid; gap: 7px; }
.det-ai-r { display: grid; grid-template-columns: 108px 34px 1fr; align-items: baseline; gap: 8px; }
.det-ai-t { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.det-ai-v { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; }
.det-ai-n { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.det-ai-s { margin-top: 11px; font-size: 12.5px; color: var(--ink); line-height: 1.5; }
.det-ai-s.muted { margin-top: 5px; color: var(--ink-3); }
/* расшифровка записи: рабочий материал, читается тише разбора и явно как чужая речь */
.det-ai-tr {
  margin-top: 11px; padding: 9px 11px; border-radius: 9px;
  font-size: 12px; line-height: 1.55; color: var(--ink-2); font-style: italic;
  background: rgba(17, 24, 39, .03); box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .05);
}
.det-ai-f { margin-top: 9px; font-size: 11.5px; font-weight: 600; color: var(--amber-ink); }

.det-grade { margin-top: 18px; padding: 15px 16px; background: var(--fill); border-radius: var(--r-lg); }
.det-grade-r { display: flex; align-items: flex-end; gap: 12px; margin-top: 4px; }
.det-grade-r label { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.det-gi { width: 104px; }
.det-grade-hint { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }

.det-sw-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.det-sw-row:first-of-type { border-top: 0; }
.det-sw-b { flex: 1; min-width: 0; }
.det-sw-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.det-sw-s { margin-top: 4px; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.det-sw-by { font-size: 11.5px; color: var(--ink-3); padding-bottom: 4px; }
/* Срок доступа к тренажеру: состояние словами слева, продление кнопками справа. */
.det-term { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--line); }
.det-term-s { flex: 1; min-width: 160px; font-size: 12.5px; color: var(--ink-2); }
.det-term-b { display: flex; gap: 8px; }
.det-linkh { margin-top: 20px; }
.det-link { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.det-url { flex: 1; font-size: 12.5px; color: var(--ink-2); }
.det-link-none { flex: 1; font-size: 12.5px; color: var(--ink-3); }
.det-link-m { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.det-pr { font-size: 13px; color: var(--ink-2); }

/* раздел «Экзамены»: сводка DET и HSK строками, крупное число — ответ на «сдавал или нет» */
.ex-list { display: flex; flex-direction: column; gap: 10px; }
.ex-card { display: flex; align-items: center; gap: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.ex-card.empty { background: var(--fill); border-color: transparent; }
.ex-v { flex: none; min-width: 92px; font-size: 30px; font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.ex-card.empty .ex-v { color: var(--ink-3); }
.ex-v small { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-left: 2px; }
.ex-b { flex: 1; min-width: 0; text-align: left; }
.ex-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ex-m { margin-top: 4px; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.ex-note { display: block; margin-top: 3px; color: var(--ink-2); }
@media (max-width: 560px) {
  /* на телефоне кнопка уезжает под строку: в три колонки на 390px название экзамена
     ломается на три строки, и карточка перестает читаться с одного взгляда */
  .ex-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; }
  .ex-v { min-width: 0; }
  .ex-card .bp { grid-column: 1 / -1; justify-content: center; margin-top: 10px; }
}

/* интенсив DET: связка карточки с учеником отдельного приложения */
.int-none { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.int-find { margin-top: 12px; }
.int-unlink { font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.int-unlink:hover { color: var(--blue); }
.int-rows { margin-top: 12px; display: flex; flex-direction: column; }
.int-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--line); }
.int-row:first-child { border-top: 0; }
.int-b { flex: 1; min-width: 0; }
.int-n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.int-m { margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }

/* занятия в тренажерах: не разбор заданий, а ответ на «живой ученик или бросил» */
.det-prl { margin-top: 20px; }
.det-days { display: flex; flex-wrap: wrap; gap: 5px; }
.det-day { width: 30px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  align-content: center; gap: 1px; background: var(--fill); }
.det-day.on { background: var(--blue-tint); }
.det-day b { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.det-day.on b { color: var(--blue-d); }
.det-day i { font-style: normal; font-size: 9px; font-weight: 600; color: var(--ink-3); }
.det-skl { display: grid; grid-template-columns: 112px 1fr 76px; align-items: center; gap: 11px; padding: 6px 0; }
.det-skl-t { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.det-skl-b { height: 6px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.det-skl-b i { display: block; height: 100%; border-radius: 5px; min-width: 5px; background: var(--blue);
  transition: width .9s var(--ease); }
.det-skl-v { font-size: 12px; color: var(--ink-3); text-align: right; }
.det-skl-v b { font-weight: 700; color: var(--ink-2); }
.det-skl-v.warn b { color: var(--amber-ink); }

/* «Обучение»: список учеников преподавателя. Строка — как в «Команде», плюс балл
   теста справа; вся строка кликабельна, поэтому ховер-язык строки, а не кнопки. */
.st-row { cursor: pointer; border-radius: 12px; padding-left: 10px; padding-right: 10px;
  margin: 0 -10px; transition: background .13s; }
.st-row:hover { background: #FBFBFC; }
.st-row:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--blue); }
.st-score { flex: none; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.st-score.none { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.st-go { flex: none; color: var(--ink-3); display: inline-flex; }
.st-row:hover .st-go { color: var(--blue); }
.st-back { margin-right: 12px; }
.st-back svg { transform: rotate(180deg); }

.det-teacher { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.det-teacher .tm-sel { min-width: 210px; }
.det-teacher-s { font-size: 11.5px; color: var(--ink-3); }

@media (max-width: 620px) {
  .det-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .det-board { grid-template-columns: repeat(2, 1fr); }
  .det-sw-row { flex-wrap: wrap; }
  .det-link { flex-wrap: wrap; }
  .det-skl { grid-template-columns: 84px 1fr 68px; gap: 9px; }
}

/* ════ ЗАДАНИЯ ИСПОЛНИТЕЛЯМ (модуль самозанятых, этап 2) ════
   Тот же рецепт рабочего списка, что у «Исполнителей»: .listcard + .trow. Якорь
   строки — не название, а деньги и состояние: оператор смотрит сюда, чтобы понять,
   что принять и сколько он должен. Поэтому сумма табличными цифрами и крупнее
   остального, а подсказка следующего шага идет тише статуса — она подсказка, а не
   второй статус. */
.ct-grid { grid-template-columns: 1.7fr 172px 168px 122px 206px; }
.ct-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ct-main b { font-weight: 650; letter-spacing: -.01em; }
.ct-no { font: 700 11.5px 'Manrope', sans-serif; color: var(--ink-3);
  font-feature-settings: 'tnum'; letter-spacing: 0; }
.ct-proj { font-size: 11.5px; color: var(--ink-3); background: var(--fill);
  padding: 2px 7px; border-radius: var(--r-pill); }
.ct-who, .ct-when { font-size: 12.5px; color: var(--ink-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-sum { display: flex; flex-direction: column; gap: 2px; }
.ct-sum b { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
  font-feature-settings: 'tnum'; }
.ct-corr { font-size: 11px; color: var(--amber-ink); }
.ct-state { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ct-next { font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }

/* Состояния задания той же формулой цвет/-ink/-soft, что и готовность исполнителя.
   Черновик и закрытые — серые: они ничего не требуют. Синий — ожидание ответа,
   янтарь — мяч на нашей стороне (сдано, надо принять), зеленый — принято и оплачено. */
.sev.ct-draft { color: var(--ink-3);     background: var(--fill); }
.sev.ct-wait  { color: var(--blue-d);    background: var(--blue-tint); }
.sev.ct-go    { color: var(--blue-d);    background: var(--blue-tint); }
.sev.ct-check { color: var(--amber-ink); background: var(--amber-soft); }
.sev.ct-ok    { color: var(--green-ink); background: var(--green-soft); }
.sev.ct-paid  { color: #fff;             background: var(--green); }
.sev.ct-off   { color: var(--ink-3);     background: var(--fill); }
.ct-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill); font: 600 11.5px 'Manrope', sans-serif; }
.ct-chip.ct-draft { color: var(--ink-3);     background: var(--fill); }
.ct-chip.ct-wait, .ct-chip.ct-go { color: var(--blue-d); background: var(--blue-tint); }
.ct-chip.ct-check { color: var(--amber-ink); background: var(--amber-soft); }
.ct-chip.ct-ok    { color: var(--green-ink); background: var(--green-soft); }
.ct-chip.ct-paid  { color: #fff;             background: var(--green); }
.ct-chip.ct-off   { color: var(--ink-3);     background: var(--fill); }
.ct-chip.ct-bad   { color: var(--red-ink);   background: var(--red-soft); }

/* ── чеки в «Документах»: полоса долга и действия по строке ── */
.dc-alert { display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  padding: 12px 16px; border-radius: var(--r-lg); background: var(--red-soft);
  color: var(--red-ink); }
.dc-alert .ic { flex: none; color: var(--red); }
.dc-alert b { font-weight: 700; }
.dc-alert .dc-alert-go { margin-left: auto; flex: none; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font: 600 12px 'Manrope', sans-serif;
  padding: 7px 14px; border-radius: var(--r-pill); }
.dc-alert .dc-alert-go:hover { filter: brightness(.95); }

/* ── РИСКИ (этап 9): информатор переквалификации ────────────────────────────
   Обзор — строка списка (.rsk-grid) с уровнем-чипом и флагами; разбор — карточка с
   одиннадцатью проверками. Уровень красит чип по формуле семантики (§3), тяжесть на
   разборе дублируется цветной полосой слева (один якорь на строку). Своих цветов нет —
   только токены и .sev-семейство. */
.rsk-grid { grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 2fr); }
.rsk-row { cursor: pointer; }
.rsk-name { display: flex; align-items: baseline; gap: 8px; min-width: 0;
  font-weight: 600; color: var(--ink); }
.rsk-job { font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.rsk-lv { display: flex; }
.rsk-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.rsk-flag { font-size: 12px; color: var(--ink-2); background: var(--fill);
  border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; }
.rsk-flag.more { color: var(--ink-3); }
.rsk-note { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rsk-clean { display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--green-ink); }
.rsk-clean svg { color: var(--green); }
.rsk-hot { color: var(--red-ink); }
.list-hint { color: var(--ink-2); font-size: 13px; line-height: 1.45; }

.rsk-detail { padding: 0; overflow: hidden; }
.rsk-d-head { display: flex; align-items: center; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid var(--line); }
.rsk-d-who { display: flex; align-items: baseline; gap: 8px; margin-right: auto; min-width: 0; }
.rsk-d-name { font: 700 19px 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--ink); }
.rsk-checks { display: flex; flex-direction: column; }
.rsk-check { padding: 15px 20px 16px; border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent; }
.rsk-check:last-child { border-bottom: 0; }
.rsk-check.lv-risk { border-left-color: var(--red); }
.rsk-check.lv-warn { border-left-color: var(--amber); }
.rsk-c-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rsk-c-title { font-weight: 600; color: var(--ink); }
.rsk-c-reason { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.rsk-c-act { display: flex; align-items: flex-start; gap: 7px; margin-top: 9px;
  color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.rsk-c-act svg { flex: none; margin-top: 2px; color: var(--blue); }
.rsk-c-ev { margin-top: 7px; font-size: 12.5px; color: var(--ink-3); }
.rsk-hits { list-style: none; margin: 9px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.rsk-hits li { font-size: 12.5px; color: var(--ink-2); }
.rsk-hit-w { display: inline-block; margin-right: 5px; padding: 1px 7px; border-radius: 6px;
  font-weight: 700; color: var(--red-ink); background: var(--red-soft); }
.rsk-hit-hint { display: block; margin-top: 2px; color: var(--ink-3); }

.rcp-item { border-bottom: 1px solid var(--line); }
.rcp-item .trow.dc-grid { border-bottom: 0; }
.rcp-item:last-child { border-bottom: 0; }
.rcp-sub { color: var(--ink-3); font-size: 12.5px; }
.rcp-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 14px 12px 40px; }
.rcp-why { font-size: 12px; color: var(--red-ink); }
.rcp-act { display: inline-flex; gap: 6px; margin-left: auto; }
.rcp-a { border: 1px solid var(--line); background: var(--card); cursor: pointer;
  font: 600 11.5px 'Manrope', sans-serif; color: var(--ink-2);
  padding: 5px 11px; border-radius: var(--r-pill); }
.rcp-a:hover { background: var(--fill); color: var(--ink-1); }
.rcp-a.p { border-color: var(--blue); color: var(--blue-d); }
.rcp-a.p:hover { background: var(--blue-tint); }

/* ── отчет план-факт по самозанятым (раздел «Отчеты») ──
   Сводка — тот же компонент .mo-stats/.mo-stat, что на «Месяце» (не третий рецепт
   тайла); остаток синий модификатором .rep-accent — цифра, ради которой открывают
   отчет. Ниже — таблица по людям, числа табличные, своих цветов нет, только токены. */
.mo-stat.rep-accent b { color: var(--blue-d); }

.rep-grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, .9fr)); }
/* С согласованной суммой колонок пять: сумма листа стоит первой из чисел, у самого имени,
   рядом с чипом сверки — их читают вместе. */
.rep-grid.rep-grid6 { grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, .82fr)); }
/* Строка растет под содержимое: у имени бывают чипы (должность, сверка, к выплате), и на
   узкой колонке они переносятся в несколько строк — фиксированные 58px их обрезали бы и
   наезжали на соседа. */
.rep-row { cursor: pointer; height: auto; min-height: 58px;
  padding-top: 9px; padding-bottom: 9px; }
.rep-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0;
  font-weight: 600; color: var(--ink); }
.rep-job { font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.rep-block { font-size: 11.5px; color: var(--red-ink); background: var(--red-soft);
  border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; }
.rep-due { font-size: 11.5px; color: var(--amber-ink); background: var(--amber-soft);
  border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; }
.rep-num { text-align: right; font-size: 14px; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.rep-left { font-weight: 700; }
.rep-left.hot { color: var(--blue-d); }
/* Согласованная сумма — не просто число, а кнопка: клик открывает согласование. Держим
   вид числа, но подчеркнутым пунктиром — чтобы читалось «сюда можно нажать». */
.rep-agree { border: 0; background: none; padding: 0; cursor: pointer; font-weight: 600;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
  text-decoration-color: var(--line-2); }
.rep-agree:hover { color: var(--blue-d); text-decoration-color: currentColor; }
.rep-agree.unset { color: var(--ink-3); font-weight: 500; }
/* Чип сверки листа с заданиями: сходится — спокойный зеленый, расхождение — амбер, как
   «к выплате». Не красный: это рабочий ориентир, а не ошибка данных. */
.rep-rec { font-size: 11.5px; border-radius: var(--r-pill); padding: 2px 9px;
  white-space: nowrap; }
.rep-rec.ok { color: var(--green-ink); background: var(--green-soft); }
.rep-rec.off { color: var(--amber-ink); background: var(--amber-soft); }
/* «Разложить» — тихое действие рядом со сверкой: раскладывает сумму листа на услуги. */
.rep-brk { font-size: 11.5px; border: 0; background: var(--blue-tint); color: var(--blue-d);
  border-radius: var(--r-pill); padding: 2px 10px; cursor: pointer; white-space: nowrap;
  font-weight: 600; }
.rep-brk:hover { background: var(--blue); color: #fff; }

/* ── автораскладка суммы на услуги ── */
.rb-card { max-width: 560px; }
.rb-row { display: grid; grid-template-columns: 1fr 74px 92px 26px; align-items: center;
  gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rb-row:first-child { padding-top: 0; }
.rb-svc-t b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rb-svc-t span { font-size: 11.5px; color: var(--ink-3); }
.rb-qty { width: 74px; text-align: center; padding: 7px 8px; }
.rb-line { text-align: right; font-size: 13.5px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-del { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 4px;
  display: inline-flex; border-radius: var(--r-pill); }
.rb-del:hover { color: var(--red-ink); background: var(--red-soft); }
.rb-empty { font-size: 13px; color: var(--ink-3); padding: 4px 0 2px; }
.rb-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 4px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rb-rec { font-size: 12px; border-radius: var(--r-pill); padding: 3px 11px; font-weight: 600;
  white-space: nowrap; }
.rb-rec.ok { color: var(--green-ink); background: var(--green-soft); }
.rb-rec.under { color: var(--amber-ink); background: var(--amber-soft); }
.rb-rec.over { color: var(--red-ink); background: var(--red-soft); }

/* ── подтяг суммы из расчётного листа (в листе согласования) ── */
.rp-pay { background: var(--blue-tint); border-radius: var(--r-lg); padding: 11px 13px;
  margin-bottom: 14px; }
.rp-pay-h { font-size: 11.5px; font-weight: 700; color: var(--blue-d); margin-bottom: 8px; }
.rp-pay-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--ink-2); padding: 3px 0; font-variant-numeric: tabular-nums; }
.rp-pay-row .num { font-weight: 600; color: var(--ink); }
.rp-pay-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--navy-soft);
  font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rp-pay-foot b { color: var(--ink); font-weight: 700; }
.rp-pay-take { font-size: 12px; font-weight: 600; border: 0; background: var(--blue);
  color: #fff; border-radius: var(--r-pill); padding: 5px 14px; cursor: pointer; white-space: nowrap; }
.rp-pay-take:hover { background: var(--blue-d); }
.rp-pay-hint { font-size: 12px; color: var(--ink-2); line-height: 1.4; }

/* ── карточка задания ── */
/* Деньги — единственный якорь карточки: с них начинается и ими заканчивается любой
   вопрос по заданию. Остальное вокруг живет тише. */
.ct-money { border-radius: var(--r-lg); padding: 16px 18px; background: var(--fill);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ct-amt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ct-amt-k { font-size: 12px; color: var(--ink-2); }
.ct-amt b { font-size: 27px; font-weight: 800; letter-spacing: -.035em;
  font-feature-settings: 'tnum'; }
.ct-calc { font-size: 12.5px; color: var(--ink-2); }
.ct-why { font-size: 12.5px; color: var(--amber-ink); line-height: 1.45; }
.ct-frozen { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.ct-money .bp.ghost { margin-top: 4px; }
/* номер задания в шапке карточки — воздух между ним и названием */
.m-name .ct-no { margin-right: 9px; }
/* ── акт в карточке задания (этап 5) ──
   Акт — документ, поэтому и выглядит как документ: рамка вместо заливки, номер и
   сумма табличными цифрами, две подписи рядом. Заливка тут была бы вторым якорем
   рядом с деньгами; акт важен, но смотрят сначала на сумму. */
.ct-act { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ct-act-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-act-h b { font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  font-feature-settings: 'tnum'; }
.ct-act-m { font-size: 12.5px; color: var(--ink-2); font-feature-settings: 'tnum'; }
.ct-act-m b { color: var(--ink); font-weight: 700; }
/* Две подписи — две колонки: чья очередь, видно без чтения. */
.ct-sg { display: flex; gap: 28px; flex-wrap: wrap; width: 100%; }
.ct-sg1 { display: flex; flex-direction: column; gap: 2px; min-width: 156px; }
.ct-sg-k { font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; }
.ct-sg1 b { font-size: 13px; font-weight: 650; color: var(--green-ink); }
.ct-sg-n { font-size: 11.5px; color: var(--ink-3); }
.ct-sg-no { font-size: 13px; color: var(--ink-3); }
.ct-act .bp.ghost { text-decoration: none; }
.ct-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* Шаги исполнителя отделены рамкой и подписаны: это его решения, мы их лишь отмечаем. */
.ct-his { flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.ct-his-h { font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; }
.ct-blk-b { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ct-err { font-size: 12.5px; color: var(--red-ink); line-height: 1.4; }
/* Итог считается на глазах — сумма появляется раньше, чем нажата кнопка. */
.ct-live { font-size: 13px; color: var(--ink-2); font-feature-settings: 'tnum'; }
.ct-live b { color: var(--ink); font-weight: 700; }
.ct-warn:not(:empty) { font-size: 12.5px; line-height: 1.45; color: var(--amber-ink);
  background: var(--amber-soft); border-radius: var(--r-lg); padding: 9px 11px; }
.al-foot .bp[disabled] { opacity: .45; pointer-events: none; }
.ct-hist { display: flex; flex-direction: column; }
.ct-ev { display: flex; gap: 10px; align-items: baseline; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 12.5px; }
.ct-ev:first-child { border-top: 0; }
.ct-ev-d { flex: none; width: 108px; color: var(--ink-3); }
.ct-ev-t { flex: 1; min-width: 0; color: var(--ink-2); line-height: 1.45; }
.ct-ev-a { flex: none; color: var(--ink-3); }
/* Сдача исполнителя: файл — это то, по чему принимают работу, поэтому строка кликается
   целиком, а вес и время стоят подписью, а не колонкой. */
.ct-files { display: flex; flex-direction: column; gap: 6px; }
.ct-file { display: flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--fill); border-radius: var(--r-lg); padding: 10px 12px; color: var(--ink); }
.ct-file:hover { background: var(--line); }
.ct-file svg { flex: none; color: var(--ink-3); }
.ct-file-n { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-file-s { flex: none; font-size: 12px; color: var(--ink-3); font-feature-settings: 'tnum'; }
.ct-card { max-width: 520px; }
/* Диалог поверх открытой карточки задания: карточка лежит на z-index 81. */
.al-ov.over { z-index: 92; }

/* ── каталог услуг ──
   Прайс читают глазами сверху вниз, поэтому услуги сгруппированы по категории
   (категория здесь = должность), а выключенные не прячутся, а гаснут: на них
   ссылаются прошлые задания. */
.sv-grid { grid-template-columns: 1.9fr 132px 150px 132px; }
.sv-grid.off { opacity: .55; }
.sv-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.sv-main b { font-weight: 650; letter-spacing: -.01em; }
.sv-desc { flex-basis: 100%; font-size: 12px; color: var(--ink-3); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-unit { font-size: 12.5px; color: var(--ink-2); }
.sv-price b { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
  font-feature-settings: 'tnum'; }
.sv-cat { padding: 16px 16px 7px; font: 700 11px 'Manrope', sans-serif;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.sv-onoff { flex-direction: row; align-items: center; gap: 9px; font-size: 13px;
  color: var(--ink-2); cursor: pointer; }
.sv-onoff input { width: 16px; height: 16px; accent-color: var(--blue); }
/* Объяснение длиной в три строки рядом с галочкой, выровненной по центру, читается
   как чужой абзац: галочка держится верхней строки. */
.sv-onoff.top { align-items: flex-start; }
.sv-onoff.top input { margin-top: 2px; flex: none; }
/* Что у человека сейчас — в карточке исполнителя. Строки тихие: это контекст, а
   решения принимают на своих экранах. Задание кликабельно, пункт плана нет. */
.cz-work { display: flex; flex-direction: column; }
.cz-w { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--line); font-size: 13px; }
.cz-w:first-child { border-top: 0; }
.cz-w.link { cursor: pointer; }
.cz-w.link:hover .cz-w-t { color: var(--blue-d); }
.cz-w-t { flex: 1; min-width: 0; line-height: 1.4; }
.cz-w.done .cz-w-t { color: var(--ink-3); text-decoration: line-through;
  text-decoration-color: var(--line-2); }
.cz-w-n { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-3);
  font-feature-settings: 'tnum'; }
.cz-w-d { flex: none; font-size: 11.5px; color: var(--ink-3); }
.cz-w-s { flex: none; font-weight: 700; letter-spacing: -.02em; }

/* ── планы работ ──────────────────────────────────────────────────────────────
   План — не деньги, и экран это показывает собой: ни одной цифры в рублях, пока
   пункт не превратили в задание. Якорь страницы один — период сверху: на вопрос
   «что за неделю я смотрю» ответ должен читаться раньше всего остального. */
.pl-bar .list-tools { justify-content: space-between; border-bottom: 0; }
.pl-bar .list-quick { padding: 0; border-bottom: 0; }
.pl-nav { display: flex; align-items: center; gap: 10px; }
.pl-arr { width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 9px; color: var(--ink-2); background: var(--fill); transition: .14s var(--ease); }
.pl-arr:hover { color: var(--ink); background: #EDEFF3; }
.pl-when { font: 800 17px 'Manrope', sans-serif; letter-spacing: -.03em;
  font-feature-settings: 'tnum'; min-width: 168px; text-align: center; }
.pl-now { font: 600 11px 'Manrope', sans-serif; letter-spacing: .02em; text-transform: uppercase;
  color: var(--blue-d); background: var(--blue-tint); padding: 3px 8px; border-radius: var(--r-pill); }
.pl-today { font: 600 12.5px 'Manrope', sans-serif; color: var(--blue); }
.pl-today:hover { text-decoration: underline; }

/* Люди рядом, а не списком в столбик: плотность тут важнее — оператор сравнивает
   недели разных исполнителей взглядом, а не прокруткой. */
.pl-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
  align-items: start; margin-top: 14px; }
.pl-p { display: flex; flex-direction: column; overflow: hidden; }
.pl-p-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 10px;
  flex-wrap: wrap; padding: 14px 16px 10px; }
.pl-p-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* имя не режем многоточием: это живой человек, а не строка таблицы */
.pl-p-n b { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.pl-p-s { flex: none; font-size: 12px; color: var(--ink-3); font-feature-settings: 'tnum'; }
.pl-list { display: flex; flex-direction: column; }
.pl-i { display: grid; grid-template-columns: 18px 1fr auto; align-items: start; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--line); }
.pl-i:hover { background: #FAFBFC; }
/* Отметка выполнения — кружок, а не системная галочка: она тут главное действие
   пальцем, и выглядеть должна одинаково во всех браузерах. */
.pl-ck { width: 18px; height: 18px; margin-top: 1px; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--line-2); border-radius: 50%; color: transparent;
  transition: .14s var(--ease); }
.pl-ck:hover { border-color: var(--green); color: var(--line-2); }
.pl-i.done .pl-ck { background: var(--green); border-color: var(--green); color: #fff; }
.pl-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-t b { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.pl-i.done .pl-t b { color: var(--ink-3); text-decoration: line-through;
  text-decoration-color: var(--line-2); }
.pl-n { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.pl-due { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); }
.pl-a { display: flex; align-items: center; gap: 4px; }
/* Кнопка «в задание» не шумит: она появляется на строке, к которой человек потянулся.
   Уже созданное задание видно всегда — это факт, а не действие. */
.pl-task { font: 600 11.5px 'Manrope', sans-serif; color: var(--ink-2); background: var(--fill);
  height: 24px; padding: 0 10px; border-radius: var(--r-pill); opacity: 0;
  transition: .14s var(--ease); white-space: nowrap; }
.pl-task:hover { color: var(--blue-d); background: var(--blue-tint); }
.pl-task.on { display: inline-flex; align-items: center; gap: 5px; opacity: 1;
  color: var(--blue-d); background: var(--blue-tint); font-feature-settings: 'tnum'; }
.pl-x { width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 7px; color: var(--ink-3); opacity: 0; transition: .14s var(--ease); }
.pl-x:hover { color: var(--red-ink); background: var(--red-soft); }
.pl-i:hover .pl-task, .pl-i:hover .pl-x { opacity: 1; }
/* Люди без плана — одной строкой: вопрос по ним один, и ответ на него в один клик. */
.pl-rest { margin-top: 14px; padding: 15px 16px; }
.pl-rest-h { font: 700 11px 'Manrope', sans-serif; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 11px; }
.pl-rest-l { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chip { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px 'Manrope', sans-serif;
  color: var(--ink-2); background: var(--fill); padding: 7px 12px; border-radius: var(--r-pill);
  transition: .14s var(--ease); }
.pl-chip svg { color: var(--ink-3); }
.pl-chip:hover { color: var(--blue-d); background: var(--blue-tint); }
.pl-chip:hover svg { color: var(--blue); }
.pl-add { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 16px; border-top: 1px solid var(--line); font: 600 12.5px 'Manrope', sans-serif;
  color: var(--ink-2); transition: .14s var(--ease); }
.pl-add:hover { color: var(--blue-d); background: var(--blue-tint); }
.ct-live-x { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

@media (max-width: 960px) {
  .pl-grid { grid-template-columns: 1fr; }
  .trow.ct-grid { grid-template-columns: 1.5fr 120px 190px !important; }
  .ct-grid > :nth-child(2), .ct-grid > :nth-child(3) { display: none; }
  .trow.sv-grid { grid-template-columns: 1.6fr 110px 120px !important; }
  .sv-grid > :nth-child(2) { display: none; }
}
@media (max-width: 700px) {
  /* На телефоне наведения нет — действия у пункта плана видны всегда, иначе до них
     не добраться вовсе. */
  .pl-task, .pl-x { opacity: 1; }
  .pl-bar .list-tools { gap: 12px; }
  .pl-nav { width: 100%; justify-content: space-between; }
  .pl-when { min-width: 0; font-size: 16px; }
  .pl-now { display: none; }
  /* На телефоне строка — карточка: слева название и исполнитель, справа деньги и
     состояние. Шапку таблицы прячем: над карточками она бессмысленна. */
  .trow.ct-grid { grid-template-columns: 1fr auto !important; gap: 4px 12px;
    height: auto; padding: 14px 16px; align-items: start; }
  .ct-grid.thead { display: none; }
  /* правило шире по ширине (960px) прячет исполнителя — на карточке он нужен */
  .ct-grid > :nth-child(2) { display: block; }
  .ct-grid > :nth-child(3) { display: none; }
  .ct-main { grid-column: 1; grid-row: 1; }
  .ct-who { grid-column: 1; grid-row: 2; }
  .ct-sum { grid-column: 2; grid-row: 1; align-items: flex-end; text-align: right; }
  .ct-state { grid-column: 2; grid-row: 2; align-items: flex-end; text-align: right; }
  .ct-ev { flex-wrap: wrap; }
  .ct-ev-d { width: auto; }
  /* Услуга на телефоне: слева название и единица, справа цена и состояние. */
  .trow.sv-grid { grid-template-columns: 1fr auto !important; gap: 4px 12px;
    height: auto; padding: 14px 16px; align-items: start; }
  .sv-grid.thead { display: none; }
  .sv-grid > :nth-child(2) { display: block; }
  .sv-main { grid-column: 1; grid-row: 1; }
  .sv-unit { grid-column: 1; grid-row: 2; }
  .sv-price { grid-column: 2; grid-row: 1; text-align: right; }
  .sv-state { grid-column: 2; grid-row: 2; text-align: right; }
}

/* ── ВЕДОМОСТЬ (финансовая модель) ────────────────────────────────────────────
   Экран про деньги: главный тут не набор плиток, а КАСКАД — доход, из которого
   шаг за шагом вычитается все, пока не останутся дивиденды. Поэтому один сильный
   якорь (итоговая строка) и максимально тихое все остальное: цифры выровнены по
   правому краю, подписи правил серые, разделители полупрозрачные. */
.fin-casc { padding: 20px 24px 10px; }
.fc-rows { margin-top: 12px; }
.fc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--line); }
.fc-row:last-child { border-bottom: 0; }
.fc-l { min-width: 0; }
.fc-name { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.fc-why { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45;
  color: var(--ink-3); max-width: 46ch; }
.fc-v { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap;
  letter-spacing: -.02em; }
/* Вычитания тише прибавлений: глаз должен цепляться за итоги, а не за каждую строку. */
.fc-row.out .fc-v { color: var(--ink-2); font-weight: 600; }
/* Промежуточный итог — заливкой во всю ширину карточки, без рамки. */
.fc-row.sum { margin: 0 -24px; padding: 14px 24px; background: var(--fill);
  border-bottom-color: var(--line-2); }
.fc-row.sum .fc-name { font-weight: 700; }
.fc-row.sum .fc-v { font-size: 17px; }
.fc-row.total { margin: 0 -24px; padding: 22px 24px 24px; background: var(--fill);
  border-bottom: 0; border-top: 1px solid var(--line-2); align-items: center; }
.fc-row.total .fc-name { font-size: 15px; font-weight: 700; }
.fc-row.total .fc-v { font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.fc-v.neg { color: var(--red-ink); }
.fkv b.neg { color: var(--red-ink); }

.fin-block { padding: 20px 24px 22px; }
.fin-block + .fin-block, .fin-casc + .fin-block { margin-top: 16px; }
.fin-list { margin-top: 12px; }
.fl-row { display: grid; grid-template-columns: 1fr 84px auto; align-items: center;
  gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fl-row:last-child { border-bottom: 0; }
.fl-row.warn .fl-name { color: var(--amber-ink); }
.fl-row.muted { opacity: .55; }
.fl-main { min-width: 0; }
.fl-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
/* Полоска доли — единственный «график» на экране: она отвечает на вопрос «а сколько
   это от общего», который иначе считают в уме. */
.fl-bar { height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.fl-bar i { display: block; height: 100%; background: var(--navy); border-radius: inherit;
  transition: width .9s var(--ease); }
.fl-v { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
  letter-spacing: -.02em; text-align: right; }
.fl-row.fl-2 { grid-template-columns: 1fr auto; }

/* Мелкий вариант статус-чипа .sev для инлайна у имени: та же семья и те же цвета
   (.cz-wait/.cz-ok/.cz-off), только компактнее — на будущие инлайн-чипы тоже он. */
.sev.mini { padding: 2px 7px; font-size: 10.5px; border-radius: 6px; margin-left: 8px; }
/* Платежный календарь: строка-итог отделяется весом и линией сверху, а не рамкой. */
.cal-row.total { border-top: 1px solid var(--line-2); margin-top: 2px; }
.cal-row.total .fl-name { font-weight: 700; }
.cal-row.total .fl-v { color: var(--ink); }
/* Погашенная плитка statBar: остаток счета еще грузится — тихий текст вместо
   числа-героя, чтобы пустой слот не читался как сломанные данные. */
.stat-idle { font-size: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }

/* План против факта: анкер экрана «План выручки». Одна полоса вместо голых цифр —
   видно, сколько из плана уже на счете. Плоско, заливка полосы, без теней. */
.fpf { margin-bottom: 20px; padding: 22px 26px; }
.fpf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.fpf-head .t { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.fpf-head .s { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.fpf-pct { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: .9; color: var(--blue);
  white-space: nowrap; }
.fpf-pct span { font-size: 17px; font-weight: 700; margin-left: 2px; }
.fpf-pct.done, .fpf-pct.over { color: var(--green-ink); }
.fpf-track { height: 12px; border-radius: 7px; background: var(--fill); margin-top: 18px; overflow: hidden; }
.fpf-fill { height: 100%; border-radius: 7px; background: var(--blue); transition: width .6s var(--ease); }
.fpf-fill.done, .fpf-fill.over { background: var(--green); }
.fpf-legend { display: flex; align-items: center; justify-content: space-between; margin-top: 12px;
  font-size: 12.5px; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.fpf-legend .fpf-v { color: var(--ink-3); }
.fpf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 7px; }
.fpf-dot.plan { background: var(--line-2); }
.fpf-dot.fact { background: var(--blue); }
.fpf-dot.fact.done, .fpf-dot.fact.over { background: var(--green); }
.fpf-empty { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

/* Баланс периода в платежном календаре: две полосы на одной шкале, приход против
   выплат. Приход зеленый, выплаты навигационно-темные (не тревога), знак несет net. */
.fbal { margin-bottom: 20px; padding: 22px 26px; }
.fbal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.fbal-head .t { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.fbal-head .s { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.fbal-net { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; white-space: nowrap;
  display: flex; align-items: baseline; gap: 8px; }
.fbal-net.ok { color: var(--green-ink); }
.fbal-net.bad { color: var(--red-ink); }
.fbal-net span { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.fbal-rows { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.fbal-r { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 16px; }
.fbal-l { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.fbal-track { height: 12px; border-radius: 7px; background: var(--fill); overflow: hidden; }
.fbal-fill { height: 100%; border-radius: 7px; transition: width .6s var(--ease); }
.fbal-fill.inc { background: var(--green); }
.fbal-fill.out { background: var(--navy); }
.fbal-v { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* Программы: карточки «выгодность». Якорь каждой — полоса «сколько дохода съел
   расход» и крупная маржа; расход темный (навигационный), прибыль зеленая, убыток
   красный. Тени не используем — иерархия весом и цветом, как во всей ведомости. */
.prg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px; margin-bottom: 20px; }
.prg { padding: 20px 22px; }
.prg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.prg-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; }
.prg-meta { display: flex; align-items: center; gap: 4px; margin-top: 9px; }
.prg-meta .sev { margin-left: 0; }
.prg-pen { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; border-radius: 7px; background: var(--fill);
  color: var(--ink-3); cursor: pointer; transition: color .15s, background .15s; }
.prg-pen:hover { color: var(--blue); background: var(--blue-tint); }
.prg-marg { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1;
  font-size: 26px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.prg-marg.ok { color: var(--green-ink); }
.prg-marg.bad { color: var(--red-ink); }
.prg-marg span { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--ink-3);
  margin-top: 4px; text-transform: none; }
.prg-track { position: relative; height: 12px; border-radius: 7px; margin-top: 18px;
  background: var(--green); overflow: hidden; }
.prg-track.loss { background: var(--red); }
.prg-exp { height: 100%; border-radius: 7px 0 0 7px; background: var(--navy);
  transition: width .6s var(--ease); }
.prg-track.empty2 { background: var(--fill); color: var(--ink-3); font-size: 12px;
  font-weight: 600; display: flex; align-items: center; padding: 0 12px; height: 34px;
  border-radius: 10px; }
.prg-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 11px; font-size: 12px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.prg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 7px;
  vertical-align: middle; }
.prg-dot.exp { background: var(--navy); }
.prg-dot.prof { background: var(--green); }
.prg-dot.bad { background: var(--red); }
.prg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--line); }
.prg-stat { display: flex; flex-direction: column; gap: 4px; }
.prg-stat .k { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.prg-stat .v { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.prg-stat .v.ok { color: var(--green-ink); }
.prg-stat .v.bad { color: var(--red-ink); }
.prg-sub { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
  font-feature-settings: 'tnum'; }
.prg-note { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 13px 16px;
  font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--amber-ink);
  background: var(--amber-soft); }
.prg-note svg { flex: none; color: var(--amber-ink); }

/* Панель списка программ: заголовок «Активные N» + кнопка «Добавить программу». */
.prg-tools { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.prg-th { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.prg-th b { color: var(--ink); font-weight: 700; }
.prg-tools .qchip.add { margin-left: auto; }
/* Сезон программы и кнопки управления в мета-ряду карточки. */
.prg-meta .prg-season { font-size: 11px; font-weight: 600; color: var(--ink-3);
  font-feature-settings: 'tnum'; white-space: nowrap; }
.prg-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.prg-act { flex: none; height: 26px; padding: 0 11px; border-radius: 8px; border: 0;
  font: 600 12px 'Manrope', sans-serif; color: var(--ink-3); background: var(--fill);
  cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.prg-act:hover { color: var(--ink); background: #EDEFF3; }
/* Архивная карточка — приглушена, но читаема; данные на месте. */
.prg.arch { opacity: .68; }
.prg.arch:hover { opacity: 1; }
.prg-arch { margin-top: 22px; }
.prg-archh { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 2px;
  border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer;
  font: 600 13px 'Manrope', sans-serif; color: var(--ink-2); }
.prg-archh svg { color: var(--ink-3); }
.prg-archh b { color: var(--ink); font-weight: 700; }
.prg-archcue { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.prg-archlist { margin-top: 4px; }

.fin-funds { margin-top: 12px; }
.ff-row { padding: 13px 0; border-bottom: 1px solid var(--line); }
.ff-row:last-child { border-bottom: 0; }
.ff-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ff-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ff-v { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.ff-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px;
  font-size: 11.5px; color: var(--ink-3); font-feature-settings: 'tnum'; }
.ff-warn { margin-top: 7px; font-size: 11.5px; font-weight: 600; color: var(--amber-ink);
  background: var(--amber-soft); padding: 6px 10px; border-radius: 9px; }
/* Правка остатка фонда. Кнопка живет в строке мелочей, а не отдельным блоком:
   это редкое действие финансиста, а не то, ради чего люди открывают экран. */
.ff-fix { font: 600 11.5px 'Manrope', sans-serif; color: var(--blue); background: none;
  border: 0; padding: 0; cursor: pointer; border-bottom: 1px dashed rgba(47,107,255,.4); }
.ff-fix:hover { color: var(--blue-d); border-bottom-color: var(--blue-d); }
.ff-note { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
.ff-fix-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
/* Карточка фондов стоит в узкой колонке, а на телефоне она еще уже: два поля в ряд
   там схлопываются в нечитаемые огрызки, поэтому разрешаем перенос. */
.ff-fix-form .al-row { flex-wrap: wrap; }
.ff-fix-form .al-f { min-width: 160px; }
.ff-fix-btns { display: flex; gap: 8px; }

/* Счетчик карты операций несет три числа вместо одного, и на телефоне запрет
   переноса срезал бы ему хвост. Остальные списки трогать незачем: там строка
   короткая, и перенос ей только мешает. */
@media (max-width: 700px) {
  .list-count.fin-count { white-space: normal; margin-left: 0; line-height: 1.5; }
}

.fin-kv { margin-top: 12px; }
.fkv { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.fkv:last-child { border-bottom: 0; }
.fkv b { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.fkv.total { margin: 0 -24px; padding: 14px 24px; background: var(--fill); border-bottom: 0; }
.fkv.total b { font-size: 17px; }

.fin-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 14px;
  border-radius: 11px; background: var(--amber-soft); color: var(--amber-ink);
  font-size: 12.5px; font-weight: 600; }
.fin-note svg { flex: none; }
/* Спокойный вариант той же плашки: не предупреждение, а справка (точка
   безубыточности). Амбер тут врал бы — он означает «посмотри, что-то не так». */
.fin-note.calm { background: var(--fill); color: var(--ink-2); }
.fin-note.calm svg { color: var(--ink-3); }
/* Калькулятор планового налога: поле дохода в строке .fkv не должно распирать ряд
   (у .al-in ширина 100%), поэтому оно по содержимому и прижато вправо. */
.fin-taxrow .al-in { width: 150px; text-align: right; }
.fin-taxref-t { margin-top: 16px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); }
.fin-taxref { margin-top: 4px; }
.fin-taxref .fkv { padding: 8px 0; font-size: 12.5px; }

.fin-groups { margin-top: 12px; }
.fg + .fg { margin-top: 16px; }
.fg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-2);
  font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
.fg-head b { font-size: 13px; letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.fg-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.fg-row:last-child { border-bottom: 0; }
.fg-n { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.fg-c { margin-left: 7px; font-size: 11px; font-style: normal; color: var(--ink-3); }
.fg-v { font-weight: 700; letter-spacing: -.02em; text-align: right; white-space: nowrap; }

/* Карта операций — плотная таблица: тут читают глазами вниз по колонке сумм. */
.fin-grid { grid-template-columns: 92px 1.6fr 150px 190px 132px 88px; }
.fo-date { font-size: 12.5px; color: var(--ink-2); }
.fo-what { min-width: 0; }
.fo-what b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-what i { display: block; margin-top: 2px; font-size: 11.5px; font-style: normal;
  color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-src, .fo-acc { font-size: 12.5px; color: var(--ink-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fo-sum { font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; text-align: right; }
.fo-sum.neg { color: var(--ink-2); }
.fin-grid.muted { opacity: .5; }
/* Строка дохода с клиентом кликается в карточку. Курсор pointer у .trow уже глобальный;
   отличает кликабельную строку синее имя на ховере — как у строк ленты фондов (.fl-row.click). */
.trow.click:hover .fo-what b { color: var(--blue); }
/* Имя клиента в «Доходах» — ссылка в его карточку (data-lead). Отдельно от .trow.click:
   тут кликается само имя, а не вся строка (строку у редактора занимает правка). */
.fin-lead { cursor: pointer; }
.fin-lead:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
/* Кнопка привязки дохода к карточке — тихая, рядом с именем; проявляется на наведении строки. */
.fin-linkc { margin-left: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  font: 600 11px 'Manrope', sans-serif; border-radius: var(--r-pill); padding: 1px 8px;
  cursor: pointer; opacity: .55; transition: opacity .12s, border-color .12s, color .12s; }
.trow:hover .fin-linkc { opacity: 1; }
.fin-linkc:hover { border-color: var(--blue); color: var(--blue); }
/* Пикер клиента: прокручиваемый список карточек с поиском. */
.pk-list { margin-top: 10px; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pk-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px;
  padding: 8px 12px; cursor: pointer; transition: background .12s, border-color .12s; }
.pk-row:hover { background: var(--blue-tint); border-color: var(--blue); }
.pk-row b { font: 600 13.5px 'Manrope', sans-serif; color: var(--ink); }
.pk-row i { font: 400 12px 'Manrope', sans-serif; color: var(--ink-2); font-style: normal; }
.pk-more { text-align: center; color: var(--ink-2); font-size: 12px; padding: 8px 0 2px; }
.fst { display: inline-flex; align-items: center; font: 600 11.5px 'Manrope', sans-serif;
  padding: 4px 9px; border-radius: var(--r-pill); }
.fst.ok { color: var(--green-ink); background: var(--green-soft); }
.fst.wait { color: var(--amber-ink); background: var(--amber-soft); }
/* Пометка «откуда строка» в прямых расходах — тихая, серая: это не статус, а справка,
   что строку разложил расчетный лист или сервис, и править ее нужно там. */
.fst.src { color: var(--ink-2); background: var(--fill); font-weight: 600; }
/* Чип приложенного документа (выплаты подрядчикам): нейтральная плашка с зелёной
   галочкой. Не залитый зелёный, чтобы не читаться вторым статусом рядом с «факт». */
.fst.doc { color: var(--ink-2); background: var(--fill); gap: 4px; }
.fst.doc svg { color: var(--green); flex: none; }

/* Плановый налог по месяцам: годовая табличка. Доход тихий, налог — акцент (это то,
   что откладывают). У текущего месяца синяя полоса и синие цифры. */
.tx-year { display: flex; align-items: center; gap: 8px; }
.tx-year .num { font-size: 15px; font-weight: 700; min-width: 52px; text-align: center; }
.tx-year .icobtn[disabled] { opacity: .35; cursor: default; }
.tx-head, .tx-row { display: grid; grid-template-columns: 116px 1fr 118px 118px;
  align-items: center; gap: 14px; }
.tx-head { padding: 6px 0 10px; margin-top: 4px; font: 600 11px 'Manrope', sans-serif;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line); }
.tx-head span:nth-child(3), .tx-head span:nth-child(4),
.tx-row .tx-inc, .tx-row .tx-tax { text-align: right; }
.tx-row { padding: 11px 0; border-bottom: 1px solid var(--line); }
.tx-row:last-child { border-bottom: 0; }
/* глобальный .empty (text-align:center) протекал в .tx-row.empty и центровал
   месяц — держим название всегда по левому краю */
.tx-m { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: left; }
.tx-m i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--blue);
  margin-left: 7px; text-transform: uppercase; letter-spacing: .03em; }
.tx-bar { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.tx-bar i { display: block; height: 100%; background: var(--blue-tint); border-radius: inherit;
  transition: width .8s var(--ease); }
.tx-inc { font-size: 13.5px; color: var(--ink-2); }
.tx-tax { font-size: 14px; font-weight: 700; color: var(--ink); }
.tx-row.cur .tx-bar i { background: var(--blue); }
.tx-row.cur .tx-m, .tx-row.cur .tx-tax { color: var(--blue-d); }
.tx-row.empty .tx-inc, .tx-row.empty .tx-tax { color: var(--ink-3); font-weight: 500; }
.tx-row.total { border-top: 2px solid var(--line-2); border-bottom: 0;
  margin-top: 4px; padding-top: 14px; }
.tx-row.total .tx-m { font-weight: 700; }
.tx-row.total .tx-tax { color: var(--blue-d); font-size: 15px; }
@media (max-width: 640px) {
  .tx-head, .tx-row { grid-template-columns: 1fr auto auto; gap: 10px; }
  .tx-bar { display: none; }
  .tx-head span:nth-child(2) { display: none; }
}

/* Расходы: информатор проблем (переиспользует карточки .rsk-check рисков) и метки
   документа у строки. Сумма проблемы прижата вправо в шапке карточки. */
.fsp-inf { padding: 0; overflow: hidden; }
.fsp-c-sum { margin-left: auto; flex: none; white-space: nowrap;
  font: 700 13px 'Manrope', sans-serif; color: var(--ink);
  font-variant-numeric: tabular-nums; }
/* «План» — нейтральная пилюля той же семьи, что залитые «проведён»/«подтверждён»:
   голый текст рядом с ними читался бы как выпавший из ряда чип. */
.fst.plan { color: var(--ink-2); background: var(--fill); }
.fsp-ok { display: flex; gap: 10px; align-items: center; padding: 15px 18px;
  color: var(--green-ink); font-size: 13.5px; }
.fsp-ok svg { color: var(--green); flex: none; }
.fsp-doc { display: inline-flex; align-items: center; gap: 4px;
  font: 600 11.5px 'Manrope', sans-serif; color: var(--green-ink);
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsp-doc svg { color: var(--green); flex: none; }
.fsp-add { color: var(--ink-2); }
.fsp-add svg { opacity: .8; }
/* Чем платили: тихая пометка «с Р/С», карточная — амбером как место возврата Виталию. */
.fsp-via { color: var(--ink-2); font-size: 11.5px; padding: 3px 9px; }
.fsp-via.card { color: var(--amber-ink); background: var(--amber-soft); }
button.fsp-via { cursor: pointer; }

/* Прямые расходы: у блока свой заголовок с итогом и своей кнопкой, между блоками
   воздух больше, чем внутри — блоки читаются как отдельные направления. */
.fd-block { margin-bottom: 14px; }
.fd-block:last-child { margin-bottom: 0; }

/* Сервис: дату следующего списания правим прямо в строке (пункт 5). Поле не тянется
   на всю строку — оно справочное, рядом с суммой. */
.fl-row.fsv-row { grid-template-columns: 1fr auto auto; gap: 14px; }
.fsv-date { font: 600 12.5px 'Manrope', sans-serif; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 9px; padding: 5px 9px;
  background: var(--card); font-feature-settings: 'tnum'; }
.fsv-date:hover { border-color: var(--ink-3); }
.fsv-date:focus { outline: 0; border-color: var(--blue); }
.fsv-date.soon { border-color: var(--amber); color: var(--amber-ink); }
.fsv-date.ro { border: 0; background: none; padding: 5px 0; }
@media (max-width: 760px) {
  .fl-row.fsv-row { grid-template-columns: 1fr auto; }
  .fl-row.fsv-row .fsv-date { grid-column: 2; grid-row: 2; justify-self: end; }
}

@media (max-width: 1100px) {
  .trow.fin-grid { grid-template-columns: 84px 1.4fr 140px 122px 84px !important; }
  .fin-grid > :nth-child(4) { display: none; }
}
@media (max-width: 760px) {
  /* На телефоне строка операции — карточка: слева что и откуда, справа сумма. */
  .trow.fin-grid { grid-template-columns: 1fr auto !important; gap: 3px 12px;
    height: auto; padding: 13px 16px; align-items: start; }
  .fin-grid.thead { display: none; }
  .fo-date { grid-column: 1; grid-row: 1; }
  .fo-what { grid-column: 1; grid-row: 2; }
  .fo-src { grid-column: 1; grid-row: 3; }
  .fo-sum { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: 15px; }
  .fo-st { grid-column: 2; grid-row: 3; text-align: right; }
  .fc-row.total .fc-v { font-size: 26px; }
  .fin-casc, .fin-block { padding-left: 16px; padding-right: 16px; }
  .fc-row.sum, .fc-row.total, .fkv.total { margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px; }
}
/* Экран ввода: та же строка ведомости, но колонок меньше — здесь не разбираются
   в чужих операциях, а вносят свои, и счет с разделом уже сказаны формой. */
.fe-grid { grid-template-columns: 92px 1.6fr 150px 150px; cursor: pointer; }
.fe-t { font: 700 15px 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--ink); }
.fe-s { margin-top: 2px; font-size: 12px; color: var(--ink-2); }
/* Начисления продаж: карточки продавцов идут стопкой, отбиваем их друг от друга и от
   шапки, чтобы список одного продавца не сливался с соседним. */
.fs-seller, .fs-una, .fs-ren { margin-top: 12px; }
.fs-una .fe-t { color: var(--amber-ink); }
.fe-grid .fo-st { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
/* Крестик удаления строки: тихий, проявляется по наведению на строку, краснеет на себе.
   Всегда виден на тач-экранах — там наведения нет. */
.fd-del { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: none; background: transparent;
  color: var(--ink-3); border-radius: var(--r-sm, 6px); cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.trow.fe-grid:hover .fd-del { opacity: .6; }
.fd-del:hover { opacity: 1; background: var(--red-soft); color: var(--red); }
@media (hover: none) { .fd-del { opacity: .5; } }
/* Кнопка «добавить» стоит в одном ряду с чипами форм, но она действие, а не фильтр:
   синие чернила отделяют ее, не заводя третьего рецепта кнопки. */
.qchip.add { display: inline-flex; align-items: center; gap: 5px; color: var(--blue);
  border-color: var(--blue-tint); background: var(--blue-tint); }
.qchip.add:hover { border-color: var(--blue); }
.al-cancel.fl-del { margin-right: auto; color: var(--red-ink); }
@media (max-width: 760px) {
  .trow.fe-grid { grid-template-columns: 1fr auto !important; }
  .fe-grid .fo-st { grid-column: 2; grid-row: 3; }
}

/* Быстрая отметка «деньги пришли» на строке плана выручки: кружок-галочка слева.
   Клик по нему помечает продажу полученной, не открывая форму — как чек-лист.
   Строкам даём боковые поля под шапку (16px): иначе кружок липнет к краю, а сумма
   упирается в правую грань карточки. */
.rp-row { padding-left: 16px; padding-right: 16px; }
.rp-row.rp-haschk { grid-template-columns: auto 1fr auto; column-gap: 12px; }
.rp-chk { width: 22px; height: 22px; padding: 0; flex: none; display: inline-flex;
  align-items: center; justify-content: center; border: 1.5px solid var(--line-2);
  background: transparent; border-radius: 50%; color: #fff; cursor: pointer;
  transition: border-color .12s, background .12s; }
.rp-chk:hover { border-color: var(--green); }
.rp-chk.on { background: var(--green); border-color: var(--green); }

/* ── Управление ведомостью ──────────────────────────────────────────────────
   Правка живет там, где видно ее последствие: правило фонда — в строке каскада,
   сверка — в строке счета. Отдельного «режима редактирования» нет: строка,
   которую можно поправить, показывает карандаш при наведении, остальные молчат. */
.fin-perbar { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 15px 24px; margin-bottom: 16px; }
.fp-name { display: flex; align-items: center; gap: 9px;
  font: 700 15px 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--ink); }
.fp-sub { margin-top: 3px; font-size: 12px; color: var(--ink-3);
  font-feature-settings: 'tnum'; }
.fp-act { display: flex; gap: 8px; flex: none; }
/* Закрытие периода — главное действие экрана и единственное необратимое:
   единственная плотная кнопка среди чипов. */
.qchip.go { background: var(--navy); border-color: transparent; color: #fff; }
.qchip.go:hover { background: var(--ink); color: #fff; }
.qchip.mini { padding: 4px 9px; font-size: 11.5px; }

.fc-row.click, .fl-row.click { cursor: pointer; }
.fc-row.click:hover .fc-name, .fl-row.click:hover .fl-name { color: var(--blue); }
.fc-pen { display: inline-flex; margin-left: 6px; color: var(--ink-3); opacity: 0;
  transition: opacity .15s var(--ease); vertical-align: -1px; }
.fc-row.click:hover .fc-pen { opacity: 1; }
.obl-bar { height: 3px; margin-top: 7px; border-radius: var(--r-pill);
  background: var(--line); overflow: hidden; }
.obl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--navy);
  transition: width .9s var(--ease); }

/* Списания ведомости: план и факт стоят рядом и правятся на месте — вопрос
   «сколько ждали / сколько списалось» задают об одной строке, а не о двух. */
.fsv-grid { grid-template-columns: 1.5fr 128px 128px 1fr; }
/* Платеж по обязательству живет в узкой колонке: три колонки в ряд там режут
   название до многоточия. Сумма и действие уходят под собой, а название дышит. */
.op-grid { grid-template-columns: 1fr auto; gap: 4px 14px; height: auto;
  padding-top: 12px; padding-bottom: 12px; align-items: center; }
.op-grid .sv-what { grid-row: 1 / span 2; }
.op-grid .sv-what b { white-space: normal; }
.op-grid .op-sum { grid-column: 2; grid-row: 1; }
.op-grid .op-act { grid-column: 2; grid-row: 2; }
/* Список внутри карточки-списка: у самой карточки полей нет — они у строк .trow.
   Строкам .fl-row поля нужны свои, иначе суммы упираются в край карточки. */
.listcard .fin-list { padding: 2px 20px 10px; }
/* Заголовок карточки-списка с иконкой. .list-tools переносит содержимое, и на
   телефоне иконка оставалась одна на строке, а текст уезжал вниз. Иконка не
   сжимается, текст занимает остаток строки, кнопка переносится под них. */
.list-tools.sec-head > .ic { flex: none; }
.list-tools.sec-head > div { flex: 1 1 140px; min-width: 0; }
.sv-what { min-width: 0; }
.sv-what b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-what i { display: block; margin-top: 2px; font-size: 11.5px; font-style: normal;
  color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-in { display: flex; justify-content: flex-end; }
.sv-num { width: 100%; max-width: 116px; padding: 7px 10px; text-align: right;
  border: 1px solid var(--line-2); border-radius: 9px; background: var(--card);
  color: var(--ink); font: 700 13px 'Manrope', sans-serif;
  font-feature-settings: 'tnum'; transition: border-color .15s var(--ease); }
.sv-num:focus { outline: 0; border-color: var(--blue); }
.sv-num.is-fact { color: var(--green-ink); border-color: var(--green-soft); }
.sv-hint { font-size: 11.5px; color: var(--ink-3); text-align: right; }
.trow.fsv-grid.warn .sv-hint { color: var(--amber-ink); font-weight: 600; }
.trow.fsv-grid.done .sv-what b, .trow.op-grid.done .sv-what b { color: var(--ink-2); }
.op-sum { text-align: right; font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; }
.op-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.fkv.sub { padding-left: 16px; font-size: 12px; color: var(--ink-3); }
.fkv.sub b { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }

/* Мост от выручки к операционной прибыли: полоса показывает вес шага, а не просто
   украшает — по ней видно, что съедает результат. */
.fin-bridge { margin-top: 14px; }
.fb-row { display: grid; grid-template-columns: 1.1fr 1fr auto; align-items: center;
  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fb-row:last-child { border-bottom: 0; }
.fb-l span { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fb-l i { display: block; margin-top: 2px; font-size: 11.5px; font-style: normal;
  color: var(--ink-3); }
.fb-bar { height: 6px; border-radius: var(--r-pill); background: var(--line);
  overflow: hidden; }
.fb-bar i { display: block; height: 100%; border-radius: inherit; background: var(--navy);
  transition: width .9s var(--ease); }
.fb-row.out .fb-bar i { background: var(--line-2); }
.fb-v { text-align: right; font-size: 14px; font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; }
.fb-row.out .fb-v { color: var(--ink-2); }
.fb-row.total .fb-v { font-size: 19px; font-weight: 800; }

.ru-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
/* История платежей внутри формы: справка, а не предупреждение — тон спокойный. */
.fin-hist { margin-top: 14px; padding: 11px 14px; border-radius: 11px;
  background: var(--fill); color: var(--ink-2); font-size: 12px; }
.fin-hist b { display: block; margin-bottom: 6px;
  font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
.sv-h { display: grid; grid-template-columns: 1.3fr 1fr 1fr .9fr; gap: 10px;
  padding: 5px 0; border-top: 1px solid var(--line); font-feature-settings: 'tnum'; }
.sv-h:first-of-type { border-top: 0; }
.sv-h .num { text-align: right; }
.sv-h .num.up { color: var(--red-ink); }
.sv-h i { font-style: normal; color: var(--ink-3); }
.al-card.ct-slim { max-width: 440px; }

@media (max-width: 1100px) {
  .trow.fsv-grid { grid-template-columns: 1.4fr 112px 112px !important; }
  .fsv-grid .sv-hint { display: none; }
}
@media (max-width: 760px) {
  .fin-perbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fp-act { width: 100%; }
  .fp-act .qchip { flex: 1; justify-content: center; }
  .trow.fsv-grid { grid-template-columns: 1fr 96px 96px !important; gap: 6px 8px; }
  .fb-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .fb-bar { grid-column: 1 / span 2; grid-row: 2; }
}

/* Разделитель в ряду фильтров: тип операции и раздел — разные вопросы, и одним
   сплошным рядом чипов они читаются как один список. */
.qsep { font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--line-2); }


/* ════ ДОКУМЕНТЫ (модуль самозанятых, этап 5) ════
   Тот же рабочий список, что у заданий. Якорь строки — название документа и его
   состояние: сюда заходят с вопросом «подписано или нет», а не «сколько денег».
   Поэтому сумма здесь тише, чем в заданиях, и у личных документов ее просто нет. */
.dc-grid { grid-template-columns: 1.9fr 200px 140px 118px 176px; }
.dc-main { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.dc-main b { font-weight: 650; letter-spacing: -.01em; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-ic { flex: none; color: var(--ink-3); position: relative; top: 2px; }
.dc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px;
  color: var(--ink-2); }
.dc-inn { font-size: 11px; color: var(--ink-3); font-feature-settings: 'tnum'; }
/* «убран» — пометка, а не статус документа: тише ИНН и без заливки, чтобы не спорить
   с колонкой состояния справа, где живет судьба самой бумаги. */
.dc-off { font-size: 10.5px; font-weight: 600; color: var(--ink-3); margin-left: 6px;
  padding: 1px 6px; border-radius: var(--r-pill); border: 1px solid var(--line); }
.dc-when { font-size: 12.5px; color: var(--ink-2); }
.dc-sum { font-size: 13px; color: var(--ink-3); font-feature-settings: 'tnum'; }
.dc-sum b { color: var(--ink); font-weight: 700; }
.dc-state { display: flex; align-items: flex-start; }

@media (max-width: 1180px) {
  .trow.dc-grid { grid-template-columns: 1.6fr 150px 176px !important; }
  .dc-grid > :nth-child(3), .dc-grid > :nth-child(4) { display: none; }
}
@media (max-width: 700px) {
  .trow.dc-grid { grid-template-columns: 1fr auto !important; gap: 4px 12px;
    align-items: start; }
  .dc-grid.thead { display: none; }
  .dc-grid > :nth-child(2) { display: block; }
  .dc-grid > :nth-child(3), .dc-grid > :nth-child(4) { display: none; }
}


/* ════ ВЫПЛАТЫ (реестр к оплате, этап 6) ════
   Строка отвечает на один вопрос: можно ли платить и сколько. Поэтому якорь тут —
   сумма, а проверки набраны тихо: семь зеленых галочек в каждой строке превратились бы
   в шум, из которого не видно единственную красную. */
.py-grid { grid-template-columns: 1.15fr 1.55fr 132px 1.15fr 168px; }
/* Причин блокировки бывает несколько — строка растет под них, а не режет текст. */
.trow.py-grid { height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px;
  align-items: center; }
.trow.py-grid.thead { min-height: 38px; padding-top: 0; padding-bottom: 0; }
.py-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Имя переносится, а не обрезается: «Тестовый Исполн…» в реестре выплат читается
   как ошибка, а строка тут и так растет под причины блокировки. */
.py-who b { font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.py-job { font-size: 11px; color: var(--ink-3); }
.py-task { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px;
  color: var(--ink-2); }
.py-act { font-size: 11px; color: var(--ink-3); }
.py-sum { display: flex; flex-direction: column; gap: 2px; font-feature-settings: 'tnum'; }
.py-sum b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.py-acc { font-size: 11px; color: var(--ink-3); }
.py-check { min-width: 0; font-size: 12px; }
.py-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--green-ink); }
.py-bad { display: flex; flex-direction: column; gap: 3px; }
.py-b1 { color: var(--red-ink); line-height: 1.35; }
.py-more { color: var(--ink-3); }
.py-do { display: flex; justify-content: flex-end; }
/* Подпись у счетчика: экран не отправляет деньги, и сказать это надо один раз сверху,
   а не приписывать к каждой кнопке. */
.py-hint { margin-left: auto; margin-right: 0; font-size: 12px; color: var(--ink-3); max-width: 380px;
  text-align: right; }
/* Отмененная выплата остается в истории, но гаснет: это уже не движение денег. */
.py-off { opacity: .62; }
.py-off .py-sum b { text-decoration: line-through; text-decoration-thickness: 1px; }

@media (max-width: 1180px) {
  .trow.py-grid { grid-template-columns: 1fr 1.3fr 124px 160px !important; }
  .py-grid > :nth-child(4) { display: none; }
}
@media (max-width: 700px) {
  .trow.py-grid { grid-template-columns: 1fr auto !important; gap: 6px 12px;
    align-items: start; }
  .py-grid.thead { display: none; }
  .py-grid > :nth-child(4) { display: block; grid-column: 1 / -1; }
  .py-do { grid-column: 1 / -1; justify-content: flex-start; }
  /* Подсказка про банк на телефоне не помещается, а пустая полоса тулбара над
     вкладками выглядит как недогруженный блок — прячем целиком. */
  .list-tools.py-tools { display: none; }
}

/* ════ МОЯ РАБОТА (свои задания сотрудника) ════
   Стол исполнителя собран по образцу Консоль.Про (ориентир владельца): колонки
   списка — номер, название, статус, срок, цена, место; заказчика колонкой не выносим,
   он у нас один. Своих классов минимум — акт и пункт плана те же самые, что видит
   оператор: спорить о работе стороны должны, глядя на одно и то же. */
.mw-grid { grid-template-columns: 46px 1.8fr 196px 172px 112px 136px; }
/* Строка растет под название: у заданий длинные имена, и на узком экране заголовок в
   три строки не должен обрезаться фиксированной высотой строки таблицы. */
.trow.mw-grid { height: auto; min-height: 58px; padding-top: 10px; padding-bottom: 10px; }
.trow.mw-grid.thead { min-height: 38px; padding-top: 0; padding-bottom: 0; }
.mw-num { align-self: center; }
.mw-place { color: var(--ink-3); }
/* Второй ряд чипов — разрез внутри вкладки (активные/завершенные, фильтры актов).
   Он тише первого: это уточнение, а не смена раздела. */
.mw-sub { margin-top: -2px; padding-top: 0; }
/* Период плана внутри карточки, а не в шапке страницы: у человека один план, и
   переключатель принадлежит ему, а не всему экрану. */
.mw-per { margin: 0 0 4px; }
.mw-plan .pl-list { margin-top: 2px; }
/* Приложить файл — действие, а не поле формы: кнопка и тихая подпись рядом. */
.mw-up { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
/* Акт в своем разделе показан карточкой, а рамка у него уже своя — вторую не рисуем:
   две вложенные рамки читаются как ошибка верстки. */
.mw-act { padding: 16px 18px; }
.mw-act .ct-act { border: 0; border-radius: 0; padding: 0; }

/* ── Главная кабинета ──
   Четыре плитки «что от меня ждут» и три денежные. Плитка с нулем тихая: это не
   достижение, а отсутствие работы, и подсвечивать ее нечем. */
.mw-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 12px; }
.mw-tiles:nth-of-type(2) { grid-template-columns: repeat(3, 1fr); }
.mw-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  text-align: left; font: inherit; }
button.mw-tile { cursor: pointer; transition: .14s; }
button.mw-tile:hover { border-color: #D4DAE6; transform: translateY(-1px); }
.mw-tile-k { font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.mw-tile-n { font-size: 26px; font-weight: 700; letter-spacing: -.03em;
  font-feature-settings: 'tnum'; color: var(--ink-3); line-height: 1.1; }
.mw-tile.hot .mw-tile-n { color: var(--blue); }
.mw-tile-h { font-size: 12px; color: var(--ink-3); }
.lc-h { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px 12px; }
.lc-h b { font-size: 14.5px; letter-spacing: -.015em; }

/* ── Уведомления ──
   Лента, а не таблица: у события есть только время, суть и задание, к которому оно
   относится. Непрочитанное помечено слева полосой — не цветом всей строки. */
.mw-nf { display: grid; grid-template-columns: 132px 1fr auto; gap: 16px;
  align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line);
  cursor: pointer; position: relative; transition: .12s; }
.mw-nf:last-child { border-bottom: 0; }
.mw-nf:hover { background: #FBFBFC; }
.mw-nf.new::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--blue); }
.mw-nf-d { font-size: 12.5px; color: var(--ink-3); }
.mw-nf-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mw-nf-t b { font-weight: 650; letter-spacing: -.01em; }
.mw-nf-s { font-size: 12px; color: var(--ink-3); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mw-nf-new { font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue-d); background: var(--blue-tint);
  padding: 3px 8px; border-radius: var(--r-pill); }

/* Шапка карточки задания — два ответа, за которыми человек ее открыл: сколько и до
   когда. Дальше уже читают условия. */
.mw-top { display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--fill); border-radius: var(--r-md); overflow: hidden; }
.mw-t1 { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: #fff; }
.mw-t-k { font: 700 10.5px 'Manrope', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.mw-t1 b { font-size: 19px; font-weight: 700; letter-spacing: -.025em;
  font-feature-settings: 'tnum'; }
.mw-t1:last-child b { font-size: 15px; letter-spacing: -.015em; }
/* Расчет на глазах: услуга слева, объем на цену и итог справа — та же строка, что
   в акте, чтобы спорить было не о чем. */
.mw-svc { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 11px 14px; background: var(--fill);
  border-radius: var(--r-md); }
.mw-svc-n { font-weight: 650; letter-spacing: -.01em; }
.mw-svc-c { font-size: 12.5px; color: var(--ink-2); font-feature-settings: 'tnum'; }
.mw-svc-c b { color: var(--ink); font-weight: 700; }
.mw-h2 { font: 700 11px 'Manrope', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin: 14px 0 6px; }
/* Решение — внизу, под всем, что человек должен прочитать до него. */
.mw-do { margin-top: 4px; }

@media (max-width: 1180px) {
  .trow.mw-grid { grid-template-columns: 42px 1.6fr 180px 150px 108px !important; }
  .mw-grid > :nth-child(6) { display: none; }
}
/* На телефоне строка — карточка: слева работа и срок, справа деньги и состояние.
   Шапку таблицы прячем, высоту отпускаем — название в одну строку не помещается. */
@media (max-width: 700px) {
  .trow.mw-grid { grid-template-columns: 1fr auto !important; gap: 4px 12px;
    height: auto; padding: 14px 16px; align-items: start; }
  .mw-grid.thead { display: none; }
  .mw-grid > :nth-child(1), .mw-grid > :nth-child(6) { display: none; }
  .mw-grid .ct-main { grid-column: 1; grid-row: 1; }
  .mw-grid .ct-when { grid-column: 1; grid-row: 2; white-space: normal; }
  .mw-grid .ct-sum { grid-column: 2; grid-row: 1; align-items: flex-end; text-align: right; }
  .mw-grid .ct-state { grid-column: 2; grid-row: 2; align-items: flex-end; text-align: right; }
  /* Подсказку «что делать дальше» на телефоне убираем: она длиннее чипа и сжимает
     название работы в столбик по одному слову. В карточке задания она осталась. */
  .mw-grid .ct-next { display: none; }
  .mw-top { grid-template-columns: 1fr; }
  .mw-nf { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .mw-nf-d { grid-column: 1; grid-row: 2; }
  .mw-nf-t { grid-column: 1; grid-row: 1; }
  .mw-nf-new { grid-column: 2; grid-row: 1; }
}
@media (max-width: 1180px) {
  .mw-tiles { grid-template-columns: repeat(2, 1fr); }
  .mw-tiles:nth-of-type(2) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .mw-tiles, .mw-tiles:nth-of-type(2) { grid-template-columns: 1fr 1fr; }
  .mw-tile-n { font-size: 22px; }
}
/* ════ ПРОДУКТОВЫЙ ПОРТАЛ (раздел «Портал») ════
   База знаний команды по продуктам: дерево → карточка продукта → вкладки.
   Контент приходит из content/portal.json, разметка — в renderPortal*.
   Дерево — единственный визуальный якорь раздела; все остальное тихое и
   собрано из готовых рецептов (карточка, сегмент .dperiod, .sec-head). */
.po-wrap { max-width: 1120px; }
.po-top { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.po-ttl { flex: 1; min-width: 240px; }
.po-h1 { font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.po-sub { margin-top: 9px; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 92ch; }
.po-search { flex: 0 1 340px; margin-top: 3px; }
/* заголовок карточки портала тянется сам, отметка «сохранено» прижата вправо */
.po-card .sec-head > div { flex: 1; min-width: 0; }

/* дерево: два входных узла → четыре направления → допуслуги.
   Подписи полос живут ВНУТРИ ствола: линия идет по центру, подпись прижата влево,
   поэтому вертикаль не рвется — и переживает мобильную ширину, где линий нет. */
.po-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
.po-tree > .po-lbl { margin-bottom: 11px; }
.po-lane { margin-bottom: 0; }
/* вход — служебная полоса, а не второй якорь: тихий фон, серая иконка.
   Синим в дереве светятся только флагманские направления. */
.po-node { display: flex; align-items: center; gap: 11px; background: var(--fill);
  border: 1px solid transparent; border-radius: var(--r-lg); padding: 11px 14px; transition: .14s var(--ease); }
.po-node:hover { border-color: #CFE0FF; background: #FBFBFC; }
.po-ni { width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: var(--card); color: var(--ink-3); display: grid; place-items: center; }
.po-node:hover .po-ni { color: var(--blue); }
.po-nt { flex: 1; min-width: 0; }
.po-nt b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); }
.po-nt small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.po-nx { color: var(--ink-3); transition: .14s var(--ease); }
.po-node:hover .po-nx { color: var(--blue); }
.po-drop, .po-stem { position: relative; height: 20px; }
.po-stem { height: 34px; display: flex; align-items: center; }
/* Линии дерева темнее общих разделителей: на 1px светло-серая ветка читается как
   случайный штрих рядом с карточкой, а не как связь между узлами. */
.po-tree { --po-wire: var(--wire); }
.po-drop::before, .po-stem::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--po-wire); }

/* Ряд направлений. minmax(0,·), а не 1fr: длинное слово в подписи иначе распирает
   свою колонку и колонки перестают быть равными.
   Три общие строки (шина, карточка, ветки) + subgrid в колонке: карточки в ряду
   одной высоты и ветки стартуют с одной линии, сколько бы строк ни занял текст.
   row-gap: 0 — между шиной и карточкой не должно быть разрыва, там идет провод. */
.po-cols { display: grid; grid-template-columns: repeat(var(--po-n, 4), minmax(0, 1fr));
  grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 0; align-items: start; }
.po-col { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.po-tick { display: block; height: 22px; position: relative; }
.po-tick::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--po-wire); }
.po-tick::after { content: ''; position: absolute; top: 0; height: 1px; left: -8px; right: -8px; background: var(--po-wire); }
.po-col:first-child .po-tick::after { left: 50%; }
.po-col:last-child .po-tick::after { right: 50%; }

.po-flag { display: block; width: 100%; min-height: 90px; text-align: left; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px; transition: .14s var(--ease); }
.po-flag:hover { border-color: #CFE0FF; background: #FBFBFC; }
.po-fh { display: flex; align-items: center; gap: 8px; }
.po-fh b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.po-fh b { flex: 1; min-width: 0; }
.po-fh svg { flex: none; color: var(--ink-3); transition: .14s var(--ease); }
.po-flag:hover .po-fh svg { color: var(--blue); transform: translateX(2px); }
/* подпись и метка «наполняем» столбиком, а не в строку: в узкой колонке подпись
   переносится на две-три строки, и метка сбоку встает ровно посреди текста */
.po-fb { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 5px; }
.po-flag small { min-width: 0; font-size: 12px; color: var(--ink-3); }
.po-flag.ready { border-color: #CFE0FF; }
.po-flag:not(.ready) .po-fh b { color: var(--ink-2); }
/* .sev и .uz-tag — готовые пилюли системы; тут только место в потоке */
.po-soon { flex: none; padding: 4px 10px; font-size: 11.5px; font-weight: 500; }
/* align-self: start — иначе в общей сетке строк список тянется на всю высоту
   ряда и вертикальная линия слева уходит вниз, ниже последней ветки */
.po-brs { align-self: start; margin: 11px 0 0 16px; padding-left: 12px; border-left: 1px solid var(--po-wire);
  display: flex; flex-direction: column; gap: 8px; }
.po-br { position: relative; font-size: 12.5px; color: var(--ink-2); }
.po-br::before { content: ''; position: absolute; left: -12px; top: 9px; width: 8px; height: 1px; background: var(--po-wire); }

.po-extras { margin-top: 28px; background: var(--fill); border-radius: var(--r-lg); padding: 17px 19px; }
.po-exh b { font-size: 13.5px; font-weight: 700; }
.po-exh small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.po-xs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.po-xs-wide { margin: -12px 0 22px; }
/* та же пилюля, что .uz-tag, но лежит на заливке — поэтому фон карточный, не --fill */
.po-x { background: var(--card); border-radius: var(--r-pill);
  padding: 5px 11px; font-size: 11.5px; font-weight: 500; color: var(--ink-2); }

/* поиск по порталу */
.po-hits { padding: 8px; }
.po-cap { padding: 9px 12px 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.po-hit { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 11px; transition: .12s; }
.po-hit:hover { background: var(--fill); }
.po-hl { flex: 1; min-width: 0; }
.po-hl b { display: block; font-size: 13.5px; font-weight: 600; }
.po-hl small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.po-hit svg { color: var(--ink-3); }
.po-hit:hover svg { color: var(--blue); }

/* страница продукта */
.po-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: .12s; }
.po-back svg { transform: rotate(180deg); color: var(--ink-3); }
.po-back:hover { color: var(--blue); }
.po-back:hover svg { color: var(--blue); }
.po-tabs { margin-bottom: 22px; overflow-x: auto; padding-bottom: 2px; }
.po-tabs::-webkit-scrollbar { height: 0; }
.po-card { padding: 20px 22px; margin-bottom: 16px; }
.po-txt { margin-top: 13px; font-size: 13.5px; color: var(--ink-2); line-height: 1.62; }
.po-note { margin-top: 14px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.po-note.wide { margin: 16px 0 26px; }

/* путь студента — лента маршрута над тарифами.
   Точки соединены одной линией, а не стрелками и не градиентом: это карта, а не
   герой экрана, спорить с ценой она не должна. На узком экране лента едет вбок,
   а не ломается в столбик — дорога должна читаться дорогой. */
.po-routec { padding-bottom: 18px; }
.po-routew { margin-top: 16px; overflow-x: auto; padding-bottom: 4px;
  /* затухание справа — единственный признак того, что лента едет вбок:
     скроллбар спрятан, а обрезанное слово читается как обрубок */
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
.po-routew::-webkit-scrollbar { height: 0; }
/* хвост справа — «полка» под затухание маски: без нее последняя точка выцветает
   даже когда лента влезла целиком и прокручивать нечего */
.po-route { position: relative; display: flex; gap: 0; min-width: 1040px; padding-right: 34px; }
.po-route::before { content: ''; position: absolute; left: 5%; right: 5%; top: 13px;
  height: 1px; background: var(--line-2); }
.po-rt { position: relative; flex: 1 1 0; display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center; padding: 0 4px; }
.po-rdot { width: 27px; height: 27px; border-radius: var(--r-pill); background: var(--card);
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.po-rtt { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3;
  letter-spacing: -.01em; }
/* хвост маршрута, который есть только у старшего тарифа. Точка синяя и залитая,
   а не крупнее остальных: это продолжение той же дороги, а не второй якорь. */
.po-rt-only .po-rdot { background: var(--blue); border-color: var(--blue); color: #fff; }
/* нулевая точка — не этап, а старт: заливка вместо белого кружка, номер «00» */
.po-rt-zero .po-rdot { background: var(--fill); border-style: dashed; }
.po-rt-only .po-rtt { color: var(--ink); }

/* маршрут внутри карточки тарифа: номер, этап, что человек получает, кто делает */
.po-srlede { margin: -3px 0 15px; font-size: 13px; font-weight: 700; color: var(--ink);
  letter-spacing: -.015em; line-height: 1.4; }
.po-srs { display: flex; flex-direction: column; gap: 13px; }
.po-sr { display: flex; gap: 11px; }
.po-srn { flex: none; width: 19px; padding-top: 1px; font-size: 11px; font-weight: 700;
  color: var(--ink-3); }
.po-srb { min-width: 0; flex: 1 1 auto; }
.po-srh { display: flex; align-items: baseline; gap: 8px; }
.po-srh b { flex: 1 1 auto; font-size: 12.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em; }
/* этап, где у тарифа СВОЕ наполнение, а не унаследованное от тарифа ниже. Метка
   ровно одна и тихая — синий номер, тот же язык, что у номера этапа на «Этапах».
   Гасить остальные строки нельзя: колонка становится бледной и читается как
   «тут меньше», хотя наполнение на месте. */
.po-sr.po-up .po-srn { color: var(--blue); }
/* этап, которого нет в младших тарифах. Рецепт тот же, что у точки в ленте
   маршрута: залитый синий кружок. Это ДРУГОЙ факт, чем синяя цифра выше, и
   рисуется он другим приемом намеренно. */
.po-sr.po-only .po-srn { width: 19px; height: 19px; margin-top: 1px; padding: 0;
  border-radius: var(--r-pill); background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 9.5px; }
.po-srt { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-2); line-height: 1.42; }
/* этап, которого в этом тарифе нет. Гасим целиком, включая номер: пропуск в
   маршруте должен читаться пропуском с одного взгляда, без чтения текста. */
/* этапа нет в этом тарифе. Гасим до второго уровня чернил, но не до бордера:
   обрыв маршрута надо ПРОЧИТАТЬ, а не угадать по пустому месту. */
.po-sr.po-off .po-srn { color: var(--ink-3); }
.po-sr.po-off .po-srh b { color: var(--ink-2); font-weight: 600; }
.po-sr.po-off .po-srt { color: var(--ink-3); }

.po-tbl td.po-offc .po-ct { color: var(--ink-3); }

/* тарифы */
.po-tariffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.po-tcard { padding: 21px; position: relative; }
.po-tcard.accent { border-color: var(--blue); }
.po-tflag { position: absolute; top: 17px; right: 17px; }
.po-tname { font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.po-tpos { margin-top: 5px; min-height: 54px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.po-tfmt { margin-top: 9px; min-height: 35px; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
/* цена: якорь без скидки сверху и тихий, цена со скидкой крупная, выгода —
   тем же зеленым чипом, что и в «Ценообразовании», второго рецепта не заводим */
/* блок цены держит одну высоту у всех трех карточек: строка «при оплате целиком»
   есть не везде, а лейблы «что входит» должны стоять на одной линии */
.po-tpr { margin-top: 16px; min-height: 82px; }
.po-told { font-size: 12px; color: var(--ink-3); }
.po-told s { text-decoration-thickness: 1px; }
.po-tprow { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
.po-tprice { font-size: 28px; font-weight: 700; letter-spacing: -.035em; }
.po-tonce { margin-top: 7px; font-size: 12px; color: var(--ink-2); }
.po-tonce b { font-weight: 700; color: var(--ink); }
/* амбер тут значит ровно то же, что и в «Способах оплаты»: цифра не согласована */
.po-tonce.draft { color: var(--amber-ink); }
.po-feats { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px; }
.po-feat { display: flex; gap: 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.42; }
/* галочка тут — маркер списка, а не «хорошо»: зеленый в разделе значит только маржу */
.po-feat svg { margin-top: 2px; color: var(--ink-3); }
/* лестница отличий: масштаб подачи крупно — он и есть первое, чем тарифы
   расходятся, — под ним два тихих факта парами «что : сколько». Три карточки
   рядом читаются ступенями 5-7-10, 12-13-15, виза - месяц - два месяца. */
.po-scope { margin-top: 16px; background: var(--fill); border-radius: 12px; padding: 13px 14px 4px;
  min-height: 176px; }
.po-scope b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.035em;
  line-height: 1.1; }
.po-scope small { display: block; margin-top: 5px; min-height: 51px; font-size: 11.5px;
  color: var(--ink-2); line-height: 1.45; }
.po-tdrs { margin-top: 2px; }
.po-tdr { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 42px; padding: 8px 0; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-2); }
.po-tdr b { font-size: 12.5px; font-weight: 700; color: var(--ink); text-align: right;
  letter-spacing: -.01em; }

/* «все из тарифа ниже, плюс» — тот же .po-feat, что и состав, с одним
   модификатором: синий плюс вместо маркера и полные чернила. Это ответ на «за
   что доплата», он должен ловиться взглядом раньше состава по этапам, но
   заводить под него третий рецепт отбивки секции незачем. */
.po-feat.up { color: var(--ink); }
.po-feat i { flex: none; width: 13px; font-style: normal; font-weight: 800; color: var(--blue);
  text-align: center; }
/* «не входит» — не предупреждение и не ошибка, а граница услуги: тише состава
   на один уровень чернил, без красного. Красный тут читался бы как поломка. */
.po-tcard .po-tsec { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
/* «тише состава» держат крестик и капс-лейбл, а не бледный корпус: чего нет в
   тарифе — такой же важный текст, как и то, что есть */
.po-nofeat { display: flex; gap: 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.42; }
.po-nofeat svg { flex: none; margin-top: 2px; color: var(--line-2); }
/* зеленый в разделе занят выгодой и маржой, а на этой же карточке уже стоит чип
   выгоды: объяснение идет тихой заливкой, тем же рецептом, что .po-scope */
.po-noall { background: var(--fill); color: var(--ink-2); border-radius: var(--r-lg);
  padding: 11px 13px; font-size: 12.5px; line-height: 1.45; }

/* машинный состав тарифа: пары «что — что именно», выровненные по левому столбцу.
   Значение темнее подписи, потому что смотрят на него; расхождение с каталогом
   заказов — красной заливкой того же рецепта, что .po-noall: это не украшение,
   а единственное место, где видно, что цена на странице и цена в оплате разошлись */
.po-kvs { display: flex; flex-direction: column; gap: 11px; }
/* подпись над значением, а не слева: карточка тарифа узкая, в две колонки
   значение ломается на три строки и список перестает читаться сверху вниз */
.po-kv { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.45; }
.po-kvl { color: var(--ink-3); }
.po-kvv { color: var(--ink); font-weight: 600; }
.po-kvn { margin-top: 13px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.po-noall.po-warn { background: var(--red-soft); color: var(--red-ink); font-weight: 600;
  margin-bottom: 12px; }

/* продукты направления и путь клиента.
   Один рецепт на оба экрана: подпись-микролейбл, шаги с тихими номерами,
   список «что делает команда» теми же .po-feat, что и состав тарифа.
   Номер шага — не украшение: он держит порядок, поэтому крупный и тихий,
   а не цветной кружок, который спорил бы с синим дерева. */
.po-fsec { margin-top: 18px; }
.po-fsec:first-child { margin-top: 14px; }
.po-flbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 11px; }
.po-fsec .po-txt { margin-top: 0; }
.po-fsec .po-feats { margin-top: 0; padding-top: 0; border-top: 0; }
.po-steps { display: flex; flex-direction: column; gap: 11px; }
.po-step { display: flex; align-items: baseline; gap: 13px; }
.po-stn { flex: none; width: 20px; font-size: 13px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.po-stt { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.po-stw { display: block; margin-top: 3px; font-size: 11.5px; font-style: normal; color: var(--ink-3); }
.po-when { flex: none; align-self: center; background: var(--fill); border-radius: var(--r-pill);
  padding: 5px 11px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.po-flinks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.po-xl { display: inline-flex; align-items: center; gap: 6px; background: var(--fill);
  color: var(--ink-2); transition: .12s var(--ease); }
.po-xl:hover { background: var(--card); color: var(--blue); }
.po-xl svg { color: var(--ink-3); }
.po-xl:hover svg { color: var(--blue); }

/* карточка продукта направления: шапка-кнопка раскрывает содержимое */
.po-item { padding: 0; overflow: hidden; }
.po-ih { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 17px 20px; transition: .12s var(--ease); }
.po-ih:hover { background: var(--fill); }
.po-ic { width: 32px; height: 32px; border-radius: 10px; flex: none; background: var(--fill);
  color: var(--ink-3); display: grid; place-items: center; transition: .12s var(--ease); }
.po-item.open .po-ic, .po-ih:hover .po-ic { color: var(--blue); }
.po-it { flex: 1; min-width: 0; }
.po-it b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.po-it small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.po-ip { flex: none; font-size: 13px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-2); }
.po-iv { flex: none; color: var(--ink-3); transform: rotate(90deg); transition: .18s var(--ease); }
.po-item.open .po-iv { transform: rotate(-90deg); color: var(--blue); }
.po-itags { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 20px 16px 65px; margin-top: -6px; }
.po-itags .po-x { background: var(--fill); }
.po-ibody { padding: 4px 20px 22px 65px; border-top: 1px solid var(--line); margin-top: 2px; }
.po-ibody .po-fsec:first-child { margin-top: 16px; }

/* таблицы портала: сравнение тарифов и экономика */
.po-tblwrap { margin-top: 17px; overflow-x: auto; }
.po-tblwrap::-webkit-scrollbar { height: 6px; }
.po-tblwrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.po-tbl { width: 100%; border-collapse: collapse; min-width: 680px; table-layout: fixed; }
.po-tbl th { padding: 0 12px 11px; text-align: left; font-size: 11px; font-weight: 700;
  color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.po-tbl td { padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: 13px;
  color: var(--ink-2); line-height: 1.5; vertical-align: top; }
.po-tbl tbody tr:last-child td { border-bottom: 0; }
.po-rl { width: 178px; font-weight: 600; color: var(--ink); }
/* подпись под строкой — это объяснение, а не фон: серый --ink-3 на белом дает
   контраст 2,3 к 1 и не читается (Павел, 18.09.2026), поэтому берем --ink-2 */
.po-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.po-pluses { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.po-plus { position: relative; padding-left: 14px; font-size: 12.5px; }
.po-plus::before { content: '+'; position: absolute; left: 0; top: -1px; color: var(--blue); font-weight: 700; }

.po-tbl.econ td { padding: 8px 12px; vertical-align: middle; }
.po-tbl.econ .po-rl { width: 250px; }
/* поля экономики — системный .al-in, компактный размер (прецедент — .ed-input.big).
   Своего рецепта инпута в разделе нет: фокус, фон и обводка приходят из системы. */
.al-in.sm { font-size: 13px; font-weight: 600; border-radius: 10px; padding: 8px 11px;
  font-variant-numeric: tabular-nums; }
.po-in { max-width: 152px; }
.po-pct { width: 62px; max-width: 62px; margin-left: 9px; padding: 6px 9px; font-size: 12.5px;
  display: inline-block; vertical-align: middle; }
.po-pc { margin-left: 4px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.po-r-price .al-in.sm { font-size: 14px; font-weight: 700; }
/* калькулятор фондов и плана: подзаголовок внутри карточки отделяет три разных
   вопроса — что откладываем, когда уходит, сколько клиентов нужно */
/* свод сезона закреплен наверху вкладки «Экономика», под ним переключатель
   разделов: листать три экрана подряд оказалось тяжело (Павел, 21.09.2026) */
.po-econtop .po-board3 { margin-top: 16px; }
.po-econsegs { margin: 20px 0 2px; }
.po-econsegs .dperiod { display: inline-flex; }
.po-sub { margin: 26px 0 0; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.po-sub:first-of-type { margin-top: 20px; }
.po-sel { width: auto; max-width: 100%; cursor: pointer; }
.po-cpct { white-space: nowrap; }
.po-tbl.econ.w6 { min-width: 860px; }
.po-tbl.econ.w6 .po-rl { width: 208px; }
.po-tbl.econ.w5 { min-width: 940px; }
.po-tbl.econ.w5 .po-rl { width: 292px; }
.po-tbl.econ.w5 .po-hint + .po-hint { margin-top: 1px; }
/* «Подобрать доли» — единственная кнопка калькулятора: она ничего не удаляет, а
   считает, поэтому тихая и стоит рядом со своим объяснением, а не в шапке */
.po-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.po-fit { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13px; }
.po-act .po-hint { flex: 1 1 280px; margin-top: 0; }
.po-tbl.econ.w3 { min-width: 560px; }
.po-tbl.econ.w3 .po-rl { width: 320px; }
/* свод сезона: четыре цифры в ряд, на узком — системная одна колонка */
.po-board3 { margin-top: 14px; }
.po-board3 .pc-v.po-pos { color: var(--green-ink); }
.po-board3 .pc-v.po-neg { color: var(--red-ink); }
/* вторая строка в ячейке свода: сезон это двенадцать месяцев, и владельцу нужна
   не только сумма за год, но и то, как она выглядит в месяц (Олеся, 20.09.2026) */
.pay-cell .pc-s { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.pay-cell.lead .pc-s { color: var(--blue); }
@media (max-width: 760px) { .po-board3 { grid-template-columns: 1fr; } }
/* строка дивидендов в таблице фондов: у нее нет доли, она остаток после всего,
   и это надо видеть глазами, не вчитываясь. Тихая синяя заливка того же рецепта,
   что итоговая строка, но холодная — итог и остаток разные вещи */
.po-r-own td { background: var(--blue-tint); }
.po-r-own .po-rl { background: var(--blue-tint); }
.po-r-own td:first-child, .po-r-own .num { font-weight: 700; color: var(--ink); }
.po-r-sum td { font-weight: 700; color: var(--ink); background: var(--fill); }
.po-r-sum .po-rl { background: var(--fill); }
.po-r-big td { padding-top: 15px; padding-bottom: 15px; font-size: 19px; font-weight: 700;
  letter-spacing: -.03em; color: var(--ink); }
.po-tbl .po-pos { color: var(--green-ink); }
.po-tbl .po-neg { color: var(--red-ink); }
/* «сохранено» рядом с заголовком: цифры общие, человек должен видеть, что
   его правка доехала до базы, а не осталась на экране */
.po-saved { opacity: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  transition: opacity .2s var(--ease); }
.po-saved.on { opacity: 1; }
.po-saved.bad { color: var(--red-ink); }
.po-diff { display: none; margin-top: 5px; color: var(--amber-ink); }

/* ценообразование: сводка по тарифу и прайс поштучно.
   Якорь карточки — цена пакетом, поэтому крупная она одна; сумма поштучно
   рядом тихая и зачеркнутая, выгода — единственное цветное пятно. */
.po-pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.po-pcard { padding: 20px 21px; }
.po-pcard.accent { border-color: var(--blue); }
.po-prow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 13px; font-size: 12.5px; color: var(--ink-3); }
.po-prow b { font-size: 15px; font-weight: 700; color: var(--ink-2); letter-spacing: -.02em; }
.po-prow.po-pfull b { color: var(--ink-3); text-decoration: line-through; }
.po-prow b.big { font-size: 26px; letter-spacing: -.035em; color: var(--ink); }
.po-psave { margin-top: 14px; background: var(--green-soft); color: var(--green-ink);
  border-radius: var(--r-lg); padding: 9px 12px; font-size: 12.5px; font-weight: 600; }
.po-psave.off { background: var(--fill); color: var(--ink-3); font-weight: 500; }
.po-psave.pill { margin-top: 0; border-radius: var(--r-pill); padding: 5px 11px; font-size: 12px; }
.po-pwarn { display: flex; gap: 8px; margin-top: 10px; font-size: 12px; line-height: 1.45;
  color: var(--amber-ink); }
.po-pwarn svg { flex: none; margin-top: 2px; }
/* прайс: наименование широкое, цена и колонки тарифов узкие — читают сверху вниз
   один столбец цен, а не бегают глазами по строке */
.po-tbl.price { min-width: 720px; }
.po-tbl.price .po-rl { width: auto; }
.po-tbl.price th:nth-child(2), .po-tbl.price td:nth-child(2) { width: 118px; }
.po-tbl.price th:nth-child(n+3), .po-tbl.price td:nth-child(n+3) { width: 132px; }
.po-pprice { font-weight: 700; color: var(--ink); white-space: nowrap; }
.po-pin { text-align: center; }
.po-pin svg { color: var(--ink-2); }
.po-pdash { color: var(--line-2); }
.po-r-grp td { padding-top: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.po-r-grp small { margin-left: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink-3); }
.po-tbl.price .po-r-sum td, .po-tbl.price .po-r-big td { text-align: left; }
.po-adds { margin-top: 4px; }
.po-add { display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--line); }
.po-add:last-child { border-bottom: 0; padding-bottom: 0; }
.po-addt { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.po-addt small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.po-addp { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.po-diff.on { display: block; }

/* ссылки на внешние системы */
.po-link { display: flex; align-items: center; gap: 16px; padding: 17px 19px;
  margin-bottom: 12px; transition: .14s var(--ease); }
.po-link:hover { border-color: #CFE0FF; background: #FBFBFC; }
.po-lt { flex: 1; min-width: 0; }
.po-lt b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.po-lt small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.po-lu { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 600; color: var(--blue); white-space: nowrap; }


/* способы оплаты: переключатель сверху, три цены под ним.
   Переплата — не украшение, а сам аргумент разговора, поэтому она стоит
   под ценой, а не прячется в примечании. */
.po-payseg { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 17px; }
.po-payh { font-size: 12.5px; color: var(--ink-3); }
.po-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.po-payc { background: var(--fill); border-radius: var(--r-lg); padding: 15px 17px; }
.po-payc.accent { background: var(--blue-tint); }
.po-payn { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.po-payv { margin-top: 9px; font-size: 25px; font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.po-payo { margin-top: 5px; font-size: 12px; color: var(--ink-3); }
.po-payo.best { color: var(--green-ink); font-weight: 600; }
.po-draft { display: inline-flex; margin-top: 11px; background: var(--amber-soft); color: var(--amber-ink); }

/* план направления: строка задачи, справа состояние. Границы между строками
   полупрозрачные, воздух внутри строки меньше, чем между блоками секций. */
.po-plan { display: flex; flex-direction: column; }
.po-plr { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line); }
.po-plr:first-child { padding-top: 3px; border-top: 0; }
.po-plt { display: flex; flex-direction: column; min-width: 0; }
.po-plt b { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.po-plt small { margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.po-pln { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.po-plr .sev { flex: none; margin-top: 1px; }
.po-opens { display: flex; flex-direction: column; gap: 9px; }
.po-openi { display: flex; gap: 9px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.po-openi svg { flex: none; margin-top: 2px; color: var(--amber-ink); }

/* этапы флагмана */
.po-lede { margin-top: 16px; background: var(--blue-tint); border-radius: var(--r-lg);
  padding: 14px 17px; font-size: 14.5px; font-weight: 600; letter-spacing: -.015em;
  color: var(--navy); line-height: 1.5; }
/* внутри плашки два предложения разного веса: общее для всех тарифов и то, ради
   чего доплачивают. Иерархия весом, а не второй плашкой. */
.po-lede b { font-weight: 800; }
.po-stghead { margin-bottom: 20px; }
.po-stg .po-sh { padding: 15px 20px; }
.po-stnum { flex: none; width: 26px; font-size: 14px; font-weight: 700; color: var(--ink-3);
  text-align: left; }
.po-stg.open .po-stnum, .po-sh:hover .po-stnum { color: var(--blue); }
.po-w { flex: none; }
.po-w-plat { background: var(--fill); color: var(--ink-2); }
.po-w-team { background: var(--blue-tint); color: var(--navy); }
.po-w-self { background: var(--amber-soft); color: var(--amber-ink); }
/* «только Премиум» — тот же синий, что у залитой точки в ленте и у номера
   эксклюзивного этапа: один факт, один цвет по всему порталу */
.po-w-only { background: var(--blue-tint); color: var(--blue-d); }
.po-sbody { padding-left: 59px; }
.po-sbody .po-txt { margin-top: 15px; }
/* в шапке этапа плашка только одна — роль. Срок рядом с ней такой же серой
   пилюлей читался бы как второй чип: в режиме «Сравнить» он и так тихий текст */
.po-sh .po-when { background: none; padding: 0 2px; font-weight: 500; color: var(--ink-3); }
.po-samet { margin-top: 15px; font-size: 11.5px; color: var(--ink-3); }
.po-samet + .po-txt { margin-top: 7px; }
.po-sbody .po-pluses { margin-top: 13px; }
.po-sell { margin-top: 15px; background: var(--amber-soft); border-radius: 12px; padding: 12px 15px;
  font-size: 12.5px; color: var(--amber-ink); line-height: 1.5; }
.po-sell b { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }
.po-tbl.cmp .po-w { display: inline-flex; margin-bottom: 8px; }
.po-ct { display: block; }

/* экономика: строка этапа несет его себестоимость, строки под ней — из чего она */
/* строка этапа несет его себестоимость. Свой класс, не .po-r-grp: тот занят
   группами прайса на вкладке «Ценообразование» и выглядит иначе.
   Вес 600, а не 700: подытог этапа не должен спорить с итогом продукта ниже. */
.po-r-stage td { background: var(--fill); font-weight: 600; color: var(--ink); }
.po-r-stage .po-hint { font-weight: 500; }
.po-r-item .po-rl { font-weight: 500; color: var(--ink-2); }
/* итог продукта отделен от двенадцати подытогов линией — иначе они читаются
   одним уровнем и итог теряется */
.po-tbl.econ .po-r-sum:first-of-type td { border-top: 1px solid var(--line-2); }

@media (max-width: 960px) {
  /* на планшете и телефоне колонок две, ряды переносятся — общая сетка строк
     тут только мешает, каждая колонка живет своей высотой */
  .po-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 22px 14px; }
  .po-col { display: block; }
  .po-tick { display: none; }
  .po-stem { height: 26px; }
  .po-stem::before { display: none; }
  .po-lane { margin-bottom: 18px; }
  .po-tariffs { grid-template-columns: 1fr; }
  .po-route { min-width: 1010px; }
  /* в одну колонку выравнивать нечего: min-height превращается в пустоты */
  .po-tpos, .po-tfmt, .po-tpr, .po-scope, .po-scope small, .po-tdr { min-height: 0; }
  /* карточка растягивается на всю ширину, и пара «что : сколько» разъехалась бы
     по краям на полэкрана — перестав читаться парой */
  .po-tdr { max-width: 420px; }
  .po-pay { grid-template-columns: 1fr; }
  .po-pcards { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .po-h1 { font-size: 23px; }
  .po-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .po-search { flex-basis: 100%; max-width: none; }
  .po-card, .po-tcard { padding: 17px 16px; }
  /* карточки стоят стопкой: внешний зазор должен быть больше, чем отбивки
     секций внутри карточки (17-18px), иначе пять карточек читаются лентой */
  .po-tariffs { gap: 26px; }
  .po-rl { width: 140px; }
  /* на телефоне содержимое продукта идет во всю ширину: отступ под иконку
     съедал бы треть строки, а читать надо текст, а не поле слева */
  .po-ih { padding: 15px 16px; gap: 11px; }
  .po-ibody { padding: 4px 16px 18px; }
  .po-itags { padding: 0 16px 14px; }
  .po-ip { font-size: 12.5px; }
  /* срок этапа не прячем — это половина смысла пути. Он уходит на свою строку
     целиком (flex-basis 100%), иначе отбирает ширину у заголовка и тот ломается
     на три строки рядом с иконкой. */
  .po-when { order: 3; flex-basis: 100%; align-self: flex-start; margin-top: 4px; }
  /* шапка этапа: на узком экране номер, название и шеврон в первой строке,
     кто делает и срок — во второй, с отступом под колонку текста */
  /* переключатель тарифа шире экрана: даем ему уехать вбок, как вкладкам,
     а не ломаем в две строки — из двух строк не читается, что это один набор */
  .po-payseg .dperiod { max-width: 100%; overflow-x: auto; }
  .po-payseg .dperiod::-webkit-scrollbar { height: 0; }
  .po-payseg .dperiod button { flex: none; }
  .po-sh { flex-wrap: wrap; }
  /* без явной ширины .po-it сжимается до нуля (min-width:0 у общего рецепта) и
     название этапа встает столбиком по одному слову вместо переноса чипов */
  .po-sh .po-it { min-width: 58%; }
  .po-sh .po-iv { order: 2; }
  .po-sh .po-w { order: 3; margin: 3px 0 0 37px; }
  .po-sh .po-when { order: 4; flex-basis: auto; margin-top: 3px; }
  .po-sbody { padding-left: 16px; }
  .po-payv { font-size: 22px; }
  .po-lede { font-size: 13.5px; padding: 13px 15px; }
}

/* ════ ИМПОРТ ВСТРЕЧИ — загрузка протокола и экран проверки ════
   Экран длинный по природе: в протоколе бывает полсотни пунктов. Поэтому
   иерархия держится не рамками, а плотностью — цель шире и темнее, ее шаги
   вплотную под ней и с отступом слева, снятый пункт гаснет, но остается
   виден. Никаких карточек с тенями: это рабочий список, а не витрина. */

/* Зона файла. Единственный цветной элемент формы — с нее и начинают. */
.mu-drop { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 18px; border-radius: 14px; background: var(--blue-tint);
  box-shadow: inset 0 0 0 1.5px rgba(47,107,255,.18); cursor: pointer; text-align: center;
  transition: box-shadow .15s, background .15s; }
.mu-drop:hover, .mu-drop.over { box-shadow: inset 0 0 0 1.5px var(--blue); }
.mu-drop.has { background: var(--green-soft); box-shadow: inset 0 0 0 1.5px rgba(24,169,87,.22); }
.mu-drop-i { color: var(--blue); margin-bottom: 4px; }
.mu-drop.has .mu-drop-i { color: var(--green-ink); }
.mu-drop-t { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; color: var(--navy);
  overflow-wrap: anywhere; }
.mu-drop-s { font-size: 11.5px; color: var(--ink-2); }
/* Черновики, которые еще не завели: строки на языке списка — ховер фоном и левой
   полоской, без рамок. Отдельный блок с воздухом сверху: это другая сущность, чем
   загрузка нового файла. */
.mu-drafts { display: flex; flex-direction: column; margin: 6px -8px 0; }
.mu-drafts-h { font-size: 11.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em;
  padding: 0 8px 6px; }
.mu-drafts-h b { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.mu-draft { position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 8px; border: 0; border-radius: 12px; background: none; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer; transition: background .14s; }
.mu-draft::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: var(--blue); opacity: 0; transition: opacity .14s; }
.mu-draft:hover { background: #FBFBFC; }
.mu-draft:hover::before { opacity: 1; }
.mu-draft > svg:last-child { flex: none; color: var(--ink-3); transition: transform .15s, color .15s; }
.mu-draft:hover > svg:last-child { color: var(--blue); transform: translateX(2px); }
.mu-draft-i { flex: none; width: 30px; height: 30px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--blue-tint); color: var(--blue); }
.mu-draft-b { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mu-draft-t { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-draft-m { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* Экран проверки */
.mi-card { max-width: 720px; }
.mi-stat { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 24px 0;
  font-size: 12px; color: var(--ink-2); }
.mi-stat b { color: var(--ink); font-weight: 700; }
.mi-stat .warn { color: var(--amber-ink); }
.mi-stat .warn b { color: var(--amber-ink); }
.mi-body { gap: 26px; padding-bottom: 18px; }
.mi-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
  padding: 11px 13px; border-radius: 12px; background: var(--fill); }

/* Пакет протоколов: три файла с одной планерки проверяются на одном экране.
   Между разборами — линия и подпись файла, иначе цели из разных встреч
   читаются как один список и человек теряет, о чем вообще шла речь. */
.mi-imp { display: flex; flex-direction: column; gap: 26px; }
/* Воздух вокруг границы намеренно неровный: сверху больше, чем ритм внутри
   секции, иначе линия между двумя протоколами читается как еще один отступ
   между целями. Линия — --line-2, тот же вес, что у строк команды: самый
   бледный --line рядом с серыми плитами заметок просто теряется. */
.mi-imp + .mi-imp { margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line-2); }
/* Шапка файла — родитель секции, а не ее пункт: до содержимого 13px против
   26px между целями (тот же расчет, что у .dr-h). Отрицательный отступ гасит
   общий gap колонки. */
.mi-file { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-bottom: -13px; }
.mi-file-n { display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.mi-file-n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-file-n svg { color: var(--ink-3); flex: none; }
.mi-file-s { font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }

.mi-goal { display: flex; flex-direction: column; gap: 9px; }
.mi-g-h { display: flex; align-items: center; gap: 10px; }
.mi-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
.mi-row .mi-link { flex: 1 1 160px; min-width: 0; }

.mi-item { display: flex; flex-direction: column; gap: 6px; transition: opacity .15s; }
.mi-item.off { opacity: .4; }
.mi-item.off .mi-title { text-decoration: line-through; }
.mi-line { display: flex; align-items: center; gap: 8px; }
/* Заголовок цели читается как заголовок, а не как еще одно поле: фона нет,
   обводка приезжает под курсор и на фокус. Иначе десять одинаковых серых
   прямоугольников подряд, и глазу не за что зацепиться. */
.mi-line .mi-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.35; background: transparent; box-shadow: none;
  /* Не hidden: если высота почему-то не сошлась, хвост фразы должен быть
     доступен прокруткой, а не отрезан насовсем. */
  resize: none; overflow-y: auto; min-height: 0;
  /* Высота по тексту силами браузера. JS-подгонка в app.js остается для тех,
     где свойства еще нет (Safari): она считает то же самое, но после кадра. */
  field-sizing: content; }
.mi-line .mi-title:hover { background: var(--fill); box-shadow: inset 0 0 0 1px rgba(17,21,31,.07); }
.mi-line .mi-title:focus { background: #fff; }
.mi-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mi-row .mi-who { flex: 1 1 150px; min-width: 0; }
.mi-row .mi-dept { flex: 1 1 130px; min-width: 0; }
.mi-row .mi-due { flex: 0 0 144px; }
.al-sel.sm { font-size: 12.5px; font-weight: 600; border-radius: 10px; padding: 8px 30px 8px 11px; }

/* Шаги живут внутри цели: отступ слева и полупрозрачная линия вместо рамки. */
.mi-steps { display: flex; flex-direction: column; gap: 9px; margin-left: 15px;
  padding-left: 16px; border-left: 1.5px solid var(--line-2); }
.mi-steps .mi-item { gap: 5px; }
.mi-steps .mi-title { font-size: 13px; font-weight: 500; letter-spacing: 0;
  padding: 9px 12px; border-radius: 10px; line-height: 1.4; }
.mi-steps .mi-skip { width: 28px; height: 28px; border-radius: 8px; }
.mi-nosteps { margin-left: 28px; font-size: 11.5px; color: var(--ink-3); }

.mi-skip { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  color: var(--ink-3); background: var(--fill); transition: color .15s, background .15s; }
.mi-skip:hover { color: var(--ink); background: #ECEEF1; }
.mi-made { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; height: 32px;
  border-radius: 9px; font-size: 11.5px; font-weight: 700; color: var(--green-ink); background: var(--green-soft); }

/* Вопросы на решение — не задачи, поэтому и выглядят иначе: без полей, тише. */
.mi-dec { padding: 13px 15px; border-radius: 14px; background: var(--fill);
  display: flex; flex-direction: column; gap: 7px; }
.mi-dec-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink); }
.mi-dec-h svg { color: var(--ink-2); }
.mi-dec ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.mi-dec-s { font-size: 11.5px; color: var(--ink-3); }

.mi-foot { align-items: center; }
.mi-count { margin-right: auto; font-size: 12px; font-weight: 600; color: var(--ink-2); }
/* Погашенная кнопка все равно читается: --ink-3 на --fill дает контраст 2:1,
   и главное действие экрана просто исчезало. */
.al-save.off { background: var(--fill); color: var(--ink-2); pointer-events: none; }

@media (max-width: 620px) {
  .mi-card { max-width: none; }
  .mi-stat { padding: 10px 16px 0; }
  /* На телефоне поля идут в столбец: три контрола в строку дают по 90px каждому,
     и имя исполнителя в них не читается. Сброс flex обязателен — в колонке
     flex-basis становится ВЫСОТОЙ, и селект вытягивается на пол-экрана. */
  .mi-row { flex-direction: column; }
  .mi-row > .mi-who, .mi-row > .mi-dept, .mi-row > .mi-due, .mi-row > .mi-link { flex: 0 0 auto; width: 100%; }
  /* На телефоне заголовок почти всегда идет в две строки. Держим место под них
     заранее: подгонка высоты скриптом промахивается, пока не устоялась ширина,
     и хвост фразы прячется под обрез — а проверять формулировки и есть смысл
     этого экрана. */
  .mi-line .mi-title { font-size: 14px; min-height: 62px; }
  .mi-steps .mi-line .mi-title { min-height: 56px; }
  .mi-steps { margin-left: 8px; padding-left: 10px; }
  .mi-nosteps { margin-left: 18px; }
}

/* ── ЛИДЫ: холодные контакты, с которыми пока говорит бот ──────────────────
   Решение Веры 20.08.2026 — свой раздел рядом с «Людьми». Строка отвечает на
   три вопроса: через какой канал пришел, зачем приходил, давно ли молчит.
   Компоненты те же, что в «Людях» (.trow, .t-cell, .list-tools) — новая тут
   только сетка колонок и пилюля канала. */
.pr-grid { grid-template-columns: 132px 1.5fr 1.2fr 104px 132px; }
.pr-ch { display: inline-flex; align-items: center; gap: 7px; align-self: center;
  font: 600 12px 'Manrope', sans-serif; color: var(--ink-2);
  background: var(--fill); border-radius: var(--r-pill); padding: 5px 11px; }
.pr-ch svg { width: 13px; height: 13px; color: var(--blue); }
.pr-ch.none { color: var(--ink-3); }
.pr-ch.none svg { color: var(--ink-3); }
.pr-why { align-self: center; font-size: 12.5px; color: var(--ink-2); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Тишина — слова («вчера», «3 дня»), а не число: выравниваем по левому краю,
   как обычный текст. Табличные цифры все равно нужны — «11 дней» и «3 дня» не
   должны плясать по ширине. */
.pr-age { align-self: center; font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.pr-age.cold { color: var(--amber-ink); }
.pr-act { align-self: center; justify-self: end; }
/* Кнопка есть в каждой строке, но по умолчанию тихая: восемнадцать одинаковых
   заполненных пилюль справа перетягивают экран на себя, а главное здесь — кто
   пришел и давно ли молчит. Наводишь на строку — кнопка проявляется. */
.pr-take { font: 600 12px 'Manrope', sans-serif; color: var(--ink-3);
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 13px; cursor: pointer; transition: .15s; white-space: nowrap; }
.pr-grid:hover .pr-take { color: var(--ink); background: var(--fill); border-color: transparent; }
.pr-take:hover, .pr-grid:hover .pr-take:hover,
.pr-take:focus-visible { color: #fff; background: var(--navy); border-color: var(--navy); }
.pr-take:disabled { opacity: .5; cursor: default; }
.pr-empty { padding: 64px 24px; text-align: center; color: var(--ink-3); }
.pr-empty svg { width: 26px; height: 26px; color: var(--line-2); }
.pr-et { margin-top: 14px; font: 700 15px 'Manrope', sans-serif; color: var(--ink);
  letter-spacing: -.01em; }
.pr-es { margin: 6px auto 0; max-width: 380px; font-size: 13px; line-height: 1.5;
  color: var(--ink-2); }
/* На телефоне .trow задает свою сетку с !important — перебиваем ею же, иначе
   строка лида разъедется на чужие три колонки. Канал и повод уходят: на узком
   экране важнее, кто это и давно ли молчит. */
@media (max-width: 960px) {
  .trow.pr-grid { grid-template-columns: 1fr 78px 108px !important; }
  .pr-take { color: var(--ink); background: var(--fill); border-color: transparent; }
  .pr-grid .pr-ch, .pr-grid .pr-hch { display: none; }
  .pr-take { padding: 7px 10px; }
}

/* ════ КАК РАБОТАТЬ — обучение сотрудника ════════════════════════════════════
   Один шаг на экран, слева маршрут. Экран читают один раз в жизни и потом
   изредка перечитывают, поэтому здесь плотность уступает ясности: строка текста
   шире обычной админской, воздуха между блоками больше. Это единственное место
   CRM, где так, и это осознанно.

   Картинки шага — схемы окна (см. gdWin в app.js), а не скриншоты: на настоящих
   экранах видны фамилии детей, а курс открыт всей команде. Цвета схем — те же
   токены, что у интерфейса, чтобы человек узнавал то, что видит вокруг. */
.gd { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 20px; align-items: start; }
.gd-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 18px 14px 14px; position: sticky; top: 14px; }
.gd-cap { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 8px; }
.gd-prog { padding: 12px 8px 14px; }
.gd-bar { height: 6px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; }
.gd-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--blue);
  transition: width .9s var(--ease); }
.gd-prog-n { margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.gd-prog-n b { color: var(--ink); font-weight: 700; }
.gd-route { display: flex; flex-direction: column; gap: 2px; }
.gd-r { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px;
  border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--ink-2);
  text-align: left; transition: .12s var(--ease); }
.gd-r:hover { background: var(--fill); color: var(--ink); }
.gd-r.on { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.gd-n { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 21px; height: 21px; border-radius: 50%; background: var(--fill); color: var(--ink-3);
  font-size: 11px; font-weight: 700; }
.gd-r.on .gd-n { background: var(--blue); color: #fff; }
.gd-r.done .gd-n { background: var(--green-soft); color: var(--green-ink); }
.gd-r.done { color: var(--ink); }
.gd-reset { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 12px;
  padding: 10px 8px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 500;
  color: var(--ink-3); transition: .12s; }
.gd-reset:hover { color: var(--blue); }

.gd-main { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden; }
.gd-step { padding: 30px 34px 26px; max-width: 720px; }
.gd-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
.gd-t { margin: 10px 0 0; font-size: 27px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.2; text-wrap: balance; }
.gd-lead { margin: 12px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }

/* Схема окна CRM. Рамка — не декор: она отделяет «нарисованное» от настоящего
   интерфейса вокруг, иначе человек пробует нажать на картинку. */
.gd-art { margin: 22px 0 0; padding: 16px; background: var(--fill); border: 1px solid var(--line);
  border-radius: 14px; max-width: 520px; }
.gd-art svg { display: block; width: 100%; height: auto; }
.gw-app { fill: var(--card); stroke: var(--line-2); }
.gw-side { fill: var(--fill); stroke: none; }
.gw-logo { fill: var(--ink-3); opacity: .45; }
.gw-it { fill: #E4E6EC; }
.gw-on { fill: var(--blue-tint); stroke: var(--blue); stroke-width: 1.2; }
.gw-row { fill: var(--fill); }
.gw-row-on { fill: var(--blue-tint); }
.gw-ptr { stroke: var(--blue); stroke-width: 1.1; stroke-dasharray: 3 3; }
.gw-lb { fill: var(--blue); font: 700 9px 'Manrope', sans-serif; letter-spacing: .02em; }
.gw-div { stroke: var(--line-2); stroke-width: 1; }
.gw-top { stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
.gw-ava { fill: var(--navy); }
.gw-dot { fill: var(--blue); }
.gw-dn { fill: #fff; font: 700 9px 'Manrope', sans-serif; text-anchor: middle; }
/* Схема расписания в обучении: те же четыре семейства чипов, что и в самом
   разделе, иначе картинка учит не тому экрану. */
.gw-free { fill: var(--green-soft); }
.gw-busy { fill: var(--blue-tint); }
.gw-meet { fill: var(--navy-soft); }
.gw-hh { fill: var(--ink-3); font: 600 6px 'Manrope', sans-serif; }
/* Легенда схемы: цифра на картинке и слово под ней — иначе схема остается
   красивым набором плашек, из которого человек ничего не узнает. */
.gd-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.gd-leg span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 500; color: var(--ink-2); }
.gd-leg i { display: inline-flex; align-items: center; justify-content: center; width: 17px;
  height: 17px; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal;
  font-size: 10px; font-weight: 700; }

/* Матрица в шаге про важность — та же сетка, что на настоящем экране задач. */
.gd-art-eis { padding: 14px; }
.gd-eis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gd-eq { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px; }
.gd-eq b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.gd-eq span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.gd-eq-a { background: var(--amber-soft); border-color: #EFDCBB; }
.gd-eq-a b { color: var(--amber-ink); }
.gd-eq-a span { color: var(--amber-ink); opacity: .8; }

.gd-do { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: gd; }
.gd-do li { counter-increment: gd; position: relative; padding: 0 0 0 34px; font-size: 14.5px;
  line-height: 1.6; color: var(--ink); }
.gd-do li + li { margin-top: 14px; }
.gd-do li::before { content: counter(gd); position: absolute; left: 0; top: 1px;
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--blue-tint); color: var(--blue);
  font-size: 11.5px; font-weight: 700; }

.gd-tip { display: flex; align-items: flex-start; gap: 9px; margin: 24px 0 0; padding: 14px 16px;
  background: var(--blue-tint); border: 1px solid #DCE7FF; border-radius: 14px;
  font-size: 13.5px; line-height: 1.55; color: var(--navy); }
.gd-tip svg { flex: none; margin-top: 2px; color: var(--blue); }

/* Живой блок шага «Уведомления»: настройка делается здесь, а не в другом окне. */
.gd-live { margin: 24px 0 0; padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; }
.gd-live.np-wait { opacity: .55; pointer-events: none; }
.gd-live-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px; }
.gd-live .np-seg { margin-bottom: 12px; }
.gd-st { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 500; }
.gd-st-ok { background: var(--green-soft); color: var(--green-ink); }
.gd-st-wait { background: var(--amber-soft); color: var(--amber-ink); }
.gd-st-off { background: var(--fill); color: var(--ink-2); }
.gd-live-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gd-hint { font-size: 12.5px; color: var(--ink-3); }

/* Футер липкий: шаг бывает длиннее экрана, и кнопка «дальше», уехавшая под сгиб,
   каждый раз стоит человеку лишней прокрутки. */
.gd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 34px; border-top: 1px solid var(--line); background: var(--card);
  position: sticky; bottom: 0; border-radius: 0 0 var(--r-xl) var(--r-xl); }

.gd-fin { padding: 44px 34px 40px; text-align: center; max-width: 620px; margin: 0 auto; }
.gd-fin-ic { display: inline-flex; align-items: center; justify-content: center; width: 60px;
  height: 60px; border-radius: 50%; background: var(--green-soft); color: var(--green-ink);
  margin-bottom: 18px; }
.gd-fin .gd-lead { margin-top: 12px; }
.gd-fin-a { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* .al-cancel родом из модалок и не рассчитан на иконку — иначе значок и подпись
   встают в две строки. */
.gd-fin-a .al-cancel, .gd-live-a .al-cancel { display: inline-flex; align-items: center; gap: 8px; }

/* Кнопка входа в курс живет в шапке «Задач» — тихий чип, не соперничающий с
   «Новой задачей». Счетчик показывает, сколько шагов осталось, и исчезает вместе
   с прохождением. */
.gd-btn { flex: none; align-self: center; background: var(--card); border-color: var(--line-2); }
.gd-btn:hover { background: var(--fill); }
/* «Пропустить» отвечает на вопрос «а если мне сейчас некогда»: значок-стрелка
   говорит, что это выход вперед, к работе, а не отказ от обучения. */
.gd-skip svg { transform: translateX(1px); }
.gd-btn-n { display: inline-flex; align-items: center; justify-content: center; min-width: 17px;
  height: 17px; padding: 0 5px; border-radius: var(--r-pill); background: var(--blue);
  color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; }

/* Телефон: маршрут уезжает наверх лентой — вертикальный список из девяти пунктов
   на 390px съедал бы первый экран целиком, и до самого шага человек не долистывал.
   Правила идут ПОСЛЕ базовых: специфичность та же, побеждает порядок. */
@media (max-width: 900px) {
  .gd { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gd-side { position: static; padding: 14px; }
  .gd-route { flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gd-route::-webkit-scrollbar { display: none; }
  .gd-r { width: auto; flex: none; max-width: 190px; padding: 8px 12px 8px 8px; border-radius: 999px;
    background: var(--fill); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gd-reset { margin-top: 10px; }
  .gd-step { padding: 22px 18px 20px; }
  .gd-t { font-size: 23px; }
  .gd-lead { font-size: 14.5px; }
  .gd-art { padding: 12px; }
  .gd-eis { grid-template-columns: 1fr; }
  .gd-do li { font-size: 14px; padding-left: 30px; }
  /* На телефоне полоса кнопок не липкая. .gd-main с overflow:hidden сам стал
     контекстом для sticky, поэтому bottom отсчитывался от низа карточки, а не
     экрана — и bottom:86px поднимал футер на 86px ВНУТРЬ контента, накрывая
     последний блок (его было не долистать). Статичный футер встает под контентом;
     от таббара его держит padding-bottom:92px у .app. */
  .gd-foot { padding: 14px 18px; position: static; }
  .gd-foot .bp { flex: 1; }
  .gd-fin { padding: 34px 18px 30px; }
  /* В шапке телефона от кнопки остается значок: подпись «Обучение по системе»
     отбирает половину строки у заголовка раздела. */
  .gd-btn span { display: none; }
  .gd-skip span { display: inline; }
}

/* ── Секция «Подача»: заявки в вузы (buildApplySection) ──────────────────────
   Плоско и плотно, как везде в CRM: белая карточка с бордером, чипы по формуле
   -soft/-ink, ни теней, ни стекла. Чек-лист документов — строки-кнопки: одно
   нажатие ведет документ от «ждем» к «собрано», отдельных контролов на каждую
   строку нет, иначе пакет из десяти позиций превращается в панель управления. */
.ap-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 16px 18px; margin-bottom: 14px; }
.ap-card__h { display: flex; align-items: flex-start; gap: 14px; }
.ap-card__b { flex: 1 1 auto; min-width: 0; }
.ap-uni { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.ap-card .ap-sub { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.ap-dl { flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 5px 10px;
  border-radius: var(--r-pill); background: var(--fill); color: var(--ink-2); }
.ap-dl.soon { background: var(--amber-soft); color: var(--amber-ink); }
.ap-dl.over { background: var(--red-soft); color: var(--red-ink); }
.ap-dl.done { background: var(--green-soft); color: var(--green-ink); }
.ap-dl.none { background: transparent; color: var(--ink-3); }

.ap-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ap-step { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); cursor: pointer;
  transition: color .12s cubic-bezier(.22,1,.36,1), background .12s cubic-bezier(.22,1,.36,1),
    border-color .12s cubic-bezier(.22,1,.36,1); }
.ap-step:hover { color: var(--blue); border-color: var(--blue); }
.ap-step.on { background: var(--blue); border-color: var(--blue); color: #fff; }

.ap-pack { display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-size: 12.5px; color: var(--ink-2); }
.ap-pack b { color: var(--ink); font-weight: 700; }
.ap-bar { flex: 1 1 auto; height: 5px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; }
.ap-bar i { display: block; height: 100%; background: var(--blue); transition: width .9s cubic-bezier(.22,1,.36,1); }

.ap-reqs { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ap-req { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff;
  cursor: pointer; font: inherit; transition: background .12s cubic-bezier(.22,1,.36,1); }
.ap-req:last-child { border-bottom: 0; }
.ap-req:hover { background: #FBFBFC; }
.ap-req__t { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink); }
.ap-req__t i { font-style: normal; color: var(--ink-3); }
.ap-req__s { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; padding: 4px 9px;
  border-radius: var(--r-pill); background: var(--fill); color: var(--ink-3); }
.ap-req__s.ok { background: var(--green-soft); color: var(--green-ink); }
.ap-req__s.go { background: var(--blue-tint); color: var(--blue); }
.ap-req__s.no { background: var(--red-soft); color: var(--red-ink); }

.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ap-grid label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.ap-grid input { display: block; width: 100%; margin-top: 5px; padding: 8px 11px;
  border: 1px solid var(--line-2); border-radius: 10px; background: #fff;
  font: inherit; font-size: 13px; color: var(--ink); }
.ap-grid input:focus { outline: none; border-color: var(--blue); }

.ap-sec-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ap-pass { flex: 1 1 180px; min-width: 150px; padding: 8px 11px; border: 1px solid var(--line-2);
  border-radius: 10px; font: inherit; font-size: 13px; }
.ap-pass:focus { outline: none; border-color: var(--blue); }
.ap-hint { font-size: 12px; color: var(--ink-3); }
.ap-cred { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--blue-tint);
  font-size: 13px; color: var(--navy); word-break: break-all; }
.ap-cred span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-2); }
.ap-empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  font-size: 13px; color: var(--ink-2); }
.ap-new { margin-top: 14px; }

@media (max-width: 720px) {
  .ap-grid { grid-template-columns: 1fr; }
}

/* ── Контрольные точки тьютора (секция «Точки» в карточке) ──────────────────
   Пять точек = пять денег. Якорь экрана один — сводка сверху; сами точки
   тихие, закрытая уходит в фон и перестает звать к действию. Чек-лист
   набран строками без рамок: рамка вокруг каждой строки превращает список
   в панель управления, а это обычный список дел. */
.cp-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; }
.cp-tile { background: var(--card); padding: 14px 16px; }
.cp-tile__l { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.cp-tile__v { margin-top: 6px; font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: -.03em; }
.cp-tile__s { margin-top: 3px; font-size: 12px; color: var(--ink-2); }

.cp-card { margin-top: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 16px 18px; }
.cp-card.done { background: #FCFCFD; border-color: var(--line-2); }
.cp-h { display: flex; align-items: flex-start; gap: 12px; }
.cp-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px;
  background: var(--blue-tint); color: var(--blue); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.cp-card.done .cp-n { background: var(--green-soft); color: var(--green-ink); }
.cp-hb { flex: 1 1 auto; min-width: 0; }
.cp-t { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.cp-s { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.cp-sum { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--ink); }

.cp-line { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.cp-line .cp-late { margin-left: 8px; padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--red-soft); color: var(--red-ink); font-weight: 600; font-size: 11.5px; }
.cp-dim { color: var(--ink-3); }
.cp-line .cp-dim { margin-left: 8px; }

.cp-plan { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 12px;
  margin-top: 12px; align-items: end; }
/* дата стоит одна, пока ее не двигали: вторая колонка остается пустой, но подпись
   про коридор срока под ней растягивается на всю ширину и читается строкой */
.cp-plan:not(.moved) { grid-template-columns: 170px minmax(0, 1fr); }
.cp-plan label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.cp-plan input[type="date"], .cp-plan input[type="text"], .cp-plan label input:not([type="checkbox"]) {
  display: block; width: 100%; margin-top: 5px; padding: 8px 11px; font: inherit;
  font-size: 13px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-2); border-radius: 10px; }
.cp-plan input:focus { outline: none; border-color: var(--blue); }
.cp-plan .cp-ext { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px;
  color: var(--ink-2); cursor: pointer; }
.cp-plan .cp-ext input { margin: 0; }
.cp-due { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); }

.cp-res { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cp-res span { font-size: 12px; color: var(--ink-2); }
.cp-res select { flex: 1 1 auto; padding: 8px 11px; font: inherit; font-size: 13px;
  color: var(--ink); background: var(--card); border: 1px solid var(--line-2);
  border-radius: 10px; }

.cp-items { margin-top: 12px; }
.cp-item { display: flex; align-items: flex-start; gap: 10px; width: 100%;
  text-align: left; padding: 8px 2px; background: none; border: 0;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.cp-item:last-child { border-bottom: 0; }
.cp-item:disabled { cursor: default; }
.cp-box { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px;
  border: 1.5px solid var(--line-2); display: flex; align-items: center;
  justify-content: center; color: #fff; transition: .15s; }
.cp-item:hover:not(:disabled) .cp-box { border-color: var(--blue); }
.cp-item.on .cp-box { background: var(--green); border-color: var(--green); }
.cp-item__t { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink); }
.cp-item.on .cp-item__t { color: var(--ink-2); }
.cp-item__w { flex: 0 0 auto; font-size: 11.5px; color: var(--ink-3); }

.cp-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; }
.cp-left, .cp-paid { font-size: 12.5px; color: var(--ink-2); }
.cp-paid { font-weight: 600; color: var(--green-ink); }
.cp-log { margin-top: 10px; padding: 8px 11px; border-radius: 10px;
  background: var(--amber-soft); color: var(--amber-ink); font-size: 12.5px; }

.cp-pend { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--line-2);
  border-radius: var(--r-lg); }
.cp-pend__h { font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.cp-pend__r { display: flex; align-items: baseline; gap: 8px; margin-top: 8px;
  font-size: 13px; color: var(--ink); }
.cp-pend__r span { font-size: 11.5px; color: var(--ink-3); }
.cp-pend__r i { font-style: normal; color: var(--ink-2); font-size: 12.5px; }
.cp-note { margin-top: 10px; font-size: 12px; color: var(--ink-3); }

@media (max-width: 720px) {
  .cp-board { grid-template-columns: 1fr; }
  .cp-plan { grid-template-columns: 1fr; }
  .cp-pend__r { flex-wrap: wrap; }
}

/* ── Академия тьютора ───────────────────────────────────────────────────────
   Обучающие курсы с аттестацией (renderAcademy в app.js). Как и «Обучение
   сотрудника» (.gd-*), это единственная зона CRM, где плотность уступает
   ясности: воздуха больше, экран уже, заголовок шага крупнее. Токены палитры
   те же, что во всей CRM; заданы локально на .academy, чтобы верстку курса
   можно было переносить целиком. Все классы под .academy, чтобы общие
   .h/.p/.card/.opt не пересекались с уроком. */
.academy {
  --ac-blue: #2F6BFF; --ac-blue-d: #1E50E6; --ac-blue-tint: #EAF0FF; --ac-navy: #1C2B4A;
  --ac-ink: #11151F; --ac-ink-2: #697086; --ac-ink-3: #A6ABB8;
  --ac-line: #EDEEF2; --ac-line-2: #E3E5EB; --ac-fill: #F5F6F9; --ac-card: #FFFFFF;
  --ac-green: #18A957; --ac-green-ink: #0E7C3F; --ac-green-soft: #E4F6EC;
  --ac-amber-ink: #9A5B12; --ac-amber-soft: #FBF0DD;
  --ac-red: #E5484D; --ac-red-soft: #FCEBEC;
  --ac-r-xl: 20px; --ac-r-lg: 14px; --ac-r-md: 12px; --ac-r-pill: 999px;
  --ac-ease: cubic-bezier(.22,1,.36,1);
  color: var(--ac-ink); font-feature-settings: 'tnum';
}
.academy .ac-cap { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-ink-3); }
.academy .ac-wrap { display: grid; grid-template-columns: 264px 1fr; gap: 18px; align-items: start; max-width: 1080px; }

.academy .ac-route { background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: var(--ac-r-xl); padding: 16px 14px; position: sticky; top: 16px; }
/* Заголовок программы — кнопка: на телефоне она открывает список уроков, на
   компьютере сворачивает его, когда мешает. Выглядит как подпись, поэтому
   рядом стрелка: без нее человек не понимает, что по ней можно нажать. */
.academy .ac-route-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: 2px 0 12px; padding: 4px; background: none; border: 0; border-radius: var(--ac-r-md);
  font: inherit; color: inherit; cursor: pointer; text-align: left; transition: .14s var(--ac-ease); }
.academy .ac-route-head:hover { background: var(--ac-fill); }
.academy .ac-route-head:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47,107,255,.12); }
.academy .ac-route-head .ac-prog { margin-left: auto; }
.academy .ac-fx { display: inline-flex; color: var(--ac-ink-3); transform: rotate(90deg);
  transition: transform .2s var(--ac-ease); }
.academy .ac-route.fold .ac-fx { transform: rotate(0deg); }
/* Материалы курса при свернутой программе остаются: это презентация и памятки,
   за ними человек заходит отдельно от уроков. */
.academy .ac-route.fold .ac-rlist { display: none; }
.academy .ac-route.fold .ac-mats { margin-top: 6px; border-top: 0; padding-top: 0; }
.academy .ac-prog { font-weight: 700; color: var(--ac-blue-d); font-size: 12.5px; }
.academy .ac-bar { height: 6px; background: var(--ac-fill); border-radius: var(--ac-r-pill); overflow: hidden; margin: 0 4px 14px; }
.academy .ac-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ac-blue), var(--ac-blue-d)); border-radius: var(--ac-r-pill); transition: width .9s var(--ac-ease); }
.academy .ac-course-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--ac-blue-tint); color: var(--ac-blue-d); font-weight: 600; font-size: 12px; padding: 6px 11px; border-radius: var(--ac-r-pill); margin: 0 4px 14px; }
.academy .ac-course-pill svg { width: 13px; height: 13px; }
.academy .ac-r { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: var(--ac-r-md); color: var(--ac-ink-2); font-weight: 500; position: relative; cursor: pointer; transition: .12s var(--ac-ease); }
.academy .ac-r:hover:not(.lock) { background: #FBFBFC; }
.academy .ac-r.active { background: var(--ac-blue-tint); color: var(--ac-ink); font-weight: 600; }
.academy .ac-r.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--ac-blue); }
.academy .ac-r.lock { color: var(--ac-ink-3); cursor: default; }
.academy .ac-num { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--ac-fill); color: var(--ac-ink-3); }
.academy .ac-num svg { width: 12px; height: 12px; }
.academy .ac-r.active .ac-num { background: var(--ac-blue); color: #fff; }
.academy .ac-r.done .ac-num { background: var(--ac-green-soft); color: var(--ac-green-ink); }
.academy .ac-r.ac-exam .ac-num { background: var(--ac-navy); color: #fff; }
.academy .ac-r.ac-exam.lock .ac-num { background: var(--ac-fill); color: var(--ac-ink-3); }
.academy .ac-lk { margin-left: auto; color: var(--ac-ink-3); display: inline-flex; }
.academy .ac-lk svg { width: 12px; height: 12px; }
.academy .ac-tl { font-size: 13px; line-height: 1.25; }

.academy .ac-stage { background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: var(--ac-r-xl); padding: 32px 40px 24px; min-height: 520px; display: flex; flex-direction: column; }
.academy .ac-stage-top { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.academy .ac-top-r { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* Проигрыватель слайда. Стоит в шапке сцены, потому что читает весь экран, а не
   отдельную реплику; тихий, чтобы не спорить с заголовком за внимание. */
.academy .ac-voice { display: flex; align-items: center; gap: 6px; }
.academy .ac-voice[hidden] { display: none; }
.academy .ac-rate { min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid var(--ac-line-2);
  border-radius: var(--ac-r-pill); background: var(--ac-card); font: 700 12px 'Manrope', sans-serif;
  color: var(--ac-ink-3); cursor: pointer; transition: .15s; font-variant-numeric: tabular-nums; }
.academy .ac-rate:hover { border-color: var(--ac-blue); color: var(--ac-blue-d); }
.academy .ac-dots { display: flex; gap: 6px; }
.academy .ac-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-line-2); transition: .25s var(--ac-ease); }
.academy .ac-dots i.on { background: var(--ac-blue); transform: scale(1.15); }
.academy .ac-dots i.past { background: var(--ac-blue-tint); }

.academy .ac-screen { flex: 1; animation: ac-fade .28s var(--ac-ease); max-width: 640px; }
@keyframes ac-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.academy .ac-eyebrow { margin-bottom: 10px; color: var(--ac-blue-d); }
.academy .ac-h { font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; margin: 0 0 14px; color: var(--ac-ink); }
.academy .ac-p { font-size: 15px; color: #2a2f3a; margin: 0 0 14px; max-width: 60ch; }
.academy .ac-p.lead { font-size: 16px; color: var(--ac-ink); }
.academy .ac-p b { font-weight: 700; }

.academy .ac-note { background: var(--ac-fill); border-radius: var(--ac-r-lg); padding: 16px 18px; margin: 18px 0; display: flex; gap: 13px; align-items: flex-start; }
.academy .ac-nic { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--ac-blue-tint); color: var(--ac-blue-d); display: grid; place-items: center; font-weight: 800; }
.academy .ac-note.warn .ac-nic { background: var(--ac-amber-soft); color: var(--ac-amber-ink); }
.academy .ac-nt { font-size: 14px; color: #333843; }
.academy .ac-nt b { color: var(--ac-ink); }

/* Реплика преподавателя под экраном. Намеренно НЕ похожа на плашку-примечание:
   без заливки, отделена волоском — это не еще одно правило, а человек, который
   объясняет своими словами то, что выше показано схемой. */
.academy .ac-say { display: flex; gap: 13px; align-items: flex-start; margin: 22px 0 0;
  padding-top: 18px; border-top: 1px solid var(--ac-line); }
.academy .ac-sic { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--ac-blue-tint);
  color: var(--ac-blue-d); display: grid; place-items: center; }
.academy .ac-st { font-size: 15px; line-height: 1.65; color: #4A5160; }
.academy .ac-st b { color: var(--ac-ink); font-weight: 700; }
.academy .ac-sp { margin: 0; }
.academy .ac-play { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 0 10px;
  border: 1px solid var(--ac-line-2); border-radius: var(--ac-r-pill); background: var(--ac-card);
  font: 600 13px 'Manrope', sans-serif; color: var(--ac-ink-2); cursor: pointer; transition: .15s; }
.academy .ac-play:hover { border-color: var(--ac-blue); color: var(--ac-blue-d); }
.academy .ac-play.on { background: var(--ac-blue-tint); border-color: transparent; color: var(--ac-blue-d); }

/* Итог урока «что сделать и где». Две строки на шаг: действие весом, адрес
   экрана тише и с иконкой — глаз находит нужную строку, не читая весь список. */
.academy .ac-how { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.academy .ac-how li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.academy .ac-hn { width: 26px; height: 26px; border-radius: 9px; background: var(--ac-blue-tint); color: var(--ac-blue-d);
  display: grid; place-items: center; font: 700 12px 'Manrope', sans-serif; font-variant-numeric: tabular-nums; }
.academy .ac-hb { display: grid; gap: 4px; padding-top: 3px; }
.academy .ac-hb b { font-size: 14.5px; font-weight: 700; color: var(--ac-ink); }
.academy .ac-hw { display: inline-flex; align-items: flex-start; gap: 7px; font-size: 13.5px; color: var(--ac-ink-3); }
.academy .ac-hw svg { width: 12px; height: 12px; flex: none; margin-top: 4px; color: var(--ac-blue); }

/* ── Академия: учебный калькулятор выплаты ───────────────────────────────────
   Поля тихие, единственный акцент на экране — итоговая сумма. Цифры табличные:
   человек двигает переключатели и смотрит, как меняется число, а прыгающая
   ширина разрядов мешает это заметить. */
.academy .ac-calc { margin: 18px 0 0; display: grid; gap: 14px; }
.academy .ac-cfs { border: 1px solid var(--ac-line); border-radius: var(--ac-r-lg); overflow: hidden; }
.academy .ac-cf { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 14px; border-bottom: 1px solid var(--ac-line); }
.academy .ac-cf:last-child { border-bottom: 0; }
.academy .ac-cfl { font-size: 13.5px; font-weight: 600; color: var(--ac-ink-2); }
/* Подпись поля в одну строку: иначе она ломается пополам, а переключатели
   рядом и так переносятся — получаются две рваные колонки. На телефоне поле
   складывается в две строки, и запрет переноса там снимается. */
@media (min-width: 561px) { .academy .ac-cfl { white-space: nowrap; } }
.academy .ac-seg { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.academy .ac-sg { border: 1px solid var(--ac-line-2); background: var(--ac-card); color: var(--ac-ink-2);
  font: 600 12.5px 'Manrope', sans-serif; padding: 6px 11px; border-radius: var(--ac-r-pill);
  cursor: pointer; transition: .14s var(--ac-ease); }
.academy .ac-sg:hover { border-color: var(--ac-blue); color: var(--ac-blue-d); }
.academy .ac-sg.on { background: var(--ac-blue-tint); border-color: var(--ac-blue); color: var(--ac-blue-d); }
.academy .ac-stp { display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--ac-line-2); border-radius: var(--ac-r-pill); }
.academy .ac-stp button { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer;
  color: var(--ac-ink-2); font: 600 15px 'Manrope', sans-serif; line-height: 1; border-radius: var(--ac-r-pill);
  transition: .12s var(--ac-ease); }
.academy .ac-stp button:hover { background: var(--ac-blue-tint); color: var(--ac-blue-d); }
.academy .ac-stp b { min-width: 30px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.academy .ac-clist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.academy .ac-clist li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 7px 2px; font-size: 13.5px; color: var(--ac-ink-2); }
.academy .ac-clist li.sum { margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--ac-line);
  color: var(--ac-ink); font-weight: 700; }
.academy .ac-chint { padding-top: 0; font-size: 12.5px; color: var(--ac-ink-3); }
.academy .ac-ctot { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--ac-navy); color: #fff; border-radius: var(--ac-r-lg); padding: 15px 18px; }
.academy .ac-ctot span { font-size: 13px; font-weight: 600; opacity: .7; }
.academy .ac-ctot b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .academy .ac-cf { flex-direction: column; align-items: flex-start; gap: 9px; }
  .academy .ac-seg { justify-content: flex-start; }
  .academy .ac-ctot b { font-size: 23px; }
}

.academy .ac-quote { border-left: 3px solid var(--ac-blue); padding: 4px 0 4px 16px; margin: 16px 0; font-size: 15px; color: #333843; }
.academy .ac-who { display: block; margin-top: 6px; }

/* Сетка, а не флекс в каждой строке: метка бывает и числом этапа, и словом
   («Стандарт», «Премиум»). В квадрате 22px слово не помещалось и наезжало на
   текст правой колонки. Общая колонка auto держит все метки одной ширины, и
   текст всех строк начинается по одной линии. */
.academy .ac-rules { list-style: none; padding: 0; margin: 16px 0; display: grid;
  grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; row-gap: 10px; }
.academy .ac-rules li { display: contents; font-size: 14.5px; color: #333843; }
.academy .ac-mk { min-width: 22px; height: 22px; padding: 0 6px; justify-self: start; border-radius: 7px; background: var(--ac-blue-tint); color: var(--ac-blue-d); display: grid; place-items: center; font-weight: 800; font-size: 12px; margin-top: 1px; }
.academy .ac-rules.good .ac-mk { background: var(--ac-green-soft); color: var(--ac-green-ink); }
.academy .ac-rules.no .ac-mk { background: var(--ac-red-soft); color: var(--ac-red); }
.academy .ac-rules li b { font-weight: 700; color: var(--ac-ink); }

.academy .ac-pay { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.academy .ac-pay li { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--ac-fill); border-radius: var(--ac-r-md); padding: 12px 16px; font-size: 14.5px; color: #333843; }
.academy .ac-amt { font-weight: 700; color: var(--ac-ink); white-space: nowrap; }

/* Разбивка ставки по пунктам чек-листа: полный чек-лист = полная ставка, у каждого
   пункта своя цена. Три группы услуг, внутри плотно, между группами воздуха больше. */
.academy .ac-deduct { display: flex; flex-direction: column; gap: 14px; margin: 18px 0; }
.academy .ac-dgrp { background: var(--ac-fill); border-radius: var(--ac-r-lg); padding: 15px 17px 8px; }
.academy .ac-dhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 11px; }
.academy .ac-dname { font-weight: 700; color: var(--ac-ink); font-size: 15px; letter-spacing: -.01em; }
.academy .ac-drate { font-weight: 700; color: var(--ac-blue-d); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.academy .ac-dlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.academy .ac-dlist li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; font-size: 14px; color: #333843; border-top: 1px solid var(--ac-line); }
.academy .ac-dlist li:first-child { border-top: 0; }
.academy .ac-damt { font-weight: 600; color: var(--ac-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.academy .ac-dtot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 2px; padding: 11px 0 6px; border-top: 1.5px solid var(--ac-line-2); font-weight: 700; color: var(--ac-ink); font-size: 14.5px; font-variant-numeric: tabular-nums; }

.academy .ac-qlead { font-size: 15px; color: var(--ac-ink); margin: 0 0 4px; }
.academy .ac-opts { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 8px; }
.academy .ac-opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; cursor: pointer; background: var(--ac-card); border: 1px solid var(--ac-line-2); border-radius: var(--ac-r-lg); padding: 14px 16px; font: inherit; color: var(--ac-ink); transition: .14s var(--ac-ease); }
.academy .ac-opt:hover:not(:disabled) { border-color: var(--ac-blue); background: #FCFCFE; }
.academy .ac-key { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--ac-fill); color: var(--ac-ink-2); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; transition: .14s; }
.academy .ac-ot { font-size: 14.5px; line-height: 1.35; padding-top: 2px; }
.academy .ac-opt:disabled { cursor: default; }
.academy .ac-opt.correct { border-color: var(--ac-green); background: var(--ac-green-soft); }
.academy .ac-opt.correct .ac-key { background: var(--ac-green); color: #fff; }
.academy .ac-opt.wrong { border-color: var(--ac-red); background: var(--ac-red-soft); }
.academy .ac-opt.wrong .ac-key { background: var(--ac-red); color: #fff; }
.academy .ac-opt.dim { opacity: .5; }

/* Иллюстрация экрана: полоса под заголовком. Кадр обрезается по центру, высота
   фиксированная — иначе картинки разной пропорции ломают ритм урока. */
.academy .ac-ill { margin: 0 0 20px; border-radius: var(--ac-r-lg); overflow: hidden;
  background: var(--ac-fill); border: 1px solid var(--ac-line); }
.academy .ac-ill img { display: block; width: 100%; height: 180px; object-fit: cover; object-position: center 45%; }
@media (max-width: 720px) { .academy .ac-ill img { height: 136px; } }

/* ── Тренажеры урока ──────────────────────────────────────────────────────────
   Собери по порядку, соедини пары, переверни карточку. Рецепты общие с уроком:
   та же рамка, та же зеленая «верно» и амбер «мимо», никаких новых цветов.
   Ошибка не красит пол-экрана красным — коротко вздрагивает элемент, который
   нажали: это тренажер, человек тут и должен ошибаться. */
.academy .ac-order { margin-top: 18px; }
.academy .ac-otop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.academy .ac-oreset { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 2px 4px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ac-ink-3); cursor: pointer; transition: .14s var(--ac-ease); }
.academy .ac-oreset:hover { color: var(--ac-blue-d); }
.academy .ac-oreset svg { width: 12px; height: 12px; }
.academy .ac-ochips { display: flex; flex-wrap: wrap; gap: 8px; }
.academy .ac-ochip { background: var(--ac-card); border: 1px solid var(--ac-line-2); border-radius: var(--ac-r-pill);
  padding: 9px 15px; font: inherit; font-size: 13.5px; color: var(--ac-ink); cursor: pointer; transition: .14s var(--ac-ease); }
.academy .ac-ochip:hover:not(:disabled) { border-color: var(--ac-blue); color: var(--ac-blue-d); }
.academy .ac-ochip:disabled { cursor: default; }
.academy .ac-ochip.set { opacity: .32; border-style: dashed; }
/* Собрано — ряд исходных чипов убираем: он отработал, а пустая серая полоса
   над готовым ответом читается как недоделка. */
.academy .ac-order.done .ac-otop, .academy .ac-order.done .ac-ochips { display: none; }
.academy .ac-ochip.bad { border-color: var(--ac-red); color: var(--ac-red); background: var(--ac-red-soft);
  animation: ac-shake .4s var(--ac-ease); }
.academy .ac-oslots { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.academy .ac-oslot { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px;
  border: 1px dashed var(--ac-line-2); border-radius: var(--ac-r-md); background: var(--ac-fill);
  font-size: 14px; color: var(--ac-ink); transition: .2s var(--ac-ease); }
.academy .ac-oslot.on { border-style: solid; border-color: var(--ac-line); background: var(--ac-card); }
.academy .ac-on { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; background: var(--ac-card); color: var(--ac-ink-3); }
.academy .ac-oslot.on .ac-on { background: var(--ac-blue-tint); color: var(--ac-blue-d); }
.academy .ac-order.done .ac-oslot.on .ac-on { background: var(--ac-green-soft); color: var(--ac-green-ink); }
.academy .ac-ot2 { min-width: 0; }

.academy .ac-match { margin-top: 18px; }
.academy .ac-mcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.academy .ac-mcol { display: flex; flex-direction: column; gap: 8px; }
.academy .ac-mcol > .ac-cap { margin-bottom: 2px; }
.academy .ac-mrow { text-align: left; background: var(--ac-card); border: 1px solid var(--ac-line-2);
  border-radius: var(--ac-r-md); padding: 12px 14px; font: inherit; font-size: 13.5px; line-height: 1.4;
  color: var(--ac-ink); cursor: pointer; transition: .14s var(--ac-ease); }
.academy .ac-mrow:hover:not(:disabled) { border-color: var(--ac-blue); }
.academy .ac-mrow.pick { border-color: var(--ac-blue); background: var(--ac-blue-tint); }
.academy .ac-mrow.hit { border-color: transparent; background: var(--ac-green-soft); color: var(--ac-green-ink);
  cursor: default; }
.academy .ac-mrow.bad { border-color: var(--ac-red); background: var(--ac-red-soft); animation: ac-shake .4s var(--ac-ease); }

.academy .ac-flips { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; }
.academy .ac-flip { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; perspective: 900px; height: 138px; }
.academy .ac-fin { position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .5s var(--ac-ease); }
.academy .ac-flip.on .ac-fin { transform: rotateY(180deg); }
.academy .ac-fface, .academy .ac-fback { position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 7px; text-align: left;
  border-radius: var(--ac-r-lg); padding: 16px 18px; }
.academy .ac-fface { background: var(--ac-blue-tint); border: 1px solid #DCE6FF; }
.academy .ac-fface b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ac-ink); }
.academy .ac-fface small { font-size: 11.5px; color: var(--ac-blue-d); }
.academy .ac-fback { transform: rotateY(180deg); background: var(--ac-card); border: 1px solid var(--ac-line-2);
  font-size: 13.5px; line-height: 1.45; color: var(--ac-ink-2); overflow: auto; }
.academy .ac-fback i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ac-ink-3); }
.academy .ac-flip:hover .ac-fface { border-color: #C9D9FF; }

@keyframes ac-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); }
  60% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .academy .ac-ochip.bad, .academy .ac-mrow.bad { animation: none; }
  .academy .ac-fin { transition: none; }
}
@media (max-width: 720px) {
  .academy .ac-mcols { grid-template-columns: 1fr; gap: 10px; }
}

.academy .ac-fb { display: none; margin-top: 16px; border-radius: var(--ac-r-lg); padding: 15px 17px; font-size: 14.5px; animation: ac-fade .28s var(--ac-ease); }
.academy .ac-fb.show { display: block; }
.academy .ac-fb.ok { background: var(--ac-green-soft); color: #155f38; }
.academy .ac-fb.no { background: var(--ac-amber-soft); color: var(--ac-amber-ink); }
.academy .ac-fb b { font-weight: 700; }

.academy .ac-task { background: var(--ac-fill); border-radius: var(--ac-r-lg); padding: 18px; margin: 16px 0; }
.academy .ac-task p { margin: 0 0 12px; font-size: 14px; color: #333843; }
.academy .ac-ta { width: 100%; min-height: 96px; resize: vertical; border: 1px solid var(--ac-line-2); border-radius: var(--ac-r-md); padding: 11px 13px; font: inherit; font-size: 14px; color: var(--ac-ink); background: var(--ac-card); transition: .14s; }
.academy .ac-ta:focus { outline: none; border-color: var(--ac-blue); box-shadow: 0 0 0 3px rgba(47,107,255,.1); }
.academy .ac-chkline { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; color: #333843; margin-top: 4px; }
.academy .ac-chkline input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ac-blue); flex: none; }
.academy .ac-upl { display: inline-flex; align-items: center; gap: 8px; background: var(--ac-card); border: 1px dashed var(--ac-line-2); border-radius: var(--ac-r-md); padding: 10px 14px; font-size: 13.5px; color: var(--ac-ink-2); cursor: pointer; transition: .14s; }
.academy .ac-upl:hover { border-color: var(--ac-blue); color: var(--ac-blue-d); }
.academy .ac-upl.done { border-style: solid; border-color: var(--ac-green); background: var(--ac-green-soft); color: var(--ac-green-ink); }
.academy .ac-tg { display: flex; width: fit-content; align-items: center; gap: 8px; background: var(--ac-blue); color: #fff; border-radius: var(--ac-r-md); padding: 10px 15px; font-size: 13.5px; font-weight: 600; text-decoration: none; margin: 0 0 10px; transition: .14s; }
.academy .ac-tg:hover { background: var(--ac-blue-d); }
.academy .ac-tg svg { flex: none; }

.academy .ac-pick { display: flex; gap: 12px; margin: 14px 0 6px; flex-wrap: wrap; }
.academy .ac-payopt { flex: 1; min-width: 190px; border: 1px solid var(--ac-line-2); border-radius: var(--ac-r-lg); padding: 15px 16px; cursor: pointer; transition: .14s var(--ac-ease); background: var(--ac-card); }
.academy .ac-payopt:hover { border-color: var(--ac-blue); }
.academy .ac-payopt.sel { border-color: var(--ac-blue); background: var(--ac-blue-tint); }
.academy .ac-pt { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.academy .ac-pd { font-size: 13px; color: var(--ac-ink-2); margin-top: 4px; }
.academy .ac-rd { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ac-line-2); margin-left: auto; flex: none; }
.academy .ac-payopt.sel .ac-rd { border-color: var(--ac-blue); background: radial-gradient(circle, var(--ac-blue) 0 4px, transparent 5px); }

.academy .ac-fin { text-align: center; max-width: 540px; margin: auto; padding: 14px 0; }
.academy .ac-seal { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: var(--ac-green-soft); color: var(--ac-green); animation: ac-pop .5s var(--ac-ease); }
.academy .ac-seal svg { width: 32px; height: 32px; }
@keyframes ac-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.academy .ac-fin .ac-h { font-size: 25px; }
.academy .ac-cert { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; background: var(--ac-fill); border-radius: var(--ac-r-pill); padding: 9px 18px; font-weight: 600; font-size: 13.5px; color: var(--ac-navy); }
.academy .ac-cert svg { width: 15px; height: 15px; }

.academy .ac-foot { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ac-line); }
.academy .ac-btn { font: inherit; font-weight: 600; font-size: 14px; border-radius: 11px; padding: 11px 20px; cursor: pointer; border: 1px solid transparent; transition: .14s var(--ac-ease); }
.academy .ac-btn.pri { background: var(--ac-blue); color: #fff; }
.academy .ac-btn.pri:hover:not(:disabled) { background: var(--ac-blue-d); }
.academy .ac-btn.pri:disabled { background: var(--ac-line-2); color: var(--ac-ink-3); cursor: default; }
.academy .ac-btn.ghost { background: var(--ac-card); border-color: var(--ac-line-2); color: var(--ac-ink-2); }
.academy .ac-btn.ghost:hover { border-color: var(--ac-ink-3); color: var(--ac-ink); }
.academy .ac-step-lab { margin-left: auto; color: var(--ac-ink-3); font-weight: 600; font-size: 12.5px; }

@media (max-width: 820px) {
  .academy .ac-wrap { grid-template-columns: 1fr; gap: 14px; }
  .academy .ac-route { position: static; padding: 13px 12px; }
  .academy .ac-stage { padding: 22px 18px 18px; min-height: 0; }
  .academy .ac-h { font-size: 23px; }
  .academy .ac-fin .ac-h { font-size: 22px; }
  /* Шапка сцены не сжимается ниже своего содержимого: название урока, кнопка
     чтения и точки шагов — все три с минимальной шириной. На узком экране их
     сумма шире карточки, и карточка уезжала за край вместе со всем текстом
     (Павел 15.09.2026: «с телефона все съезжает»). Поэтому переносим строку. */
  .academy .ac-stage-top { flex-wrap: wrap; row-gap: 10px; }
  .academy .ac-dots { flex-wrap: wrap; }
}

/* На телефоне точки шагов убираем совсем: место они занимают больше, чем кнопка
   чтения, а тот же «Шаг 6 из 11» написан словами внизу экрана. */
@media (max-width: 560px) {
  .academy .ac-dots { display: none; }
}

.academy .ac-dl-wrap { margin-top: 18px; }
.academy a.ac-dl { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.academy a.ac-dl svg { width: 15px; height: 15px; }

/* Материалы для скачивания в сайдбаре курса — доступны всегда, всем тьюторам. */
.academy .ac-mats { margin: 16px 4px 2px; padding-top: 14px; border-top: 1px solid var(--ac-line);
  display: flex; flex-direction: column; gap: 4px; }
.academy .ac-mats .ac-cap { margin-bottom: 4px; }
.academy a.ac-mat { display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--ac-ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.25;
  padding: 8px 9px; border-radius: var(--ac-r-md); transition: .14s var(--ac-ease); }
.academy a.ac-mat:hover { background: var(--ac-fill); color: var(--ac-blue-d); }
.academy a.ac-mat svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ac-blue-d); }

/* ── Академия: витрина курсов ────────────────────────────────────────────────
   Курсов стало четыре, и открываются они по роли. Карточка отвечает на три
   вопроса сразу: чей это курс, о чем он и сколько пройдено. */
.academy .ac-home { max-width: 920px; }
.academy .ac-home-head { margin: 2px 0 22px; }
.academy .ac-home-head .ac-h { font-size: 30px; margin-bottom: 8px; }
.academy .ac-home-head .ac-p { max-width: 52ch; }
/* Дерево ролей. Провода те же, что в дереве продуктов (.po-tree): один
   рецепт связи на всю CRM. Ветка сворачивается и помнит это по человеку —
   тьютору незачем каждый день видеть чужой курс продаж. */
.academy .ac-tree { --ac-wire: var(--wire); display: flex; flex-direction: column; gap: 8px; }
.academy .ac-bnode { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: var(--ac-fill); border: 1px solid transparent; border-radius: var(--ac-r-lg);
  padding: 11px 14px; font: inherit; color: var(--ac-ink); cursor: pointer; transition: .14s var(--ac-ease); }
.academy .ac-bnode:hover { background: #FBFBFC; border-color: #CFE0FF; }
.academy .ac-bt { flex: 1; min-width: 0; }
.academy .ac-bt b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.academy .ac-bt small { display: block; margin-top: 2px; font-size: 12px; color: var(--ac-ink-3); }
.academy .ac-bpass { flex: none; font-size: 12px; font-weight: 600; color: var(--ac-ink-2); }
.academy .ac-bnode .ac-seal-sm { margin-left: 0; }
.academy .ac-bx { flex: none; color: var(--ac-ink-3); display: inline-flex; transform: rotate(90deg);
  transition: transform .2s var(--ac-ease); }
.academy .ac-branch.off .ac-bx { transform: rotate(0deg); }
/* Провод ветки идет от первой буквы названия роли, отвод упирается в карточку. */
.academy .ac-bkids { margin-left: 15px; padding: 10px 0 6px 18px; border-left: 1px solid var(--ac-wire); }
.academy .ac-branch.off .ac-bkids { display: none; }
.academy .ac-cards { display: grid; gap: 10px; }
.academy .ac-card { position: relative; background: var(--ac-card); border: 1px solid var(--ac-line);
  border-radius: var(--ac-r-lg); padding: 15px 18px; cursor: pointer;
  display: grid; grid-template-columns: 1fr 208px; align-items: center; gap: 24px;
  transition: .16s var(--ac-ease); }
.academy .ac-card::before { content: ''; position: absolute; left: -18px; top: 50%; width: 18px; height: 1px;
  background: var(--ac-wire); }
.academy .ac-card:hover { border-color: #CFE0FF; background: #FBFBFC; }
.academy .ac-card:focus-visible { outline: none; border-color: var(--ac-blue);
  box-shadow: 0 0 0 3px rgba(47,107,255,.12); }
.academy .ac-bnode:focus-visible { outline: none; border-color: var(--ac-blue);
  box-shadow: 0 0 0 3px rgba(47,107,255,.12); }
.academy .ac-card.off { cursor: default; opacity: .55; }
.academy .ac-card.off:hover { background: var(--ac-card); border-color: var(--ac-line); }
.academy .ac-card-l { min-width: 0; }
.academy .ac-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.academy .ac-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ac-blue-d); background: var(--ac-blue-tint); border-radius: var(--ac-r-pill); padding: 4px 10px; }
.academy .ac-seal-sm { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--ac-green-ink); }
.academy .ac-seal-sm svg { width: 13px; height: 13px; }
.academy .ac-tag.soft { color: var(--ac-ink-2); background: var(--ac-fill); }
.academy .ac-card-h { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 5px; color: var(--ac-ink); }
.academy .ac-card-p { font-size: 13px; line-height: 1.45; color: var(--ac-ink-2); margin: 0; }
.academy .ac-card-r { min-width: 0; }
.academy .ac-card-bar { height: 5px; background: var(--ac-fill); border-radius: var(--ac-r-pill); overflow: hidden; margin-bottom: 9px; }
.academy .ac-card-bar > i { display: block; height: 100%; background: var(--ac-blue); border-radius: var(--ac-r-pill); transition: width .9s var(--ac-ease); }
.academy .ac-card.done .ac-card-bar > i { background: var(--ac-green); }
.academy .ac-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; white-space: nowrap; }
.academy .ac-card-go { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: var(--ac-blue-d); }
.academy .ac-card-go svg { width: 12px; height: 12px; transition: transform .14s var(--ac-ease); }
.academy .ac-card:hover .ac-card-go svg { transform: translateX(2px); }
.academy .ac-card.done .ac-card-go { color: var(--ac-green-ink); }
.academy .ac-empty { text-align: center; max-width: 440px; margin: 60px auto; color: var(--ac-ink-3); }
.academy .ac-empty svg { color: var(--ac-line-2); margin-bottom: 14px; }
.academy .ac-back-all { display: flex; align-items: center; gap: 7px; background: none; border: 0; padding: 4px 4px 12px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ac-ink-2); cursor: pointer; transition: .14s; }
.academy .ac-back-all:hover { color: var(--ac-blue-d); }
.academy .ac-back-all svg { width: 13px; height: 13px; transform: scaleX(-1); }

/* ── Снимок экрана ───────────────────────────────────────────────────────────
   Пока файла нет, на месте картинки стоит схема тех же подписей: она честнее
   пустого места и меняется на снимок без правки урока. */
.academy .ac-shot { margin: 16px 0; border-radius: var(--ac-r-lg); overflow: hidden; border: 1px solid var(--ac-line-2); }
.academy .ac-shot img { display: block; width: 100%; cursor: zoom-in; }
/* Снимок во весь экран. Живет поверх всего и вне .academy: его контейнер — body,
   иначе колонка урока обрезала бы картинку по своей ширине. */
.ac-zoom { position: fixed; inset: 0; z-index: 140; background: rgba(17, 21, 31, .86);
  display: grid; place-items: center; padding: 28px; overflow: auto; cursor: zoom-out;
  animation: acZoomIn .16s ease-out; }
.ac-zoom img { max-width: min(1680px, 96vw); width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.ac-zx { position: fixed; top: 20px; right: 22px; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ac-zx:hover { background: rgba(255, 255, 255, .28); }
@keyframes acZoomIn { from { opacity: 0; } to { opacity: 1; } }
.academy .ac-shot figcaption { padding: 8px 12px; background: var(--ac-fill); }
.academy .ac-shot-soon { position: relative; margin: 16px 0; border-radius: var(--ac-r-lg);
  border: 1px dashed var(--ac-line-2); background: var(--ac-fill); padding: 34px 18px 18px; }
.academy .ac-badge { display: inline-block; margin-bottom: 12px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ac-amber-ink);
  background: var(--ac-amber-soft); border-radius: var(--ac-r-pill); padding: 4px 10px; }
/* В схеме экрана метка садится в угол рамки, в остальных местах идет строкой. */
.academy .ac-shot-soon .ac-badge { position: absolute; top: 12px; left: 14px; margin: 0; }
.academy .ac-frame { display: flex; flex-wrap: wrap; gap: 8px; }
.academy .ac-fbox { display: inline-flex; align-items: center; gap: 7px; background: var(--ac-card);
  border: 1px solid var(--ac-line); border-radius: var(--ac-r-md); padding: 9px 13px;
  font-size: 12.5px; font-weight: 600; color: var(--ac-ink-2); }
.academy .ac-fbox i { font-style: normal; width: 18px; height: 18px; flex: none; border-radius: 6px;
  background: var(--ac-blue-tint); color: var(--ac-blue-d); display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; }
.academy .ac-pins { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 9px; }
.academy .ac-pins li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: #333843; }
.academy .ac-pins li b { font-weight: 700; color: var(--ac-ink); }
.academy .ac-pin { min-width: 22px; height: 22px; flex: none; padding: 0 5px; border-radius: 7px;
  background: var(--ac-navy); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 11px; margin-top: 1px; }

/* Видеоурок: запись живой встречи. Темная плашка-кнопка — единственный якорь
   экрана, под ней код доступа и указатель тем: по нему человек возвращается в
   нужную минуту, а не пересматривает два часа. */
.academy .ac-vid { margin: 16px 0; }
.academy .ac-vid-box { position: relative; border-radius: var(--ac-r-lg); overflow: hidden;
  background: var(--ac-navy); aspect-ratio: 16 / 9; }
.academy .ac-vid-el { display: block; width: 100%; height: 100%; background: #000; }
.academy .ac-vid-wait { position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; text-align: center; font-size: 13.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .72); pointer-events: none; }
.academy .ac-vid-wait[hidden] { display: none; }
.academy .ac-vid-meta { margin-top: 8px; font-size: 12.5px; color: var(--ac-ink-3); }
.academy .ac-vid-ch { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 2px; }
.academy .ac-vch { display: flex; gap: 12px; width: 100%; padding: 7px 10px; border: 0;
  border-radius: var(--ac-r-md); background: none; font: inherit; font-size: 13.5px;
  line-height: 1.45; color: #333843; text-align: left; cursor: pointer;
  transition: background .15s var(--ac-ease); }
.academy .ac-vch:hover { background: var(--ac-blue-tint); }
.academy .ac-vch-t { flex: none; min-width: 54px; font-weight: 700; color: var(--ac-blue-d);
  font-variant-numeric: tabular-nums; }
.academy .ac-vid-ch.hrs .ac-vch-t { min-width: 68px; }
.academy .ac-vid-deck { display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 13px 16px; border-radius: var(--ac-r-md); background: var(--ac-fill);
  color: inherit; text-decoration: none; transition: background .15s var(--ac-ease); }
.academy .ac-vid-deck:hover { background: var(--ac-line); }
.academy .ac-vid-deck > span { display: grid; gap: 1px; margin-right: auto; min-width: 0; }
.academy .ac-vid-deck b { font-size: 14px; font-weight: 650; }
.academy .ac-vid-deck i { font-style: normal; font-size: 12.5px; color: var(--ac-ink-3); }
.academy .ac-vid-deck svg { flex: none; color: var(--ac-blue-d); }

/* Задание в уроке: действие в системе, не вопрос. */
.academy .ac-do { position: relative; margin: 16px 0; }
.academy .ac-do .ac-chkline { margin-top: 14px; padding: 12px 14px; background: var(--ac-fill); border-radius: var(--ac-r-md); }

/* Подпись документа. Пока текста нет, экран говорит об этом прямо и не
   изображает подписанное. */
.academy .ac-doc { margin: 16px 0; border: 1px solid var(--ac-line-2); border-radius: var(--ac-r-lg); padding: 18px; }
.academy .ac-doc-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px;
  color: var(--ac-ink); margin-bottom: 12px; }
.academy .ac-doc-head svg { color: var(--ac-blue-d); flex: none; }
.academy .ac-doc-soon { background: var(--ac-amber-soft); color: var(--ac-amber-ink); border-radius: var(--ac-r-md);
  padding: 13px 15px; font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; }
.academy .ac-doc-soon b { color: inherit; }

/* ── Этап пути ученика ───────────────────────────────────────────────────────
   Один экран отвечает на четыре вопроса: когда, кто что делает, чем отличаются
   тарифы и по какому признаку этап закрыт. Якорь экрана — колонки ролей. */
.academy .ac-stage { margin: 16px 0; }
.academy .ac-smetas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.academy .ac-smeta { display: inline-flex; flex-direction: column; gap: 2px; background: var(--ac-fill);
  border-radius: var(--ac-r-md); padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--ac-ink); }
.academy .ac-smeta i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ac-ink-3); }
.academy .ac-smeta.pt { background: var(--ac-blue-tint); }
.academy .ac-smeta.pt i { color: var(--ac-blue-d); }
.academy .ac-scols { display: grid; grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: 10px; }
.academy .ac-scol { background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: var(--ac-r-lg); padding: 14px 15px; }
.academy .ac-scol-h { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--ac-ink-3); margin-bottom: 9px; }
.academy .ac-scol ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.academy .ac-scol li { position: relative; padding-left: 15px; font-size: 13.5px; line-height: 1.45; color: #333843; }
.academy .ac-scol li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--ac-line-2); }
.academy .ac-tars { margin-top: 14px; }
.academy .ac-tars ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.academy .ac-tar { display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; line-height: 1.45;
  color: #333843; background: var(--ac-fill); border-radius: var(--ac-r-md); padding: 10px 13px; }
.academy .ac-tar-n { flex: none; width: 108px; font-weight: 700; color: var(--ac-ink); }
.academy .ac-tar.prem { background: var(--ac-blue-tint); }
.academy .ac-tar.prem .ac-tar-n { color: var(--ac-blue-d); }
.academy .ac-sdl { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13.5px;
  font-weight: 600; color: var(--ac-amber-ink); background: var(--ac-amber-soft);
  border-radius: var(--ac-r-md); padding: 11px 14px; }
.academy .ac-sdl svg { flex: none; }
.academy .ac-sdone { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ac-green-ink);
  background: var(--ac-green-soft); border-radius: var(--ac-r-md); padding: 11px 14px; }
.academy .ac-sdone b { color: inherit; }

/* Три тарифа рядом. Премиум выделен, потому что на диагностике идем сверху вниз. */
.academy .ac-tcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 10px; margin: 16px 0; }
.academy .ac-tcard { display: flex; flex-direction: column; border: 1px solid var(--ac-line); border-radius: var(--ac-r-lg); padding: 16px; background: var(--ac-card); }
.academy .ac-tcard.accent { border-color: var(--ac-blue); box-shadow: inset 0 0 0 1px var(--ac-blue); }
.academy .ac-tname { font-size: 15px; font-weight: 700; color: var(--ac-ink); }
.academy .ac-tprice { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--ac-blue-d); margin: 2px 0 8px; }
.academy .ac-tpos { font-size: 13px; line-height: 1.45; color: var(--ac-ink-2); margin-bottom: 11px; }
.academy .ac-tlist { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.academy .ac-tlist li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.45; color: #333843; }
.academy .ac-tlist li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--ac-green); font-weight: 700; }
.academy .ac-tends { margin-top: auto; border-top: 1px solid var(--ac-line); padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--ac-ink); }
.academy .ac-tends i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ac-ink-3); margin-bottom: 3px; }

/* Чек-лист этапа: отмечается руками прямо в уроке, счетчик показывает объем. */
.academy .ac-chk { margin: 16px 0; border: 1px solid var(--ac-line-2); border-radius: var(--ac-r-lg); padding: 14px 16px; }
.academy .ac-chk.full { border-color: var(--ac-green); background: var(--ac-green-soft); }
.academy .ac-chk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.academy .ac-chk-n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ac-blue-d); }
.academy .ac-chk.full .ac-chk-n { color: var(--ac-green-ink); }
.academy .ac-chk-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.academy .ac-chk-list .ac-chkline { padding: 9px 2px; font-size: 14px; }

/* Обстановка кейса перед вопросом. */
.academy .ac-sit { border-left: 3px solid var(--ac-line-2); padding-left: 16px; margin: 0 0 16px; }
.academy .ac-sit .ac-p { margin: 0 0 8px; }
.academy .ac-sit .ac-p:last-child { margin-bottom: 0; }

/* Примеры живой речи бывают в несколько реплик — переносы строк значимы. */
.academy .ac-quote { white-space: pre-line; }

@media (max-width: 820px) {
  .academy .ac-cards { grid-template-columns: 1fr; }
  .academy .ac-home-head .ac-h { font-size: 24px; }
  /* Телефон: карточка курса в одну колонку, провод короче — иначе описание
     ужимается до трех слов в строке, а прогресс наезжает на текст. */
  .academy .ac-card { grid-template-columns: 1fr; gap: 14px; padding: 15px 16px; }
  .academy .ac-bkids { margin-left: 15px; padding-left: 13px; }
  .academy .ac-card::before { left: -13px; top: 26px; width: 13px; }
  .academy .ac-bnode { padding: 10px 12px; }
  .academy .ac-bt small { font-size: 11.5px; }
  .academy .ac-scols, .academy .ac-tcards { grid-template-columns: 1fr; }
  /* Название тарифа в строке отличий на телефоне уезжает своей строкой:
     фиксированная колонка 108px оставляла бы пояснению два слова в строку. */
  .academy .ac-tar { flex-direction: column; gap: 3px; }
  .academy .ac-tar-n { width: auto; }
}

/* ── Заезды тьютора ──────────────────────────────────────────────────────────
   Раздел исполнения заезда с чек-листом и приёмкой. Классы zz-* под .zaezdy,
   чтобы не задевать общие стили CRM. Кнопки берём общие (.bp, .al-cancel). */
.zaezdy {
  --zz-blue:#2F6BFF; --zz-blue-d:#1E50E6; --zz-tint:#EAF0FF;
  --zz-ink:#11151F; --zz-ink-2:#5B6272; --zz-ink-3:#9AA0AD;
  --zz-line:#E9EBF0; --zz-line-2:#E3E5EB; --zz-fill:#F5F6F9; --zz-card:#FFFFFF;
  --zz-green:#18A957; --zz-green-ink:#0E7C3F; --zz-green-soft:#E4F6EC;
  --zz-amber-ink:#9A5B12; --zz-amber-soft:#FBF0DD;
  --zz-red:#E5484D; --zz-red-ink:#B4272B; --zz-red-soft:#FCEBEC;
  --zz-r:12px; --zz-r-lg:14px; --zz-pill:999px;
  color:var(--zz-ink);
}
.zaezdy .zz-head { display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.zaezdy .zz-h { font-size:19px; font-weight:800; letter-spacing:-.02em; }
.zaezdy .zz-sp { margin-left:auto; }
.zaezdy .zz-tabs { display:flex; gap:4px; background:var(--zz-fill); padding:3px; border-radius:10px; }
.zaezdy .zz-tab { font:inherit; font-size:13px; font-weight:600; color:var(--zz-ink-2); background:transparent; border:0; padding:7px 13px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.zaezdy .zz-tab.on { background:var(--zz-card); color:var(--zz-ink); box-shadow:0 1px 2px rgba(17,21,31,.06); }
.zaezdy .zz-badge { background:var(--zz-blue); color:#fff; font-size:11px; font-weight:700; min-width:17px; height:17px; padding:0 5px; border-radius:999px; display:inline-grid; place-items:center; }

.zaezdy .zz-list { display:flex; flex-direction:column; gap:9px; }
.zaezdy .zz-card { width:100%; text-align:left; background:var(--zz-card); border:1px solid var(--zz-line); border-radius:var(--zz-r-lg); padding:14px 16px; cursor:pointer; display:flex; align-items:center; gap:14px; transition:.12s cubic-bezier(.22,1,.36,1); font:inherit; }
.zaezdy .zz-card:hover { border-color:var(--zz-blue); background:#FCFCFE; }
.zaezdy .zz-card-main { min-width:0; }
.zaezdy .zz-card-t { font-weight:700; font-size:14.5px; color:var(--zz-ink); }
.zaezdy .zz-who { color:var(--zz-ink-3); font-weight:500; }
.zaezdy .zz-card-m { font-size:13px; color:var(--zz-ink-2); margin-top:2px; }
.zaezdy .zz-card-side { margin-left:auto; display:flex; align-items:center; gap:12px; flex:none; }
.zaezdy .zz-prog { font-size:13px; font-weight:700; color:var(--zz-ink-3); font-variant-numeric:tabular-nums; }
.zaezdy .zz-pay { font-size:14px; font-weight:800; color:var(--zz-green-ink); white-space:nowrap; }
.zaezdy .zz-pill { font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:var(--zz-pill); white-space:nowrap; }
.zaezdy .zz-pill.gray { background:var(--zz-fill); color:var(--zz-ink-2); }
.zaezdy .zz-pill.amber { background:var(--zz-amber-soft); color:var(--zz-amber-ink); }
.zaezdy .zz-pill.green { background:var(--zz-green-soft); color:var(--zz-green-ink); }
.zaezdy .zz-pill.red { background:var(--zz-red-soft); color:var(--zz-red-ink); }

.zaezdy .zz-empty { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--zz-ink-3); text-align:center; padding:60px 20px; }
.zaezdy .zz-empty svg { opacity:.5; }

/* Реестр «Все заезды»: фильтр периода + группы по тьютору */
.zaezdy .zz-filter { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.zaezdy .zz-flbl { font-size:13px; font-weight:600; color:var(--zz-ink-2); }
.zaezdy .zz-filter select { width:auto; font:inherit; font-size:13px; font-weight:600; padding:7px 11px; border-radius:9px; border:1px solid var(--zz-line); background:var(--zz-card); color:var(--zz-ink); cursor:pointer; }
.zaezdy .zz-group { margin-bottom:24px; }
.zaezdy .zz-group-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 2px 11px; padding-bottom:8px; border-bottom:1px solid var(--zz-line); }
.zaezdy .zz-group-n { font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--zz-ink); }
.zaezdy .zz-group-s { font-size:12.5px; font-weight:600; color:var(--zz-ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }

.zaezdy .zz-panel { background:var(--zz-card); border:1px solid var(--zz-line); border-radius:16px; padding:22px 24px; max-width:680px; }
.zaezdy .zz-back { font:inherit; font-size:13px; font-weight:600; color:var(--zz-ink-2); background:transparent; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; }
.zaezdy .zz-back:hover { color:var(--zz-ink); }
.zaezdy .zz-dh { display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.zaezdy .zz-dh-t { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.zaezdy .zz-dh-m { font-size:13px; color:var(--zz-ink-2); margin-top:3px; }
.zaezdy .zz-dh .zz-pill { margin-left:auto; }

.zaezdy .zz-note { display:flex; gap:11px; align-items:flex-start; border-radius:var(--zz-r); padding:13px 15px; font-size:13.5px; margin-bottom:16px; }
.zaezdy .zz-note.red { background:var(--zz-red-soft); color:var(--zz-red-ink); }
.zaezdy .zz-note.green { background:var(--zz-green-soft); color:var(--zz-green-ink); }
.zaezdy .zz-note b { font-weight:700; }
.zaezdy .zz-note svg { flex:none; margin-top:1px; }

.zaezdy .zz-checks { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.zaezdy .zz-chk { display:flex; gap:11px; align-items:flex-start; font-size:14px; color:#333843; padding:10px 12px; border-radius:10px; background:var(--zz-fill); }
.zaezdy label.zz-chk { cursor:pointer; }
.zaezdy label.zz-chk:hover { background:#EEF0F5; }
.zaezdy .zz-chk input { width:18px; height:18px; margin-top:1px; accent-color:var(--zz-blue); flex:none; }
.zaezdy .zz-chk.ro .zz-tick { width:18px; height:18px; flex:none; border-radius:5px; border:1.6px solid var(--zz-line-2); display:grid; place-items:center; color:#fff; }
.zaezdy .zz-chk.ro.on .zz-tick { background:var(--zz-green); border-color:var(--zz-green); }
.zaezdy .zz-chk.ro.on { color:var(--zz-ink); }
.zaezdy .zz-amt { flex:none; margin-left:auto; padding-left:12px; font-size:12.5px; font-weight:700; color:var(--zz-ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.zaezdy .zz-amt.off { color:var(--zz-red-ink); }

.zaezdy .zz-note.amber { background:var(--zz-amber-soft); color:var(--zz-amber-ink); }

.zaezdy .zz-foot { display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--zz-line); }
.zaezdy .zz-count { font-size:13px; font-weight:600; color:var(--zz-ink-2); }
.zaezdy .zz-count b { font-weight:800; color:var(--zz-ink); }
.zaezdy .zz-mut { color:var(--zz-ink-3); font-weight:600; }
.zaezdy .zz-foot .bp { margin-left:auto; }
.zaezdy .zz-foot .zz-sp { margin-left:auto; }
.zaezdy .zz-return-box { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.zaezdy .zz-return-box[hidden] { display:none; }

.zaezdy .zz-form { display:flex; flex-direction:column; gap:14px; max-width:420px; }
.zaezdy .zz-lbl { display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--zz-ink-2); }
.zaezdy .zz-in { font:inherit; font-size:14px; color:var(--zz-ink); background:var(--zz-card); border:1px solid var(--zz-line-2); border-radius:10px; padding:10px 12px; transition:.14s; }
.zaezdy .zz-in:focus { outline:none; border-color:var(--zz-blue); box-shadow:0 0 0 3px rgba(47,107,255,.1); }
.zaezdy textarea.zz-in { min-height:70px; resize:vertical; }
.zaezdy .zz-form-a { margin-top:4px; }

/* Заезд внутри карточки ученика: те же zz-* элементы, но без обертки-панели —
   секция уже живет в дровере. Здесь только специфика карточки. */
.arr-card { margin-top:4px; }
.arr-card .arr-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.arr-card .arr-svc { font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--zz-ink); }
.arr-card .arr-top .zz-pill { margin-left:auto; }
.arr-card .zz-lbl { margin-top:14px; }
.arr-card .arr-field { margin-top:16px; }
.arr-card .arr-flbl { font-size:12.5px; font-weight:600; color:var(--zz-ink-2); margin-bottom:8px; }
.arr-card .arr-link { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--zz-blue-d); text-decoration:none; word-break:break-all; }
.arr-card .arr-link:hover { text-decoration:underline; }
.arr-card .arr-shots { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.arr-card .arr-shot { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--zz-ink-2); background:var(--zz-fill); border:1px solid var(--zz-line-2); border-radius:9px; padding:7px 11px; text-decoration:none; }
.arr-card .arr-shot:hover { border-color:var(--zz-blue); color:var(--zz-ink); }
.arr-card .arr-up { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--zz-blue-d); background:var(--zz-tint); border-radius:9px; padding:7px 11px; cursor:pointer; }
.arr-card .arr-up:hover { background:#DEE8FF; }
.arr-card .arr-muted { font-size:13px; color:var(--zz-ink-3); }
.arr-card .arr-perf-nm { font-size:14px; font-weight:600; color:var(--zz-ink); }
.arr-card .arr-perf-sel { max-width:340px; }
.arr-card .arr-empty { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.arr-card .arr-empty-t { font-size:14px; color:var(--zz-ink-2); margin-bottom:6px; }
.arr-card .arr-empty .zz-lbl { margin-top:0; min-width:260px; }
.arr-card .arr-empty .bp { margin-top:12px; }

@media (max-width:720px) {
  .zaezdy .zz-panel { padding:18px 16px; }
  .zaezdy .zz-card { padding:12px 13px; }
}

/* ── Аттестации тьюторов (надзор, cap academy_review) ──────────────────────── */
.att { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 24px 10px; }
.att-head { display: flex; align-items: center; gap: 12px; }
.att-h { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.att-sp { flex: 1; }
.att-refresh { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font: 600 13px 'Manrope', sans-serif; color: var(--ink-2); background: var(--fill); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; transition: .15s; }
.att-refresh:hover { color: var(--ink); border-color: var(--line-2); }
.att-sum { display: flex; gap: 0; margin-top: 7px; font-size: 13px; color: var(--ink-3); }
.att-sum b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.att-sum .att-mid { position: relative; margin-left: 16px; padding-left: 17px; }
.att-sum .att-mid::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); transform: translateY(-50%); }
.att-tablewrap { margin: 16px -24px 0; overflow-x: auto; }
.att-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.att-table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 0 14px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.att-table th.att-c, .att-table td.att-c { text-align: center; }
.att-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.att-table tbody tr:last-child td { border-bottom: none; }
.att-table tbody tr:hover td { background: var(--fill); }
.att-table th:first-child, .att-table td:first-child { padding-left: 24px; }
.att-table th:last-child, .att-table td:last-child { padding-right: 24px; }
.att-who { display: flex; flex-direction: column; gap: 2px; }
.att-name { font-weight: 600; color: var(--ink); }
.att-role { font-size: 11.5px; color: var(--ink-3); }
.att-course { color: var(--ink-2); white-space: nowrap; }
.att-frac { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); }
.att-frac.full { color: var(--green-ink); }
.att-ok { display: inline-flex; color: var(--green); }
.att-no { color: var(--ink-3); }
.att-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.att-pill.green { background: var(--green-soft); color: var(--green-ink); }
.att-pill.gray { background: var(--fill); color: var(--ink-2); }
.att-when { margin-left: 8px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.att-tries { margin-left: 6px; font-size: 11px; color: var(--ink-3); }
.att-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 46px 20px 52px; color: var(--ink-3); font-size: 14px; max-width: 400px; margin: 0 auto; }
.att-empty svg { opacity: .55; }

/* Доступ к курсам: переключатель среза и сетка «люди x курсы».
   Клетка — одно состояние из четырех: открыт/закрыт по роли и то же самое
   решением руководителя. Ручное решение помечено кольцом, а не вторым цветом:
   цвет тут уже занят смыслом «открыт или нет». */
.att-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--fill); border-radius: var(--r-pill); }
.att-sg { padding: 6px 14px; font: 600 12.5px 'Manrope', sans-serif; color: var(--ink-3); background: none; border: 0; border-radius: var(--r-pill); cursor: pointer; transition: .15s; }
.att-sg:hover { color: var(--ink-2); }
.att-sg.on { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.acc-table td.att-c { padding: 9px 14px; }
.acc-cell { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink-3); cursor: pointer; transition: .15s; }
.acc-cell:hover { border-color: var(--line-2); }
.acc-cell.on { background: var(--green-soft); border-color: transparent; color: var(--green-ink); }
.acc-cell.off { background: var(--fill); color: var(--ink-3); }
.acc-cell.man { box-shadow: inset 0 0 0 2px var(--blue); }
.acc-cell:disabled { opacity: .5; cursor: default; }
.acc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 24px 16px; font-size: 12px; color: var(--ink-3); }
.acc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.acc-lg { width: 13px; height: 13px; border-radius: 4px; background: var(--fill); }
.acc-lg.on { background: var(--green-soft); }
.acc-lg.man { background: var(--card); box-shadow: inset 0 0 0 2px var(--blue); }
.acc-hint { margin-left: auto; }
/* Поиск по людям в панели доступа: команда небольшая, но таблица обязана
   выдерживать базу в тысячи учеток — без фильтра и потолка строк страница
   замирала на копии базы в превью (16 849 человек, 350 тысяч узлов). */
.acc-find { border-bottom: 1px solid var(--line); }
.acc-cnt { font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.acc-more { padding: 12px 24px 0; font-size: 12px; color: var(--ink-3); }
@media (max-width: 720px) { .acc-hint { margin-left: 0; } }

/* ── Недельный цикл: «Неделя», «Потом», «Команда» (ADR 001) ──────────────────
   Полосы дней — тот же .tsk-band, что делил «Сегодня» на важное и остальное.
   Предел недели — тонкая полоса заполненности рядом с навигацией: число «5 из 7»
   и есть план, полоса только подсвечивает, что место кончается (амбер на пределе,
   не красный: красное на экране задач одно — просрочка). */
.wk-cap { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  color: var(--ink-3); white-space: nowrap; }
.wk-cap-bar { width: 72px; height: 6px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; }
.wk-cap-bar i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: var(--r-pill);
  transition: width .9s var(--ease); }
.wk-cap.full .wk-cap-bar i { background: var(--amber); }
.wk-cap.full { color: var(--amber-ink); }
.wk-caps { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.wk-search { flex: 1; min-width: 160px; }
/* Состояние недели под панелью: собрана / закрыта, ждет / принята / вернули. */
.wk-state { display: flex; align-items: flex-start; gap: 8px; margin: 12px 24px 0;
  padding: 10px 14px; border-radius: 12px; background: var(--fill);
  font-size: 12.5px; line-height: 1.45; font-weight: 500; color: var(--ink-2); }
.wk-state svg { flex: none; margin-top: 2px; color: var(--ink-3); }
/* display:flex у .wk-state и inline-flex у .wk-cap сильнее атрибута hidden: без
   этого «Предел набран» висел в окне сбора недели всегда, даже при 7 из 50. */
.wk-state[hidden], .wk-cap[hidden] { display: none; }
.wk-state.ok   { background: var(--green-soft); color: var(--green-ink); }
.wk-state.ok svg { color: var(--green-ink); }
.wk-state.wait { background: var(--amber-soft); color: var(--amber-ink); }
.wk-state.wait svg { color: var(--amber-ink); }
.wk-state.back { background: var(--red-soft); color: var(--red-ink); }
.wk-state.back svg { color: var(--red-ink); }
.wk-mark { margin-left: 8px; vertical-align: 2px; }
.wk-accept .wk-mark { display: none; }
.wk-row.closed .t-ttl { color: var(--ink-2); }
.wk-row.closed .tsk-due { color: var(--ink-3); }
.wk-accept { background: var(--blue-tint); border-radius: 12px; margin: 8px 16px 0; border-top: 0; }
.wk-accept .tsk-band-t { color: var(--blue); }
.wk-aim { color: var(--ink-3); }
.wk-aim svg { width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; }
/* В «Потом» третья колонка — действие, а не статус. */
.wk-row.later { grid-template-columns: minmax(0,1fr) 170px 120px; }
.wk-pull { white-space: nowrap; }
.wk-empty { padding: 44px 24px 40px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 8px; }
.wk-empty-t { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.wk-empty-s { max-width: 460px; font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-bottom: 8px; }
/* Окна «Собрать неделю» и «Закрыть неделю» — малая модалка (.pick). */
.wk-pick .al-body { max-height: 56vh; overflow: auto; }
.wkp-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line);
  cursor: pointer; }
.wkp-row:first-child { border-top: 0; }
.wkp-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--blue); flex: none; }
.wkp-row input:disabled + .wkp-t { color: var(--ink-3); }
.wkp-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.wkp-s { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11.5px;
  font-weight: 500; color: var(--ink-3); }
.wkp-d { flex: none; font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding-top: 2px; }
.wkp-foot { gap: 12px; }
.wkp-foot .wk-cap { margin-right: auto; }
.wkc-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 12px 0;
  border-top: 1px solid var(--line); align-items: center; }
.wkc-row:first-child { border-top: 0; }
.wkc-t { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
/* Выбор «перенести / в Потом» — системный сегмент .pay-seg, своего рецепта нет. */
.wkc-choice { flex: none; }
.wkc-why { grid-column: 1 / -1; }
/* Назад к команде: шеврон смотрит назад, как у всех «назад» в CRM. */
.wk-back svg { transform: rotate(180deg); }
.wk-accept-btn { color: var(--blue); border-color: var(--blue-tint); background: var(--blue-tint); }
.wk-accept-btn svg { color: var(--blue); }
.wk-accept-btn:hover { background: #DFE8FF; color: var(--blue-d); }
.rh-rv-btn svg { color: var(--ink-3); }
.wk-pick .wk-state { margin: 0 0 12px; }
.wkc-text { margin-top: 14px; }
/* Команда: строка на человека. */
/* ── Пульс команды (.tp-*, свой префикс: .pl-* занят планами работ) ─────────────────────────────────────────────────────────
   Строка на человека: кто, сейчас, сделано, завтра. Якорь экрана — колонка
   «Сейчас» чернилами и часы движения под именем; остальное тихое. Красное на
   экране одно — просрочка (чип у имени и полоска строки .r-crit). */
.tp-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 14px 24px 12px; border-bottom: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.tp-sum b { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.tp-sum .bad, .tp-sum .bad b { color: var(--red-ink); }
.tp-sum .warn, .tp-sum .warn b { color: var(--amber-ink); }
.brd-n.warn { color: var(--amber-ink); }
.tp-grid { grid-template-columns: minmax(200px, 300px) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
.tp-wgrid { grid-template-columns: minmax(200px, 300px) repeat(4, minmax(64px, 1fr)) 210px; }
.tp-wgrid .th:nth-child(n+2):nth-child(-n+5), .tp-wgrid .brd-n { text-align: right; }
.trow.tp-grid, .trow.tp-wgrid { height: auto; min-height: 58px; padding-top: 11px; padding-bottom: 11px; align-items: start; }
.trow.tp-grid.thead, .trow.tp-wgrid.thead { min-height: 0; padding-top: 0; padding-bottom: 0; align-items: center; }
.trow.tp-wgrid .brd-n, .trow.tp-wgrid .rh-c { padding-top: 4px; }
.trow.tp-wgrid.has-note { padding-bottom: 12px; }
.tp-who { cursor: pointer; align-self: start; }
.tp-who:hover .tp-nm { color: var(--blue); }
.tp-nm { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em; transition: color .12s var(--ease); }
.tp-nm .sev { flex: none; }
.sev.tp-over { background: var(--red-soft); color: var(--red-ink); }
.trow.tp-grid.tp-quiet .tsk-av { background: var(--fill); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.tp-who .brd-nm { overflow: visible; }
/* Часы движения: 13 точек, 8:00–20:00. Заполненная — в этот час человек что-то
   делал с задачами. Подписи только у 8, 12, 16, 20 — иначе шкала шумит. */
.tp-hrs { display: inline-flex; align-items: flex-end; gap: 3px; margin-top: 7px; height: 10px; margin-bottom: 13px; }
.tp-hrs i { position: relative; width: 6px; height: 6px; border-radius: 2px; background: var(--line); transition: background .3s var(--ease); }
.tp-hrs i.on { background: var(--blue); height: 10px; }
.tp-hrs i[data-h]::after { content: attr(data-h); position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 3px; font-size: 10px; font-weight: 600; font-style: normal; line-height: 1; color: var(--ink-3); }
.tp-hrs.off i { background: var(--line-2); }
.tp-hrs.days { gap: 5px; margin-top: 8px; }
.tp-hrs.days i { width: 14px; height: 6px; }
.tp-hrs.days i.on { height: 6px; background: var(--blue); }
.tp-hrs.days i[data-h]::after { margin-top: 4px; }
.tp-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 14px; }
.tp-t { display: block; width: 100%; text-align: left; padding: 3px 6px; margin-left: -6px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.35;
  transition: background .12s var(--ease), color .12s var(--ease); }
.tp-t:hover { background: var(--blue-tint); color: var(--blue-d); }
.tp-tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-meta { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-meta i { font-style: normal; font-weight: 600; }
/* Якорь строки — «Сейчас»: крупнее и чернилами; «Сделано» и «Завтра» тише. */
.tp-t { color: var(--ink-2); }
.tp-c.now .tp-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.tp-none { font-size: 12.5px; color: var(--ink-3); padding: 3px 0; }
.tp-none b { color: var(--ink-2); }
.tp-more { display: inline-block; padding: 2px 0 0; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.tp-foot { display: flex; justify-content: flex-end; }
.tp-link { font: 600 12px 'Manrope', sans-serif; color: var(--ink-3); transition: color .12s; }
.tp-link:hover { color: var(--blue); }
@media (max-width: 720px) {
  .trow.tp-grid, .trow.tp-wgrid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  .trow.tp-grid.thead, .trow.tp-wgrid.thead { display: none; }
  .trow.tp-grid .tp-c { padding-right: 0; }
  /* Пустые клетки на телефоне не рисуем: у тихого остается только шапка с именем и точками. */
  .trow.tp-grid .tp-c.tp-empty { display: none; }
  .trow.tp-grid .tp-c::before { content: attr(data-l); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .trow.tp-wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .trow.tp-wgrid .brd-who { grid-column: 1 / -1; }
  .trow.tp-wgrid .brd-n, .trow.tp-wgrid .rh-c { display: flex; align-items: baseline; gap: 6px; text-align: left; font-size: 14px; }
  .trow.tp-wgrid .brd-n::before, .trow.tp-wgrid .rh-c::before { content: attr(data-l); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .tp-sum { padding: 12px 16px 10px; gap: 4px 16px; }
}
.wk-grid { grid-template-columns: minmax(180px, 340px) 130px repeat(4, minmax(64px, 1fr)) 210px; }
.wk-grid .th:nth-child(n+3):nth-child(-n+6), .wk-grid .brd-n { text-align: right; }
/* Поле замечания раскрывается первым кликом по «Вернуть»: до него скрыто,
   и атрибут hidden обязан побеждать display у .al-f. */
.rv-note[hidden] { display: none !important; }
.trow.wk-grid.has-note { height: auto; min-height: 58px; padding-top: 12px; padding-bottom: 12px; }
.trow.wk-grid { cursor: pointer; }
.rh-await.quiet { background: var(--fill); color: var(--ink-2); }
.rh-await.quiet svg { color: var(--ink-3); }
@media (max-width: 720px) {
  .wk-search { order: 5; flex-basis: 100%; }
  /* Одна раскладка клетки на телефоне для недели, итогов и архива: человек во
     всю строку, число под подписью из data-l. Значение — один элемент (.v),
     иначе «1/3» рвется на две строки. */
  .trow.wk-grid, .trow.ts-grid, .trow.ts-dgrid, .trow.rp-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; height: auto;
    padding-top: 12px; padding-bottom: 12px; row-gap: 10px; }
  .trow.wk-grid.thead, .trow.ts-grid.thead, .trow.ts-dgrid.thead, .trow.rp-grid.thead { display: none; }
  .trow.wk-grid .brd-who, .trow.ts-grid .brd-who, .trow.rp-grid .brd-who { grid-column: 1 / -1; }
  .trow.wk-grid .rh-c, .trow.wk-grid .brd-n, .trow.ts-grid .brd-n, .trow.ts-dgrid .brd-n, .trow.rp-grid .brd-n, .trow.rp-grid .rh-c {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
  .trow.wk-grid .rh-c::before, .trow.wk-grid .brd-n::before, .trow.ts-grid .brd-n::before, .trow.ts-dgrid .brd-n::before,
  .trow.rp-grid .brd-n::before, .trow.rp-grid .rh-c::before { content: attr(data-l); font-size: 10.5px;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .trow.wk-grid .rh-rv-btn { flex-wrap: wrap; align-items: flex-start; gap: 6px; }
  .wk-row.later { grid-template-columns: minmax(0,1fr) !important; }
  .wk-row.later > div:nth-child(2) { order: 3; }
  .wkc-row { grid-template-columns: minmax(0,1fr); }
}

/* ── День: главный экран задач (решение Павла 02.09.2026) ─────────────────────
   Не список недели, а три зоны: «Сегодня» крупно слева, «Завтра» и «Сделано»
   тихо справа. Зоны разделены подложкой страницы (--main) между белыми
   карточками, а не подзаголовками: слов на экране минимум. Строка — одна
   линия: галочка, название, справа только то, что отличается от нормы
   (просрочка, «вернули»). «Поставлена» и «сегодня» не пишем: это норма, а
   норму не подписывают. Единственное красное — просрочка (полоса .tsk-band.over
   и дни в тексте; строка идет через системный .r-crit). Полосы-подзаголовки —
   системный .tsk-band, шапки боковых карточек — рецепт .sec-head .t, «еще на
   неделе» — .stu-more: своих рецептов у дня нет, только якорь-заголовок 20px. */
.wk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.wk-top .brd-nav { margin-right: 4px; }
.wk-top .wk-spacer { flex: 1; }
.wk-top .wk-state { margin: 0; flex-basis: 100%; }
.dy-grid { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 16px; align-items: start; }
.dy-side { display: grid; gap: 16px; min-width: 0; }
.dy-card { min-width: 0; overflow: hidden; }
.dy-h { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px 8px; }
.dy-h-t { font-size: 20px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1.15; }
.dy-side .dy-h { padding: 14px 18px 4px; }
.dy-h .t { font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.dy-h-n { font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.dy-h-n b { color: var(--ink); font-weight: 700; }
.dy-h.blue .t, .dy-h.blue .dy-h-n { color: var(--blue); }
.dy-body { padding: 0 0 6px; }
.dy-card .tsk-band { padding: 8px 20px 4px; }
.dy-card .tsk-band + .tsk-band { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.tsk-band.over .tsk-band-t { color: var(--red-ink); }
.dy-rest .tsk-band:first-child { border-top: 1px solid var(--line); margin-top: 0; padding-top: 12px; }
/* Строка дня: галочка, название, справа отклонение от нормы. Ниже общей .trow:
   день читается сверху вниз одним взглядом, 58px на строку тут лишние. */
.trow.dy-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; height: auto; min-height: 46px;
  padding: 9px 20px; align-items: center; }
.dy-side .trow.dy-row { padding: 8px 18px; min-height: 40px; }
.dy-row .dy-t { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dy-row .tsk-chk { margin-top: 0; }
/* Два яруса: название и строка «кто» под ним. Галочка равняется на название. */
.dy-row .dy-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dy-row.has-meta .dy-t { align-items: flex-start; }
.dy-row.has-meta .tsk-chk { margin-top: 2px; }
.dy-row .dy-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 500;
  color: var(--ink-3); line-height: 1.3; }
.dy-m { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dy-meta b, .gl-meta b { font-weight: 600; color: var(--ink-2); }
.dy-none { color: var(--amber-ink); }
/* Кружки людей — семейные (.tsk-av исполнителя, .stu-av участника), уменьшенные до строки. */
.tsk-av.dy-av { width: 18px; height: 18px; font-size: 8.5px; }
.stu-av.dy-avp { width: 18px; height: 18px; font-size: 8px; box-shadow: 0 0 0 1.5px var(--card); }
.dy-avs .dy-avp + .dy-avp { margin-left: -5px; }
.gl-meta .tsk-due { font-weight: 500; color: var(--ink-3); }
.dy-row .dy-goal { margin-top: 0; }
.tsk-chk.quiet { cursor: default; border-color: transparent; background: transparent; }
.dy-row .dy-ttl { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dy-side .dy-row .dy-ttl { font-size: 13.5px; }
.dy-row .dy-cl { flex: none; font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
/* В узких боковых карточках имя ученика не помещается рядом с названием: там
   его нет, оно в карточке задачи. Кто сдал — остается, это суть «Тебе сдали». */
.dy-side .dy-row .dy-cl, .dy-side .dy-row .dy-from { display: none; }
.dy-row .dy-r { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dy-row .dy-r:empty { display: none; }
.dy-row.closed .dy-ttl { color: var(--ink-3); font-weight: 500; text-decoration: line-through; }
/* «Сделано» — та же галочка, что и у живой задачи, только заполненная и
   нейтральная: зеленый в CRM про деньги, а сделанная задача — норма. На
   приемке — синяя заливка, как у статуса. */
.tsk-chk.done { background: var(--fill); border-color: var(--fill); color: var(--ink-3); cursor: default; }
.tsk-chk.done.rv { background: var(--blue-tint); border-color: var(--blue-tint); color: var(--blue); }
.dy-more { margin: 6px 20px 8px; width: calc(100% - 40px); }
.dy-empty { padding: 22px 20px 26px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.dy-empty b { color: var(--ink-2); font-weight: 600; }
.dy-side .dy-empty { padding: 6px 18px 18px; font-size: 12.5px; }
.dy-foot { padding: 6px 18px 12px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 960px) {
  .dy-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* Шапка не должна съедать половину экрана: дата и метр в одну строку,
     кнопки во вторую; название задачи может занять две строки, а имя ученика
     возвращается второй строкой — на телефоне иначе теряется, по кому дело. */
  .wk-top { gap: 8px; margin-bottom: 10px; }
  .wk-top .brd-nav { margin-right: 0; }
  .wk-top .wk-spacer { flex-basis: 100%; }
  .trow.dy-row { grid-template-columns: minmax(0, 1fr) auto !important; padding: 10px 16px; }
  .dy-row .dy-t { align-items: flex-start; }
  .dy-row .tsk-chk { margin-top: 1px; }
  .dy-row .dy-ttl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
  .dy-row .dy-cl, .dy-side .dy-row .dy-cl { display: inline-flex; }
  .dy-h { padding: 14px 16px 6px; }
  .dy-h-t { font-size: 18px; }
  .dy-card .tsk-band { padding-left: 16px; padding-right: 16px; }
  .dy-more { margin: 6px 16px 8px; width: calc(100% - 32px); }
}

/* ── Цели: отдел → цель → шаги (Павел 04.09.2026) ─────────────────────────────
   Отдел — секция с капс-микролейблом, цель — карточка с кольцом прогресса,
   шаги — строки дня (.dy-row) под раскрытой целью. Кольцо — тот же прием, что
   кольцо диагностики (conic-gradient + @property --p), синее на --fill: один
   акцент, без второго цвета. Создание одной строкой — обычный .al-in.sm. */
.gl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gl-search { flex: 1; min-width: 180px; }
.dept-seg { flex-wrap: wrap; }
.gl-dept { margin-bottom: 18px; }
.gl-dh { display: flex; align-items: baseline; gap: 10px; padding: 0 6px 8px; }
.gl-dl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.gl-company .gl-dl { color: var(--blue); }
.gl-dn { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
/* «+ Цель» — единственное действие в шапке отдела, синим тинтом, а не серым
   чипом: серый терялся на фоне (Павел 04.09.2026). */
.gl-newbtn { margin-left: auto; background: var(--blue-tint); color: var(--blue); border-color: transparent; font-weight: 700; }
.gl-newbtn:hover { background: var(--blue); color: #fff; }
.gl-newgoal { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.gl-goal-in { flex: 1; min-width: 160px; }
.gl-goal-mon { width: auto; }
.gl-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; overflow: hidden;
  transition: border-color .14s; }
.gl-card:hover { border-color: var(--line-2); }
.gl-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; cursor: pointer; }
.gl-head:hover { background: #FBFBFC; }
.gl-ring { --p: 0; position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--fill) 0); display: grid; place-items: center;
  transition: --p .8s var(--ease); }
.gl-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--card); }
.gl-ring b { position: relative; font-size: 11.5px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.gl-card.complete .gl-ring { background: var(--green); }
.gl-card.complete .gl-ring b { color: var(--green-ink); }
.gl-main { flex: 1; min-width: 0; }
/* Цель крупнее шага на ступень (16/600, рецепт .sec-head .t): иначе цель и шаг
   читаются одной строкой и стержень «цель → шаги» не виден. */
.gl-title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.3; }
.gl-chev { flex: none; display: inline-flex; color: var(--ink-3); transition: transform .2s var(--ease); }
.gl-card.open .gl-chev { transform: rotate(90deg); color: var(--blue); }
.gl-meta { margin-top: 2px; font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gl-close { color: var(--green-ink); background: var(--green-soft); border-color: var(--green-soft); }
.gl-more { flex: none; opacity: 0; transition: opacity .14s; }
.gl-head:hover .gl-more, .gl-card.open .gl-more { opacity: 1; }
.gl-steps { border-top: 1px solid var(--line); padding: 4px 0 8px; }
.gl-steps .dy-ttl { font-size: 13.5px; }
.gl-steps .trow.dy-row { padding-left: 24px; padding-right: 16px; min-height: 40px; }
.gl-steps .trow.dy-row:hover { background: var(--fill); }
.gl-add { padding: 8px 16px 6px 24px; }
.gl-add-in { width: 100%; }
/* Композер шага: раскрывается по фокусу под строкой названия. */
.gl-add-more { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 8px; }
.gl-add-more[hidden] { display: none; }
.gl-add-f { display: flex; flex-direction: column; gap: 4px; }
.gl-add-f .al-l { margin: 0; }
.gl-add-who { width: auto; min-width: 170px; }
.gl-add-dayrow { display: flex; align-items: center; gap: 8px; }
.gl-add-day { width: auto; }
.gl-add-part { min-width: 170px; }
.gl-add-more .pp-add { height: auto; }
.gl-add-go { align-self: flex-end; }
.gl-goal-who { width: auto; min-width: 150px; }
.nt-moreb { align-self: flex-start; margin: 2px 0 6px; }
@media (max-width: 720px) {
  .gl-head { gap: 10px; padding: 12px; }
  .gl-more { opacity: 1; }
  .gl-title { font-size: 15px; }
  /* Шапка не должна съедать полэкрана: отделы одной строкой с прокруткой,
     импорт встречи — иконкой рядом с поиском. */
  .gl-tools { gap: 8px; }
  .dept-seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; flex: 1 1 100%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .dept-seg::-webkit-scrollbar { display: none; }
  .dept-seg button { white-space: nowrap; }
  .gl-search { flex: 1; min-width: 0; }
  .gl-meet span { display: none; }
  .gl-meet { padding: 0 10px; }
  .gl-newgoal { flex-wrap: wrap; }
  .gl-add-f { flex: 1 1 100%; }
  .gl-add-dayrow { flex-wrap: wrap; }
  .gl-add-go { width: 100%; }
  .gl-steps .trow.dy-row { padding-left: 14px; }
  .gl-add { padding-left: 14px; }
}

/* ── План: Сегодня / Неделя / Месяц, полоса «Потом», месяц по неделям ───────
   Переключатель вида — системный сегмент .pay-seg. «Потом» — карточка дня,
   свернутая до шапки. Месяц — те же карточки, что у целей (.gl-card): неделя
   с кольцом процента, раскрывается в задачи; сверху четыре числа месяца. */
.plan-seg { flex: none; }
.dy-later { margin-top: 16px; }
.dy-later-h { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left;
  padding: 14px 20px; align-items: center; }
.dy-later-h:hover { background: #FBFBFC; }
.dy-later-ic { margin-left: auto; color: var(--ink-3); display: inline-flex; transition: transform .2s var(--ease); }
.dy-later.open .dy-later-ic { transform: rotate(90deg); }
.dy-later .trow.dy-row.later { padding: 8px 20px; }
.mo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mo-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 2px; }
.mo-stat b { font-size: 26px; font-weight: 800; letter-spacing: -.035em; color: var(--ink); line-height: 1.1; }
.mo-stat b i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: -.01em; }
.mo-stat span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.mo-week.current { border-color: var(--blue); }
.mo-now { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue); }
.mo-week .gl-head > .sev { flex: none; }
@media (max-width: 720px) {
  .mo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mo-stat b { font-size: 22px; }
}

/* ── Команда: итоги и архив отчетов ──────────────────────────────────────────
   Таблица дашборда — та же строка .trow с числами .brd-n, что у недели. Процент
   и серия чернилами: красное на экране только переносы и застрявшее (красный
   процент в незакрытом месяце врал бы). Отделы — вторая таблица, только когда
   их больше одного. Архив — полосы недель на .tsk-band и строки на .trow;
   «что мешало» второй строкой тем же .rh-note, что на «Неделе». Раскладка
   клетки на телефоне общая с .wk-grid. */
.ts-grid { grid-template-columns: minmax(180px, 300px) repeat(8, minmax(56px, 1fr)); cursor: pointer; }
.ts-grid .th:nth-child(n+2), .ts-grid .brd-n { text-align: right; }
.ts-dgrid { grid-template-columns: minmax(160px, 1fr) repeat(4, minmax(64px, 120px)); }
.ts-dgrid .th:nth-child(n+2), .ts-dgrid .brd-n { text-align: right; }
.ts-depts { margin-top: 16px; }
.ts-depts .dy-h { padding: 14px 24px 4px; }
.brd-n i { font-style: normal; color: var(--ink-3); font-weight: 600; }
.brd-n.ts-pct { font-weight: 800; }
.rp-grid { grid-template-columns: minmax(200px, 1fr) 80px 70px 70px 200px; cursor: pointer; }
.rp-grid .th:nth-child(n+2), .rp-grid .brd-n { text-align: right; }
.rp-grid .rh-c { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.trow.rp-grid.has-note { height: auto; min-height: 58px; padding-top: 12px; padding-bottom: 12px; }
.rh-sched-card { margin-top: 16px; }
.rh-sched-card .rh-sched { border-top: 0; }
@media (max-width: 720px) {
  .trow.ts-grid, .trow.ts-dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .trow.ts-dgrid .brd-nm { grid-column: 1 / -1; }
  /* Период и стрелки одной строкой, отделы — последней: шапка не должна
     съедать пол-экрана до первой цифры. */
  .ts-top .wk-spacer { flex-basis: 0; }
  .ts-top .dept-seg { order: 5; }
}

/* Настройки недели в окне «Бот задач»: предел и сводки. */
/* Чаты направлений: строка = подпись, выбор группы, проверка. Подпись держит
   одну ширину, чтобы селекты стояли колонкой, а не плясали от длины слова. */
.tgd { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tgd-row { display: flex; align-items: center; gap: 10px; }
.tgd-l { flex: 0 0 104px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tgd-row.on .tgd-l { color: var(--ink); }
.tgd-sel { flex: 1 1 auto; min-width: 0; }
.tgd-t { flex: none; margin-top: 0; }
/* На телефоне подпись и «Проверить» делят первую строку, выбор группы — вторую:
   кнопка под селектом тянула каждую строку на три этажа. */
@media (max-width: 720px) {
  .tgd { gap: 10px; }
  .tgd-row { flex-wrap: wrap; row-gap: 6px; }
  .tgd-l { flex: 1 1 auto; }
  .tgd-t { order: 2; margin-left: auto; }
  .tgd-sel { order: 3; flex-basis: 100%; }
}
.tgg-week { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.tgg-wl { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.tgg-num { width: 64px; text-align: center; }

/* ── Роли в строке и карточке (Павел 04.09.2026: подпись роли, а не «участник») ── */
.dy-row .dy-meta { min-width: 0; }
.dy-m b { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.dy-k { font-style: normal; font-size: 11px; font-weight: 500; color: var(--ink-3); margin-right: 2px; white-space: nowrap; }
.dy-m b + .tsk-av.dy-av { margin-left: 6px; }
.dy-m .dy-avs { margin-left: 1px; }
.tsk-mwho i { font-style: normal; font-weight: 500; color: var(--ink-3); margin-right: 1px; }
.tsk-part-box { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px; background: var(--fill); }
.tsk-role { display: flex; flex-direction: column; gap: 4px; }
.tsk-role .al-l { margin: 0; }
/* Галочка «сдать»: тот же кружок, но синий контур — это не «сделано», а «отдать на проверку». */
.tsk-chk.submit { border-color: var(--blue); color: var(--blue); }
.tsk-chk.submit:hover { background: var(--blue-tint); }
/* Ученики: группы по этапам плана, строки те же, что в целях. */
.stu-g .dy-row { padding-left: 0; padding-right: 0; }
.stu-g .stu-gl { margin-bottom: 2px; }

/* ════ ФОКУС НЕДЕЛИ — лист руководителя ════
   Карточка фокуса = цель + ее шаги этой недели. Своих рецептов строки и статуса
   не заводит: строка задачи — общая .dy-row, прогресс — .tsk-prog, полоса
   «Вне фокусов» — .tsk-band. Свое здесь только оправа: номер фокуса, шапка цели,
   строка «зачем» и колонка дня слева от строки. */
.fw { padding: 18px 20px 12px; margin-bottom: 16px; }
.fw-h { display: flex; align-items: flex-start; gap: 14px; }
.fw-n {
  width: 26px; height: 26px; border-radius: 9px; flex: none;
  background: var(--blue-tint); color: var(--blue);
  font-size: 13px; font-weight: 700; display: grid; place-items: center; margin-top: 2px;
}
.fw-hm { flex: 1 1 auto; min-width: 0; }
.fw-t {
  display: block; text-align: left; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.25;
  transition: color .13s var(--ease);
}
.fw-t:hover { color: var(--blue); }
.fw-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 5px; font-size: 12.5px; color: var(--ink-2); }
.fw-nobody { color: var(--amber-ink); }
.fw-prog { flex: none; width: 176px; padding-top: 4px; }
.fw-prog .tsk-prog-n { white-space: nowrap; }
.fw-plab {
  display: block; margin-top: 5px; text-align: right;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.fw-why {
  margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--fill);
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.fw-rows { margin-top: 6px; }
.fw-day-wrap { display: flex; align-items: stretch; gap: 10px; }
.fw-day-wrap .dy-row { flex: 1 1 auto; min-width: 0; }
.fw-day {
  flex: none; width: 46px; padding-top: 17px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.fw-day.over { color: var(--red-ink); }
.fw-loose { padding-top: 10px; }
.fw-loose .tsk-band { margin-bottom: 2px; }
@media (max-width: 720px) {
  .fw { padding: 14px 14px 8px; }
  .fw-h { flex-wrap: wrap; }
  .fw-prog { width: 100%; padding-top: 0; }
  .fw-plab { text-align: left; }
  /* День уходит НАД строкой: боковая колонка на 390px отъедала ширину у
     названия, и задачи обрывались на середине слова. */
  .fw-day-wrap { flex-direction: column; gap: 0; }
  .fw-day { width: auto; padding: 12px 0 0 2px; }
}

/* Ссылка на оплату счета: кнопка, а после запроса — поле со ссылкой и «копировать».
   Живет под шапкой счета, поэтому отступ сверху меньше, чем до следующего счета. */
.ord-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0 10px; }
.ord-link .oi-mark { justify-self: start; }
.ord-link-i { flex: 1 1 240px; min-width: 0; padding: 6px 9px;
  font: 500 12px 'Manrope', sans-serif; color: var(--ink-2);
  background: var(--fill); border: 1px solid var(--line); border-radius: 8px; }
.ord-link .oi-hint { flex: 1 0 100%; margin: 2px 0 0; }
/* ── Что нового ─────────────────────────────────────────────────────────── */
.nw { padding: 4px 0; }
.nw-item { padding: 16px 20px 18px 20px; border-top: 1px solid var(--line); position: relative; }
.nw-item:first-child { border-top: 0; }
.nw-item.unread::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 18px; width: 3px; border-radius: 2px; background: var(--blue); }
.nw-top { display: flex; align-items: flex-start; gap: 10px; }
.nw-title { margin: 0; font: 700 15.5px/1.3 'Manrope', sans-serif; letter-spacing: -.01em; color: var(--ink); flex: 1 1 auto; min-width: 0; text-wrap: balance; }
.nw-edit { flex: none; position: relative; opacity: 0; transition: opacity .15s var(--ease); }
.nw-item:hover .nw-edit, .nw-edit:focus-visible { opacity: 1; }
.nw-meta { margin-top: 4px; font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.nw-body { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink); max-width: 720px; overflow-wrap: anywhere; }
.nw-body a { color: var(--blue); text-decoration: none; }
.nw-body a:hover { text-decoration: underline; }
.nw-card { max-width: 640px; }
.nw-who { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.nw-who-l { flex: 0 0 44px; padding-top: 8px; font: 600 11.5px 'Manrope', sans-serif; color: var(--ink-3); }
.nw-roles { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.nw-search { flex: 1 1 200px; }
.nw-people { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 54px; }
.nw-people:empty { display: none; }
.nw-none { font-size: 12px; color: var(--ink-3); padding: 4px 0; }
.nw-sum { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.nw-del { margin-right: auto; color: var(--red-ink); }
.nw-p { background: var(--fill); }
.nw-p.on { background: var(--blue); }
@media (max-width: 960px) {
  .nw-item { padding: 14px 14px 16px; }
  /* Ховера нет: карандаш виден всегда, а зона нажатия шире самой кнопки. */
  .nw-edit { opacity: 1; }
  .nw-edit::before { content: ''; position: absolute; inset: -6px; }
  .nw-people { padding-left: 0; }
  /* Чипы адресата по ширине текста: мобильное правило «Команды» растягивает их на ряд. */
  .nw-roles .tm-tp-b, .nw-people .tm-tp-b { flex: none; }
}

/* ════ КАРТА: клиенты по этапам пути (.map-*) ════════════════════════════════
   Якорь экрана — дорожка этапов: она единственная крупная вещь, список под ней
   намеренно тихий. Полоска под числом дает форму потока с одного взгляда, без
   диаграмм. Этапов на пути шестнадцать (словарь тарифной таблицы), поэтому
   дорожка — сетка в два ряда, а не полоса с горизонтальной прокруткой: путь
   должен быть виден целиком, иначе дорожкой пользоваться нельзя.
   «Без плана» вынесен из дорожки отдельной строкой: это не этап, а те, кого мы
   еще не разложили по пути, и читаться он должен иначе. */
.map-top { padding: 22px 26px 20px; }
/* Ровно восемь в ряд: шестнадцать этапов ложатся двумя одинаковыми рядами, а
   подписи вроде «Диагностики» перестают ломаться посреди слова. */
.map-rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px; margin-top: 18px; }
.map-seg { position: relative; text-align: left; min-width: 0;
  display: flex; flex-direction: column; gap: 5px; padding: 11px 12px 10px;
  background: var(--fill); border: 1px solid transparent; border-radius: var(--r-lg);
  cursor: pointer; transition: .14s var(--ease); }
.map-seg:hover { background: #EDEFF3; }
.map-seg.on { background: var(--blue-tint); border-color: rgba(47,107,255,.28); }
.map-seg-n { font: 800 24px 'Manrope', sans-serif; letter-spacing: -.035em; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums; }
.map-seg.zero .map-seg-n { color: var(--ink-3); font-weight: 700; }
/* На этапе никого — кнопка не обещает перехода в пустой список */
.map-seg:disabled { cursor: default; }
.map-seg:disabled:hover { background: var(--fill); }
.map-seg.on .map-seg-n { color: var(--blue); }
.map-seg-t { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.25; }
.map-seg.on .map-seg-t { color: var(--navy); }
.map-seg-b { display: block; height: 3px; border-radius: 2px; background: rgba(15,19,32,.07);
  overflow: hidden; margin-top: auto; }
.map-seg-b i { display: block; height: 100%; border-radius: 2px; background: var(--navy);
  opacity: .35; transition: width .9s var(--ease); }
.map-seg.on .map-seg-b i { background: var(--blue); opacity: 1; }

/* «Без плана»: строка под дорожкой, амбер — это не этап, а незакрытая работа
   команды. Выбранный берет заметный бордер: иначе нажатие визуально ничего не
   меняет, а список под ним уже показывает срез. */
.map-gap { display: flex; align-items: baseline; gap: 10px; width: 100%; margin-top: 8px;
  padding: 10px 14px; text-align: left; cursor: pointer; border-radius: var(--r-lg);
  background: var(--amber-soft); border: 1px solid transparent; transition: .14s var(--ease); }
.map-gap.zero { background: var(--fill); cursor: default; }
.map-gap.on { border: 1.5px solid var(--amber); padding: 9.5px 13.5px; }
.map-gap-n { font: 800 20px 'Manrope', sans-serif; letter-spacing: -.03em; line-height: 1;
  color: var(--amber-ink); font-variant-numeric: tabular-nums; }
.map-gap.zero .map-gap-n { color: var(--ink-3); }
.map-gap-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber-ink); }
.map-gap.zero .map-gap-t { color: var(--ink-3); }
.map-gap-s { font-size: 12px; color: var(--ink-3); margin-left: auto; }
/* «Этап не определен» — не дыра в работе, а мусор старых шаблонов: та же строка,
   но без амбера, иначе два одинаково тревожных блока подряд. */
.map-gap.lost { background: var(--fill); }
.map-gap.lost .map-gap-n, .map-gap.lost .map-gap-t { color: var(--ink-2); }
.map-gap.lost.on { border-color: var(--line-2); }

/* ════ КАБИНЕТ СЕМЬИ в карточке клиента (.cab-*) ═════════════════════════════
   Блок отвечает на три вопроса подряд: кто из семьи вообще внутри, что человек
   прошел сам, и как это ложится на этапы его тарифа. Тон тихий — это справка
   внутри карточки, а не экран; кричит здесь только то, чего нет: непройденный
   вход в кабинет и этап, до которого не дошли. */
.cab-seats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cab-seat { flex: 1 1 180px; min-width: 0; padding: 11px 13px; border-radius: var(--r-lg);
  background: var(--fill); }
.cab-seat-r { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
.cab-seat-n { margin-top: 3px; font-size: 13.5px; font-weight: 650; color: var(--ink);
  letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-seat-s { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
/* Молчание дольше двух недель и «ни разу не заходил» — то, ради чего блок и
   заведен: оно чернее рядового «заходил вчера», а не бледнее. */
.cab-seat.cold { background: var(--amber-soft); }
.cab-seat.cold .cab-seat-r, .cab-seat.cold .cab-seat-s { color: var(--amber-ink); }
/* Кого не завели — пунктиром и без цвета: это не тревога, это пробел, который
   видно. Заполненная плашка рядом должна оставаться главнее. */
.cab-seat.off { background: transparent; border: 1px dashed var(--line-2); }
.cab-seat.off .cab-seat-n { color: var(--ink-2); font-weight: 600; }
.cab-seat.fresh { background: var(--green-soft); }
.cab-seat.fresh .cab-seat-s { color: var(--green-ink); font-weight: 600; }
.cab-warn { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--amber-soft); color: var(--amber-ink); font-size: 12.5px; line-height: 1.45; }

.cab-h { margin: 18px 0 8px; font-size: 12px; font-weight: 700; color: var(--ink-2);
  letter-spacing: -.01em; }
.cab-h-t { font-weight: 600; color: var(--ink-3); }
.cab-h-t.off { font-weight: 500; }
.cab-acts { display: flex; flex-direction: column; }
.cab-act { display: flex; align-items: baseline; gap: 12px; padding: 8px 0;
  border-top: 1px solid var(--line); font-size: 12.5px; }
.cab-act:first-child { border-top: 0; }
.cab-act-t { flex: 1; min-width: 0; color: var(--ink); }
.cab-act-w { flex: none; color: var(--ink-3); font-size: 12px; }
/* Пусто здесь — обычный факт, а не экран: общий .empty отбивает полсотни пикселей
   сверху и снизу и рвет блок надвое. */
.cab-empty { padding: 9px 0; font-size: 12.5px; color: var(--ink-3); }

/* Этапы тарифа: засечка слева, состояние справа. Этап, которого никто не касался,
   держим совсем тихим — иначе шестнадцать одинаково заметных строк, и взгляду не
   за что зацепиться. */
.cab-sts { display: flex; flex-direction: column; }
.cab-st { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.cab-st:first-child { border-top: 0; }
.cab-st-d { width: 7px; height: 7px; border-radius: 50%; background: rgba(15,19,32,.12); flex: none; }
.cab-st-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-st-s { flex: none; font-size: 12px; }
.cab-st.done .cab-st-d { background: var(--navy); opacity: .45; }
.cab-st.done .cab-st-t { color: var(--ink-2); }
.cab-st.open .cab-st-d { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(15,19,32,.34); }
.cab-st.open .cab-st-t { color: var(--ink); }
.cab-st.now .cab-st-d { width: 9px; height: 9px; background: var(--blue); }
.cab-st.now .cab-st-t { color: var(--ink); font-weight: 650; }
.cab-st.now .cab-st-s { color: var(--blue); font-weight: 600; }

.map-list { margin-top: 16px; }
.map-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--line); }
.map-bar .searchwrap { flex: 0 1 280px; }
.map-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.map-grid { grid-template-columns: minmax(150px, 1.15fr) 118px minmax(230px, 1.4fr) minmax(178px, 1.15fr) 104px minmax(104px, .85fr); }
.map-grid.thead { height: 38px; }
/* Строка открывает карточку, значит она кнопка и с клавиатуры: тот же inset,
   что у .det-row и .st-row — дефолтное кольцо на строке в 58px теряется. */
.trow.map-grid:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--blue); }
.map-c { min-width: 0; font-size: 12.5px; color: var(--ink-2); }
.map-tar { font-size: 11.5px; }
.map-tar.off { color: var(--ink-3); background: var(--fill); border: 1px dashed var(--line-2); }

/* Позиция на пути: засечки вместо полосы. Пройденное чернильное, текущее синее и
   выше остальных — этап читается раньше, чем подпись рядом. Начатое, но не закрытое —
   половинный тон: на пути, где этапы идут внахлест, «идет работа» и «закрыт» нельзя
   показывать одинаково. Засечка узкая: шестнадцать кружков в строке — уже не шкала,
   а рябь, и подписи рядом не остается места. */
.map-track { display: flex; align-items: center; gap: 2px; max-width: 100%; }
.map-dot { width: 4px; height: 9px; border-radius: 2px; background: rgba(15,19,32,.12); flex: none; }
.map-dot.done { background: var(--navy); opacity: .45; }
.map-dot.open { background: rgba(15,19,32,.26); }
.map-dot.now { height: 13px; background: var(--blue); }
.map-track-t { margin-left: 9px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-track.none { font-size: 12.5px; color: var(--amber-ink); }
.map-track-no { flex: none; margin-left: 8px; font-size: 12px; color: var(--amber-ink); }

/* Молчание дольше двух недель — то, ради чего колонка заведена: оно чернее
   рядового «заходил вчера», а не бледнее. Амбер сюда не тащим, он занят
   якорем «Без плана» на дорожке. */
.map-seat { color: var(--ink-3); }
.map-seat.cold { color: var(--ink-2); font-weight: 600; }
/* Первый вход в кабинет за последние сутки: зеленая точка с мягким пульсом. Зеленый
   тут по формуле — это успех, семья включилась; амбер занят «Без плана», а красный
   значит потерю. Пульс медленный и один: экран не должен мигать. */
.map-seat.fresh { color: var(--green-ink); font-weight: 650; }
.map-new { display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: var(--green); vertical-align: baseline;
  /* Три вспышки по секунде и стоп: §6 не разрешает движение дольше ~1s, а вечно
     пульсирующая точка в таблице к тому же превращается в фон через минуту.
     Зеленых чернил и слова «впервые» хватает, чтобы строка осталась видна. */
  animation: mapNew 1s var(--ease) 3; }
@keyframes mapNew {
  0%, 100% { box-shadow: 0 0 0 0 rgba(24,169,87,.45); }
  50%      { box-shadow: 0 0 0 4px rgba(24,169,87,0); }
}
@media (prefers-reduced-motion: reduce) { .map-new { animation: none; } }
.map-none { color: var(--ink-3); }
.map-over { color: var(--red-ink); font-weight: 700; }
.map-sell { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 960px) {
  .map-top { padding: 18px 16px 16px; }
  /* Три в ряд, а не четыре: на 390px в четверть строки не влезает «зачисление»,
     и подпись обрезается ровно у самых длинных этапов. */
  .map-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .map-seg { padding: 9px 10px 8px; }
  .map-seg-n { font-size: 20px; }
  .map-seg-t { font-size: 9.5px; letter-spacing: .02em; overflow-wrap: break-word; }
  .map-gap-s { display: none; }
  /* Строка на телефоне разворачивается ярусами: имя и тариф, путь, кабинет и
     задачи, предложение — в шесть колонок на 390px имя схлопывается до двух букв.
     Шапки тут нет, поэтому ярусы подписаны сами (data-l), как в .tp-grid. */
  .map-grid { grid-template-columns: 1fr auto !important; height: auto !important;
    padding: 13px 16px; gap: 8px 10px; }
  .map-grid.thead { display: none !important; }
  .map-grid .t-cell { grid-column: 1; }
  .map-grid .map-c-tar { grid-column: 2; justify-self: end; }
  .map-grid .map-c-track, .map-grid .map-sell { grid-column: 1 / -1; }
  .map-grid .map-c-seat, .map-grid .map-c-task { font-size: 12px; }
  .map-grid .map-c-seat::before, .map-grid .map-c-task::before,
  .map-grid .map-sell::before { content: attr(data-l); display: block; margin-bottom: 2px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3); }
  .map-sell { white-space: normal; }
  /* Пустые ярусы на телефоне не рисуем: подпись ради прочерка съедает экран
     (прием из .tp-grid .tp-empty). На десктопе прочерк остается — там колонка
     подписана шапкой, и пустая клетка держит сетку. */
  .map-grid .map-c.map-empty { display: none; }
  .map-bar .list-count { margin-left: 0; }
}

/* ── Раздел «Почта» карточки: адрес кейса и переписка с вузом ──
   Плотно и тихо: якорь раздела — сам адрес, письма идут ровным списком на
   полупрозрачных разделителях, без рамок и зебры. */
.mail-hero { display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  background: var(--fill); border-radius: var(--r-lg); margin-bottom: 10px; }
.mail-hero-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; color: var(--blue); }
.mail-hero-b { flex: 1; min-width: 0; }
.mail-empty-t { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.mail-empty-s { margin-top: 5px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

.mail-addr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--fill); border-radius: var(--r-lg); }
.mail-addr-v { flex: 1; min-width: 180px; font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); word-break: break-all; }

.mail-form { display: grid; gap: 8px; margin-top: 16px; }
.mail-form input, .mail-form textarea { font-family: inherit; font-size: 13.5px; line-height: 1.5;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: #fff; color: var(--ink); width: 100%; }
.mail-form textarea { resize: vertical; }
.mail-form input::placeholder, .mail-form textarea::placeholder { color: var(--ink-3); }
.mail-form input:focus, .mail-form textarea:focus { outline: none; border-color: var(--blue); }
.mail-form .bp { justify-self: start; }
.mail-off { margin-top: 16px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

.mail-list { margin-top: 20px; }
.mail-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.mail-row:last-child { border-bottom: none; }
.mail-rhead { display: flex; align-items: center; gap: 9px; }
.mail-dir { flex: none; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); }
.mail-dir.in { background: var(--green-soft); color: var(--green-ink); }
.mail-dir.out { background: var(--blue-tint); color: var(--blue-d); }
.mail-who { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-docs { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.mail-when { flex: none; font-size: 12px; color: var(--ink-3); }
.mail-subj { margin-top: 6px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.mail-text { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }

/* телефон: форма и шапка письма перестают быть строкой, ничего не уезжает за экран */
@media (max-width: 520px) {
  .mail-addr { gap: 8px; }
  .mail-addr-v { min-width: 100%; }
  .mail-rhead { flex-wrap: wrap; }
  .mail-who { flex: 1 1 100%; white-space: normal; }
}

/* ── Запуски: путь человека плашками ──────────────────────────────────────── */
/* Просьба Ольги: цифры плашками, а не строчками. Ширина колонки фиксируется
   минимумом, а не числом колонок: ступеней в запуске то 12, то 16, и раскладка
   не должна ломаться от добавления шага. */
.lsteps { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.lstep { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg);
         padding: 14px 16px 13px; background: var(--card); }
.lstep .ls-i { position: absolute; top: 12px; right: 14px; font-size: 11px; color: var(--ink-3); }
.lstep .ls-v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.lstep .ls-t { font-size: 13px; font-weight: 600; margin-top: 3px; }
.lstep .ls-s { font-size: 11px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
.lstep .ls-c { font-size: 11px; color: var(--ink-2); margin-top: 9px; }
.lstep .ls-c b { font-weight: 700; color: var(--ink); }
/* Шаг, которого ещё не было (эфир впереди) или которого нет в системе. */
.lstep.wait { background: var(--fill); }
.lstep.wait .ls-v { color: var(--ink-3); }
/* Единственный отмеченный провал: где теряем больше половины людей. */
.lstep.drop { border-color: var(--red); background: var(--red-soft); }
.lstep.drop .ls-c b { color: var(--red-ink); }
/* Плашка, за которой есть список людей. Кликабельность должна читаться ДО клика —
   иначе проверить цифру никто не догадается, а ради этого всё и делалось. */
.lstep-open { cursor: pointer; transition: border-color .14s var(--ease), box-shadow .14s var(--ease); }
.lstep-open:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(47,107,255,.10); }
.lstep-open.drop:hover { border-color: var(--red); box-shadow: 0 6px 18px rgba(229,72,77,.12); }
.lstep-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Список людей ступени ────────────────────────────────────────────────────
   Оболочка попапа общая с маркетингом (.mk-ovl/.mk-modal.wide/.mk-xbtn) — второй
   вид всплывашки в одной CRM читался бы как другой продукт. Здесь только таблица. */
.lp-tbl { margin-top: 12px; border-top: 1px solid var(--line);
  max-height: calc(100vh - 300px); min-height: 120px; overflow: auto; }
.lp-tbl::-webkit-scrollbar { width: 8px; }
.lp-tbl::-webkit-scrollbar-thumb { background: #E3E5EB; border-radius: 99px; }
.lp-tbl::-webkit-scrollbar-track { background: transparent; }
.lp-th, .lp-tr { display: grid; gap: 12px; align-items: center;
  grid-template-columns: minmax(150px, 1.6fr) minmax(120px, 1.1fr) minmax(110px, 1fr) 112px; }
/* шапка таблицы едет со списком, но остаётся видимой: иначе на 300 строках
   посреди прокрутки непонятно, какая колонка что */
.lp-th { padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--fill);
  position: sticky; top: 0; z-index: 1; }
.lp-th span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); }
.lp-th span:last-child { text-align: right; }
.lp-tr { padding: 9px 10px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink); }
.lp-tr:last-child { border-bottom: 0; }
.lp-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-tr small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; }
.lp-nm { font-weight: 600; }
.lp-dt { color: var(--ink-2); text-align: right; }
/* прочерк вместо пустоты — но бледнее значения, чтобы не читался как данные */
.lp-dash { color: var(--ink-3); font-style: normal; }
.lp-tr.go { cursor: pointer; border-radius: 8px; }
.lp-tr.go:hover { background: var(--fill); }
.lp-tr.go:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.lp-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.lp-cnt { font-size: 12px; color: var(--ink-3); }
.lp-foot .mk-btn { margin-left: auto; }
.lp-foot .mk-btn[disabled] { opacity: .6; cursor: default; }

.lper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        padding: 12px 16px; margin-bottom: 16px; }
.lper-l { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-right: 4px; }
.lper-d { color: var(--ink-3); }
/* Поля дат — той же породы, что в поповере периода на других вкладках. */
.lper-in { font: 500 13px 'Manrope', sans-serif; color: var(--ink); background: var(--fill);
           border: 1px solid transparent; border-radius: 9px; padding: 8px 10px; outline: none; }
.lper-in:focus { border-color: var(--blue); }
.lstep .ls-i.br { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }

/* Воронка запуска столбиками: имя ступени, полоса, число, доля от регистраций. */
.lfun { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.lfun-row { display: grid; grid-template-columns: 1fr 80px 46px 40px; gap: 10px; align-items: center; }
.lfun-nm { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfun-bar { height: 10px; background: var(--fill); border-radius: var(--r-pill); overflow: hidden; }
.lfun-bar i { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); }
.lfun-n { font-size: 13px; font-weight: 700; text-align: right; }
.lfun-p { font-size: 11.5px; color: var(--ink-3); text-align: right; }
/* Запуск идёт днями, а не неделями: при двух-трёх днях столбик во всю колонку
   выглядит стеной и ничего не сообщает — ограничиваем ширину. */
.lchart .ch-day { max-width: 56px; }
.lchart .chart { justify-content: flex-start; }
.lchart .ch-labels span { max-width: 56px; }

/* ════ ВСТРЕЧИ — вид «Календарь» (месяц целиком) ════
   Второй вид той же сетки: слоты отвечают «кто свободен в четверг в три»,
   календарь — «что вообще происходит в этом месяце». Рисунок намеренно тихий:
   плотность важнее украшений, цветом кодируется только тип плашки. */
.mm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.mm-wd { padding: 7px 9px; font-size: 11px; font-weight: 600; color: var(--ink-3);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--fill); }
.mm-cell { min-height: 104px; padding: 6px 7px 8px; display: flex; flex-direction: column; gap: 3px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
/* Ховер не синим: синим помечен сегодняшний день, и под мышью любая клетка
   выглядела как «сегодня». Серый заметен и на клетке чужого месяца. */
.mm-cell:hover { background: var(--line); }
/* Дни соседних месяцев показываем, но приглушенно: без них неделя рвется. */
.mm-cell.out { background: var(--fill); }
/* Клетка дня открывается с клавиатуры, как клетка часа в слотах, и кольцо
   у нее то же, что у остальных кликабельных строк продукта (.det-row, .st-row):
   внутренняя рамка вместо системного контура, иначе она рвет сетку. */
.mm-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--blue); }

.mm-cell.out .mm-num { color: var(--ink-3); }
.mm-cell.now { background: var(--blue-tint); }
.mm-num { display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Счетчик встреч в дне — только для узкого экрана, где плашки не читаются. */
.mm-cnt { display: none; }
/* Сколько часов этого дня уже проданы ученикам. Тихая цифра, а не плашка:
   в месяце это фон для решения «куда влезет планерка», а не событие. */
.mm-load { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }

.mm-cell.now .mm-num { color: var(--blue); }
.mm-ev { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
  overflow: hidden; padding: 2px 4px;
  border-radius: 6px; font-size: 11px; line-height: 1.35; font-weight: 600; }
.mm-ev b { flex: none; }
.mm-ev b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Клетка дня — колонка, и без min-width: 0 длинная плашка растягивает ее шире
   собственной колонки сетки: название встречи вылезало за границу дня. */
.mm-cell { min-width: 0; }
/* Планерка — простая строка, а не флекс: анонимный текстовый элемент внутри
   флекса не сжимается короче своего текста, и название вылезало за границу дня. */
.mm-ev.plan { display: block; background: var(--navy-soft); color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-ev.zoom { background: var(--fill); color: var(--ink-2); }
.mm-open { flex: 1; min-width: 0; text-align: left; font: inherit; color: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-copy { flex: none; width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 5px; color: var(--ink-3); opacity: 0; transition: .15s; }
.mm-ev:hover .mm-copy, .mm-copy:focus-visible { opacity: 1; }
.mm-copy:hover { color: var(--blue); background: var(--blue-tint); }
@media (hover: none) { .mm-copy { opacity: .5; } }
.mm-more { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 1px 3px; }
.mm-more:hover { color: var(--blue); }
/* Подпись под сеткой: тихая сноска, а не абзац текста. Без нее строка шла
   основным кеглем и читалась как содержимое карточки. */
.zw-foot { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
/* Телефон: семь колонок остаются (месяц без них не месяц), но клетка ниже и
   в ней помещается одна плашка — остальное уводит «еще N». */
@media (max-width: 960px) {
  .mm-cell { min-height: 68px; padding: 4px 4px 6px; gap: 2px; }
  .mm-wd { padding: 5px 4px; }
  .mm-ev { font-size: 10px; padding: 1px 3px; }
  .mm-num { font-size: 11.5px; }
}
/* Телефон: в колонку шириной в палец название не влезает — вместо плашек
   счетчик встреч, подробности открываются кликом по дню. */
@media (max-width: 700px) {
  /* .mm-ev.plan задан классом сильнее, поэтому гасим его отдельно — иначе
     планерка остается в клетке обрезанным «11:0…». */
  .mm-ev, .mm-ev.plan, .mm-more { display: none; }
  .mm-cell { min-height: 54px; }
  /* Цифра занятости уступает место счетчику встреч: два числа в клетке шириной
     в палец не читаются, а счетчик отвечает на более частый вопрос. */
  .mm-load { display: none; }
  .mm-cnt { display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
    background: var(--blue-tint); color: var(--blue); font-size: 10px; font-weight: 700; }
  .mm-cell.now .mm-cnt { background: #fff; }
}

/* ── Воркшопы: библиотека обучения команды ──────────────────────────────────
   Строка = один воркшоп: слева номер (по нему ориентируются в разговоре — «третий
   воркшоп»), справа содержимое. Просмотренное гасим, а не прячем: библиотеку
   перечитывают, и запись нужна и после первого раза. */
.ws { padding: 4px 0; }
.ws-item { display: flex; gap: 14px; padding: 16px 20px 18px; border-top: 1px solid var(--line); }
.ws-item:first-child { border-top: 0; }
.ws-item.done .ws-title, .ws-item.done .ws-n { color: var(--ink-2); }
.ws-item.arch { opacity: .55; }
.ws-n {
  flex: none; width: 30px; height: 30px; border-radius: 10px; margin-top: 1px;
  background: var(--blue-tint); color: var(--blue);
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
.ws-item.done .ws-n { background: var(--fill); }
.ws-main { flex: 1 1 auto; min-width: 0; }
.ws-top { display: flex; align-items: flex-start; gap: 10px; }
.ws-title { margin: 0; font: 700 15.5px/1.3 'Manrope', sans-serif; letter-spacing: -.01em;
  color: var(--ink); flex: 1 1 auto; min-width: 0; text-wrap: balance; }
.ws-edit { flex: none; opacity: 0; transition: opacity .15s var(--ease); }
.ws-item:hover .ws-edit, .ws-edit:focus-visible { opacity: 1; }
.ws-meta { margin-top: 4px; font-size: 12px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ws-about { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); max-width: 720px; }
.ws-hw { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--fill);
  font-size: 13px; line-height: 1.5; color: var(--ink); max-width: 720px; white-space: pre-wrap; }
.ws-hw-l { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.ws-mats { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.ws-mat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--line-2); border-radius: 9px; background: #fff;
  font-size: 12.5px; color: var(--ink-2); text-decoration: none; transition: .15s; }
.ws-mat:hover { border-color: var(--blue); color: var(--blue); }
.ws-act { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-play { text-decoration: none; }
/* Просмотренное тише: строка остается на месте (к записи возвращаются), но
   тянуть на себя внимание ей больше незачем. */
.ws-item.done .ws-play { background: #fff; color: var(--ink-2); border: 1px solid var(--line-2); box-shadow: none; }
.ws-item.done .ws-play:hover { color: var(--blue); border-color: var(--blue); }
.ws-norec { font-size: 12.5px; color: var(--ink-3); }
.ws-seen.on { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }
.ws-cnt { margin-left: 2px; font-size: 12px; color: var(--ink-3); }
.ws-card { max-width: 640px; }
.ws-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-row .al-f { flex: 1 1 140px; min-width: 0; }
.ws-mrow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ws-mrow .ws-mt { flex: 0 1 180px; min-width: 0; }
.ws-mrow .ws-mu { flex: 1 1 220px; min-width: 0; }
.ws-madd { margin-top: 2px; }
@media (max-width: 720px) {
  .ws-item { padding: 14px 14px 16px; gap: 10px; }
  .ws-mrow { flex-wrap: wrap; }
  .ws-mrow .ws-mt, .ws-mrow .ws-mu { flex: 1 1 100%; }
}

/* ── Дубли карточек интенсива (вкладка «Дубли» в разделе «Люди») ───────────
   Экран решений, а не таблица: карточки-кандидаты одна под другой, главная
   подсвечена синим, действия крупные — Вера смотрит его с телефона. */
.idup-note { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.idup-g { padding: 18px; margin-bottom: 14px; }
.idup-h b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.idup-k { color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.idup-list { display: grid; gap: 10px; margin-top: 14px; }
.idup-c { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 12px 14px; }
.idup-c.main { border-color: var(--blue); background: var(--blue-tint); }
.idup-c.off { opacity: .5; }
.idup-c-t { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
           font-size: 15px; font-weight: 700; }
.idup-main { font-size: 11px; font-weight: 700; letter-spacing: .06em;
            text-transform: uppercase; color: var(--blue); }
.idup-c-s { color: var(--ink-2); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.idup-c-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.idup-t { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill);
         background: var(--fill); color: var(--ink-2); }
.idup-t.money { background: var(--green-soft); color: var(--green-ink); }
.idup-t.open { background: var(--blue-tint); color: var(--blue); }
.idup-c-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.idup-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.idup-log { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
           padding: 10px 0; border-top: 1px solid var(--line);
           color: var(--ink-2); font-size: 13px; }
.idup-log .idup-k { margin: 0; }
@media (max-width: 560px) {
  .idup-g { padding: 14px; }
  .idup-c-b button, .idup-a button { flex: 1 1 100%; }
}

/* ── Рассылки (`bc-*`) — журнал отправок бота ────────────────────────────────
   Строка прогона и строка адресата живут на общей .trow: это такой же список,
   как лиды и подарки, свой рецепт строки заводить незачем. Своё тут только
   раскладка цифр прогона, когортный ряд и поле «писали ли мы человеку».
   Ответ площадки («bot was blocked by the user») показываем дословно — он и есть
   доказательство отправки, поэтому ему отдан второй уровень чернил, а не мелкий
   серый шум. */
/* Доставка — своя семья чипов, не воронка продаж: «дошло» про сообщение, а не
   про сделку. Красное — потерянный навсегда контакт (закрыл бота), амбер — сбой,
   который можно перевыслать. */
.sev.bc-ok      { color: var(--green-ink); background: var(--green-soft); }
.sev.bc-blocked { color: var(--red-ink);   background: var(--red-soft); }
.sev.bc-fail    { color: var(--amber-ink); background: var(--amber-soft); }
.bc-run { grid-template-columns: minmax(0, 1fr) auto 24px; cursor: pointer; }
/* Колонки одинаковой ширины: числа стоят друг под другом от строки к строке.
   Флексом они разъезжались, и взгляд не мог сравнить две рассылки по вертикали. */
.bc-nums { display: grid; grid-template-columns: repeat(5, 84px); align-items: center; }
/* Вход в переписку с человеком прямо из строки: ответ площадки доказывает отправку,
   а чат показывает само сообщение. */
/* Проверка у площадки: кнопка рядом со статусом и её вердикт на месте кнопки.
   Зелёный/красный тут семантика по формуле статусов, а не украшение. */
.bc-verify { border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  cursor: pointer; transition: color .12s var(--ease), border-color .12s var(--ease); }
.bc-verify:hover { color: var(--blue); border-color: var(--blue); }
.bc-verify[disabled] { color: var(--ink-3); cursor: default; }
.bc-verdict { display: block; font-size: 11.5px; font-weight: 600; margin-top: 4px; line-height: 1.35; }
.bc-verdict.yes { color: var(--green-ink); }
.bc-verdict.no  { color: var(--red-ink); }
/* Контрольный получатель — живой человек из команды в общем списке рассылки. */
.bc-wit { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--blue); background: var(--blue-tint);
  padding: 3px 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.bc-chat { font-size: 12px; font-weight: 600; color: var(--blue); margin-left: 10px;
  text-decoration: none; white-space: nowrap; }
.bc-chat:hover { text-decoration: underline; }
.bc-n { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.bc-n b { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.bc-n small { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-top: 3px; }
.bc-go { color: var(--ink-3); display: flex; justify-content: flex-end; }
.bc-run:hover .bc-go { color: var(--blue); }

.bc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bc-title .t { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.bc-title .s { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.bc-stat { margin: 0 -6px -6px; }

/* Когорта — имя и два процента. Шкалы тут нет намеренно: 90px не дают сравнить
   3% с 9%, а на телефоне шкала пряталась совсем — колонка без работы. Три карточки
   когорт стоят рядом, поэтому имя занимает всю ширину, а цифры идут под ним. */
.bc-co { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
  gap: 4px 18px; padding: 13px 24px; border-bottom: 1px solid var(--line); }
.bc-co:last-child { border-bottom: none; }
.bc-co-nm { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; color: var(--ink); min-width: 0; }
.bc-co-nm small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.bc-co-n { font-size: 15px; font-weight: 700; color: var(--ink); display: flex;
  align-items: baseline; gap: 6px; }
.bc-co-n:first-of-type { margin-left: auto; }
.bc-co-n small { font-size: 11px; font-weight: 600; color: var(--ink-3); }

.bc-grid { grid-template-columns: minmax(0, 1fr) minmax(150px, 280px) 96px; height: auto;
  padding-top: 11px; padding-bottom: 11px; }
/* Чипы статуса стоят в строку (контрольный + дошло читаются одним взглядом),
   а пояснение площадки и кнопка проверки переносятся под них целой строкой. */
.bc-st { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
  align-content: flex-start; min-width: 0; }
.bc-st > .bc-detail, .bc-st > .bc-verdict, .bc-st > .bc-act { flex: 0 0 100%; }
.bc-act { display: flex; }   /* кнопка проверки: с новой строки, но по своему размеру */
/* Ответ площадки. В строке видна его суть, полный текст раскрывается по нажатию:
   он и есть доказательство отправки, прятать его в подсказку по наведению нельзя —
   на телефоне наведения не существует. */
.bc-detail { font-size: 11px; color: var(--ink-2); overflow-wrap: anywhere; line-height: 1.35; }
.bc-detail summary { cursor: pointer; list-style: none; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--line-2);
  text-underline-offset: 3px; }
.bc-detail summary::-webkit-details-marker { display: none; }
.bc-detail summary:hover { color: var(--ink); }
.bc-raw { margin-top: 5px; padding: 7px 9px; border-radius: 9px; background: var(--fill);
  font-size: 10.5px; color: var(--ink-2); line-height: 1.4; }

.bc-find { display: flex; gap: 10px; margin-top: 14px; }
.bc-find .al-in { flex: 1 1 auto; min-width: 0; }
.bc-found { margin: 16px -24px -22px; border-top: 1px solid var(--line); }
.bc-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 24px 14px; }
.bc-filters .al-in { flex: 1 1 220px; min-width: 0; }
.bc-more { padding: 14px 24px; display: flex; justify-content: center; }

@media (max-width: 760px) {
  /* Телефон: ни одна из этих таблиц не уезжает вбок — строки становятся карточками,
     цифры прогона переносятся под название. */
  .trow.bc-run { grid-template-columns: minmax(0, 1fr) 20px !important; height: auto;
    padding: 14px 16px; row-gap: 10px; }
  /* Четыре колонки по 86px плюс зазоры — это 398px, на 390px последнее число
     («не дошло») срезалось краем экрана. Парами влезает с запасом. */
  .bc-nums { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px; row-gap: 10px; justify-content: stretch; }
  .bc-n { align-items: flex-start; }
  .bc-go { grid-column: 2; grid-row: 1; align-self: center; }
  /* Адресат: имя и время в одной строке, статус с ответом площадки — под ними.
     Время отдельной третьей строкой читалось как оторванная от всего дата. */
  .trow.bc-grid { grid-template-columns: minmax(0, 1fr) auto !important; height: auto;
    padding: 12px 16px; row-gap: 6px; }
  .trow.bc-grid .t-cell { grid-column: 1; grid-row: 1; }
  .trow.bc-grid .t-when { grid-column: 2; grid-row: 1; align-self: start; }
  .bc-st { grid-column: 1 / -1; grid-row: 2; }
  .bc-co { padding: 12px 16px; }
  /* Возврат и название прогона не делят одну строку: на 390px заголовку оставалось
     пол-экрана, и он ломался на три строки. */
  .bc-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bc-find { flex-direction: column; }
  .bc-find .bp { width: 100%; }
  .bc-found { margin: 14px -18px -18px; }
  .bc-filters { padding: 0 16px 12px; }
  /* Фильтры статуса переносятся, а не уезжают за край: четыре слова в строку на
     390px не влезают, и «Не дошло» пропадало из виду. */
  .bc-filters .tabs { flex-wrap: wrap; row-gap: 6px; }
  /* Лестница отклика: конверсия уходит под название. Общая раскладка ставит её
     третьей колонкой, и на узком экране она налезала на название шага. */
  .bc-lad .lad-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bc-lad .lad-row .lad-right { grid-column: 1 / -1; grid-row: 2; flex-direction: row;
    align-items: center; justify-content: flex-start; gap: 10px; }
}

@media (max-width: 480px) {
  /* Четыре коротких числа доставки читаются парами: одной колонкой это 4 экрана
     скролла до списка людей. Денежных сумм тут нет, перенос строки им не грозит. */
  .statbar.bc-stat { grid-template-columns: 1fr 1fr; }
}

/* ── Домашки CSCA в разделе «Обучение» ───────────────────────────────────────
   Преподаватель курса (Арсений: математика и физика) проверяет работы там же, где
   работает команда, — своей учеткой CRM, без второго входа (Вера 21.09.2026).
   Ждущая работа выделена кантом слева: очередь должна читаться одним взглядом. */
.csw-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.csw-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--card); }
.csw-card.wait { border-color: #CFE0FF; box-shadow: inset 3px 0 0 var(--blue); }
.csw-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.csw-top b { font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.csw-when { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.csw-tag { margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.csw-tag.new { color: var(--blue); background: var(--blue-tint); }
.csw-tag.ok { color: var(--green-ink); background: var(--green-soft); }
.csw-tag.ret { color: var(--red-ink); background: var(--red-soft); }
.csw-task { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.csw-src { margin-left: 10px; font-weight: 600; color: var(--blue); text-decoration: none;
  border-bottom: 1px solid rgba(47,107,255,.3); }
.csw-src:hover { border-color: var(--blue); }
/* Условие разбора: та же плашка, что у ответа, но подписью — это задача, а не
   работа ученика, и взгляд не должен их путать. */
/* Строка про жалобу: тихая, но не спрятанная — преподаватель должен видеть, куда
   писать, из того места, где он работает. */
.csw-help { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink-3); }
.csw-link { font: inherit; font-weight: 600; color: var(--blue); background: none; border: none;
  padding: 0; cursor: pointer; border-bottom: 1px solid rgba(47,107,255,.3); }
.csw-link:hover { border-color: var(--blue); }
.csw-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47,107,255,.25); border-radius: 3px; }

/* Ученики CSCA: та же строка, что у команды, плюс колонка «когда заходил».
   На телефоне колонка уходит под имя — три колонки в 390 не живут. */
.cst-row { display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-top: 1px solid var(--line-2); }
.cst-row:first-child { border-top: none; }
.cst-when { flex: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .cst-row { flex-wrap: wrap; }
  .cst-row .tm-i { min-width: 0; }
  /* На телефоне подстрочник переносится: в одну строку сюда влезает только предмет,
     а отметки про проверку и занятия уезжали в многоточие. */
  .cst-row .tm-l { white-space: normal; }
  .cst-when { flex: 0 0 100%; margin-left: 52px; }
}
.csw-cond { margin-top: 10px; padding: 10px 14px; border-radius: 11px;
  border-left: 2px solid var(--line-2); font-size: 13px; line-height: 1.55;
  color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.csw-ans { margin-top: 12px; padding: 12px 14px; border-radius: 11px; background: var(--fill);
  font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.csw-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 12px;
  padding: 12px 14px; border-radius: 11px; background: var(--fill); }
.csw-score b { font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.csw-score span { font-size: 12.5px; color: var(--ink-3); }
.csw-wrong { padding-left: 10px; border-left: 1px solid var(--line-2); }
.csw-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.csw-file { font-size: 12px; color: var(--ink-2); background: var(--fill); border-radius: 8px;
  padding: 4px 9px; word-break: break-all; }
.csw-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.csw-note b { color: var(--ink); }
.csw-ta { margin-top: 12px; }
.csw-err { color: var(--red-ink); font-size: 12.5px; font-weight: 600; margin-top: 8px; }
.csw-err:empty { display: none; }
.csw-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.csw-seg { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px;
  background: var(--fill); }
.csw-seg button { border: 0; background: 0; cursor: pointer; font: 600 12.5px 'Manrope', sans-serif;
  color: var(--ink-2); padding: 7px 12px; border-radius: 9px; }
.csw-seg button.on { color: #fff; background: var(--blue); }
@media (max-width: 560px) {
  /* на телефоне переключатель уезжает ПОД заголовок: в одной строке с ним название
     раздела ломалось на три строки и читалось столбиком */
  .csw-head { flex-wrap: wrap; }
  /* :not(.csw-seg) — переключатель это тоже div, и общее правило забирало
     у него нашу ширину обратно */
  .csw-head > div:not(.csw-seg) { flex: 1; min-width: 0; }
  /* flex: 0 0 100% — иначе строка-переключатель ужимается и остается в одной
     строке с заголовком: width:100% у flex-элемента можно сжать */
  .csw-seg { flex: 0 0 100%; margin-left: 0; margin-top: 12px; }
  .csw-seg button { flex: 1; }
  .csw-acts { flex-direction: column; }
  .csw-acts .bp { width: 100%; }
}

/* ── Декомпозиция холодного трафика (Маркетинг → Декомпозиция) ──────────────
   Экран-переговорка: слева вводные, ниже воронка и деньги когорты. Верстается
   теми же кирпичами, что экономика портала (.po-tbl, .pay-board, .lad-row), свои
   классы только там, где нужна сетка полей и плитки метрик. */
/* вводные разложены группами: девять полей одной лентой на ноутбуке ужимались до
   178px, подписи уезжали в две строки и ряд переставал читаться как ряд */
/* ровно две колонки: auto-fit на мониторе от 1700px разворачивал группы в 3+1 и
   возвращал тот самый одинокий ряд, ради которого раскладку и переделывали */
.un-groups { display: grid; gap: 26px 30px; margin-top: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1120px) { .un-groups { grid-template-columns: 1fr; } }
.un-grp { min-width: 0; }
.un-gt { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px; }
.un-form { display: grid; gap: 12px 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); align-items: start; }
.un-form2 { margin-top: 16px; }
.un-form2 { grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); }
/* подпись под полем держит одну строку высоты, иначе соседние поля в группе
   встают на разной высоте и сетка выглядит сломанной */
.un-h { min-height: 16px; }
.un-f { min-width: 0; }
.un-h { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.un-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.un-lbl { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
/* доля продюсеров стоит в одной строке со схемой дележа: это одна мысль, и в сетке
   вводных она оставляла бы дыру рядом с соседней группой */
.un-inp { width: 74px; text-align: center; }
/* второй клик по «Сбросить» подтверждает: цвет предупреждает, что дальше стирание */
.bp.ghost.warn { color: var(--red-ink); border-color: var(--red-soft); background: var(--red-soft); }
.un-share { margin-top: 18px; }
.un-seg { margin: 0; }
.un-metrics { display: grid; gap: 10px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.un-m { background: var(--fill); border-radius: 12px; padding: 12px 14px; }
.un-ml { font-size: 11.5px; color: var(--ink-2); }
.un-mv { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; }
/* строка «Запуск N» в годовой таблице уже, чем статья в экономике: в ней два слова */
.un-ytbl .po-rl { width: 128px; }
.un-deal { display: grid; gap: 2px; margin-top: 4px; }
.un-di { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--line); }
.un-di:first-child { border-top: 0; }
.un-dt { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.un-dd { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 720px) {
  .un-di { grid-template-columns: 1fr; gap: 4px; }
  .un-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  /* на телефоне два поля в группе ужимаются до 150px, и длинная подпись уходит в
     две строки только у одного из них: ряд снова «пляшет». Одна колонка честнее */
  .un-form { grid-template-columns: 1fr; }
  /* переключатели шире экрана: даем им уехать вбок, как тарифам в портале, а не
     ломаем набор на две строки */
  .un-seg { max-width: 100%; overflow-x: auto; }
  .un-seg::-webkit-scrollbar { height: 0; }
  .un-seg button { flex: none; }
  .un-share .un-inp { width: 88px; }
}
/* накопительный столбец года: он и есть довод «работаем вдолгую», поэтому выделен */
.un-cum { color: var(--blue-d); font-weight: 650; }
/* откуда взялся процент расходов: строка стоит сразу под полями, чтобы на встрече
   не пришлось объяснять голосом, что это цифра из экономики, а не прикидка */
/* мера строки: на широком мониторе объяснение растягивалось на 1250px, и глазу
   было некуда возвращаться в конце строки */
.un-costnote { padding: 12px 14px; border-radius: 12px; background: var(--fill);
  margin-top: 18px; max-width: 880px; }
.un-groups ~ .po-note, .un-wnote { max-width: 880px; }
/* у строки без шкалы серый рельс читается как «ноль» рядом с суммой */
.lad-row.lad-norail .lad-track { background: none; }
.un-cnt { font-size: 13px; font-weight: 650; color: var(--ink); }
.un-cns { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-top: 5px; }
.un-costnote .lnk { border: 0; background: 0; padding: 0; font: inherit; font-weight: 650;
  color: var(--blue); cursor: pointer; }
.un-costnote .lnk:hover { text-decoration: underline; }