/* Akashi CRM — дизайн-система в одном файле, по образцу hub (style.css там —
   единственный источник стилей). Инлайновых стилей в шаблонах не пишем. */

:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --text: #1c2430;
  --muted: #6b7684;
  --accent: #175dc9;
  --border: #dde2e9;
  --flash-bg: #fff6e0;
  --flash-bord: #eacb7a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Шапка липкая (01.09.2026): на длинных списках и дашбордах навигация
   уезжала, и за «+ Задача» приходилось мотать наверх. */
.topbar { background: #16223a; color: #fff; position: sticky; top: 0; z-index: 50; }
/* Пунктов в меню стало много: шапка шире контента, меню тянется и при
   нехватке места прокручивается, а не наезжает на поиск и имя. */
.topbar-in {
  /* Ширина не ограничивается (31.08.2026): на мониторах 1920+ контент в
     колонке 1240px оставлял пустые поля в пол-экрана, а воронка при этом
     прокручивалась горизонтально. Экран — сколько есть, столько и берём. */
  margin: 0 auto; padding: 10px 28px;
  display: flex; align-items: center; gap: 18px;
}
.brand { color: #fff; font-size: 17px; flex-shrink: 0; }
.brand b { color: #7fb2ff; }
.usernav { display: flex; gap: 14px; align-items: center; flex-shrink: 0;
  margin-left: auto; }
.usernav a { color: #b9c6dd; white-space: nowrap; }
.uname { color: #e8eefb; white-space: nowrap; }

.page { margin: 24px auto; padding: 0 28px; }

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 24px 28px;
}
.panel h1 { margin: 0 0 16px; font-size: 20px; }

.facts { border-collapse: collapse; }
.facts td { padding: 6px 0; }
.facts td:first-child { color: var(--muted); padding-right: 24px; }

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

.flash {
  background: var(--flash-bg); border: 1px solid var(--flash-bord);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 16px;
}

/* ── вход ── */
.login-box {
  max-width: 380px; margin: 10vh auto 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 28px 32px;
}
.login-box h1 { margin: 0 0 6px; font-size: 22px; text-align: center; }
.login-box h1 b { color: var(--accent); }
.login-box .hint { text-align: center; margin-bottom: 18px; }
.login-box label { display: block; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.login-box input {
  display: block; width: 100%; margin-top: 4px; padding: 9px 11px;
  font-size: 15px; color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; background: #fbfcfe;
}
.login-box input:focus { outline: 2px solid #bcd3f5; border-color: var(--accent); }
.login-box button {
  width: 100%; padding: 10px; margin-top: 4px; font-size: 15px;
  background: var(--accent); color: #fff; border: 0; border-radius: 7px;
  cursor: pointer;
}
.login-box button:hover { filter: brightness(1.08); }

/* ── навигация ── */
/* Промежутки ужаты 16→10 и отступы ссылок 10→8 (14.09.2026). У администратора
   девять пунктов, и добавленный справа «Новое» отнимал у меню около восьмидесяти
   точек — «Журнал» и «Телеграм» уезжали за край МОЛЧА: у .mainnav прокрутка со
   скрытой полосой. Ужимание возвращает ровно столько же места. Измерено
   браузером: до правки на 1366 пропадали два пункта, после — ни одного. */
.mainnav { display: flex; gap: 10px; min-width: 0; overflow-x: auto;
  white-space: nowrap; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
/* Затухание у края, за которым ещё есть пункты. Классы ставит watchOverflow
   (log.js) — он же переводит колесо мыши в горизонтальную прокрутку. До
   15.09.2026 меню каталось, но признака не подавало: на 1366 «Журнал» и
   «Телеграм» уезжали молча. Приём общий с hub, там это полоса вкладок. */
.mainnav.ovf-r {
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.mainnav.ovf-l {
  mask-image: linear-gradient(to right, transparent, #000 28px); }
.mainnav.ovf-l.ovf-r {
  mask-image: linear-gradient(to right, transparent, #000 28px,
                              #000 calc(100% - 28px), transparent); }
.mainnav a { color: #b9c6dd; padding: 5px 8px; border-radius: 7px; }
.mainnav a:hover { color: #fff; text-decoration: none;
  background: rgba(255,255,255,.07); }
/* Текущий раздел подсвечен (01.09.2026): без этого в восьми пунктах меню
   не видно, где находишься, — базовое правило навигации CRM. */
.mainnav a.active { color: #fff; background: rgba(127,178,255,.20); }

/* ── шапка страницы ── */
.page-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.page-head h1 { margin: 0; font-size: 22px; }
.page-tools { display: flex; gap: 10px; align-items: center; }
.search input { padding: 8px 11px; border: 1px solid var(--border);
  border-radius: 7px; font-size: 14px; min-width: 220px; background: var(--panel); }

.btn { display: inline-block; padding: 8px 14px; background: var(--accent);
  color: #fff; border: 0; border-radius: 7px; font-size: 14px; cursor: pointer; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn-lite { background: var(--panel); color: var(--accent);
  border: 1px solid var(--border); }
.btn-add { float: right; font-size: 13px; padding: 4px 10px; }

/* ── таблицы ── */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 500;
  padding: 8px 10px; border-bottom: 2px solid var(--border); }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tbl tr:last-child td { border-bottom: 0; }
/* Подсветка строки под курсором: в длинных реестрах глаз теряет строку. */
.tbl tbody tr:hover td { background: #f3f6fb; }
.table-panel { padding: 8px 14px; overflow-x: auto; }
.empty { color: var(--muted); }
.muted { color: var(--muted); font-size: 13px; margin-left: 6px; }
.warn-text { color: #b3541e; }

.panel h2 { margin: 0 0 12px; font-size: 16px; }
.panel h3 { margin: 18px 0 8px; font-size: 14px; color: var(--muted); }
.panel + .panel { margin-top: 16px; }

/* ── чипы стадий ── */
.chip { display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 12px; background: #e8ecf3; color: #3c4a5e; vertical-align: middle; }
.chip-warn { background: #fbe3d0; color: #8a4413; }
.chip-new { background: #e3edfb; color: #1c4f9c; }
.chip-sql { background: #dcf1e5; color: #1d6b40; }
.chip-not_yet { background: #f0e8fa; color: #5f3d94; }
.chip-push_loi, .chip-loi_review { background: #fdf0d4; color: #7d5a12; }
.chip-loi_signed { background: #fbe7cf; color: #8a4d10; }
.chip-offtake { background: #fde0dc; color: #92382b; }
.chip-won { background: #d3efd9; color: #1b5e2e; }
.chip-lost { background: #eceff2; color: #6b7684; }

/* ── две колонки карточки ── */
.cols { display: grid; grid-template-columns: 1fr 380px; gap: 16px;
  align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* ── лента ── */
.feed-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.feed-item:last-child { border-bottom: 0; }
.feed-head { display: flex; gap: 8px; font-size: 12px; color: var(--muted);
  flex-wrap: wrap; }
.feed-who { font-weight: 600; color: var(--text); }
.feed-ts { margin-left: auto; }
.feed-text { font-size: 14px; margin-top: 2px; white-space: pre-wrap; }
.feed-system .feed-text, .feed-stage .feed-text { color: var(--muted); font-size: 13px; }
.comment-form textarea { width: 100%; padding: 8px 10px; font: inherit;
  font-size: 14px; border: 1px solid var(--border); border-radius: 7px;
  background: #fbfcfe; resize: vertical; }
.comment-form .btn { margin: 6px 0 14px; padding: 6px 12px; font-size: 13px; }

/* ── формы ── */
.form-panel { max-width: 880px; }
.form-panel h1 { font-size: 19px; margin: 0 0 18px; }
/* Атрибут hidden обязан побеждать любые display-правила классов: без этого
   .frow{display:flex} показывал «скрытые» блоки стадий в карточках сделки и
   задачи — все условные поля (причина проигрыша, блокер…) торчали разом,
   а JS-переключение по select ничего не меняло (31.08.2026). */
[hidden] { display: none !important; }
.frow { display: flex; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.frow label { flex: 1; min-width: 160px; font-size: 13px; color: var(--muted); }
.frow input, .frow select { display: block; width: 100%; margin-top: 4px;
  padding: 8px 10px; font: inherit; font-size: 14px; color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; background: #fbfcfe; }
.frow .check { display: flex; align-items: center; gap: 8px; color: var(--text);
  font-size: 14px; min-width: auto; flex: 0 1 auto; }
.frow .check input { display: inline; width: auto; margin: 0; }
.form-panel .btn { margin-top: 8px; }

/* ── телеграм: центр управления ботом (формат hub, 01.09.2026) ──
   Статус поллера пилюлей, переписка двумя панелями: чаты слева, лента
   справа; шапка с автором только при смене говорящего, текст бота
   приглушён. */
.tg-status { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; border-radius: 20px; padding: 5px 12px; }
.tg-status::before { content: ""; width: 7px; height: 7px;
  border-radius: 50%; background: currentColor; }
.tg-status.ok { color: #1b7f4d; background: #e3f2e9; }
.tg-status.bad { color: #a33c30; background: #f9e9e6; }
.stat-warn { border-color: #e4b7ae; }
.stat-warn b { color: #a33c30; }
.tg-split-panel { padding: 0; overflow: hidden; }
.tg-split { display: grid; grid-template-columns: 270px 1fr; min-height: 300px; }
.tg-chats { border-right: 1px solid var(--border); max-height: 66vh;
  overflow-y: auto; }
.tg-c { display: block; padding: 9px 14px; border-bottom: 1px solid
  var(--border); color: var(--text); }
.tg-c:hover { background: #f3f6fb; text-decoration: none; }
.tg-c.on { background: #e8effb; box-shadow: inset 2px 0 0 var(--accent); }
.tg-c b { display: block; font-size: 13px; font-weight: 500;
  line-height: 1.35; overflow-wrap: anywhere; }
.tg-c i { display: block; margin-top: 2px; font-style: normal;
  font-size: 11px; color: var(--muted); }
.tg-chats .empty { padding: 12px 14px; font-size: 13px; }
.thread { max-height: 66vh; overflow-y: auto; padding: 4px 18px 12px; }
@media (max-width: 700px) {
  .tg-split { grid-template-columns: 1fr; }
  .tg-chats { max-height: 30vh; border-right: 0;
    border-bottom: 1px solid var(--border); }
}
.msg { padding: 6px 0 7px; border-bottom: 1px solid var(--border); }
.msg:last-child { border-bottom: 0; }
.msg.cont { padding-top: 0; }
.msg-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.msg-h b { font-size: 12.5px; font-weight: 600; }
.msg.bot .msg-h b { color: var(--accent); }
.msg-h span { font-size: 11px; color: var(--muted); }
.msg-x { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere; }
.msg.bot .msg-x { color: var(--muted); }

/* ── настройки (макет 01.09.2026) ──
   Справочники строками с правкой по месту вместо вечно открытых textarea;
   числовые правила — строками с единицами; общий предел 1280px. */
.settings-page { max-width: 1280px; margin: 0 auto; }
.page-sub { color: var(--muted); margin: 4px 0 0; font-size: 14px; }
.settings-page .panel { border-radius: 14px; margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(22,34,58,.04); }
.settings-grid { display: grid; gap: 16px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.settings-grid .panel { margin-bottom: 0; }
.dash-tabs .dt-off { padding: 7px 16px; font-size: 14px; color: var(--muted);
  opacity: .55; cursor: default; }

.ref-list { list-style: none; margin: 0 0 12px; padding: 0;
  border: 1px solid var(--border); border-radius: 10px; }
.ref-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-bottom: 1px solid var(--border); }
.ref-row:last-child { border-bottom: 0; }
.ref-row:hover { background: #f3f6fb; }
.ref-row.dragging { opacity: .45; }
.ref-text { flex: 1; font-size: 14px; }
.ref-input { flex: 1; padding: 6px 9px; font: inherit; font-size: 14px;
  color: var(--text); border: 1px solid var(--accent); border-radius: 7px;
  background: #fbfcfe; min-width: 0; }
.icon-btn { border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 6px; border-radius: 6px; line-height: 0; }
.icon-btn:hover { color: var(--accent); background: #e8effb; }
.icon-btn:focus-visible { outline: 2px solid #bcd3f5; }
.ref-del-btn:hover { color: #a33c30; background: #f9e9e6; }
.grip { cursor: grab; font-size: 14px; line-height: 1; }
.ref-add { display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font: inherit; font-size: 14px; color: var(--accent);
  background: none; border: 1px dashed #b7c8e4; border-radius: 8px;
  cursor: pointer; }
.ref-add:hover { background: #eef3fb; }
.ref-add:focus-visible { outline: 2px solid #bcd3f5; }
.ref-err { color: #a33c30; font-size: 13px; margin: 0 0 10px; }

.auto-row { display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--border); }
.auto-row:last-child { border-bottom: 0; }
.auto-text { flex: 1; font-size: 14px; }
.auto-text b { font-weight: 600; }
.auto-text .hint { margin-left: 10px; }
.auto-row input { width: 76px; padding: 8px 10px; text-align: center;
  font: inherit; font-size: 14px; color: var(--text); flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 7px; background: #fbfcfe; }
.auto-unit { color: var(--muted); font-size: 14px; min-width: 52px; }
.icon-circle { display: inline-flex; align-items: center; justify-content:
  center; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: #e8effb; color: var(--accent); }

.note-info { display: flex; align-items: center; gap: 12px; font-size: 14px;
  background: #eaf1fc; border: 1px solid #c9daf3; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 16px; color: var(--text); }
.settings-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn[disabled] { opacity: .6; cursor: default; }

@media (max-width: 700px) {
  .auto-text .hint { display: block; margin: 2px 0 0; }
}

/* ── плашка «подключить бота» ── */
.tg-nudge { background: #e8effb; border: 1px solid #c9daf3; border-radius: 8px;
  padding: 9px 14px; margin-bottom: 16px; font-size: 14px; }

/* ── техлог ── */
.tb { white-space: pre-wrap; font-size: 12px; max-height: 300px; overflow: auto;
  background: #f3f6fb; padding: 8px 10px; border-radius: 6px; margin: 6px 0 0; }
details summary { cursor: pointer; }
.req-code { font-size: 20px; letter-spacing: .08em; background: #eef3fb;
  padding: 4px 10px; border-radius: 6px; }
.cc-sel { padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
  font: inherit; font-size: 14px; background: var(--panel); }

/* ── дубли ── */
.dups { background: var(--flash-bg); border: 1px solid var(--flash-bord);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; font-size: 14px; }
.dups ul { margin: 8px 0; padding-left: 20px; }
.dups .force { display: flex; gap: 8px; align-items: center; }

/* ── kanban ── */
/* ПРОКРУТКА ВМЕСТО СЖАТИЯ (14.09.2026, решение владельца портала). Раньше
   колонки делили ширину поровну (flex: 1 1 200px): на широком экране они
   растягивались, на узком упирались в min-width и доска начинала прокручиваться
   — но человек этого не видел. «Offtake/CRA» просто обрезался правым краем, и
   седьмая стадия выглядела отсутствующей. Стадий станет больше, и обрезаться
   начнёт всё чаще.
   Теперь ширина ФИКСИРОВАНА и flex-shrink нулевой: колонка не сжимается ни при
   каком числе стадий, а вместо этого доска честно прокручивается — с видимой
   полосой, затенением у краёв и автопрокруткой при переносе карточки (board.js).
   240px вместо прежних 200: сужать было нельзя, а на 1920 семь колонок с этой
   шириной занимают 1752px из 1864 доступных — то есть почти вся ширина занята,
   как и раньше, но уже без растягивания. */
.kanban-wrap { position: relative; }
/* Затенения у краёв: видно, что справа или слева есть ещё колонки. Рисуются на
   обёртке, а не на .kanban — та прокручивается, и тень уехала бы вместе с
   содержимым. Классы вешает board.js по факту прокрутки. */
.kanban-wrap::before, .kanban-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 14px; width: 34px;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 2; }
.kanban-wrap::before { left: 0;
  background: linear-gradient(to right, rgba(247,248,250,.98), rgba(247,248,250,0)); }
.kanban-wrap::after { right: 0;
  background: linear-gradient(to left, rgba(247,248,250,.98), rgba(247,248,250,0)); }
.kanban-wrap.kan-l::before, .kanban-wrap.kan-r::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .kanban-wrap::before, .kanban-wrap::after { transition: none; }
}
/* КОЛОНКИ ОДНОЙ ВЫСОТЫ, А НЕ «КАЖДАЯ РОСТОМ В СВОЁ СОДЕРЖИМОЕ» (14.09.2026).
   Было align-items: flex-start — и у стадии без сделок колонка превращалась в
   полоску в сорок точек, один заголовок. Положить туда карточку можно было,
   только прицелившись в название; люди на это и пожаловались. Теперь колонка
   занимает всю высоту доски, и зоной приёма становится вся она, включая пустое
   место под карточками. */
.kanban { display: flex; gap: 12px; overflow-x: auto; align-items: stretch;
  padding-bottom: 12px; overscroll-behavior-x: contain; min-height: 320px; }
/* КОЛОНКА НЕ ВЫШЕ ЭКРАНА. Иначе доска в 36 карточек вырастает на три тысячи
   точек, и горизонтальная полоса прокрутки вместе с предупреждением о ширине
   оказываются ниже сгиба: формально они есть, а человек их не видит — ровно та
   беда, ради которой всё и затевалось (увидено на снимке 14.09.2026). Теперь
   длинная колонка прокручивается внутри себя, а доска целиком помещается на
   экран вместе со своей полосой.
   На узких экранах ограничение снимается: там колонка одна на вид и листается
   свайпом. */
@media (min-width: 701px) {
  .kcol { max-height: calc(100vh - 215px); min-height: calc(100vh - 215px); }
}

/* ПОЛОСА ПРОКРУТКИ ВСЕГДА ВИДНА. В macOS и в части браузеров полоса скрыта,
   пока её не трогают, — а именно она и говорит человеку, что доска длиннее
   экрана. Задаём явную высоту и цвет обоими способами: свойством scrollbar-*
   (Firefox) и псевдоэлементами WebKit. */
.kanban { scrollbar-width: auto; scrollbar-color: #9aa6b8 #e4e8ee; }
.kanban::-webkit-scrollbar { height: 12px; }
.kanban::-webkit-scrollbar-track { background: #e4e8ee; border-radius: 6px; }
.kanban::-webkit-scrollbar-thumb { background: #9aa6b8; border-radius: 6px;
  border: 2px solid #e4e8ee; }
.kanban::-webkit-scrollbar-thumb:hover { background: #7d8ba1; }
.kanban:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Перетаскивание доски за пустое место (board.js ставит .kan-grab). */
.kanban.kan-grab { cursor: grabbing; user-select: none; }
.kcol { flex: 0 0 240px; width: 240px; background: #ebeef3;
  border-radius: 10px; padding: 10px; border-top: 3px solid #c6cedb;
  display: flex; flex-direction: column; }
/* Список карточек забирает остаток высоты и прокручивается сам: длинная колонка
   не растит доску, а пустое место под карточками остаётся частью колонки, то
   есть принимает перенос. */
.kcol-cards { flex: 1 1 auto; overflow-y: auto; min-height: 40px; }
/* ЦВЕТ СТАДИИ — ЗНАЧЕНИЕМ, А НЕ КЛАССОМ (14.09.2026, этап 3). Здесь стояли
   шесть правил .kcol-<код>: у стадии, заведённой человеком, класса нет и не
   будет — писать в style.css из веб-запроса нельзя, файл общий и уезжает
   выкатом. Теперь колонка несёт --stage из справочника, а классы остались
   только у доски ЗАДАЧ: там статусы прошиты в коде и переменной нет. */
.kcol { border-top-color: var(--stage, #c6cedb); }
.kcol-todo { border-top-color: #4a7fd4; }
.kcol-in_progress { border-top-color: #d0a137; }
.kcol-blocked { border-top-color: #c95f50; }
.kcol-pending { border-top-color: #8a68c0; }
.kcol-done { border-top-color: #3c9a68; }
.kcol-head { font-size: 13px; font-weight: 600; margin-bottom: 10px;
  display: flex; justify-content: space-between; }
.kcount { color: var(--muted); font-weight: 400; }
.kcard { display: block; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; color: var(--text); }
.kcard { transition: box-shadow .12s, border-color .12s, transform .12s; }
.kcard:hover { text-decoration: none; border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(22,34,58,.10); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .kcard { transition: none; }
  .kcard:hover { transform: none; }
}
.kcard-name { font-size: 14px; font-weight: 600; }
.kcard-co { font-size: 13px; color: var(--muted); }
.kcard-meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted);
  margin-top: 4px; flex-wrap: wrap; }
.kcard-next { font-size: 12px; color: #1d6b40; margin-top: 4px; }
.kcard-warn { font-size: 12px; color: #b3541e; margin-top: 4px; }

/* ── перетаскивание на доске (board.js) ── */
@media (pointer: fine) { .kanban[data-board] .kcard { cursor: grab; } }
.kcard-drag { opacity: .45; }
.kcol-drop { outline: 2px dashed var(--accent); outline-offset: -2px;
  background: #e0eafa; }
/* ПОЛОСА ВСТАВКИ: человек видит, между какими карточками ляжет, до того как
   отпустит. Без неё «положить в любое место» превращается в лотерею. */
.kgap { height: 3px; margin: 3px 0; border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.kcol-orphan .kcol-cards { overflow-y: auto; }

/* ── что нового (14.09.2026) ── */
/* Пункт назван «Новое», а не «Что нового»: в шапке у администратора девять
   пунктов меню, и десятый длинный вытеснял «Журнал» и «Телеграм» за край —
   .mainnav прокручивается со СКРЫТОЙ полосой, то есть пункты пропадали молча.
   Увидено на снимке 14.09.2026; полное название осталось в подсказке и в
   заголовке самой страницы. */
.wn { position: relative; }
.wn-n { display: inline-block; min-width: 17px; height: 17px; padding: 0 4px;
  margin-left: 5px; border-radius: 9px; background: #d94f45; color: #fff;
  font-size: 11px; line-height: 17px; text-align: center; font-weight: 600; }
.wn-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.wn-item:last-child { border-bottom: 0; }
.wn-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.wn-head b { font-size: 15px; }
.wn-go { font-size: 13px; }
.wn-body { margin: 5px 0 0; white-space: pre-wrap; }
.wn-meta { margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.chip-new { background: #e3edfb; color: #1c4f9c; }
.chip-improve { background: #dcf1e5; color: #1d6b40; }
.chip-fix { background: #fbe7cf; color: #8a4d10; }
/* Черновики намеренно отличаются по виду: это ещё не новость, а заготовка. */
.panel-draft { border-left: 3px solid #d0a137; background: #fffdf7; }
.wn-edit { padding: 12px 0; border-bottom: 1px dashed var(--border); }

/* ── ЛЕНТА ПО ДНЯМ (перенос формы из hub 14.09.2026) ──────────────────────────
   Строка дня: подпись слева, рассказ посередине, число правок справа. Ширина
   подписи фиксированная — иначе заголовки дней начинаются каждый со своего
   места, и столбец не читается сверху вниз. */
.wnd { display: flex; align-items: baseline; gap: 14px; width: 100%;
  text-align: left; color: inherit; border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 15px; margin-bottom: 8px; background: var(--panel); }
.wnd:hover { border-color: #b9c3d1; background: #fbfcfe; text-decoration: none; }
.wnd:last-child { margin-bottom: 0; }
.wnd-date { flex: 0 0 116px; font-weight: 600; font-size: 14px; }
.wnd-title { flex: 1; font-size: 14px; line-height: 1.4; }
.wnd-num { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Заголовок дня под названием дня — это подзаголовок страницы, а не текст. */
.wn-headline { margin-top: 4px; font-size: 14px; color: var(--muted); max-width: 720px; }
/* Рассказ. Строка не длиннее ~90 знаков: дальше глаз теряет начало следующей. */
.wn-sum { max-width: 760px; font-size: 15px; line-height: 1.6; }
.wn-sum p { margin: 0 0 10px; }
.wn-sum p:last-child { margin-bottom: 0; }

/* Перечень правок дня — свёрнут: пришедшему за новостями он не нужен, ищущему
   конкретную правку необходим. */
.p-fold > summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.p-fold[open] > summary { margin-bottom: 10px; }
.wn-mini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; font-size: 13px; }
.wn-at { flex: 0 0 auto; min-width: 104px; font-variant-numeric: tabular-nums;
  color: var(--muted); font-size: 12.5px; }
.wn-sec { font-size: 12px; color: var(--muted); }
.wn-fix > summary { cursor: pointer; font-size: 12.5px; padding: 2px 0 6px; }
.wn-edit:last-child { border-bottom: 0; }
.wn-edit textarea { width: 100%; }
.wn-foot { display: flex; gap: 8px; align-items: center; margin-top: 8px;
  flex-wrap: wrap; }
.wn-foot .muted { margin-right: auto; }
.linkish { border: 0; background: none; padding: 0; color: var(--accent);
  cursor: pointer; font-size: inherit; }

/* ── редактор стадий (14.09.2026, этап 3) ── */
/* «+» между колонками: узкая полоса во всю высоту, чтобы место вставки читалось
   без подписи. Пунктирная рамка — чтобы кнопку было ВИДНО в покое: при opacity
   .35 без рамки она сливалась с фоном, и на снимке экрана 14.09.2026 её не было
   видно вовсе. Заметна, но не кричит: восемь плюсов на доске не должны спорить
   с карточками. */
.kadd { flex: 0 0 24px; align-self: stretch; min-height: 120px;
  border: 1px dashed var(--line-strong, #c6cedb); background: transparent;
  color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
  border-radius: 8px; opacity: .55; transition: opacity .12s, background .12s; }
.kadd:hover, .kadd:focus-visible { opacity: 1; background: #e4e8ee;
  border-style: solid; }
.kcol-head { align-items: center; gap: 6px; }
.kcol-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
[data-drag-col] { cursor: grab; }
[data-drag-col]:active { cursor: grabbing; }
.kcol-edit { border: 0; background: transparent; cursor: pointer; padding: 0 2px;
  color: var(--muted); font-size: 15px; line-height: 1; opacity: .5; }
.kcol-edit:hover, .kcol-edit:focus-visible { opacity: 1; }
.kcol-moving { opacity: .5; }
.kcol-before { box-shadow: -3px 0 0 0 var(--accent); }
/* Колонка «вне воронки»: сделки со скрытых стадий и с кодов, которых в
   справочнике нет. Намеренно отличается по виду — это не стадия, а починка. */
.kcol-orphan { background: #f5f0e6; border-top-color: #c9a227; }
.kcol-note { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.chip-orphan { background: #f0e6cc; color: #6b5518; }
.kan-warn { font-size: 13px; color: var(--muted); padding: 6px 2px 0; }

/* Окно стадии */
.stg-back { position: fixed; inset: 0; background: rgba(22,34,58,.35); z-index: 40; }
.stg { position: fixed; z-index: 41; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow: auto; background: var(--panel);
  border-radius: 12px; padding: 20px 22px; box-shadow: 0 12px 40px rgba(22,34,58,.25); }
.stg h2 { margin: 0 0 14px; font-size: 17px; }
.stg-l { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.stg-l input, .stg-l select { display: block; width: 100%; margin-top: 4px; }
.stg-code { font-size: 12px; color: var(--muted); margin: -6px 0 12px; }
.stg-pal { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.stg-c { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; }
.stg-c.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--panel) inset; }
.stg-chk { display: flex; gap: 7px; align-items: center; font-size: 13px;
  color: var(--text); margin-bottom: 6px; }
.stg-req { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
  margin-top: 6px; }
@media (max-width: 560px) { .stg-req { grid-template-columns: 1fr; } }
.stg-err { color: #b42318; font-size: 13px; margin: 8px 0; }
.stg-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ── дисквалифицированные лиды (14.09.2026) ── */
.chip-disq { background: #e9ecf1; color: #5a6472; }
.panel-disq { border-left: 3px solid #8a93a3; }
.panel-disq form { margin-top: 10px; }

/* ── плитки на главной ── */
.stat-row { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.stat { flex: 1; min-width: 140px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px;
  color: var(--text); }
.stat:hover { text-decoration: none; border-color: var(--accent); }
.stat b { display: block; font-size: 26px; }
.stat span { color: var(--muted); font-size: 13px; }

/* ── задачи ── */
.prio-high { color: #c0392b; font-weight: 700; margin-right: 2px; }
.kcard-over { border-left: 3px solid #c0392b; }
.kcol-more { display: block; font-size: 13px; text-align: center; padding: 6px; }
.btn-on { background: #dfe9f8; }
.descr { white-space: pre-wrap; }
.check-row { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.check-btn { border: 0; background: none; cursor: pointer; font-size: 15px;
  color: var(--muted); padding: 0; }
.check-done { color: #1b5e2e; }
.check-done-text { color: var(--muted); text-decoration: line-through; }
.check-add input { width: 100%; padding: 6px 10px; font-size: 14px;
  border: 1px dashed var(--border); border-radius: 7px; background: none;
  margin-top: 6px; }
.member-sel { width: 100%; padding: 6px; border: 1px solid var(--border);
  border-radius: 7px; font: inherit; font-size: 14px; margin-bottom: 8px; }
.area { display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  font: inherit; font-size: 14px; border: 1px solid var(--border);
  border-radius: 7px; background: #fbfcfe; resize: vertical; }

/* ── фокус ввода ──
   Единый видимый фокус (01.09.2026): был только у формы входа, в остальных
   формах поле под курсором ничем не отличалось от соседних. */
input:focus, select:focus, textarea:focus {
  outline: 2px solid #bcd3f5; border-color: var(--accent); }

/* ── фильтры списка ── */
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px; }
.filter-bar select, .filter-bar input[type=month], .filter-bar input[name=q] {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
  font: inherit; font-size: 14px; background: #fbfcfe; }
.filter-bar .check { display: flex; gap: 6px; align-items: center; font-size: 14px; }

/* ── поиск в шапке ── */
/* Поиск уступает место меню, а не наоборот: пункт меню, уехавший за край,
   пропадает молча (у .mainnav скрытая полоса прокрутки), а укоротившееся поле
   поиска человек видит и понимает. На узком экране — своё правило ниже. */
.topsearch { flex-shrink: 1; min-width: 90px; }
.topsearch input { padding: 6px 12px; border: 1px solid #35435e;
  border-radius: 7px; background: #223050; color: #e8eefb; font-size: 14px;
  width: 140px; }
.topsearch input:focus { width: 200px; transition: width .15s; }
.topsearch input::placeholder { color: #7e8cA6; }

/* ── переключатель дашбордов ── */
.dash-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.dash-tabs a { padding: 7px 16px; border-radius: 7px 7px 0 0; font-size: 14px;
  color: var(--muted); border-bottom: 2px solid transparent; }
.dash-tabs a:hover { text-decoration: none; color: var(--accent); }
.dash-tabs .dt-on { color: var(--text); font-weight: 600;
  border-bottom-color: var(--accent); }

/* ── календарь ── */
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th { color: var(--muted); font-weight: 500; font-size: 13px;
  padding: 6px; text-align: left; }
.cal-day { vertical-align: top; border: 1px solid var(--border);
  padding: 6px; height: 84px; }
.cal-empty { background: #f0f2f5; }
.cal-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-num { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cal-item { display: block; font-size: 12px; padding: 2px 6px; margin: 2px 0;
  border-radius: 5px; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; }
.cal-task { background: #e3edfb; color: #1c4f9c; }
.cal-meet { background: #dcf1e5; color: #1d6b40; }
.cal-item:hover { text-decoration: none; filter: brightness(0.95); }

/* ── мобильная вёрстка ──────────────────────────────────────────────────
   Менеджеры ходят с телефонов (30.08.2026): всё, что шире экрана, должно
   скроллиться внутри своего блока, а не растягивать страницу вбок. */

/* Широкие таблицы скроллятся внутри панели на любом экране */
.panel { overflow-x: auto; }
.cal { min-width: 640px; }

@media (max-width: 700px) {
  .page { margin: 12px auto; padding: 0 10px; }

  /* Шапка: бренд и выход в первой строке, меню — своей строкой с
     горизонтальной прокруткой, поиск — на всю ширину */
  .topbar-in { flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; }
  .mainnav { order: 3; flex-basis: 100%; overflow-x: auto;
    white-space: nowrap; gap: 14px; padding-bottom: 2px;
    -webkit-overflow-scrolling: touch; }
  .mainnav a { padding: 4px 0; }
  .topsearch { order: 2; margin-left: auto; }
  .topsearch input { width: 120px; }
  .usernav { order: 1; margin-left: auto; gap: 10px; }
  .uname { display: none; }   /* имя есть в «Выйти»-меню контекста, тут тесно */

  .page-head { flex-direction: column; align-items: stretch; }
  .page-head h1 { font-size: 19px; }
  .page-tools { flex-wrap: wrap; }
  .search input { min-width: 0; width: 100%; }

  /* iOS «дозумливает» поля мельче 16px — на мобильном все поля 16px */
  .frow input, .frow select, .login-box input, .comment-form textarea,
  .search input, .filter-bar input, .filter-bar select, .area,
  .check-add input { font-size: 16px; }
  .frow label { min-width: 100%; }   /* поля формы — в столбик */

  .stat-row { gap: 8px; }
  .stat { min-width: calc(50% - 8px); padding: 12px 14px; }
  .stat b { font-size: 21px; }

  /* Kanban: колонка почти во всю ширину, перелистывается свайпом */
  .kanban { scroll-snap-type: x mandatory; gap: 10px; }
  .kcol { flex: 0 0 82vw; width: 82vw; scroll-snap-align: start; }
  /* На узком экране затенения только мешают: колонка и так одна на виду. */
  .kanban-wrap::before, .kanban-wrap::after { display: none; }

  .cols { gap: 12px; }
  .panel { padding: 14px 16px; }
  .login-box { margin-top: 5vh; padding: 22px; }
  .dash-tabs { overflow-x: auto; white-space: nowrap; }
  .dash-tabs a { padding: 7px 10px; }
  .btn { padding: 10px 14px; }   /* пальцу нужна цель побольше */
}

/* ── вложения, слияние, тип активности ── */
.file-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.file-del button { border: 0; background: none; color: var(--muted);
  cursor: pointer; font-size: 15px; padding: 0 4px; }
.file-del button:hover { color: #c0392b; }
.file-add .btn { margin-top: 0; }
.merge-row { display: flex; gap: 8px; }
.merge-row select { flex: 1; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 7px; font: inherit; font-size: 14px; background: #fbfcfe;
  min-width: 0; }
.comment-tools { display: flex; gap: 8px; align-items: center; margin: 6px 0 14px; }
.comment-tools select { padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 7px; font: inherit; font-size: 13px; background: #fbfcfe; }
.comment-tools .btn { margin: 0; padding: 6px 12px; font-size: 13px; }

/* ── журнал ── */
.nowrap { white-space: nowrap; }
.jsoncell { font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  word-break: break-all; color: var(--muted); }


/* ── компактные таблицы «название — число»: цифра рядом с текстом, а не
   у дальнего края страницы ── */
.tbl-kv { max-width: 560px; }
.tbl-kv td:last-child { text-align: right; width: 70px; font-weight: 600; }

/* ── второй фактор входа (twofa.py, схема hub, 02.09.2026) ── */
.login-box input.tfa-code { font-size: 22px; letter-spacing: .35em; text-align: center;
  font-variant-numeric: tabular-nums; }
.login-box .tfa-note { margin: 12px 0 0; font-size: 13px; }