/* Стиль платформы и макетов — один дом.
   До 18.08 половина правил жила здесь, половина — строкой внутри page() в lib/views.js. Пока
   экран был один и широкий, это ничего не стоило; с приходом телефона стало стоить сразу: правило
   в page() идёт ПОСЛЕ этого файла, поэтому любой @media отсюда проигрывал ему при равной
   специфичности и просто не срабатывал. Теперь всё лежит здесь, а телефонный блок — последним. */

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  width:auto; max-width:1180px; margin:0 auto;
  background:#0f1115; color:#e8eaed;
  font-family:"DejaVu Sans", sans-serif; font-size:19px; line-height:1.42;
  padding:26px 26px 30px;
}
a { color:inherit; text-decoration:none; }
code { font-family:ui-monospace, monospace; font-size:.9em; color:#9fb4d4; }

/* ── шапка ──────────────────────────────────────────────────────────────────────────────
   Разбор интерфейса 05.09.2026: восемь вкладок переносом занимали на телефоне три строки —
   треть первого экрана уходила на навигацию, а активная вкладка терялась во втором ряду.
   Теперь шапка — две строки всегда (имя и время; лента вкладок), лента листается вбок и
   НЕ переносится, а вся шапка липнет к верху: сменить экран можно, не отматывая наверх. */
.top { position:sticky; top:0; z-index:40; background:#0f1115; display:flex; flex-direction:column;
       gap:10px; margin:-26px -26px 18px; padding:16px 26px 12px; border-bottom:1px solid #1d222b; }
.topline { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.brand { font-size:22px; font-weight:bold; letter-spacing:.3px; }
.brand span { color:#7d8794; font-weight:normal; font-size:16px; margin-left:10px; }
.tabs { display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
        -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px 2px; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:0 0 auto; white-space:nowrap; padding:8px 15px; border-radius:8px; background:#191d24;
       color:#8b95a3; font-size:16px; letter-spacing:.3px; }
.tab.on { background:#2b6cf6; color:#fff; font-weight:bold; }
.tab .cnt { color:#ff8a95; font-weight:bold; }
.tab.on .cnt { color:#fff; }
.now { color:#7d8794; font-size:16px; flex-shrink:0; }

.wait { background:#241a1c; border:1px solid #6d2b34; border-radius:14px; padding:18px 20px; margin-bottom:20px; }
.wait h2 { font-size:19px; color:#ff8a95; margin-bottom:12px; letter-spacing:.2px; }
.wrow { display:flex; gap:14px; align-items:flex-start; padding:11px 0; border-top:1px solid #33232a; }
.wrow:first-of-type { border-top:none; }
.wtxt { flex:1; min-width:0; overflow-wrap:anywhere; }
.wtxt b { font-weight:bold; }
.wsub { color:#98a1ad; font-size:16px; margin-top:3px; }
/* Группы внутри «ЖДЁТ ТЕБЯ»: заголовок группы тише её строк, чтобы делил, а не спорил с ними. */
.wgrp { margin-top:14px; }
.wgrp:first-of-type { margin-top:0; }
.wgrp h3 { font-size:14px; letter-spacing:.4px; text-transform:uppercase; color:#c98d95; font-weight:bold; margin-bottom:2px; }
.wgrp h3 em { font-style:normal; text-transform:none; letter-spacing:0; font-weight:normal; color:#8b7076; margin-left:8px; font-size:14px; }
.wait .wrow b { font-size:17px; line-height:1.35; }
/* ГЛАВНОЕ — три блока на один вопрос каждый. Формы намеренно те же, что на других экранах:
   человек не должен учить новый вид ради первого экрана. */
.gblk { background:#161a21; border:1px solid #262d38; border-left:3px solid #3a424e; border-radius:12px;
        padding:14px 16px; margin-bottom:14px; }
.gblk.hot { border-left-color:#d9414f; }
.gblk.calm { border-left-color:#3f9c6d; }
.gblk h2 { font-size:15px; letter-spacing:.5px; color:#c3ccd8; margin-bottom:8px; }
.gblk.hot h2 { color:#ff8a95; }
.gblk h2 em { font-style:normal; letter-spacing:0; color:#7d8794; font-weight:normal; font-size:14px; margin-left:10px; }
.grow { display:flex; gap:12px; align-items:baseline; justify-content:space-between;
        padding:9px 0; border-top:1px solid #232935; line-height:1.35; }
.grow:first-of-type { border-top:none; }
.grow b { font-weight:600; font-size:16px; }
.gto { flex:0 0 auto; color:#7fb0ff; font-size:14px; text-decoration:none; }
/* Строка первого экрана — целиком ссылка: цель размером в строку, а не в слово «открыть».
   Уголок справа говорит, что строка ведёт дальше, и не отнимает места у смысла. */
a.grow { text-decoration:none; color:inherit; align-items:center; }
a.grow:hover { background:#1b212a; }
a.grow b { color:#e7ecf3; }
.gchev { flex:0 0 auto; color:#5c6673; font-size:20px; line-height:1; padding-left:4px; }
/* Подзаголовок внутри блока: отделяет «борта» от «правок» — две беды с разным ходом. */
.gsub { margin:10px 0 2px; font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:#7d8794; }
.gsub:first-child { margin-top:0; }
.wmore { margin-top:6px; }
.wmore > summary { cursor:pointer; color:#8b95a3; font-size:14px; }
.wmore > div { margin-top:6px; color:#b9c2cd; line-height:1.45; font-size:15px; }
.wait .wsub { font-size:14px; color:#a08a8f; }
.btns { display:flex; gap:8px; flex-shrink:0; padding-top:2px; }
.btn { background:#2b6cf6; color:#fff; border-radius:8px; padding:7px 16px; font-size:16px; }
.btn.gray { background:#2a3038; color:#c3cad3; }

.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid.g4 { grid-template-columns:repeat(4, 1fr); }
.grid.g5 { grid-template-columns:repeat(5, 1fr); }
/* Колонка сетки по умолчанию не уже своего содержимого — и неразрывное значение («06.09, 02:30
   МСК») распирало её, срезая соседнюю плитку за краем экрана. Разрешаем колонке быть уже текста. */
.grid > * { min-width:0; }
.line { min-width:0; }
/* ПЛОТНОСТЬ (22.09.2026, слово Вячеслава: «все разделы внутри платформы очень сильно перегружены…
   оптимизирован графически не менее чем процентов на 30, но без потери смысла и информативности»).
   Объём режется воздухом между фактами, а не фактами: отступы карточек, заголовков и подвалов были
   рассчитаны на экран из трёх блоков, а разделы выросли до пятнадцати. Кегль текста ниже 13 px не
   опускается нигде — владелец читает с телефона. */
.card { background:#161a21; border:1px solid #242a34; border-radius:14px; padding:12px 15px; }
.card h3 { font-size:17px; color:#9aa5b3; font-weight:normal; margin-bottom:8px; display:flex; justify-content:space-between; }
.card h3 em { font-style:normal; color:#5f6875; font-size:15px; }
.line { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid #1f242c; }
.line:first-of-type { border-top:none; }
.line .v { color:#e8eaed; font-weight:bold; white-space:nowrap; }
.line .v.big { font-size:26px; }
.red { color:#ff7b88; }
.green { color:#5ed39b; }
.yellow { color:#f2c14e; }
/* Цвет ЧИСЛА в плитке. Базовое правило `.line .v` (0,2,0) сильнее одиночного класса `.red`
   (0,1,0) — поэтому размеченное красным число рисовалось белым, и вся сигнализация плиток была
   мертва на четырёх экранах разом: «Сорвано 18», «Долг обещаний 23», «не работают» — все одним
   тоном. Найдено разбором интерфейса 05.09.2026, проверено на живой странице. */
.line .v.red { color:#ff7b88; }
.line .v.green { color:#5ed39b; }
.line .v.yellow { color:#f2c14e; }
.mut { color:#8b95a3; }
/* ── плитка-счётчик ──
   Плитки живут только внутри .grid; карточка с графиком или текстом — вне её, и правила ниже
   до неё не достают. Разбор 05.09: заголовок, число и пояснение стояли одним весом, поэтому
   глаз не находил число, а пояснение читалось абзацем. Теперь герой плитки — число. */
.grid .card h3 { font-size:14px; letter-spacing:.3px; color:#8b95a3; margin-bottom:4px; line-height:1.25; }
.grid .card .line { padding:1px 0; }
.grid .card .line .v.big { font-size:32px; line-height:1.15; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.grid .card .wsub { font-size:14px; line-height:1.35; color:#7d8794; margin-top:6px; }
/* Значение плитки бывает не числом, а датой или именем коммита. Кегль числа рвал «06.09, 02:30 МСК»
   на три строки и раздувал плитку впятеро, а крупный хэш коммита ещё и врал весом: он справка, а не
   ответ на вопрос. Текстовому значению — своя ступень (разбор интерфейса 05.09.2026). */
.grid .card .line .v.mid { font-size:20px; line-height:1.25; letter-spacing:0; white-space:normal; overflow-wrap:anywhere; }
/* Пилюля задумана под слово, а приходит в неё бывает фраза на сто знаков. `nowrap` на такой
   фразе не «держит метку в строке», а выносит её за правый край телефона и тащит за собой всю
   страницу: на СТРОЙКЕ ширина документа доходила до 1335 px при экране 390. Метка переносится. */
.tag { font-size:14px; padding:2px 9px; border-radius:20px; background:#222833; color:#9aa5b3; white-space:normal; overflow-wrap:anywhere; max-width:100%; align-self:flex-start; }
.tag.red { background:#3a2028; color:#ff8a95; }
.tag.green { background:#16301f; color:#5ed39b; }
.tag.blue { background:#152743; color:#7fb0ff; }
.tag.yellow { background:#332a12; color:#f2c14e; }
.foot { margin-top:11px; color:#5f6875; font-size:13px; overflow-wrap:anywhere; }
.col { background:#161a21; border:1px solid #242a34; border-radius:14px; padding:14px 15px; }
.col h4 { font-size:17px; color:#9aa5b3; font-weight:normal; margin-bottom:11px; display:flex; justify-content:space-between; }
.tick { background:#1b212a; border-radius:9px; padding:9px 11px; margin-bottom:8px; font-size:16px; line-height:1.35; }
.tick b { display:block; font-size:14px; color:#7fb0ff; font-weight:bold; margin-bottom:2px; letter-spacing:.4px; }
.tick .w { color:#8b95a3; font-size:14px; margin-top:4px; }
.tick.red { border-left:3px solid #d9414f; }
.tick.blue { border-left:3px solid #2b6cf6; }
.tick.green { border-left:3px solid #3f9c6d; }
.tick.gray { border-left:3px solid #3a424e; }

/* строка агента */
.arow { display:flex; align-items:center; gap:14px; padding:11px 13px; border-radius:10px; background:#161a21; border:1px solid #242a34; margin-bottom:8px; }
.dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dot.on { background:#5ed39b; }
.dot.idle { background:#4a525e; }
.dot.work { background:#f2c14e; }
.dot.bad { background:#d9414f; }
/* Четвёртое состояние светофора (`ПР-946`, 06.09.2026) — «посмотреть не вышло». Цвет намеренно
   вне тревожного ряда и не зелёный: это не поломка и не здоровье, а непрочитанная мера. Кольцо
   вместо заливки — пустая середина сама читается как «внутрь не смотрели». */
.dot.unk { background:transparent; box-shadow:inset 0 0 0 2px #8b95a3; }
.pt.unk { background:transparent; box-shadow:inset 0 0 0 2px #8b95a3; }
.unk { color:#a7b0bd; }
.line .v.unk { color:#a7b0bd; }
.badge.unk { background:#20242c; color:#a7b0bd; }
/* Цена обрыва (`ПР-947`): сколько агентов уйдёт вместе с этим бортом. Стоит рядом с именем, а не
   в подписи: по этому числу выбирают, за что хвататься первым. */
.cost { flex:0 0 auto; font-size:14px; color:#d8a657; background:#2a2418; border:1px solid #3a3220;
        border-radius:6px; padding:1px 7px; margin-left:8px; white-space:nowrap; }
.an { width:150px; font-weight:bold; }
.aw { flex:1; min-width:0; color:#c3cad3; font-size:17px; overflow-wrap:anywhere; }
.aq { width:120px; text-align:right; color:#8b95a3; font-size:16px; }
.at { width:112px; text-align:right; color:#5f6875; font-size:15px; }

/* строка правки на доске */
.qrow { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; padding:12px 14px; background:#161a21;
        border:1px solid #242a34; border-left:3px solid #3a424e; border-radius:10px; margin-bottom:8px; }
.qrow.burn { border-left-color:#d9414f; }
.qrow.grow { border-left-color:#f2c14e; }
.qrow.lay  { border-left-color:#3a424e; }
.qid { width:78px; flex-shrink:0; color:#7fb0ff; font-weight:bold; font-size:15px; }
.qmain { flex:1; min-width:0; }
.qt { line-height:1.35; overflow-wrap:anywhere; }
.qm { margin-top:5px; display:flex; gap:7px; flex-wrap:wrap; }
/* Имя ветки контура длиннее колонки ID («starodubtseva» при ширине 78px) и наезжало на заголовок
   строки: два имени печатались друг поверх друга. Своя колонка шире и с переносом. */
.vrow .qid { width:104px; font-size:14px; overflow-wrap:anywhere; line-height:1.3; }
.qside { width:190px; flex-shrink:0; text-align:right; color:#8b95a3; font-size:15px; }
.qside span { display:block; }
/* улика раскрывается под всей строкой, а не в узкой средней колонке */
.qmore { flex-basis:100%; order:5; margin-top:0; }
details { margin-top:5px; color:#98a1ad; font-size:15px; overflow-wrap:anywhere; }
summary { cursor:pointer; color:#7d8794; font-size:14px; padding:4px 0; }
.sec { margin:14px 0 7px; color:#9aa5b3; font-size:16px; display:flex; justify-content:space-between; gap:12px; }

/* ── экран «Продукты»: строка артефакта ── */
/* Ссылка на артефакт читается в трёх состояниях: есть / в волте нет / не проверено. Метка стоит
   первой, потому что глаз ищет именно её, а путь — уже подтверждение. */
.art { margin-top:6px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; line-height:1.35; overflow-wrap:anywhere; }
.art .mut, .art .red { font-size:15px; }
.prodlink { color:#7fb0ff; }
/* метка шапки продукта: значение бывает длинным путём — на телефоне она обязана переноситься,
   а не уезжать за край экрана (замечено на снимке 390px 31.08.2026) */
.tag.wrap { white-space:normal; overflow-wrap:anywhere; }

/* ── схема потока (упрощённый BPMN) ──
   Слово Вячеслава 31.08: «люблю блок-схемы, удобно в формате упрощённого bpmn». Схема шире
   экрана по устройству — дорожек бывает до шести; сжимать её до ширины телефона нельзя, там от
   подписей останется пыль. Поэтому она листается вбок внутри своей рамки, как графики. */
.flow { background:#12161d; border:1px solid #242a34; border-radius:14px; padding:4px;
        overflow-x:auto; -webkit-overflow-scrolling:touch; }
.flow svg { display:block; height:auto; }
.flowin { display:inline-block; }
.flow a { cursor:pointer; }
.flow a:hover path[fill="#1b212a"] { fill:#232b37; }
.flgd { margin:10px 0 2px; font-size:14px; }
.flgd i { width:14px; height:14px; border-radius:4px; background:#2f3743; flex-shrink:0; }
.flgd i.ldot { background:#1b212a; border:1px solid #2f3743; border-radius:4px; }
.flgd i.lrhomb { background:none; border:1px solid #f2c14e; border-radius:3px; transform:rotate(45deg); width:11px; height:11px; }
.flgd i.lart { background:none; border:1.5px solid #8b95a3; border-radius:2px; width:10px; height:13px; }
.flgd i.lart.green { border-color:#5ed39b; }
.flgd i.lart.red { border-color:#ff7b88; }
.flgd i.lart.yellow { border-color:#f2c14e; }

/* подробности по шагам: справочник ПОД схемой, в две колонки. Двенадцать шагов подряд одной
   лентой и были той простынёй, от которой владелец отказался 31.08. */
.scards { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
.scard { background:#161a21; border:1px solid #242a34; border-left:3px solid #3a424e;
         border-radius:10px; padding:12px 14px; scroll-margin-top:14px; }
.scard.burn { border-left-color:#d9414f; }
.sct { font-weight:bold; line-height:1.35; overflow-wrap:anywhere; }
.scn { display:inline-block; min-width:24px; color:#7fb0ff; }
.scf { margin-top:5px; line-height:1.4; overflow-wrap:anywhere; font-size:17px; }
/* пришли кликом с узла схемы — карточка подсвечивается, иначе непонятно, куда тебя привело */
.scard:target { border-color:#2b6cf6; box-shadow:0 0 0 1px #2b6cf6; }
/* на широком экране схема видна целиком, и подсказка про прокрутку была бы шумом */
.flowhint { display:none; }

/* ── прайс продуктов (слой над витриной сценариев, 18.09.2026) ──
   Строка отвечает на один вопрос: что за позиция и сколько она стоит. Валюты идут тремя
   клетками справа, а не таблицей в пять столбцов: на 390 px пять числовых столбцов
   схлопываются в кашу, а клетки просто уезжают под название и остаются читаемыми.
   Цена — рубль; евро и доллар серым, чтобы пересчёт не приняли за прайс. */
/* 22.09.2026: двадцать три позиции прайса стояли двадцатью тремя коробками с фоном и рамкой —
   экран заставлял читать каждую отдельно там, где нужно сравнить цены разом. Коробка снята,
   осталась строка реки: волосяная линия снизу и цветная полоска готовности слева. */
.prow { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; padding:7px 12px;
        background:none; border:0; border-bottom:1px solid #1a1f27; border-left:3px solid #3a424e;
        border-radius:0; margin-bottom:0; scroll-margin-top:16px; }
/* пришли кликом с узла схемы — строка подсвечивается, иначе непонятно, куда тебя привело */
.prow:target { border-color:#2b6cf6; box-shadow:0 0 0 1px #2b6cf6; }
/* Название и метки стоят в одном ряду, а не лесенкой: метка короткая, и вторая строка под неё
   стоила по 23 px на каждой из двадцати трёх позиций. Не влезло — перенос по месту. */
.pmain { flex:1 1 300px; min-width:0; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.pmain .qt { line-height:1.35; overflow-wrap:anywhere; }
.pmain .qm { margin-top:0; }
.pcur { display:flex; gap:18px; flex:0 0 auto; align-items:flex-start; }
.pc { text-align:right; }
.pc i { display:block; font-style:normal; color:#5f6875; font-size:13px; margin-bottom:2px; }
.pc b { font-variant-numeric:tabular-nums; font-size:17px; line-height:1.3; display:block; }
/* Рублёвая клетка бывает не числом, а фразой («по тарифу поставщика, платит клиент напрямую»).
   Без потолка ширины такая фраза выталкивала все три валюты на вторую строку, и заголовки
   ₽/€/$ переставали стоять над своими числами. Потолок — фраза переносится внутри клетки. */
.pc.base { min-width:150px; max-width:260px; }
.pc.base b { color:#e8eaed; overflow-wrap:anywhere; }
.pc.conv { min-width:92px; }
.pc.conv b { color:#9aa5b3; font-weight:normal; white-space:nowrap; }
a.tag.blue { text-decoration:none; }

/* ── экран «Система»: фильтр периода, графики, тултип ── */
/* Переключатели среза: одна лента, листается вбок. Переносом девять пилюль вставали кривой
   лесенкой в две колонки разной ширины — «Команда и соседние сети» рвалась на три строки. */
.filters { display:flex; gap:7px; margin:0 0 10px 0; flex-wrap:wrap; }
.filters::-webkit-scrollbar { display:none; }
.fopt { flex:0 0 auto; white-space:nowrap; padding:6px 13px; border-radius:8px; background:#191d24; color:#8b95a3; font-size:16px; }
.fopt.on { background:#222a38; color:#e8eaed; font-weight:bold; box-shadow:inset 0 0 0 1px #2f3a4c; }
/* Подпись перед рядом кнопок: называет, ЧТО выбирают. Без неё ряд одинаковых пилюль читается
   как фильтр списка, а не как выбор вида экрана. */
.fnote { flex:0 0 auto; align-self:center; color:#7d8794; font-size:14px; }
/* Поиск по флоту — рядом с осями группировки: 53 борта глазами не находятся. */
.filters.find { margin-top:-4px; }
.fsearch { flex:1 1 320px; max-width:420px; min-width:150px; padding:8px 12px; border-radius:8px; border:1px solid #2b323d;
           background:#12161c; color:#e8eaed; font-size:15px; font-family:inherit; }
.fsearch::placeholder { color:#6b7482; }
.fcount { flex:0 0 auto; color:#8b95a3; font-size:14px; }
.chart { margin-top:4px; }
.chart svg { width:100%; height:auto; display:block; }
/* Ключ к сериям лежит ВНУТРИ рамки, которая листается вбок: на телефоне график открыт на
   свежем дне, то есть прокручен вправо, — и ключ уезжал за левый край вместе с полотном.
   На снимке 390 px от него оставалась одна буква. Липнет к левому краю рамки. */
.lgd { display:flex; gap:18px; margin:0 0 8px; color:#9aa5b3; font-size:15px; flex-wrap:wrap;
       position:sticky; left:0; width:max-content; max-width:100%; }
.lkey { display:inline-flex; align-items:center; gap:7px; }
.lkey i { width:14px; height:14px; border-radius:4px; display:inline-block; }
.ctip { position:fixed; z-index:50; background:#0f1115; border:1px solid #2b323d; border-radius:10px;
        padding:10px 13px; font-size:15px; pointer-events:none; max-width:300px;
        box-shadow:0 6px 24px rgba(0,0,0,.5); }
.ctit { color:#9aa5b3; font-size:14px; margin-bottom:5px; }
.crow { display:flex; align-items:center; gap:8px; padding:2px 0; }
.crow i { width:14px; height:4px; border-radius:2px; display:inline-block; flex-shrink:0; }
.crow b { font-variant-numeric:tabular-nums; }
.crow span { color:#8b95a3; }
g.col { outline:none; cursor:default; }
g.col.on rect, g.col.on path { filter:brightness(1.25); }
g.col:focus-visible rect { stroke:#7fb0ff; stroke-width:1; }
.tbl { width:100%; border-collapse:collapse; font-size:15px; margin-top:8px; }
.tbl th, .tbl td { text-align:right; padding:5px 8px; border-bottom:1px solid #1f242c; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align:left; }
.tbl th { color:#8b95a3; font-weight:normal; }
.tbl td a { color:#7fb0ff; }

/* дверь */
form.login { max-width:420px; margin:14vh auto 0; }
input[type=text], input[type=password] { width:100%; padding:12px 14px; margin-top:10px; font-size:18px;
  background:#161a21; color:#e8eaed; border:1px solid #2b323d; border-radius:10px; }
button { margin-top:14px; padding:11px 22px; font-size:17px; background:#2b6cf6; color:#fff;
  border:none; border-radius:9px; cursor:pointer; }
.err { color:#ff7b88; margin-top:12px; }

/* ── телефон ────────────────────────────────────────────────────────────────────────────
   Вячеслав читает систему с телефона, и первым делом он открыл платформу там. Правила ниже
   решают ровно то, что было видно на снимке экрана 390 px: шапка уезжала за правый край вместе
   с переключателем режимов (то есть с телефона нельзя было даже сменить экран), четыре счётчика
   не помещались в строку, а текст правки сжимался в колонку шириной в одно слово между двумя
   фиксированными боковинами. Поэтому на узком всё, что было колонками, становится строками
   сверху вниз, а фиксированные ширины снимаются. */
@media (max-width: 760px) {
  body {
    font-size:17px;
    padding:14px max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left));
  }

  /* шапка: имя и время первой строкой, лента вкладок — второй, во всю ширину и с прокруткой
     вбок. Отрицательные поля повторяют телефонные поля body, чтобы липкая шапка закрывала
     экран от края до края, а не оставляла щели, сквозь которые виден уезжающий текст. */
  .top { gap:9px; margin:-14px -12px 14px; padding:11px 12px 9px; }
  .brand { font-size:19px; }
  .brand span { display:block; margin-left:0; margin-top:2px; font-size:14px; }
  .tabs { gap:5px; }
  .tab { padding:9px 13px; font-size:15px; }

  .wait { padding:14px 14px; border-radius:12px; margin-bottom:14px; }
  .wait h2 { font-size:17px; margin-bottom:8px; }
  .wrow { padding:9px 0; gap:10px; }
  .wsub { font-size:15px; }

  /* счётчики: четыре в строку не читаются, два — читаются */
  .grid, .grid.g4, .grid.g5 { grid-template-columns:1fr 1fr; gap:10px; }
  /* Две колонки хороши для плитки с числом и плохи для карточки со списком имён: на 390 px
     колонка в 180 px рвёт «Мастермайнд по стратегии» на четыре строки, и карточка читается
     поперёк. `g1m` — модификатор для таких карточек, а не смена правила для всех. */
  .grid.g1m { grid-template-columns:1fr; }
  .card { padding:12px 13px; border-radius:12px; }
  /* В колонке 338 px не бывает двух текстовых колонок: заголовок и пояснение вставали рядом по
     три строки и читались поперёк («Ожидание | от сообщения до конца»). Пояснение — под заголовок. */
  .card h3 { font-size:16px; margin-bottom:8px; display:block; }
  .card h3 em { display:block; margin-top:3px; font-size:14px; }
  /* Значение плитки на телефоне переносится, а не выпихивает соседнюю плитку за край. */
  .line .v.big { font-size:23px; white-space:normal; overflow-wrap:anywhere; }

  .sec { flex-direction:column; gap:3px; margin:16px 0 9px; font-size:16px; }

  /* правка: номер, текст, метки и боковина — сверху вниз, без фиксированных ширин */
  .qrow { flex-direction:column; gap:7px; padding:11px 12px; }
  .qid { width:auto; font-size:14px; }
  /* в колонке flex-basis — это высота, а не ширина: иначе спойлер раздувается на весь экран */
  .qmore { flex-basis:auto; }
  /* кто, когда и чья рука — одной строкой через пробелы, а не столбиком в три этажа */
  .qside { width:auto; text-align:left; font-size:14px; display:flex; flex-wrap:wrap; gap:2px 14px; }
  .qside span { display:inline; }

  /* агент: имя и пульс в первой строке, что делал — во второй */
  .arow { flex-wrap:wrap; gap:8px 10px; padding:10px 12px; }
  .an { width:auto; }
  .aq { width:auto; order:2; margin-left:auto; text-align:right; font-size:15px; }
  .aw { flex-basis:100%; order:3; font-size:16px; }
  .at { width:auto; order:4; text-align:left; }

  /* графики: таблица чисел уходит в горизонтальную прокрутку, а не в кашу */
  .tbl { display:block; overflow-x:auto; }
  /* Пилюли среза: на широком экране они переносятся строкой и видны все; на телефоне перенос
     давал лесенку в две колонки разной ширины, где «Команда и соседние сети» рвалась на три
     строки, — поэтому здесь одна лента с прокруткой вбок. */
  .filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
             -webkit-overflow-scrolling:touch; margin-left:-4px; padding:0 4px 3px; }
  .fopt { padding:8px 14px; font-size:15px; }
  /* график, сжатый с 960 до 390, превращает подписи в пыль — на узком он листается вбок,
     а не мельчает */
  .chart { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .chart svg { min-width:700px; }

  /* схема потока: колонки-дорожки в 390 px не сжимаются — листается вбок в своей рамке.
     Подробности по шагам на телефоне идут одной колонкой: две по 180 px нечитаемы. */
  .scards { grid-template-columns:1fr; gap:8px; }
  .scf { font-size:16px; }
  .flgd { gap:8px 14px; font-size:13px; }
  .flowhint { display:block; }

  /* карта продуктов на телефоне: она втрое выше экрана и вчетверо шире, и без потолка первый
     экран целиком уходил под кусок схемы, за которым не видно прайса. Листается внутри рамки в
     обе стороны, потолок — две трети высоты экрана. */
  .flow.map { max-height:520px; overflow:auto; }

  /* прайс: название сверху, три валюты полосой под ним. Боковина в 150 px рядом с названием на
     390 px оставляла названию одно слово в строке — та же поломка, что у правок 18.08. */
  /* в колонке flex-basis — это ВЫСОТА, а не ширина: `flex:1 1 300px` у названия давал строке
     прайса 300 px пустоты, и три валюты уезжали на дно коробки (та же ловушка, что у .qmore) */
  .prow { flex-direction:column; gap:9px; padding:10px 12px; }
  .pmain { flex-basis:auto; }
  .pcur { flex-basis:auto; width:100%; justify-content:space-between; gap:10px; }
  .pc { text-align:left; }
  .pc.base, .pc.conv { min-width:0; }
  .pc b { font-size:16px; }

  form.login { margin-top:6vh; }
  /* меньше 16px в поле — iPhone на фокусе увеличивает страницу и уводит её вбок */
  input[type=text], input[type=password] { font-size:17px; }
  button { width:100%; padding:13px 22px; }
}

/* ── флот: круги и переключатели среза ──
   Точка цвета в пилюле и в заголовке круга стоит ПЕРЕД словом: глаз ловит красное раньше, чем
   прочтёт название, — ради этого экран и заведён (слово Вячеслава 05.09: «интуитивно»). */
.filters.fleet { gap:6px; margin:14px 0 4px; }
.filters.fleet .fopt { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; font-size:15px; }
.filters.fleet .cnt { color:#7d8794; font-weight:normal; }
.filters.fleet .fopt.on .cnt { color:#c3cad3; }
.sec.fleet { align-items:baseline; margin-top:26px; padding-top:12px; border-top:1px solid #1d222b; }
.sec.fleet b { color:#e8eaed; font-size:19px; }
.sec.fleet > span > em { font-size:15px; margin-left:8px; }
.sec.fleet .dot { display:inline-block; vertical-align:middle; margin-right:6px; }

/* ── строка агента во флоте ──
   Разбор 05.09: в строке было пять смыслов одним весом и одним размером — имя, человек, работа
   за день, метки и часы. Читать её приходилось целиком, а нужен обычно один: кто это и жив ли.
   Поэтому имя крупное, всё остальное — тише на ступень, метки мельче имени вдвое. */
.frow { padding:13px 14px; }
.frow .qid { width:auto; flex:0 0 auto; padding-top:6px; }
.frow .fname { font-size:19px; font-weight:bold; line-height:1.25; overflow-wrap:anywhere; }
.frow .fname .nick { color:#7fb0ff; font-weight:normal; font-size:15px; }
.frow .fname .alt { color:#7d8794; font-weight:normal; font-size:15px; }
.frow .fwho { margin-top:4px; font-size:16px; color:#c3cad3; overflow-wrap:anywhere; }
.frow .fday { margin-top:4px; font-size:15px; color:#8b95a3; }
.frow .qm { margin-top:8px; gap:6px; }
.frow .tag { font-size:13px; padding:2px 8px; }
.frow .qside { font-size:14px; }
.frow details { font-size:15px; }
.frow summary { font-size:14px; }

/* ── «Требуют внимания» ──
   Первый вопрос к экрану флота — «что горит», а он был рассыпан по пятидесяти трём строкам в
   шести кругах: чтобы найти больного, приходилось прокручивать весь список и ловить цветную
   точку глазом. Сводка стоит первой и ведёт прямо в строку. */
.att { background:#191d24; border:1px solid #2b323d; border-left:3px solid #d9414f; border-radius:12px;
       padding:14px 16px; margin-bottom:16px; }
.att.calm { border-left-color:#3f9c6d; }
.att h2 { font-size:17px; color:#ff8a95; margin-bottom:10px; letter-spacing:.2px; }
.att.calm h2 { color:#5ed39b; margin-bottom:0; }
/* Блок «посмотреть не вышло» и спокойный блок при НЕПОЛНОМ покрытии (`ПР-945`, `ПР-946`):
   ни красный, ни зелёный — работа тут есть, но она на приборе, а не на боте. */
.att.unkn { border-left-color:#8b95a3; }
.att.unkn h2 { color:#c3cad3; }
.att.calm.part { border-left-color:#8b95a3; }
.att.calm.part h2 { color:#c3cad3; margin-bottom:0; }
.att .arw { display:flex; gap:10px; align-items:baseline; padding:8px 0; border-top:1px solid #232935; line-height:1.35; }
.att .arw:first-of-type { border-top:none; }
.att .arw b { flex:0 0 auto; }
.att .arw .why { color:#98a1ad; font-size:15px; overflow-wrap:anywhere; }
.att .note { margin-top:9px; color:#7d8794; font-size:14px; line-height:1.35; }
.att .attmore { margin-top:8px; border-top:1px solid #232935; padding-top:8px; }
.att .attmore > summary { cursor:pointer; color:#8b95a3; font-size:15px; list-style:none; }
.att .attmore > summary::marker, .att .attmore > summary::-webkit-details-marker { display:none; }
.att .attmore > summary::before { content:'▸ '; color:#6d7684; }
.att .attmore[open] > summary::before { content:'▾ '; }

/* Полоса меры — первая строка экрана флота: на КАКОЙ ЧАС верны все числа ниже. Заведена
   05.09.2026 вместе с переводом светофора на момент снимка: возраст данных должен читаться
   раньше самих данных, иначе состояние часовой давности читается как «сейчас». */
.meas { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; line-height:1.4;
        background:#161a21; border:1px solid #262d38; border-radius:10px; padding:9px 13px; margin-bottom:14px; font-size:15px; }
.meas.old { border-color:#5a4a1e; background:#1b1a14; }
.meas.old b { color:#f2c14e; }
/* Неполное покрытие мер: первое число экрана говорит дробью, и она не должна выглядеть нормой. */
.meas.part b { color:#c3cad3; }
.meas.part { border-color:#3a4250; }
.frow:target { border-color:#2b6cf6; box-shadow:0 0 0 1px #2b6cf6; }
.frow { scroll-margin-top:120px; }

/* ── Дерево флота (05.09.2026) ───────────────────────────────────────────────
   Слово Вячеслава: «очень широко, очень много слов, очень много всего в одном напихнуто; нужно,
   чтобы раскрывалось». Отсюда три правила разметки: строка объекта — одна строка (имя слева,
   одно состояние справа); всё остальное живёт за раскрытием; вложенность видна отступом и
   тонкой линией слева, а не рамками — рамка вокруг каждой карточки и создавала ту «ширину». */
details.ring { margin:18px 0 0; border-top:1px solid #1d222b; padding-top:10px; }
details.ring > summary, details.nd > summary, details.ag > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  padding:7px 4px; border-radius:8px; }
details.ring > summary::-webkit-details-marker, details.nd > summary::-webkit-details-marker,
details.ag > summary::-webkit-details-marker { display:none; }
details.ring > summary::before, details.nd > summary::before, details.ag > summary::before {
  content:'▸'; color:#6b7482; font-size:13px; flex:0 0 auto; transition:transform .12s; }
details.ring[open] > summary::before, details.nd[open] > summary::before,
details.ag[open] > summary::before { transform:rotate(90deg); }
details.ring > summary:hover, details.nd > summary:hover, details.ag > summary:hover { background:#161a21; }
details.ring > summary b { font-size:18px; letter-spacing:.4px; color:#e8eaed; }
details.nd > summary b { font-size:17px; color:#e8eaed; }
details.ag > summary b { font-size:16px; font-weight:600; color:#e8eaed; }
details.ring > summary .alt, details.nd > summary .alt, details.ag > summary .alt {
  color:#7d8794; font-size:14px; font-weight:normal; }
.ringb { padding-left:6px; }
.ndb { margin-left:10px; padding-left:12px; border-left:1px solid #1d222b; }
details.nd { margin-top:4px; }
details.ag { margin:1px 0; border-left:3px solid transparent; }
details.ag.burn { border-left-color:#d9414f; }
details.ag.grow { border-left-color:#f2c14e; }
details.ag.dunno { border-left-color:#5b636f; }
details.ag > summary .nick { color:#7fb0ff; font-size:14px; text-decoration:none; }
/* Имя агента и его ник не переносятся посреди слова: на широком экране «Донна» ломалась на
   «Донн»/«а», а @donnapaulsen_diana_bot — на две строки, и колонка имён читалась как каша. */
details.ag > summary b, details.ag > summary .nick { white-space:nowrap; }
details.ag > summary .alt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34ch; }
summary .st { max-width:46ch; }
/* Правое поле — одно состояние. Оно прижато вправо на широком экране и уходит на вторую строку
   на телефоне: обрезанный текст здесь врал бы о состоянии агента. */
summary .st { margin-left:auto; font-size:14px; text-align:right; }
.agb { padding:8px 0 12px 26px; display:grid; grid-template-columns:1fr; gap:5px; font-size:15px; }
.agb .fx { display:flex; gap:10px; align-items:baseline; line-height:1.45; }
.agb .fx > span:first-child { flex:0 0 200px; color:#6b7482; font-size:14px; }
.filters.fleet.axis { margin-top:8px; align-items:center; }
/* Теги — второй, НЕобязательный разрез: слово Вячеслава 05.09.2026 «это не основное приоритетное
   поле». Поэтому пилюля тега тише пилюли раздела: та же форма, но приглушённый фон и мельче шрифт.
   Разделы читаются первыми, теги — когда за ними пришли. */
.filters.fleet.tags { margin-top:6px; align-items:center; }
.filters.fleet.tags .fopt { background:#161a20; font-size:14px; padding:6px 12px; }
.filters.fleet.tags .fopt.on { background:#222a38; color:#e8eaed; }
.agb .tg { display:inline-block; background:#191d24; color:#8b95a3; border-radius:6px; padding:2px 9px; font-size:14px; margin:0 4px 3px 0; }
.agb .tg:hover { color:#e8eaed; }
.filters.fleet .axlab { color:#6b7482; font-size:14px; margin-right:2px; }
.filters.fleet .axsp { flex:1 1 auto; }
.fopt.btn { border:0; font-family:inherit; cursor:pointer; }
@media (max-width:760px) {
  summary .st { flex-basis:100%; margin-left:0; text-align:left; padding-left:20px; }
  details.ring > summary, details.nd > summary, details.ag > summary { flex-wrap:wrap; }
  .agb { padding-left:14px; }
  .agb .fx { flex-direction:column; gap:1px; }
  .agb .fx > span:first-child { flex:none; }
  .ndb { margin-left:4px; padding-left:9px; }
  .filters.fleet .axsp { display:none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   ЕДИНЫЙ ИНТЕРФЕЙС — 05.09.2026, по макету «Макеты/Единый интерфейс 2026-09-05», утверждённому
   владельцем («давай пробовать, делай»). Приёмы сняты с пяти живых панелей: Linear (спокойная
   строка, боковые разделы со счётчиками), Datadog (вкладки-разрезы над одним списком), Vercel
   (длительность рядом со временем), Stripe (правая карточка объекта вместо ухода на её страницу),
   Grafana (срезы, а не второй экран).

   Ширина. До этой правки страница жила в колонке 1180 px по центру — телефонный размер, растянутый
   на ноутбук. Первый экран владельца ставит рядом список и карточку, и им нужна ширина; поэтому
   на широком экране колонка снимается, а разделы уезжают влево. На телефоне всё возвращается как
   было: там ширины нет, и вертикальное меню съело бы первый экран. */
.app { display:block; }
.kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 16px; }
.tile { background:#161a21; border:1px solid #242a34; border-radius:12px; padding:12px 14px 13px; min-width:0; }
.tile .k { color:#8b95a3; font-size:14px; letter-spacing:.2px; line-height:1.25; }
.tile .v { font-size:30px; font-weight:bold; margin-top:5px; letter-spacing:-.5px; font-variant-numeric:tabular-nums; line-height:1.15; }
.tile .v.red { color:#ff7b88; } .tile .v.green { color:#5ed39b; } .tile .v.yellow { color:#f2c14e; }
.tile .v em { font-style:normal; font-size:15px; font-weight:normal; color:#8b95a3; margin-left:6px; letter-spacing:0; }
.tile .d { font-size:14px; margin-top:5px; color:#8b95a3; line-height:1.3; }
.up { color:#5ed39b; } .down { color:#ff7b88; } .dim { color:#6b7482; }

/* Вкладки-разрезы: один список, четыре вопроса. Число на вкладке обязательно — без него переход
   это ставка вслепую. */
.rtabs { display:flex; gap:2px; border-bottom:1px solid #242a34; margin:0 0 14px; overflow-x:auto; scrollbar-width:none; }
.rtabs::-webkit-scrollbar { display:none; }
.rtab { flex:0 0 auto; padding:9px 14px; color:#8b95a3; font-size:16px; border-bottom:2px solid transparent;
        display:flex; gap:7px; align-items:center; white-space:nowrap; }
.rtab.on { color:#e8eaed; font-weight:bold; border-bottom-color:#2b6cf6; }
.rtab .n { background:#1e2229; color:#9aa5b3; border-radius:20px; padding:1px 9px; font-size:14px; font-variant-numeric:tabular-nums; }
.rtab.on .n { background:#2b6cf6; color:#fff; }
.rtab .n.red { background:#3a2028; color:#ff8a95; }
.rtab.on .n.red { background:#d9414f; color:#fff; }

.cols { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:14px; align-items:start; }
.colmain { min-width:0; }
.panel { background:#161a21; border:1px solid #242a34; border-radius:12px; margin-bottom:14px; overflow:hidden; }
.panel .phead { display:flex; align-items:center; justify-content:space-between; gap:10px;
                padding:11px 14px; border-bottom:1px solid #1f242c; }
.panel .phead .t { font-size:16px; font-weight:bold; }
.panel .pmore { color:#7fb0ff; font-size:14px; }

/* Строка события: цвет — состояние, первая строка — что и чьё, вторая — ПРИЧИНА СЛОВАМИ,
   справа — состояние и сколько оно длится. Кликается вся строка целиком. */
.ev { display:flex; gap:11px; align-items:flex-start; padding:11px 14px; border-bottom:1px solid #1c212a; color:inherit; }
.ev:last-child { border-bottom:none; }
.ev:hover { background:#1b212a; }
.ev.calm { color:#8b95a3; display:block; }
.pt { width:9px; height:9px; border-radius:50%; margin-top:7px; flex:0 0 9px; background:#4a525e; }
.pt.on { background:#5ed39b; } .pt.work { background:#f2c14e; } .pt.bad { background:#d9414f; } .pt.wait { background:#7fb0ff; }
.evb { flex:1; min-width:0; display:block; }
.evb .l1 { display:block; font-size:16px; line-height:1.35; overflow-wrap:anywhere; }
.evb .l2 { display:block; color:#98a1ad; font-size:14px; margin-top:3px; line-height:1.35; overflow-wrap:anywhere; }
.evr { flex:0 0 auto; text-align:right; color:#7d8794; font-size:13px; white-space:nowrap; }
.evr .st { display:block; font-size:14px; font-weight:bold; color:#8b95a3; }
.evr .st.bad { color:#ff7b88; } .evr .st.work { color:#f2c14e; } .evr .st.wait { color:#7fb0ff; }

/* Дерево флота: круг → человек, счётчик у каждого узла. Свёрнутое по умолчанию, кроме клиентов —
   их состояние и есть работа этой платформы. */
.panel.tree { padding-bottom:6px; }
.trg > summary { list-style:none; cursor:pointer; }
.trg > summary::marker, .trg > summary::-webkit-details-marker { display:none; }
.tr { display:flex; align-items:center; gap:9px; padding:8px 14px; color:inherit; }
.tr:hover { background:#1b212a; }
.tr .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr .nm .sub { color:#6b7482; font-size:14px; }
.tr .cnt { color:#8b95a3; font-size:14px; background:#1c212a; border-radius:20px; padding:1px 9px; font-variant-numeric:tabular-nums; }
.tr .st { color:#8b95a3; font-size:14px; white-space:nowrap; }
.tr.l1 { font-weight:bold; font-size:16px; border-top:1px solid #1c212a; }
.trg:first-child .tr.l1 { border-top:none; }
.tr.l1::before { content:'▸ '; color:#6d7684; font-weight:normal; }
.trg[open] > summary .tr.l1::before { content:'▾ '; }
.tr.l2 { padding-left:34px; font-size:15px; }
.tr.l2.dim { color:#6b7482; font-size:14px; }
.tr.l2.dim a { color:#7fb0ff; }

/* Правая карточка — то, ради чего экран перестал быть только витриной: решение принимается здесь. */
.det { padding:14px; }
.det .dhead { display:flex; align-items:center; gap:9px; }
.det .nmx { font-size:19px; font-weight:bold; }
.det .nick { color:#8b95a3; font-size:14px; margin-top:2px; }
.det .badge { display:inline-block; border-radius:20px; padding:4px 11px; font-size:14px; margin-top:10px;
              background:#1c212a; color:#9aa5b3; line-height:1.3; }
.det .badge.bad { background:#3a2028; color:#ff8a95; }
.det .badge.work { background:#332a12; color:#f2c14e; }
.det .badge.on { background:#16301f; color:#5ed39b; }
.det .sect { color:#6b7482; font-size:13px; letter-spacing:.7px; margin:15px 0 6px; }
.det .kv { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid #1f242c; font-size:14px; line-height:1.35; }
.det .kv .k { color:#8b95a3; flex:0 0 auto; }
.det .kv > span:last-child { text-align:right; overflow-wrap:anywhere; }
.det .link { display:flex; justify-content:space-between; gap:8px; padding:7px 9px; border-radius:8px; background:#12161d; margin-bottom:5px; font-size:14px; }
.det .link .w { color:#8b95a3; }
.det .wsub { font-size:14px; }
.det .foot2 { margin-top:12px; color:#6b7482; font-size:13px; line-height:1.4; }
.det .foot2 a { color:#7fb0ff; }
.btns2 { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.btn2 { flex:1 1 46%; text-align:center; border-radius:8px; padding:9px 8px; font-size:14px;
        background:#1b212a; border:1px solid #2b323d; color:#c3cad3; }
.btn2.thin { flex:1 1 100%; background:none; border-color:#232935; color:#8b95a3; }

/* Кнопка-заявка. Выглядит как действие экрана, а не как «пуск»: она никого не поднимает сама, а
   зовёт исполнителя с ключом. Синий «пуск» обещал бы больше, чем кнопка делает. */
.act { display:inline-block; margin:0; flex:1 1 46%; }
.act.wide { display:block; width:100%; flex:1 1 100%; }
.act button { margin:0; width:100%; padding:9px 10px; font-size:14px; border-radius:8px;
              background:#1b212a; border:1px solid #2b323d; color:#c3cad3; cursor:pointer; }
.act button:hover { background:#222a36; }
.act button.warn { background:#2a1c22; border-color:#4b2730; color:#ffb3bb; }
.act input[type=text] { margin:0 0 6px; font-size:14px; padding:8px 10px; }

/* ── широкий экран: разделы уходят влево колонкой ── */
@media (min-width:1100px) {
  body { max-width:none; padding:0; }
  .app { display:flex; align-items:stretch; min-height:100vh; }
  .top { position:sticky; top:0; align-self:flex-start; width:238px; flex:0 0 238px; height:100vh;
         margin:0; padding:20px 14px; border-bottom:none; border-right:1px solid #1d222b; overflow-y:auto; }
  .topline { flex-direction:column; align-items:flex-start; gap:4px; }
  .brand { font-size:19px; }
  .brand span { display:block; margin:2px 0 0; font-size:14px; }
  .tabs { flex-direction:column; gap:3px; overflow:visible; margin:14px 0 0; padding:0; }
  .tab { display:flex; justify-content:space-between; align-items:center; gap:8px; background:none;
         padding:8px 10px; font-size:16px; }
  .tab:hover { background:#191d24; }
  .tab.on { background:#191d24; color:#e8eaed; }
  .tab .cnt { color:#7d8794; font-weight:normal; font-size:14px; font-variant-numeric:tabular-nums; }
  .tab .cnt.red { color:#ff8a95; font-weight:bold; }
  .tab.thin { font-size:14px; color:#7d8794; padding:6px 10px; }
  .navsec { color:#5c636e; font-size:12px; letter-spacing:.7px; padding:16px 10px 5px; }
  .main { flex:1; min-width:0; padding:20px 22px 26px; max-width:1560px; }
  .now { font-size:14px; margin-top:8px; }
}
@media (max-width:1099px) { .navsec { display:none; } .tab.thin { display:none; } }

/* ── телефон ── */
@media (max-width:760px) {
  .kpi { grid-template-columns:1fr 1fr; gap:9px; }
  .tile .v { font-size:26px; }
  .cols { grid-template-columns:1fr; }
  /* Карточка борта на телефоне идёт ПЕРВОЙ: её открывают нажатием на строку, и она должна быть
     там, куда человек смотрит, а не под списком из тридцати строк. */
  .cols .det { order:-1; }
  .evr { font-size:12px; }
  .tr .st { display:none; }
  .tr.l1 .st { display:inline; font-size:13px; }
}

/* ── сегменты стройки (05.09.2026): «что на что влияет» полосой над доской правок ── */
.segs { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:9px; }
.seg { display:block; background:#141821; border:1px solid #1d222b; border-radius:12px; padding:11px 13px; text-decoration:none; color:inherit; }
.seg:hover { background:#171c26; border-color:#2a313d; }
.seg.on { background:#1a2231; border-color:#3a4a68; }
.segn { color:#c9d1d9; font-size:15px; }
.segv { font-size:15px; color:#8b95a3; margin-top:4px; }
.segv b { font-size:22px; color:#e8eaed; margin-right:4px; }
.segv .red { color:#ff8a95; } .segv .yellow { color:#f2c14e; }
.segv b.red { color:#ff8a95; }
.segw { color:#69717d; font-size:13px; line-height:1.3; margin-top:5px; }
.tag.seg { background:#1a2231; color:#8fb0e8; display:inline-block; padding:2px 9px; border:0; }
@media (max-width:760px) { .segs { grid-template-columns:1fr 1fr; gap:7px; } .segw { display:none; } .seg { padding:9px 10px; } .segv b { font-size:19px; } }

/* ── ОБВЕС (07.09.2026): из чего собран заход агента ──
   Полоса состава — не украшение: это та же правда, что в строках слоёв, но читаемая за секунду.
   Цвет слоя задаётся из views.js одной картой на полосу и на легенду, иначе они разойдутся. */
.obar { display:flex; height:14px; border-radius:7px; overflow:hidden; background:#1c212a; margin:4px 0 10px; }
.obar.thin { height:6px; border-radius:3px; margin:5px 0 3px; max-width:520px; }
.oseg { display:block; height:100%; }
.osl { display:flex; align-items:center; gap:9px; padding:3px 0; font-size:15px; }
.osw { width:10px; height:10px; border-radius:3px; flex:none; }
.osn { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ost { color:#6b7482; font-size:13px; white-space:nowrap; }
.osv { color:#c9d1d9; font-variant-numeric:tabular-nums; white-space:nowrap; }
.oag > summary { cursor:pointer; list-style:none; }
.oag > summary::-webkit-details-marker { display:none; }
.oag[open] > summary { background:#1b212a; }
.obody { padding:10px 14px 14px 34px; border-bottom:1px solid #1c212a; }
.okv { margin-top:10px; display:flex; flex-direction:column; gap:6px; font-size:15px; line-height:1.4; }
.okv .k { color:#6b7482; font-size:13px; display:block; }
.ofoot { margin-top:10px; font-size:14px; }
.ofoot a { color:#7fb0ff; }
.opan > summary { cursor:pointer; list-style:none; }
.opan > summary::-webkit-details-marker { display:none; }
@media (max-width:760px) {
  /* На телефоне подпись «одно на всех / своё» уходит: она справка, а вес — ответ. */
  .ost { display:none; }
  .obody { padding-left:16px; }
  .osl { font-size:14px; }
}
/* Имя круга важнее его статуса: на телефоне длинная строка статуса съедала ширину и заголовок
   круга схлопывался в ноль — экран показывал «▸ 12 слои видны у 11» без единого слова о том,
   какой это круг. Статус тут справка, имя — ответ. */
.panel.tree .tr .st { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.obar.mini { width:150px; height:8px; margin:0; flex:none; border-radius:4px; }
@media (max-width:760px) { .st.wide { display:none; } .obar.mini { display:none; } }
/* Специфичность: в мобильном блоке выше стоит `.tr.l1 .st { display:inline }`, и он перебивал
   `.st.wide { display:none }` — заголовок круга на телефоне схлопывался в ноль. */
@media (max-width:760px) {
  .tr.l1 .st.wide, .tr.l2 .st.wide { display:none; }
  /* Вес захода — ответ строки, он остаётся видимым и на телефоне. */
  .tr.l2 .st.num { display:inline; font-size:13px; }
}
/* Значение плитки не переносится по буквам: «189.6 КБ» рвалось на «К» и «Б» посреди единицы. */
.onum { white-space:nowrap; overflow-wrap:normal; word-break:keep-all; }
/* Имя агента — главное в строке: без гарантированной ширины оно схлопывалось в ноль,
   и на телефоне строка выглядела как «• 205.7 КБ» без единого слова о том, чей это заход. */
.panel.tree .tr .nm { flex:1 1 auto; min-width:96px; }
/* Мобильное правило `.line .v.big` переносит длинные значения по любому месту — это верно для
   текстовых значений («06.09, 02:30 МСК») и неверно для числа с единицей: «189.8 КБ» рвалось
   между «К» и «Б». Класс `onum` — исключение ровно для таких значений. */
@media (max-width:760px) { .line .v.big.onum { white-space:nowrap; overflow-wrap:normal; font-size:22px; } }

/* ── УСТРОЙСТВО (10.09.2026): справочник системы одной страницей ───────────────────────────
   Своих форм у страницы почти нет намеренно: плитка слоя — та же .seg, что на СТРОЙКЕ, блок —
   та же .panel. Новый вид ради справочника человек учить не должен. Здесь только то, чего в
   доме стилей ещё не было: якорь под липкой шапкой, номер слоя, строка «имя — значение» и
   подпись источника под каждым блоком. */
.ulay { scroll-margin-top:104px; }
.unum { color:#5c636e; font-size:13px; letter-spacing:.6px; font-variant-numeric:tabular-nums; }
.ulayl .segn { display:flex; gap:8px; align-items:baseline; }
.urow { display:flex; gap:14px; align-items:baseline; justify-content:space-between;
        padding:10px 14px; border-bottom:1px solid #1c212a; }
.urow:last-child { border-bottom:none; }
.uname { flex:1; min-width:0; overflow-wrap:anywhere; }
.uval { color:#98a1ad; font-size:16px; white-space:nowrap; flex:0 0 auto; font-variant-numeric:tabular-nums; }
.usrc { color:#69717d; font-size:14px; line-height:1.4; padding:10px 14px; border-top:1px solid #1c212a; }
.usrc b { color:#8b95a3; font-weight:normal; }
/* «Посмотреть не вышло» не должно выглядеть как обычная строка данных. */
.ev.unkn { display:block; color:#8b95a3; border-left:3px solid #5c636e; }
/* Сворачивание слоёв, поиск и опись движка (10.09.2026, слово владельца: «все разделы можно было
   свернуть и раскрывать именно тот который мне необходим… мне надо видеть все, структурно и
   удобно»). Заголовок слоя стал кликабельной строкой `summary`: та же полоса, что была, плюс
   стрелка состояния и значение справа. */
.usec { margin:16px 0 0; }
.usec > summary { list-style:none; cursor:pointer; display:flex; gap:9px; align-items:baseline;
        padding:10px 2px 8px; border-bottom:1px solid #222833; user-select:none; }
.usec > summary::-webkit-details-marker { display:none; }
.usec > summary::before { content:"\25B8"; color:#5c636e; font-size:13px; line-height:1; }
.usec[open] > summary::before { content:"\25BE"; }
.usec > summary:hover { border-color:#333c4a; }
.usec > summary b { font-size:17px; letter-spacing:.2px; }
.usec > summary em { font-style:normal; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
        white-space:nowrap; font-size:15px; }
.uval2 { color:#8fb0e8; font-size:15px; white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Группа внутри слоя: вид работы — команды агента, сторожа, суточные работы, модули, тесты. */
.ugrp { border-top:1px solid #1c212a; }
.ugrp > summary { list-style:none; cursor:pointer; padding:10px 14px; display:flex; gap:9px;
        align-items:baseline; flex-wrap:wrap; }
.ugrp > summary::-webkit-details-marker { display:none; }
.ugrp > summary::before { content:"\25B8"; color:#5c636e; font-size:12px; }
.ugrp[open] > summary::before { content:"\25BE"; }
.ugrp > summary:hover { background:#141821; }
.ugrp > summary .mut { flex:1; min-width:0; }
.ugbody { border-top:1px solid #1c212a; }
.ucnt { background:#1a2231; color:#8fb0e8; border-radius:9px; padding:1px 8px; font-size:14px;
        font-variant-numeric:tabular-nums; }
.umeta { font-size:14px; color:#69717d; margin-top:3px; }
.umeta code { font-size:13px; }
/* Метка «есть правило / правила нет» у файла движка: связка «инструмент + правило» — то самое
   место, на разрыве которого агент отказывает человеку при живом инструменте. */
.utag { font-size:13px; border-radius:7px; padding:1px 7px; white-space:nowrap; }
.utag.ok { background:#16241a; color:#7fc08a; }
.utag.no { background:#2a1c1c; color:#d08b8b; }
/* Пульт: поиск по всей странице и раскрыть/свернуть всё. */
.uctl { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:14px 0 2px; }
.ufind { flex:1; min-width:220px; background:#141821; border:1px solid #222833; border-radius:10px;
        color:#e6e9ee; padding:9px 12px; font-size:16px; font-family:inherit; }
.ufind:focus { outline:none; border-color:#3a4a68; }
.ubtn { background:#141821; border:1px solid #222833; border-radius:10px; color:#98a1ad;
        padding:9px 12px; font-size:15px; font-family:inherit; cursor:pointer; }
.ubtn:hover { background:#171c26; color:#e6e9ee; }
/* Телефон: значение уезжает под имя — в одну строку они не помещаются и рвут слова. */
@media (max-width:760px) {
  .urow { flex-direction:column; gap:3px; padding:9px 12px; }
  .uval { white-space:normal; font-size:15px; }
  .ulay { scroll-margin-top:12px; }
  .usec > summary em { display:none; }
}

/* ── СТРУКТУРА КОМАНДЫ (вкладка АГЕНТЫ, слой «кто кому подчинён»). ──
   Строка отвечает на три вопроса владельца: имя, юзернейм, зона. В общем дереве имя сжато в одну
   строку с многоточием — и первый же рендер 20.09 показал, за что платит такая экономия: зона
   обрывалась на «— клиентс…» у каждого агента, то есть треть ответа на телефоне не читалась
   вовсе. Здесь зона переносится своей строкой и не режется. */
.stree .tr.l2 { align-items:flex-start; padding-top:9px; padding-bottom:9px; }
.stree .tr.l2 .pt { margin-top:6px; }
.stree .nm { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35; }
.stree .nm .sub { overflow-wrap:anywhere; }
.stree .nm .zone { display:block; color:#8b95a3; font-size:14px; margin-top:2px; overflow-wrap:anywhere; }
.stree .tr.l1 .nm { white-space:normal; }
@media (max-width:760px) {
  /* Подпись круга — справка, имя круга и счёт — ответ: на узком экране справка съедала заголовок. */
  .stree .tr.l1 .nm .sub { display:none; }
}

/* ── СХЕМА КОМАНДЫ (20.09.2026, слово Вячеслава: «хотел бы чтобы это было визуализировано как блок
   схема, типо орг структура, иерархия»). Вложенный список отвечал на те же вопросы, но иерархию
   человек в нём достраивал сам по отступам. Здесь она нарисована: владелец сверху, шина, круги
   узлами, агенты ветвями. Линии — CSS, а не картинка: схема остаётся живой (состав и живость из
   снимка флота) и раскрывается в карточку прямо на месте.
   Шина честна только тогда, когда круги стоят ОДНИМ рядом: при переносе она соединяла бы соседей
   из разных рядов. Поэтому ниже 1100 px горизонталь снимается вовсе, а связь держит стебель — лгать
   линией хуже, чем её не рисовать. */
.org { --line:#2a323d; }
.org-owner { max-width:360px; margin:0 auto; background:#1a1f27; border:1px solid #2f3846; border-radius:12px;
             padding:11px 16px; text-align:center; }
.org-owner b { display:block; font-size:19px; }
.org-owner .osub { display:block; color:#8b95a3; font-size:14px; margin-top:2px; line-height:1.35; }
.org-trunk { display:block; width:2px; height:20px; background:var(--line); margin:0 auto; }
.org-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:18px; align-items:start; }
.org-col { position:relative; padding-top:20px; min-width:0; }
.org-col::before, .org-col::after { content:''; position:absolute; top:0; height:2px; background:var(--line); }
.org-col::before { left:50%; width:calc(50% + 18px); }
.org-col::after { right:50%; width:calc(50% + 18px); }
.org-col:first-child::after, .org-col:last-child::before { display:none; }
.org-stem { position:absolute; top:0; left:50%; margin-left:-1px; width:2px; height:20px; background:var(--c, var(--line)); }
.org-node { background:#161b22; border:1px solid #232a34; border-top:3px solid var(--c, #7d8794);
            border-radius:12px; padding:10px 13px; }
.org-node b { display:block; font-size:16px; }
.org-node .osub { display:block; color:#8b95a3; font-size:14px; margin-top:2px; line-height:1.3; }
.org-node .ocnt { display:block; color:#7d8794; font-size:13px; margin-top:6px; }
.org-leaves { position:relative; margin-left:14px; padding-left:16px; }
.org-leaves::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line); }
.org-leaf { position:relative; margin-top:10px; }
.org-leaf::before { content:''; position:absolute; left:-16px; top:21px; width:16px; height:2px; background:var(--line); }
/* Хвост вертикали ниже последнего отвода закрашивается фоном страницы: линия обязана кончаться
   на последнем агенте, иначе схема обещает ветвь, которой нет. */
.org-leaf:last-child::after { content:''; position:absolute; left:-17px; top:23px; bottom:-4px; width:4px; background:#0f1115; }
.org-card { display:flex; align-items:flex-start; gap:8px; list-style:none; cursor:pointer;
            background:#161b22; border:1px solid #232a34; border-radius:10px; padding:9px 11px; }
.org-card::-webkit-details-marker, .org-card::marker { display:none; }
.org-card .nm { flex:1 1 auto; min-width:0; }
/* Ник — своей строкой всегда: в колонке схемы он то влезал к имени, то нет, и карточки соседей
   переставали читаться одним взглядом сверху вниз (имя — ник — зона). */
.org-card .nm > b { display:block; }
.org-card .sub { display:block; overflow-wrap:anywhere; }
.org-card .pt { margin-top:6px; flex:none; }
.org-card.dim { cursor:default; color:#8b95a3; }
.org-card .sub.alien { color:#f2c14e; }
.org-leaf .tag.onk { display:inline-block; margin-top:5px; font-size:13px; padding:1px 8px; }
.oag.org-leaf[open] > .org-card { background:#1b212a; border-color:#2f3946; border-radius:10px 10px 0 0; }
/* Раскрытие на широком экране не помещается в колонку схемы: в 240 px карточка вытягивалась на
   восемь экранов вниз и читалась хуже, чем в старом списке. Поэтому тело выходит панелью поверх
   схемы — схема при этом не прыгает (панель вне потока), а две крайние правые колонки открывают
   её влево, иначе она уезжала бы за край страницы. На телефоне панели нет: там колонка и так во
   всю ширину, и всплывающее поверх только мешало бы. */
.org-leaf .obody { background:#12161d; border:1px solid #2f3946; border-top:none; border-radius:0 0 10px 10px;
                   padding:8px 12px 12px; }
@media (min-width:761px) {
  .oag.org-leaf[open] { z-index:6; }
  .oag.org-leaf[open] > .obody { position:absolute; left:0; top:100%; width:520px; max-width:88vw;
    border-radius:0 10px 10px 10px; box-shadow:0 14px 34px rgba(0,0,0,.55); }
  .org-col:nth-last-child(-n+2) .oag.org-leaf[open] > .obody { left:auto; right:0; border-radius:10px 0 10px 10px; }
}
@media (max-width:1100px) {
  .org-cols { grid-template-columns:repeat(2, 1fr); }
  .org-col::before, .org-col::after { display:none; }
}
@media (max-width:760px) {
  .org-cols { grid-template-columns:1fr; gap:14px; }
  .org-owner { max-width:none; }
  .org-trunk { height:14px; }
  .org-col { padding-top:14px; } .org-stem { height:14px; }
  .org-leaves { margin-left:8px; padding-left:12px; }
  .org-leaf::before { left:-12px; width:12px; }
  .org-leaf:last-child::after { left:-13px; }
}

/* ── ДВИЖОК: река версий (ТЗ Вячеслава 20.09.2026) ──────────────────────────────────────────
   Этажи связаны ЛИНИЕЙ, а не отступом: отступ читается как оформление, и связь владелец
   достраивает сам. Линия идёт сверху вниз и на каждом переходе подписана — кто её двигает. */
/* Полоса о молчащем сборе карты (ПР-1411, 20.09.2026). Стоит ВЫШЕ чисел: числа первым экраном
   читаются как «сейчас», и мелкая строка подвала их не оспаривает. Жёлтый — сбор, похоже, встал;
   красный — прошли сутки, то есть был ночной рейс и версии контуров заведомо другие. */
.card.dvstale { border-left:3px solid #f2c14e; line-height:1.5; }
.card.dvstale.red { border-left-color:#d9414f; }
/* ШИЛЬДИК НОМЕРА ВЕРСИИ (просьба Вячеслава 21.09.2026). Стоит над числами флота: номер отвечает
   на вопрос «какая версия движка», а не «сколько чего», и читается первым. Жёлтая грань — номер в
   коде разошёлся с тем, что объявлено выпущенным. */
.card.dvrel { display:flex; gap:16px; align-items:flex-start; margin-bottom:14px; line-height:1.45; }
.card.dvrel.yellow { border-left:3px solid #f2c14e; }
.dvrelbig { text-align:center; flex:0 0 auto; }
.dvrelbig .dvlbl { display:block; margin:5px 0 0; font-size:11px; }
.dvrelnum { font-size:44px; font-weight:700; line-height:1; color:#e8edf4; letter-spacing:-.01em; }
.dvreltx { min-width:0; }
.dvreltx > b { font-size:16px; }
.dvreltx .mut { display:block; font-size:13px; margin-top:3px; }
.dvreltx > .yellow { display:block; font-size:14px; margin-top:6px; }
.dvsum { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:18px; }
.dvbox { background:#161a21; border:1px solid #242a34; border-radius:14px; padding:14px 16px; }
.dvbox .v.big { display:block; font-size:30px; line-height:1.1; }
.dvbox em { display:block; font-style:normal; color:#8b95a3; font-size:14px; margin-top:4px; line-height:1.3; }
/* Номер версии второй строкой под крупным числом: два числа отвечают на разные вопросы и обязаны
   быть подписаны, иначе сливаются в одно непонятное «0.18 721». */
.dvbox em.dvnumsub { color:#cfd6e0; font-size:13px; margin-top:6px; }

/* ОДНА ПОЛОСА ВМЕСТО ЧЕТЫРЁХ ПЛИТОК (22.09.2026). Числа шапки — это оглавление реки под ней, и
   читаются они по течению: в сборке → у тебя → у клиентов. Стрелка между ними делает порядок
   видимым, а плитка его только подразумевала — четыре равных прямоугольника читаются как набор,
   а не как путь. Высота полосы 56 px против 240 px у сетки плиток. */
/* Роль ступени: пять слов в строке, полная фраза — по раскрытию. Треугольник раскрытия у
   браузера свой и крупный; здесь он мелкий и серый, чтобы не спорить с числами ступени. */
.dvwhat.hintrole { color:#8b95a3; font-size:14px; line-height:1.35; }
.dvwhat.hintrole > summary { cursor:pointer; list-style:none; display:inline; }
.dvwhat.hintrole > summary::-webkit-details-marker { display:none; }
.dvwhat.hintrole > summary::after { content:' ›'; color:#5f6a78; }
.dvwhat.hintrole[open] > summary::after { content:' ‹'; }

.dvsum.row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; background:#161a21;
  border:1px solid #242a34; border-radius:14px; padding:12px 16px; margin-bottom:16px; }
.dvstat { color:#8b95a3; font-size:14px; line-height:1.25; }
.dvstat b { display:inline-block; color:#e8ecf2; font-size:26px; line-height:1; margin-right:7px;
  vertical-align:-2px; font-weight:600; }
.dvstat.yellow, .dvstat.yellow b { color:#e0a33e; }
.dvsum .dvarr { color:#4b5563; font-size:19px; line-height:1; }
.dvsum .dvsep { flex:1; min-width:10px; border-top:1px dashed #242a34; height:1px; }
@media (max-width:760px) {
  .dvsum.row { gap:8px 12px; padding:11px 13px; }
  .dvstat b { font-size:22px; }
  /* На телефоне полоса разворачивается в столбец, и течение читается сверху вниз само: стрелка
     между числами вставала бы отдельной строкой и означала бы поворот, которого нет. */
  .dvsum .dvsep, .dvsum .dvarr { display:none; }
}

/* РЕКА. Одно сплошное русло слева, узлы на нём, подписи переходов прямо на линии. До пересборки
   20.09 этажи стояли стопкой плиток с короткими линиями между ними: связь читалась отступом, а
   отступ владелец достраивает глазами. Цвет русла течёт сверху вниз — синий «ещё не выпущено»,
   оранжевый «стоит по решению владельца», зелёный «живой бот у человека». */
.dvflow { position:relative; }
.dvriver { padding-left:38px; }
.dvchan { position:absolute; left:11px; top:20px; bottom:26px; width:4px; border-radius:3px;
          background:linear-gradient(#2b6cf6 0%, #2b6cf6 18%, #f2803c 40%, #35c692 72%, #35c692 100%); }
.dvstep { position:relative; background:#161b22; border:1px solid #232a34; border-left:4px solid var(--c, #7d8794);
          border-radius:12px; padding:14px 16px; }
/* Узел реки: кружок цвета ступени поверх русла. Фон непрозрачный — иначе русло просвечивает
   сквозь него и узел перестаёт читаться остановкой. */
.dvriver > .dvstep::before { content:''; position:absolute; left:-34px; top:20px; width:12px; height:12px;
          border-radius:50%; background:#0f1217; border:3px solid var(--c, #7d8794); box-sizing:content-box; }
.dvstep.dim { opacity:.75; }
.dvhead { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.dvhead b { font-size:18px; }
/* Ярлык состояния ступени — три слова владельца («в процессе создания / выкачен / у клиентов»).
   Цвет берётся от самой ступени, поэтому ярлык читается вместе с узлом на русле, а не сам по
   себе. Стоит первым в строке имени: техническое имя ветки без него ответа не даёт. */
.dvmark { font-size:11px; letter-spacing:.09em; font-weight:700; color:var(--c, #7d8794);
          border:1px solid var(--c, #7d8794); border-radius:5px; padding:2px 7px; white-space:nowrap; }
.dvwhat { color:#8b95a3; font-size:14px; margin-top:3px; line-height:1.35; }
.dvver-row { margin-top:9px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.dvver { font-size:26px; font-weight:600; color:#e8edf4; }
/* Номер версии ступени — крупнее шкалы и первым в строке: его владелец называет вслух, по нему
   ищет опись выпуска. Подпись рядом с каждым числом обязательна: два голых числа подряд читаются
   как одно. */
.dvnum { font-size:26px; font-weight:700; color:#f2c14e; }
.dvlbl { color:#8b95a3; font-size:12px; letter-spacing:.02em; margin-right:6px; }
.dvsha { color:#8fb0e8; font-size:14px; }
.dvtags { margin-top:9px; display:flex; gap:6px; flex-wrap:wrap; }
.dvline { margin-top:8px; font-size:14px; color:#9aa5b3; }

/* Переход: подпись НА русле — кто двигает код дальше и с каким ритмом. Ритм отдельным тегом
   справа: «каждый рейс» и «по его слову» — разные обещания, и различать их надо не вчитываясь. */
.dvpass { position:relative; margin:12px 0; padding:9px 0 9px 2px; font-size:14px; line-height:1.4;
          display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.dvpass::before { content:''; position:absolute; left:-31px; top:50%; width:22px; height:2px; background:#2f3946; }
.dvpass b { color:#cfd6e0; }
.dvpass b.yellow { color:#f2c14e; }
.dvpass i { font-style:normal; color:#8b95a3; font-size:13px; border:1px solid #2b323d; border-radius:999px; padding:2px 9px; }
.dvpass.hold::before { background:#f2803c; }

/* Устье: ветвление на контуры — узел со своей версией, внутри него сетка карточек. */
.dvmouth { padding-bottom:16px; }
.dvmv { margin-left:auto; font-size:26px; font-weight:600; }
.dvgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:12px; margin-top:13px; position:relative; }
.dvc { background:#161b22; border:1px solid #232a34; border-radius:12px; min-width:0; }
.dvcs { display:flex; gap:9px; align-items:flex-start; padding:12px 14px; cursor:pointer; list-style:none; }
.dvcs::-webkit-details-marker { display:none; }
.dvcs .nm { flex:1; min-width:0; }
.dvcs .nm b { display:block; font-size:16px; overflow-wrap:anywhere; }
.dvcs .nm .sub { display:block; color:#8b95a3; font-size:13px; line-height:1.3; margin-top:2px; }
.dvcv { text-align:right; font-size:20px; font-weight:600; color:#e8edf4; white-space:nowrap; }
.dvcv em { display:block; font-style:normal; font-size:13px; font-weight:normal; color:#7d8794; }
.dvcb { border-top:1px solid #232a34; padding:10px 14px 13px; display:grid; gap:7px; font-size:14px; line-height:1.4; }
.dvcb .k { display:inline-block; min-width:118px; color:#7d8794; }
.dvmore { margin:10px 0 0 2px; color:#8b95a3; font-size:14px; }
.dvmore summary { cursor:pointer; }
.dvlist { margin:8px 0 0 18px; display:grid; gap:5px; line-height:1.4; }

/* ВНУТРЕННЕЕ УСТРОЙСТВО СТУПЕНИ. Закрытым остаётся одна строка — река не должна разваливаться на
   таблицы; раскрытое тело живёт внутри ступени, во всю её ширину. Полоса доли рисуется от ВЕСА
   раздела: «154 файла» и «214 файлов» на глаз одинаковы, а весят они по-разному. */
/* ВХОД ВО ВТОРОЙ ВИД. Кнопка, а не раскрытие: схема живёт отдельным экраном, и место, где
   владелец её искал, обязано на неё вести. */
.dvinlink { margin-top:11px; border-top:1px solid #232a34; padding-top:10px; font-size:14px; color:#9aa5b3; }
.dvopen { display:inline-block; padding:9px 16px; border-radius:8px; background:#222a38; color:#e8eaed;
          font-size:15px; font-weight:600; box-shadow:inset 0 0 0 1px #33425a; }
.dvopen:hover { background:#28354a; }
.dvinlink .dvline { margin-top:7px; }
.dvin { margin-top:11px; border-top:1px solid #232a34; padding-top:9px; font-size:14px; color:#9aa5b3; }
.dvin > summary { cursor:pointer; list-style:none; display:flex; gap:7px; align-items:baseline; flex-wrap:wrap; }
.dvin > summary::-webkit-details-marker { display:none; }
.dvin > summary::before { content:'▸'; color:#7d8794; }
.dvin[open] > summary::before { content:'▾'; }
.dvin > summary b { color:#cfd6e0; }
.dvinb { margin-top:10px; }
/* Стадии петли — путь одной реплики, поэтому нумерованный ряд, а не список: порядок здесь и есть
   смысл. */
.dvstages { list-style:none; margin:9px 0 0; padding:0; display:grid; gap:6px; counter-reset:st; }
.dvstages li { display:flex; gap:9px; align-items:baseline; padding-left:23px; position:relative; line-height:1.35; flex-wrap:wrap; }
.dvstages li::before { counter-increment:st; content:counter(st); position:absolute; left:0; top:1px; width:16px; height:16px;
          border-radius:50%; background:#1c2431; color:#8fb0e8; font-size:11px; text-align:center; line-height:16px; }
.dvstages li b { color:#cfd6e0; min-width:84px; font-weight:600; font-size:13px; }
.dvstages li span { color:#8b95a3; }
.dvparts { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:11px; }
.dvparts li { display:grid; gap:4px; }
.dvparts li.odd .pn b { color:#f2c14e; }
.dvparts .pn { display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; }
.dvparts .pn b { color:#e8edf4; font-size:15px; }
.dvparts .pv { color:#7d8794; font-size:13px; }
.dvparts .pbar { display:flex; gap:8px; align-items:center; }
.dvparts .pbar i { display:block; height:6px; border-radius:3px; background:#2b6cf6; min-width:4px; max-width:70%; }
.dvparts .pbar em { font-style:normal; color:#7d8794; font-size:12px; }
.dvparts .pw { color:#8b95a3; line-height:1.35; }
.dvparts .pf { color:#5f6a78; font-size:12px; overflow-wrap:anywhere; }

/* Легенда цвета: три слова, не объяснение замысла. Цвет русла иначе приходится угадывать. */
.dvlegend { display:flex; gap:18px; flex-wrap:wrap; margin:14px 0 20px 2px; color:#7d8794; font-size:13px; }
.dvlegend span { display:flex; gap:7px; align-items:center; }
.dvlegend i { width:22px; height:4px; border-radius:2px; display:inline-block; }
.dvlegend i.o { width:11px; height:11px; border-radius:50%; border:3px solid #7d8794; background:#0f1217; }

/* ПУТЬ ОДНОЙ РЕПЛИКИ. Русло слева направо: человек → бот → ядро → инструменты → выходы наружу.
   Каждая связь — линия С ПОДПИСЬЮ: линия без подписи не рисуется вовсе (правило C4 и ТЗ 21.09).
   То, что в поток не встроено, но без чего он не работает, входит сбоку — другим фоном, чтобы
   поток и контекст не путались. */
.prmap { background:#12151b; border:1px solid #232a35; border-radius:14px; padding:18px 16px 14px; }
/* Сетка держит узлы потока на одной линии: колонки — «связь + узел» на каждую часть, ряды —
   контекст сверху, поток, контекст снизу. Столбцами это не собирается: у частей разной высоты
   русло разъезжается по вертикали и перестаёт читаться путём. */
/* Узлы одного ряда тянутся на его высоту: при выравнивании по центру плашки разной высоты
   гуляют вверх-вниз, и ряд перестаёт читаться рядом. Подписи связей при этом остаются по
   центру своей клетки — иначе линия уезжает к нижней грани. */
.prgrid { display:grid; grid-template-columns:auto repeat(4, 74px minmax(0, 1fr));
          grid-template-rows:auto auto auto auto auto; align-items:stretch; }
.prgrid > div { display:flex; flex-direction:column; justify-content:center; }
.prgrid .prn { flex:1; }
.prgrid > div { min-width:0; }
.prhuman { display:block; text-align:center; background:#232b36; border:1px solid #39475a; border-radius:24px;
           padding:11px 14px; font-weight:700; white-space:nowrap; }
/* УЗЕЛ ВТОРОЙ РЕДАКЦИИ. Три яруса вместо трёх одинаковых строк: имя — главная величина крупно —
   описание светлее и мельче. Цвет части несёт ПОЛОСА слева, а не точка в 10 px: полосу видно с
   расстояния, точку — нет, а именно цвет и есть ответ на вопрос «где слабое место». */
.prn { display:block; background:#171c24; border:1px solid #2b3442; border-left:4px solid #5b6470;
       border-radius:10px; padding:11px 13px 12px; color:inherit; text-decoration:none; }
.prn.t-green { border-left-color:#3f9c6d; } .prn.t-yellow { border-left-color:#e0a33e; }
.prn.t-red { border-left-color:#cf5b5b; } .prn.t-grey { border-left-color:#39414d; }
.prn:hover { border-color:#3c4a5e; }
.prn.side { background:#15181f; }
.prn .prt { display:block; font-weight:700; font-size:15px; line-height:1.2; color:#e8edf4; }
.prn .prv { display:block; margin-top:7px; font-size:13px; color:#cfd6e0; }
.prn .prbig { font-size:27px; font-weight:700; line-height:1; letter-spacing:-.01em; color:#e8edf4; }
.prn .prbig i { font-style:normal; font-size:15px; font-weight:600; margin-left:1px; }
.prn .prbig.green { color:#5fc08d; } .prn .prbig.yellow { color:#f0b955; } .prn .prbig.red { color:#e97a7a; }
.prn .prcap { display:block; font-size:11px; color:#7d8794; margin-top:1px; line-height:1.2; }
.prn .prq { display:block; font-size:12.5px; color:#9aa5b3; margin-top:4px; }
.prn .prq b { color:#cfd6e0; }
.prn .prsub { display:block; margin-top:7px; font-size:12px; color:#79838f; line-height:1.3;
              display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.prn .prno { color:#7d8794; font-size:12.5px; }
.prdot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; display:inline-block; background:#5b6470; }
.prdot.green { background:#3f9c6d; } .prdot.yellow { background:#e0a33e; } .prdot.red { background:#cf5b5b; }
.prdot.grey { background:transparent; border:2px solid #5b6470; width:12px; height:12px; }
/* Стадии ядра — единственная вложенность на первом уровне: они объясняют само слово «ядро».
   Числом узла остаётся пара «файлов · доля крытых», стадии идут подписями плашек. */
.prstages { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.prstages i { flex:1; background:#1d2634; border:1px solid #2f3d52; border-radius:6px; padding:4px 3px;
              text-align:center; font-style:normal; font-size:10.5px; color:#a9bbd6; line-height:1.15; }
/* Связь: линия С ПОДПИСЬЮ. Горизонтальная — в потоке (подпись над линией), вертикальная — вход
   сбоку (подпись справа от линии). Линия без подписи на этой схеме не рисуется вовсе: связь,
   смысл которой читатель достраивает сам, — та же иерархия отступами, от которой ушли. */
.prlink { position:relative; font-size:11.5px; color:#93a0b1; line-height:1.15; }
.prlink.h { display:flex; height:40px; align-items:flex-end; justify-content:center;
            text-align:center; padding:0 2px 7px; }
.prlink.h::after { content:''; position:absolute; left:0; right:7px; bottom:0; height:2px; background:#54637a; }
.prlink.h::before { content:''; position:absolute; right:0; bottom:-3px; border:4px solid transparent; border-left-color:#54637a; }
.prlink.v { display:flex; align-items:center; justify-content:flex-start; height:46px;
            padding-left:calc(50% + 11px); text-align:left; }
.prlink.v::after { content:''; position:absolute; left:50%; top:0; bottom:6px; width:2px; margin-left:-1px; background:#54637a; }
.prlink.v::before { content:''; position:absolute; left:50%; bottom:0; margin-left:-4px; border:4px solid transparent; border-top-color:#54637a; }
.prlink.v.up::after { top:6px; bottom:0; }
.prlink.v.up::before { bottom:auto; top:0; border-top-color:transparent; border-bottom-color:#54637a; }
/* Сторожа смотрят, но не управляют — пунктир вместо сплошной: это наблюдение, а не команда. */
.prlink.v.dash::after { background:repeating-linear-gradient(#54637a 0 5px, transparent 5px 9px); }
.prback { margin-top:14px; border-top:2px dashed #54637a; padding-top:7px; text-align:center; }
.prback em { font-style:normal; font-size:12.5px; color:#7d8794; }
.prlegend { margin-top:12px; }
.prlegend .prdot { width:10px; height:10px; }
.prbar { display:inline-block; width:4px; height:14px; border-radius:2px; background:#5b6470;
         vertical-align:-2px; margin-right:7px; flex:0 0 auto; }
.prbar.green { background:#3f9c6d; } .prbar.yellow { background:#e0a33e; }
.prbar.red { background:#cf5b5b; } .prbar.grey { background:#39414d; }
/* Карточки частей — ДВЕ колонки, а не три: в три они превращались в ряд одинаковых бледных
   обрубков, и второй ярус экрана не добавлял ничего, кроме высоты. Цвет здесь тот же, что на
   схеме, и несёт его такая же полоса слева — один смысл одним приёмом на всём экране. */
.prcards { display:grid; grid-template-columns:repeat(auto-fit, minmax(430px, 1fr)); gap:10px; }
.prcard { background:#161a21; border:1px solid #262d38; border-left:4px solid #39414d; border-radius:10px; min-width:0; }
.prcard > summary { display:flex; gap:9px; align-items:center; padding:11px 14px; cursor:pointer; list-style:none; flex-wrap:wrap; }
.prcard.t-green { border-left-color:#3f9c6d; } .prcard.t-yellow { border-left-color:#e0a33e; }
.prcard.t-red { border-left-color:#cf5b5b; } .prcard.t-grey { border-left-color:#39414d; }
.prcard > summary::-webkit-details-marker { display:none; }
.prcard > summary b { font-size:15px; }
.prcard .prcb { border-top:1px solid #222834; padding:10px 14px 13px; display:grid; gap:7px; font-size:14px; line-height:1.4; }
.prcard .prcb .k { display:inline-block; min-width:128px; color:#7d8794; }
.prcard .prcb .pf { color:#5f6a78; font-size:12px; overflow-wrap:anywhere; }
.prcard:target { border-color:#2b6cf6; }

/* ЧТО ВНУТРИ ЧАСТИ — СПИСКОМ (23.09.2026, «нажал инструменты и вижу списком, какие инструменты
   есть»). Список идёт колонками: сто пятьдесят строк в одну колонку — это метр прокрутки, а
   вопрос закрывается взглядом. Первым в строке дело, кличка файла мелкой моноширинкой рядом. */
.prcard .prcb .prlisth { min-width:0; color:#cfd8e3; margin-top:2px; }
.prlist { columns:2; column-gap:26px; margin:0; padding:0; list-style:none; font-size:13px; line-height:1.45; }
.prlist li { break-inside:avoid; padding:2px 0; border-bottom:1px solid #1b2028; }
.prlist li b { font-weight:500; color:#d7e2ee; }
.prlist li.bare b { color:#9fb0c2; }
.prlist li .mono { display:block; color:#5f6a78; font-size:11.5px; }
/* Метка «механизм» — файл, который никто не зовёт рукой: правило, замок или фильтр внутри движка.
   Стоит в одной строке с кличкой файла: своя строка стоила бы ~23 px на каждой из ста пятидесяти
   записей. Цвет приглушённый — это вид записи, а не тревога. */
.prlist li .mono .mech { font-style:normal; color:#8a7a45; }
.prlistnote { font-size:12.5px; margin-top:6px; }

/* ПОЛКИ ИНСТРУМЕНТОВ (23.09.2026: «мне нужно чтобы они были сгруппированы по смыслам»). Полка —
   строка-вопрос: имя дела, число и одна фраза. Первая раскрыта, остальные сложены: экран обязан
   отвечать и «какие тут полки», и «что на полке», иначе десять свёрнутых строк — ширма перед тем
   же списком. Остаток отличается рамкой: это не полка, а незакрытый хвост разбора. */
.prshelves { display:grid; gap:6px; margin-top:4px; }
.prshelf { border:1px solid #232a34; border-radius:9px; background:#12161c; }
.prshelf > summary { cursor:pointer; padding:7px 11px; display:flex; gap:9px; align-items:baseline;
  font-size:13.5px; flex-wrap:wrap; }
.prshelf > summary b { color:#dfe7f0; font-weight:600; }
.prshelf > summary .mut { font-size:12px; color:#7a8796; flex:1 1 230px; min-width:0; }
.prshelf[open] > summary { border-bottom:1px solid #1d232c; }
.prshelf .prlist { padding:9px 11px 10px; }
.prshelf.rest { border-color:#3a3526; }
.prshelf.rest > summary b { color:#d9a441; }

/* Ответ на вопрос «что значат эти проценты и что мне с ними делать» — рядом со шкалой, а не в
   справке: шкала без названной цели читается как недовыполненный план. */
.prwhy { border:1px solid #262d38; border-left:3px solid #39414d; border-radius:10px;
  padding:11px 15px; margin:0 0 14px; display:grid; gap:5px; }
.prwhy .q { font-size:14.5px; color:#d7e2ee; line-height:1.45; }
.prwhy .t { font-size:13px; color:#8b98a8; line-height:1.5; }
.prwhy b { color:#e8edf3; }
.prwhy .red { color:#ef6b6b; }

@media (max-width:760px) {
  .dvsum { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .dvbox .v.big { font-size:26px; }
  .dvgrid { grid-template-columns:1fr; }
  .dvriver { padding-left:26px; }
  .dvchan { left:5px; }
  .dvriver > .dvstep::before { left:-25px; }
  .dvpass::before { left:-22px; width:14px; }
  .dvmv { margin-left:0; }
  /* Узкий экран: русло переносится в столбец, порядок узлов и подписи связей сохраняются
     (ТЗ 21.09). Раскрытие карточки внутри узкой колонки запрещено — карточки и так стоят
     отдельной сеткой ниже схемы, а не внутри узла. */
  .prgrid { display:flex; flex-direction:column; align-items:stretch; }
  .prgrid > div { order:0; }
  .prlink.h { height:34px; padding:0 0 4px; }
  .prlink.h::after { left:50%; right:auto; top:0; bottom:6px; width:2px; height:auto; margin-left:-1px; }
  .prlink.h::before { left:50%; right:auto; bottom:0; margin-left:-4px; border-left-color:transparent; border-top-color:#54637a; }
  .prcards { grid-template-columns:1fr; }
  .prlist { columns:1; }
}

/* ── ФИНАНСЫ ──────────────────────────────────────────────────────────────────────────────
   Раздел личных денег владельца. Стили с префиксом fin-, чтобы не спорить с общим экраном;
   форма утверждена по макету «Макеты/11-finansy.html» (вторая редакция 22.09.2026).
   Серое `.finnm` значит «не меряем» и не имеет права выглядеть как ноль или как «в порядке». */
.finsrez { color:#7d8794; font-size:15px; margin:-6px 0 18px; line-height:1.5; }
.finsrez b { color:#c3ccd8; font-weight:600; }
/* Метка «снимок старше суток» — жёлтая, иначе её съедает общий цвет выделений шапки:
   специфичность .finsrez b выше, чем у .yellow, и предупреждение тонет среди обычных чисел. */
.finsrez b.yellow { color:#f2c14e; }
.finnm { color:#6f7783; }

.finq { background:#1b1418; border:1px solid #6d2b34; border-left:4px solid #d9414f; border-radius:14px; padding:18px 20px; margin-bottom:16px; }
.finq h2 { font-size:16px; color:#c3ccd8; font-weight:normal; letter-spacing:.2px; margin-bottom:10px; }
.finans { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.finans .v { font-size:40px; font-weight:bold; color:#ff8a95; line-height:1.05; }
.finans .w { font-size:17px; color:#e8eaed; }
.finhod { margin-top:14px; padding-top:12px; border-top:1px solid #3b262c; font-size:16px; color:#d7dde5; line-height:1.45; }
.finhod b { color:#fff; }
.finhod .lbl { display:inline-block; font-size:13px; letter-spacing:.5px; color:#ff8a95; text-transform:uppercase; margin-right:8px; }
.finblind1 { margin-top:10px; font-size:14px; color:#8b95a3; line-height:1.45; }
.finblind1 b { color:#b6bfcb; }

/* Шесть плиток одним рядом: при minmax шире 165 px ряд ломается «5 + 1», и тело долга висит
   одинокой плиткой под пятью. Видно это только рендером — такого не меряет ни одна проверка. */
.fintiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(156px,1fr)); gap:10px; margin-bottom:22px; }
.fintile { background:#161a21; border:1px solid #262d38; border-left:3px solid #3a424e; border-radius:12px; padding:13px 15px; }
.fintile.red { border-left-color:#d9414f; }
.fintile.yellow { border-left-color:#d8a23a; }
.fintile.green { border-left-color:#3f9c6d; }
.fintile .n { font-size:22px; font-weight:bold; letter-spacing:-.4px; }
.fintile .t { font-size:14px; color:#8b95a3; margin-top:2px; }
.fintile .s { font-size:13px; color:#6f7783; margin-top:5px; line-height:1.3; }

.finsec { margin:0 0 12px; font-size:15px; letter-spacing:.5px; text-transform:uppercase; color:#8b95a3; }
.finsec em { font-style:normal; text-transform:none; letter-spacing:0; color:#6f7783; margin-left:10px; font-size:14px; }
.finpanel { background:#141821; border:1px solid #232935; border-radius:14px; padding:16px 18px; margin-bottom:22px; }

.finswitch { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.finswitch span { font-size:14px; color:#6f7783; align-self:center; margin-right:6px; }
.finswitch a { font-size:15px; padding:6px 13px; border-radius:8px; background:#191d24; color:#8b95a3; }
.finswitch a.on { background:#2b6cf6; color:#fff; font-weight:bold; }
.finbars { display:grid; gap:10px; align-items:end; height:210px; margin-bottom:8px; }
.fincol { display:flex; flex-direction:column; justify-content:flex-end; height:100%; gap:3px; }
.finpair { display:flex; gap:4px; align-items:flex-end; height:100%; }
.finbar { flex:1; border-radius:3px 3px 0 0; }
.finbar.in { background:#3f9c6d; }
.finbar.out { background:#a8414c; }
.finbar.ghost { background:repeating-linear-gradient(45deg,#2a3039,#2a3039 4px,#212730 4px,#212730 8px); }
.finxt { display:grid; gap:10px; }
.finxt div { text-align:center; font-size:14px; color:#8b95a3; }
.finxt div b { display:block; color:#e8eaed; font-size:15px; }
.finlegend { font-size:14px; color:#6f7783; margin-top:12px; line-height:1.45; }
.finlegend i { font-style:normal; display:inline-block; width:11px; height:11px; border-radius:2px; vertical-align:baseline; margin-right:5px; }
.finwarn { margin-top:12px; background:#1d1a14; border:1px solid #5a4620; border-radius:10px; padding:11px 14px; font-size:15px; color:#e5d5b4; line-height:1.5; }
.finwarn b { color:#ffd479; }

.fincols2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px; }
/* Имя статьи приходит как «Группа / Подгруппа», и в две строки его ставила сама колонка: восемь
   строк подряд читались «Представительские расходы /…» и не различались вовсе. Группа уходит
   мелкой припиской В ТОТ ЖЕ ряд (как метки прайса), колонка имени забирает ширину у полосы —
   строка становится однострочной и при этом называет подгруппу целиком. ~17 px на запись. */
.finrow { display:grid; grid-template-columns:minmax(0,2.45fr) minmax(38px,0.75fr) 104px 42px; gap:9px; align-items:center; padding:5px 0; border-top:1px solid #1e242e; }
.finrow:first-of-type { border-top:none; }
.finrow .nm { font-size:14.5px; line-height:1.3; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px; overflow:hidden; }
.finrow .nm .gr { color:#6f7783; font-size:12.5px; }
.finrow .nm small { color:#6f7783; font-size:13px; }
.finrow .track { background:#1a1f28; border-radius:4px; height:16px; }
.finrow .fill { height:16px; border-radius:4px; }
.finrow .sum { text-align:right; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.finrow .pc { text-align:right; font-size:13.5px; color:#8b95a3; white-space:nowrap; }
.fintot { display:flex; justify-content:space-between; margin-top:12px; padding-top:11px; border-top:1px solid #2b3240; font-size:16px; color:#c3ccd8; }
.fintot b { font-size:19px; }

.findates .d { display:grid; grid-template-columns:96px 1fr 132px; gap:12px; padding:9px 0; border-top:1px solid #1e242e; align-items:baseline; }
.findates .d:first-of-type { border-top:none; }
.findates .dt { color:#8b95a3; font-size:15px; }
.findates .dt.hot { color:#ff8a95; font-weight:bold; }
.findates .sm { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; font-size:17px; }
.findates .src { color:#6f7783; font-size:13px; display:block; }
/* Отбивка горизонта: три окна на одном списке (14 / 30 / 90 суток) — слово владельца 22.09.
   Без неё список на три месяца читается одной кучей, и ближайшая неделя теряется в ней. */
.finband { display:flex; justify-content:space-between; align-items:baseline; margin:14px 0 2px; padding:7px 11px; background:#171c25; border-radius:8px; font-size:14px; letter-spacing:.3px; color:#8b95a3; text-transform:uppercase; }
.finband b { font-size:16px; color:#c3ccd8; text-transform:none; font-variant-numeric:tabular-nums; }

.finblind { background:#141821; border:1px solid #232935; border-left:3px solid #4a525e; border-radius:12px; padding:14px 17px; font-size:15px; color:#98a1ad; line-height:1.5; }
.finblind b { color:#c3ccd8; }
.finblind div { padding:5px 0; }

@media (max-width:760px) {
  .fincols2 { grid-template-columns:1fr; }
  .finrow { grid-template-columns:1fr 92px 52px; }
  .finrow .track { display:none; }
  .finans .v { font-size:30px; }
  .findates .d { grid-template-columns:80px 1fr; }
  .findates .sm { grid-column:2; text-align:left; }
}

/* ── ДВИЖОК: РАЗГРУЗКА 22.09.2026 ─────────────────────────────────────────────────────────────
   Слово Вячеслава: разделы перегружены, движок оптимизировать графически не меньше чем на 30%
   без потери смысла. Ни одного факта отсюда не убрано — сняты: повторяющаяся кнопка во всю
   ширину на каждой ступени (стала строкой), проза о номере версии (ушла под раскрытие),
   двойные отступы плиток и карточек контуров. Мера — высота содержимого раздела в пикселях. */
.card.dvrel { gap:13px; margin-bottom:10px; padding:11px 15px; }
.dvrelnum { font-size:34px; }
.dvreltx > b { font-size:15px; }
.dvreltx .mut { display:inline; font-size:13px; }
.dvwhat.hintrole { font-size:13px; }
.dvhint { margin-top:4px; font-size:13px; }
.dvhint summary { padding:2px 0; font-size:13px; }
.dvsum { gap:9px; margin-bottom:12px; }
.dvbox { padding:10px 13px; border-radius:12px; }
.dvbox .v.big { font-size:26px; }
.dvbox em { font-size:13px; margin-top:3px; }
.dvbox em .dvnumsub { color:#cfd6e0; font-weight:600; }
.dvstep { padding:11px 13px; border-radius:11px; }
.dvwhat { font-size:13px; margin-top:2px; }
.dvver-row { margin-top:6px; }
.dvver, .dvnum, .dvmv { font-size:23px; }
.dvtags { margin-top:6px; }
.dvline { margin-top:5px; font-size:13px; }
.dvpass { margin:8px 0; padding:6px 0 6px 2px; }
/* Вход в схему — строка, а не панель: ссылка и её числа стоят в один ряд и переносятся вместе. */
.dvinlink.one { margin-top:8px; padding-top:7px; display:flex; gap:8px; align-items:baseline;
                flex-wrap:wrap; font-size:13px; }
.dvinlink.one .dvopen { padding:5px 11px; font-size:13px; font-weight:600; }
.dvgrid { grid-template-columns:repeat(auto-fit, minmax(205px, 1fr)); gap:8px; margin-top:10px; }
.dvcs { padding:9px 11px; gap:7px; }
.dvcs .nm b { font-size:15px; }
.dvcs .nm .sub { font-size:12px; margin-top:1px; }
.dvcv { font-size:18px; }
.dvcv em { font-size:12px; }
.dvlegend.tight { font-size:12px; gap:10px 14px; margin-top:8px; }
.dvmouth { padding-bottom:12px; }
.dvmore.foot { margin-top:10px; }
/* Подпись контура в закрытой карточке — две строки: одиннадцать карточек в сетке выравниваются по
   самой длинной, и один абзац на пять строк растил ряд втрое. Полный текст не потерян — он первой
   строкой в раскрытии («Кто это»). */
.dvcs .nm .sub { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dvlegend.tight { font-size:11.5px; gap:7px 12px; }
.dvlegend.tight i { margin-right:5px; }
/* Роль ступени — хвостом её имени, а не отдельной строкой: на широком экране строка имени
   наполовину пуста, а на узком подпись переносится сама и ничего не теряет. */
.dvwhat.in { margin-top:0; flex:1 1 320px; min-width:0; }
.dvpass { margin:7px 0; padding:5px 0 5px 2px; }
.dvmore { margin-top:7px; }

/* ДВИЖОК · схема «из чего сложен» — та же разгрузка 22.09.2026. Узлы, связи и карточки частей
   сохраняют все числа и подписи; сняты только воздух между ними и высота пустых перемычек. */
.sec.tight { margin:9px 0 6px; font-size:15px; }
.fsep { width:1px; align-self:stretch; background:#2b323d; margin:2px 4px; }
.prmap { padding:12px 12px 10px; }
.prn { padding:9px 10px; }
.prn .prt { font-size:14px; }
.prn .prv { margin-top:4px; }
.prn .prbig { font-size:24px; }
.prn .prq { margin-top:2px; }
.prn .prsub { margin-top:4px; }
.prstages { margin-top:4px; gap:3px; }
.prlink.h { height:30px; }
.prlink.v { height:34px; }
.prback { margin-top:9px; padding-top:5px; }
.prlegend { font-size:11.5px; gap:6px 12px; margin-top:7px; }
.prcards { grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:7px; }
.prcard > summary { padding:8px 11px; }
/* Перемычка между узлами — 56 px вместо 74: подпись связи («реплика», «руки») в них помещается, а
   освободившаяся ширина уходит узлам, и их текст перестаёт ломаться на шесть строк. */
.prgrid { grid-template-columns:auto repeat(4, 56px minmax(0, 1fr)); }
.filters.fleet .fopt { padding:5px 11px; font-size:14px; }
.prcards { grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.prn { padding:8px 10px; }
.prn .prsub { line-height:1.25; }
.prn .prno { line-height:1.25; }
.prlink.h { height:26px; }
.prlink.v { height:30px; }
.prmap { padding:10px 10px 8px; }
.prback { margin-top:7px; }
.sec.tight { margin:7px 0 5px; }
.prlegend .mut { line-height:1.3; }
.prcard > summary { padding:7px 11px; }
.dvmore summary { padding:3px 0; }
.prcard .prcb { padding:8px 11px 11px; }
.prlegend { margin-top:6px; }
.prcards { gap:6px; }
.prcard > summary { padding:6px 11px; }
/* Подпись вертикальной связи бывает в три строки («наблюдение, без управления») — клетке нужна
   её высота, иначе текст наезжает на узел. Проверено глазами на рендере 22.09.2026. */
.prlink.v { height:40px; font-size:11px; line-height:1.12; }
.prcards { grid-template-columns:repeat(auto-fit, minmax(228px, 1fr)); }

/* РАСКРЫТАЯ КАРТОЧКА ЗАНИМАЕТ ВЕСЬ РЯД (23.09.2026). Закрытые карточки стоят плотной сеткой по
   четыре — это правильно, пока в карточке четыре строки. Внутри же теперь список содержимого на
   полтораста имён, и в колонке 228 px он ломается в лапшу по одному слову. Ширина нужна только
   открытой, поэтому её и получает только она. Список внутри разбивается на колонки ШИРИНОЙ, а не
   числом: число колонок, прибитое к двум, даёт то узкую лапшу, то одинокий столбец. */
.prcards > .prcard[open] { grid-column:1 / -1; }
.prlist { columns:300px; }

/* Правила разгрузки выше стоят ПОСЛЕ медиазапросов, поэтому узкому экрану его величины
   возвращаются здесь явно: иначе вертикальная перемычка схемы на телефоне становится короче
   собственной подписи. */
@media (max-width:760px) {
  .prlink.h { height:34px; }
  .prcards { grid-template-columns:1fr; }
  .prlist { columns:1; }
}

/* ═══ ДВИЖОК · ПЕРЕСБОРКА ФОРМЫ 22.09.2026 ══════════════════════════════════════════════════
   Слово владельца: «всё равно выглядит crowded… нужно подумать, как правильно бы сделал UX-
   дизайнер, и это реализовать — профессионально, лаконично, со смыслом и без потери смысла».
   Предыдущая правка резала ТЕКСТ, а плотность на этом экране держал не объём букв, а форма:
   четыре одинаковых по весу коробки, двенадцать цветных плашек, одиннадцать плиток внизу и пять
   цветов одновременно. Разобрано по трём правилам ремесла.

   1. ОДИНАКОВЫЕ ЗАПИСИ — ТАБЛИЦА, А НЕ КАРТОЧКИ. У четырёх ступеней один набор полей; коробка
      заставляет читать каждую отдельно, колонка — сравнивать все сразу. Сравнение этажей и есть
      вопрос этого экрана.
   2. ЦВЕТ — ТОЛЬКО ОТКЛОНЕНИЕ. Норма набирается серым. Раньше зелёным было «всё отвечают», то
      есть цвет носило то, на что смотреть не нужно.
   3. ГРАНИЦА — ЛИНИЯ, А НЕ КОРОБКА. Hairline между строками вместо рамки, фона и скругления у
      каждой: коробка рисует четыре объекта там, где объект один — река. */

/* Шапка: номер версии и течение чисел — одна строка вместо двух блоков подряд. */
.card.dvcap { display:flex; gap:18px; align-items:flex-start; padding:13px 18px; margin-bottom:14px; }
.card.dvcap.yellow { border-left:3px solid #f2c14e; }
.dvcapv { flex:0 0 auto; text-align:center; }
.dvcapv .dvrelnum { font-size:38px; }
.dvcapv em { display:block; font-style:normal; color:#7d8794; font-size:12px; margin-top:2px; }
.dvcapb { min-width:0; flex:1; }
.card.dvcap .dvsum.row { background:none; border:0; border-radius:0; padding:0; margin:0; gap:10px 18px; }
/* Подпись — ПОД числом, а не справа от него. Справа она тянула каждую единицу в ширину, ряд
   ломался в непредсказуемых местах («в сборке, никому не / выкачен»), и три числа переставали
   читаться рядом. Под числом перенос идёт по смыслу, а ряд встаёт ровно. */
.card.dvcap .dvstat { max-width:185px; line-height:1.3; }
.card.dvcap .dvstat b { display:block; margin:0 0 2px; }
.card.dvcap .dvsum .dvarr { align-self:flex-start; margin-top:5px; }
/* Пунктирная растяжка перед числом флота убрана: она отделяла его от течения версий, а висела
   по центру строки и читалась как оборванная линия. Разрядки между колонками довольно. */
.card.dvcap .dvsum .dvsep { display:none; }
.card.dvcap .dvstat:last-child { margin-left:auto; }
.card.dvcap .dvreltx { margin-top:5px; font-size:13px; }
.card.dvcap .dvreltx .mut { display:inline; font-size:13px; }

/* Шапка колонок — подписи чисел один раз на всю таблицу. Кегль мелкий, разрядка широкая: это
   служебный ярлык, он не должен спорить с самими числами. */
.dvcols { display:grid; grid-template-columns:minmax(0,1.15fr) 150px minmax(0,1.5fr); gap:16px;
  padding:0 0 6px 38px; color:#5f6a78; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }

/* Ступень — строка таблицы. Ни фона, ни рамки, ни скругления: остаётся цветная засечка слева
   (она связывает строку с узлом на русле) и hairline снизу. */
.dvriver > .dvstep { display:grid; grid-template-columns:minmax(0,1.15fr) 150px minmax(0,1.5fr);
  gap:16px; align-items:start; background:none; border:0; border-bottom:1px solid #1e242e;
  border-radius:0; padding:13px 0 13px 12px; }
.dvriver > .dvstep::before { top:17px; }
.dvcell { min-width:0; }
.dvname .dvmark { display:inline-block; margin-bottom:3px; }
/* Ярлык состояния — без рамки: это подпись, а не кнопка. Рамка вокруг трёх слов на каждой из
   четырёх ступеней рисовала четыре рамки подряд, и все четыре ничего не открывали. */
.dvriver .dvmark { border:0; padding:0; font-size:11px; letter-spacing:.09em; }
/* Вход в схему живёт на самом имени ступени — там, где на него и нажимают. Кнопка во всю ширину
   стояла на каждой ступени четырежды подряд одинаковая. */
.dvgo { display:block; color:#e8edf4; text-decoration:none; }
.dvgo b { font-size:17px; }
.dvgo .mono { color:#7d8794; font-size:14px; margin-left:7px; }
.dvgo i { font-style:normal; color:#5f6a78; margin-left:5px; }
a.dvgo:hover b, a.dvgo:hover i { color:#7fb0ff; }
.dvname .dvwhat.in { display:block; margin-top:3px; font-size:13px; }
.dvname .dvwhat.hintrole { font-size:13px; margin-top:3px; }
/* Колонка версии: два числа в ряд, хэш и возраст — тихой второй строкой. */
.dvnums { display:flex; gap:7px; align-items:baseline; flex-wrap:wrap; }
.dvnums .dvnum, .dvnums .dvver { font-size:23px; }
.dvnums .dvver.mut { color:#5f6a78; }
.dvnums .dvver.yellow { color:#e0a33e; }
.dvdot { color:#3e4754; }
.dvnone { font-size:13px; line-height:1.3; display:block; }
.dvsub { color:#7d8794; font-size:12.5px; line-height:1.35; margin-top:3px; }
.dvsub .mono { color:#7d8794; }
.dvfacts { color:#8b95a3; font-size:13.5px; line-height:1.45; }
.dvfacts .dvline { margin-top:3px; font-size:13px; }
/* Сетка контуров — под раскрытие: версия у всех одна и названа выше, отличаются имя и число
   ботов. Отставший вынут наружу строкой ниже. */
.dvfold { grid-column:1 / -1; margin-top:4px; color:#8b95a3; font-size:13.5px; }
.dvfold > summary { cursor:pointer; }
.dvwatch { grid-column:1 / -1; margin-top:6px; display:flex; flex-wrap:wrap; gap:6px 16px;
  color:#e0a33e; font-size:13.5px; }
.dvwatch b { color:#f2c14e; }
.dvriver > .dvstep.dvmouth { padding-bottom:13px; }
.dvmouth .dvgrid { margin-top:10px; }
/* Переход между ступенями — тоньше и тише: он служебный, а конкурировал по весу с самими
   этажами. Ритм справа — без рамки-пилюли. */
.dvriver .dvpass { margin:6px 0; padding:5px 0 5px 2px; font-size:13px; }
.dvriver .dvpass i { border:0; padding:0 0 0 4px; color:#6b7480; font-size:12.5px; }
/* Легенда — на одну строку с подвалом раздела по смыслу, поэтому мельче. */
.dvlegend.tight { margin:12px 0 12px 2px; font-size:12px; gap:14px; }

@media (max-width:760px) {
  /* На телефоне колонок нет — строка разворачивается в три яруса, и шапка колонок бессмысленна:
     подписи возвращаются к самим числам, как у одинокого числа и положено. */
  .dvcols { display:none; }
  .dvriver > .dvstep { grid-template-columns:1fr; gap:6px; padding-left:11px; }
  .card.dvcap { flex-wrap:wrap; gap:12px; }
  .dvcapv { text-align:left; }
  .dvnums .dvnum, .dvnums .dvver { font-size:21px; }
  .dvgo b { font-size:16px; }
}

/* Ряд входов в справки под схемой: четыре раскрытия рядом, а не столбиком. Раскрытое занимает
   всю ширину — иначе таблица частей верстается в четверть экрана. */
.dvdeep { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:12px; align-items:flex-start; }
.dvdeep > details { margin:0; }
.dvdeep > details[open] { flex:1 1 100%; }
.dvdeep > details.foot { color:#5f6a78; }
.card.dvcap .dvstat-t b { font-size:17px; font-weight:600; }
.card.dvcap .dvreltx { color:#7d8794; }
@media (max-width:760px) {
  .dvdeep { display:block; }
  .dvdeep > details { margin:7px 0; }
}

/* Подпись пары чисел ступени: на широком экране её несёт шапка колонок, на узком колонок нет —
   и подпись возвращается к самим числам. Иначе на телефоне «1.0 · 864» стоит голым. */
.dvlblm { display:none; }
@media (max-width:760px) {
  .dvlblm { display:block; color:#5f6a78; font-size:11.5px; letter-spacing:.02em; margin-top:1px; }
  .card.dvcap .dvstat:last-child { margin-left:0; }
  .card.dvcap .dvstat { max-width:none; }
}

/* ═══ ПРАВКИ · ПЕРЕСБОРКА ФОРМЫ 23.09.2026 ══════════════════════════════════════════════════
   Тот же разбор, что у ДВИЖКА 22.09, и по тем же трём правилам: однородные записи — таблица, а
   не карточки; цвет — только отклонение; граница — линия, а не коробка. Плюс четвёртое, своё:
   на виду остаются ПОЛЯ, которые считает машина (корзина, состояние), а метки, писанные руками,
   уходят в раскрытие строки — они не поле, а свободный текст. */

/* Воронка корзин — один ярус вместо четырёх плиток. Числа читаются по течению работы: горит у
   человека → на тебе → первый ряд → ждёт пачки. Высота 92 px против 240 px у сетки плиток. */
.card.qqcap { padding:13px 16px; margin-bottom:12px; }
.qqfun { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.qqb { display:inline-flex; align-items:baseline; gap:7px; padding:5px 10px; border-radius:10px;
  color:#8b95a3; font-size:14px; text-decoration:none; line-height:1.2; border:1px solid transparent; }
.qqb b { color:#e8ecf2; font-size:23px; font-weight:600; line-height:1; }
.qqb:hover { background:#1b212a; }
.qqb.on { border-color:#2f3947; background:#1b212a; }
.qqb.red b, .qqb.red { color:#ff8a95; }
.qqb.yellow b, .qqb.yellow { color:#f2c14e; }
.qqarr { color:#3e4754; font-size:16px; }
.qqtot { margin-top:8px; color:#7d8794; font-size:13.5px; }
.qqtot b { color:#e8ecf2; font-size:15px; }

/* Сегменты — лента чипов вместо сетки коробок с описанием в три строки. Смысл сегмента остался
   подсказкой при наведении и раскрытием ниже: его читают один раз, а место он занимал всегда. */
.qqsegs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.qqseg { display:inline-flex; align-items:baseline; gap:6px; padding:4px 10px; border-radius:20px;
  background:#1a1f27; color:#9aa5b3; font-size:13.5px; text-decoration:none; border:1px solid transparent; }
.qqseg b { color:#e8ecf2; font-weight:600; }
.qqseg i { font-style:normal; font-size:12.5px; }
.qqseg:hover { background:#222833; }
.qqseg.on { border-color:#3a4552; background:#222833; }
.qqhint { color:#7d8794; font-size:13px; margin:0 2px 14px; }
.qqhint > summary { cursor:pointer; list-style:none; }
.qqhint > summary::-webkit-details-marker { display:none; }
.qqhint > summary::after { content:' ›'; color:#5f6a78; }
.qqhint[open] > summary::after { content:' ‹'; }
.qqhint > div { margin-top:6px; line-height:1.5; }

/* Шапка колонок — подписи полей один раз на всю доску вместо раза на строку. */
.qqcols { display:grid; grid-template-columns:84px minmax(0,1fr) 164px 124px 78px; gap:14px;
  padding:0 12px 6px; color:#5f6a78; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }

/* Строка — ряд таблицы: ни фона, ни рамки, ни скругления. Остаётся hairline снизу и цветная
   засечка слева у тех строк, где есть отклонение (горит у человека, ждёт владельца). */
.qqriver { border-top:1px solid #1e242e; }
.qqrow { display:grid; grid-template-columns:84px minmax(0,1fr) 164px 124px 78px; gap:14px;
  align-items:start; padding:10px 12px; border-bottom:1px solid #1e242e; }
.qqrow:hover { background:#161a21; }
.qqrow.nocat { box-shadow:inset 3px 0 0 #7a4bd0; }
.qqc { min-width:0; font-size:13px; color:#8b95a3; line-height:1.4; }
.qqid { color:#7fb0ff; font-weight:600; font-size:14px; }
.qqt { min-width:0; }
.qqt > summary { cursor:pointer; list-style:none; display:block; }
.qqt > summary::-webkit-details-marker { display:none; }
.qqtt { color:#e8ecf2; font-size:15px; line-height:1.4; }
.qqtt p, .qqtt b, .qqtt strong { display:inline; font-weight:400; font-size:15px; margin:0; }
.qqt > summary i { font-style:normal; color:#4b5563; margin-left:5px; }
.qqt[open] > summary i { color:#7fb0ff; }
.qqt .qqbody { margin-top:7px; padding-left:2px; color:#8b95a3; font-size:13.5px; line-height:1.5;
  border-left:2px solid #232a34; padding-left:10px; }
.qqt .qqbody > div { margin-top:5px; }
.qqst { display:block; margin-top:2px; font-size:11.5px; letter-spacing:.04em; font-weight:400; text-transform:none; }
.qqst.yellow { color:#e0a33e; }
.qqst.red { color:#ff8a95; }
.qqst.blue { color:#7fb0ff; }
.qqst.mut { color:#7d8794; }
.qqword { display:block; color:#e0a33e; font-size:12px; }
.qqnight { text-align:right; }

/* Заголовок группы — единственное, что отделяет горящее от ждущего пачки. Это подпись ряда, а не
   плитка: строка в одну линию с числом справа от имени. */
.qqgrp { position:sticky; top:0; z-index:2; background:#0f1217; display:flex; align-items:baseline; gap:8px; padding:12px 12px 5px;
  color:#7d8794; font-size:12px; letter-spacing:.11em; text-transform:uppercase; border-bottom:1px solid #1e242e; }
.qqgrp b { color:#9aa5b3; font-weight:600; }
.qqgrp span { color:#5f6a78; }
.qqgrp.hot b { color:#ff8a95; }
.qqgrp.you b { color:#f2c14e; }
.qqtail { padding:12px; text-align:center; color:#7d8794; font-size:13.5px; }
.qqtail .mut { display:block; margin-top:3px; font-size:12.5px; }

@media (max-width:760px) {
  /* На телефоне колонок нет: заявка и тезис идут строкой, служебное — второй тихой строкой под
     ними. Подписи шапки там не на что вешать, поэтому шапка прячется целиком. */
  .qqcols { display:none; }
  .qqrow { grid-template-columns:auto minmax(0,1fr); gap:4px 10px; padding:10px; }
  .qqt { grid-column:2; }
  .qqseg2, .qqfix, .qqnight { grid-column:2; display:inline; font-size:12.5px; text-align:left; }
  .qqseg2::after, .qqfix::after { content:' ·'; color:#3e4754; }
  .qqword { display:inline; margin-left:6px; }
  /* Воронка на телефоне — две колонки: шесть корзин столбиком занимали треть экрана. */
  .qqfun { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }
  .qqb { padding:3px 6px; }
  .qqb b { font-size:20px; }
  /* Лента сегментов на телефоне не переносится, а листается вбок: тринадцать чипов столбиком
     занимали пол-экрана до первой строки очереди. */
  .qqsegs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .qqseg { flex:0 0 auto; font-size:12.5px; }
  .qqtt { font-size:14.5px; }
}

/* ═══ ФИНАНСЫ · ПЕРЕСБОРКА ФОРМЫ 23.09.2026 ═════════════════════════════════════════════════
   Те же три правила, что у ДВИЖКА и ПРАВОК: однородные записи — ряд, а не коробки; цвет —
   только отклонение; граница — линия, а не рамка с фоном. Шесть плиток с подписью в четыре-шесть
   строк занимали 380 px до первого графика и читались как шесть отдельных предметов, хотя это
   один ряд чисел об одном хозяйстве. */
.finnums { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:flex-start;
  padding:14px 16px; background:#161a21; border:1px solid #242a34; border-radius:14px; margin-bottom:20px; }
.finnum { min-width:0; }
.finnum b { display:block; color:#e8ecf2; font-size:22px; font-weight:600; line-height:1.15;
  white-space:nowrap; }
.finnum span { display:block; color:#7d8794; font-size:13px; line-height:1.35; margin-top:2px; }
.finnum.red b { color:#ff8a95; }
/* Пояснение к числу — под знаком вопроса: его читают один раз, а место оно занимало всегда. */
.finwhy { display:inline; margin:0; font-size:13px; }
.finwhy > summary { display:inline; list-style:none; cursor:pointer; color:#5f6a78; padding:0 0 0 5px; }
.finwhy > summary::-webkit-details-marker { display:none; }
.finwhy > div { margin-top:5px; color:#8b95a3; font-size:12.5px; line-height:1.45; }
.finwhy.in { display:block; margin-top:4px; }
.finwhy.in > summary { padding:0; color:#6f7783; }
.finwhy.in > summary::after { content:' ›'; }
.finwhy.in[open] > summary::after { content:' ‹'; }
/* Слепые зоны свёрнуты: наличие видно всегда (счёт в заголовке), текст — по требованию. */
.finblind.fold { padding:12px 15px; }
.finblind.fold > summary { cursor:pointer; list-style:none; color:#c3ccd8; font-size:15px; }
.finblind.fold > summary::-webkit-details-marker { display:none; }
.finblind.fold > summary::after { content:' ›'; color:#5f6a78; }
.finblind.fold[open] > summary::after { content:' ‹'; }
.finblind.fold > summary em { color:#6f7783; font-style:normal; font-size:13px; margin-left:8px; }
@media (max-width:760px) {
  .finnums { gap:10px 18px; padding:12px 13px; }
  .finnum { flex:1 0 42%; }
  .finnum b { font-size:21px; }
}
/* Хвост мелочи в разрезе: свёрнут, но назван числом строк и суммой — это не «спрятано», а
   «сложено». Раскрытие печатает те же строки тем же видом, а не другой формой. */
.fintail { margin-top:2px; }
.fintail > summary { cursor:pointer; list-style:none; color:#6f7783; font-size:13px; padding:7px 0 3px; border-top:1px solid #1e242e; }
.fintail > summary::-webkit-details-marker { display:none; }
.fintail > summary::after { content:' ›'; }
.fintail[open] > summary::after { content:' ‹'; }
/* Дальние окна платежей: свёрнуты за своей же отбивкой. Отбивка остаётся отбивкой — она несёт
   сумму окна и нарастающий итог, — и одновременно служит ручкой раскрытия. */
.finwin > summary { list-style:none; cursor:pointer; }
.finwin > summary::-webkit-details-marker { display:none; }
.finwin > summary .finband::after { content:' ›'; color:#5f6a78; }
.finwin[open] > summary .finband::after { content:' ‹'; }

/* ── ТАБЛИЦА-РЕКА (общий язык экранов) ──────────────────────────────────────────────────────
   Однородные записи — колонки, а не коробки: коробка заставляет читать каждую запись отдельно,
   колонка даёт сравнить все разом, а сравнение и есть вопрос такого списка (слово владельца
   22.09.2026: «выглядит crowded… как правильно бы сделал UX-дизайнер»). Подпись числа живёт в
   ШАПКЕ колонок — один раз вместо раза на запись. Число колонок задаётся `--cols` на .riv. */
.riv { display:block; --cols:minmax(0,1fr) 110px; }
.rhead, .rrow { display:grid; grid-template-columns:var(--cols); gap:14px; align-items:baseline; }
.rhead { color:#6f7783; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  padding:0 0 5px; border-bottom:1px solid #242a34; }
.rrow { padding:8px 0; border-bottom:1px solid #1a1f27; }
.rrow:last-child { border-bottom:0; }
.rrow .nm { font-size:14.5px; line-height:1.3; min-width:0; }
.rrow .nm b { font-weight:600; }
.rrow .sub { display:block; color:#7d8794; font-size:12.5px; line-height:1.35; margin-top:2px; }
.rrow .num, .rhead .num { text-align:right; font-variant-numeric:tabular-nums; }
.rrow .num { font-size:15.5px; color:#e8ecf2; white-space:nowrap; }
.rrow .num.mutn { font-size:13.5px; color:#8b95a3; }
.rrow .num.yellow { color:#e0a33e; } .rrow .num.red { color:#ff8a95; } .rrow .num.gray { color:#7d8794; }
.rrow .num u { text-decoration:none; color:#7d8794; font-size:12.5px; }
/* Точное время под своим числом: одной строкой оно выдавливает колонку за край экрана. */
.rrow .num u.b2 { display:block; line-height:1.25; }
/* Итоговая строка реки — не отдельная карточка, а та же строка потолще. */
.rrow.sumline { border-top:1px solid #242a34; border-bottom:0; }
/* Паспорт источника («откуда числа») читается раз в жизни — под раскрытие, но с экрана не уходит. */
.rpass { margin-top:14px; }
.rpass > summary { cursor:pointer; list-style:none; color:#6f7783; font-size:13px; }
.rpass > summary::-webkit-details-marker { display:none; }
.rpass > summary::after { content:' ›'; }
.rpass[open] > summary::after { content:' ‹'; }
.rpass > div { margin-top:7px; color:#8b95a3; font-size:12.5px; line-height:1.5; }
@media (max-width:760px) {
  /* Колонок нет — подпись возвращается к своему числу: без неё число теряет имя. */
  .rhead { display:none; }
  .rrow { grid-template-columns:1fr; gap:3px; padding:9px 0; }
  .rrow .num, .rrow .num.mutn { text-align:left; font-size:14.5px; }
  .rrow .num::before { content:attr(data-l) ' '; color:#7d8794; font-size:12.5px; }
  /* Колонки тут нет — выдавливать нечего, и точное время возвращается в свою же строку. */
  .rrow .num u.b2 { display:inline; margin-left:6px; }
}
/* Полоса чисел — общий язык: цветным остаётся только отклонение, остальное ровным тоном. */
.finnum.yellow b { color:#e0a33e; }
.finnum.gray b { color:#7d8794; font-size:19px; }
.finnum.wide { flex:1 0 100%; }
/* Плотная панель: однородные записи (умения, комплектации) — строки, а не карточки с воздухом.
   Режется воздух и повтор, а не факты: текст строки тот же, кегль не ниже 13 px (телефон). */
.panel.tight .ev { padding:7px 13px; }
.panel.tight .ev .mut { font-size:13.5px; line-height:1.3; }
.panel.tight summary { padding:0; }
.panel.tight .obody { padding:2px 13px 9px 38px; }
/* Четыре ряда управления списком флота (раздел, теги, ось, поиск) стояли лесенкой в 200 px над
   самим списком — управление занимало больше места, чем первые пять строк ответа. Ряды прижаты
   друг к другу: это по-прежнему четыре строки, но без воздуха между ними. */
.filters.fleet { margin:8px 0 2px; }
.filters.fleet.tags, .filters.fleet.axis { margin-top:4px; }
.filters.fleet.find { margin-top:2px; }
.panel.tree .tr { padding:6px 14px; }
/* Лента на телефоне: колонок нет, и цена с состоянием встают в ОДНУ строку под вопросом —
   иначе каждая запись растёт на две строки и узкий экран становится длиннее прежнего. */
@media (max-width:760px) {
  .wgrp .rrow { display:block; }
  .wgrp .rrow .num, .wgrp .rrow .num.mutn { display:inline; margin-right:9px; }
  .wgrp .rrow .nm { margin-bottom:2px; }
}
.wgrp .rrow .num, .wgrp .rrow .num.mutn { white-space:normal; }

/* ═══ ДВИЖОК · ЭТАЖИ — ПЕРЕСБОРКА ФОРМЫ 23.09.2026 ══════════════════════════════════════════
   Разбор владельца в тот день: он читает сверху вниз, раскрывашки не жмёт, одно число = один
   вопрос, рядом с числом ждёт глагол. Отсюда три правила этой формы:
     — этажи стоят СВЕРХУ ВНИЗ (его слово 23.09 вечером: «Этажи — сделай сверху вниз»); дом
       читается этажами, и код едет по ним тем же порядком, каким читает глаз;
     — разница между этажами живёт НА ПЕРЕХОДЕ, вместе с ходом и часом;
     — цвет — только отклонение: норма набрана серым.
   Сам этаж внутри разложен в две колонки: слева чей он и что это, справа число и возраст.
   Столбец из трёх карточек без этого вырастает вдвое по высоте — вертикаль стоит места, и
   место берётся шириной, а не кеглем. */
/* Шапка держит ОДИН ход владельца и тревогу; пересказа этажей в ней нет (его слово 23.09.2026
   про прежнюю редакцию: «вот это мне не нравится как выглядит»). Ход и его причина стоят в одну
   строку: крупный глагол слева, мелкое «зачем» справа — второй строкой они дали бы ту же
   простыню, только уже. */
.card.dvetans { padding:12px 16px; margin-bottom:12px; }
.dvetask { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.dvetask b { font-size:19px; line-height:1.25; color:#e8edf3; }
.dvetask span { font-size:13.5px; color:#93a3b5; }
.dvetask.ok b { font-size:16px; color:#9fb0c2; }
.dvetalarm { margin-top:9px; font-size:13.5px; line-height:1.45; color:#ef6b6b; }

.dvetrow { display:flex; flex-direction:column; gap:0; margin:6px 0 10px; }
.dvetfl { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:24px;
  background:#12161c; border:1px solid #232a34; border-radius:10px;
  padding:13px 18px; min-width:0; border-left:3px solid var(--c,#232a34); }
.dvetfl.me { border-color:#2f5d7a; border-left-color:var(--c,#f2803c); }
.dvetfl.dim { opacity:.75; }
.dvetfl h4 { margin:0 0 2px; font-size:12px; letter-spacing:.09em; color:#8fa3b8; font-weight:700;
  text-transform:uppercase; grid-column:1; }
.dvetwho { display:block; font-size:17px; color:#e8edf3; font-weight:600; margin:2px 0 3px;
  text-decoration:none; grid-column:1; }
.dvetwho i { font-style:normal; color:#5f6a78; margin-left:5px; }
/* Правая колонка: число этажа и возраст кода. Ряды прибиты к строкам левой колонки — ярлык и имя.
   Рядов ровно два: пояснительной строки под именем больше нет (его слово 23.09 вечером — «в
   этажах я просил убрать лишние комментарии»), и третий ряд оставил бы под числом пустоту. */
.dvetnum { grid-column:2; grid-row:1; display:flex; align-items:baseline; gap:9px;
  justify-content:flex-end; flex-wrap:wrap; text-align:right; }
.dvetnum .v { font-size:30px; font-weight:700; color:#e8edf3; line-height:1; }
.dvetnum .v.old { color:#ffb454; }
.dvetnum .n { font-size:12.5px; color:#8b98a8; }
.dvetage { grid-column:2; grid-row:2; font-size:12.5px; color:#9fb0c2; text-align:right; }
.dvetage b { color:#d7e2ee; font-weight:600; }
.dvetwarn { grid-column:1 / -1; margin-top:9px; font-size:12.5px; line-height:1.45;
  border-top:1px solid #232a34; padding-top:8px; color:#ffb454; }
.dvetwarn.red { color:#ef6b6b; }

/* Переход между этажами — полоса поперёк, а не колонка: стрелка смотрит вниз, туда же, куда
   едет код. Разница числом слева, ход глаголом справа — на одной строке. */
.dvetgap { display:flex; align-items:center; gap:12px; padding:9px 18px; }
.dvetgap .d { font-size:17px; font-weight:700; color:#e8edf3; white-space:nowrap; }
.dvetgap .d.bad { color:#ffb454; }
.dvetgap .t { font-size:12px; color:#8b98a8; line-height:1.35; }
.dvetgap .ar { flex:1 1 auto; height:1px; background:linear-gradient(90deg,#26303c,#46596e);
  position:relative; }
.dvetgap .ar:after { content:'\25BC'; position:absolute; right:-3px; top:-8px; color:#46596e; font-size:12px; }
.dvetgap .go { font-size:12px; color:#cfd8e3; border:1px solid #2c3746; border-radius:6px;
  padding:3px 9px; line-height:1.3; white-space:nowrap; }

.dvetout { display:flex; flex-wrap:wrap; gap:4px 18px; align-items:baseline; font-size:12.5px;
  color:#8b98a8; line-height:1.5; padding:8px 12px; border:1px solid #2c3746; border-radius:8px; }
.dvetout.yellow { border-color:#4a3c1c; color:#d9c89a; }
.dvetout.red { border-color:#5a2a2a; color:#e7b5b5; }
.dvetout > b { color:#f2c14e; }
.dvetout span b { color:#e8edf3; }

.dvetdeeps { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:12px; align-items:flex-start; }
.dvetdeeps > details { margin:0; }
.dvetdeeps > details[open] { flex:1 1 100%; }
.dvetdeep > summary { cursor:pointer; color:#8b95a3; font-size:13px; padding:4px 0; }
.dvetdeep .inner { font-size:12.5px; color:#8b98a8; line-height:1.7; padding:2px 0 8px; }
.dvetdeep .inner b { color:#cfd8e3; }
.dvetlist { margin:4px 0 6px 18px; padding:0; font-size:12.5px; line-height:1.6; }

.dvettbl { width:100%; border-collapse:collapse; font-size:12.5px; color:#8b98a8; margin-top:6px; }
.dvettbl th { text-align:left; font-weight:600; color:#5f6a78; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 10px 4px 0; }
.dvettbl td { padding:4px 10px 4px 0; border-top:1px solid #1d232c; vertical-align:top; }
.dvettbl td b { color:#d7e2ee; font-weight:600; }
.dvettbl td .sub { display:block; color:#5f6a78; font-size:11.5px; }
.dvettbl tr.bad td b { color:#f2c14e; }

/* КТО НА КАКОЙ ВЕРСИИ (23.09.2026). Версия — пара «шкала + номер», поэтому первый столбец набран
   двумя кеглями: число крупно, номер подписью под ним. Ступень — ярлыком, чтобы строка отвечала на
   вопрос «кто это» без чтения имён. */
.vertbl td { padding:7px 10px 7px 0; }
.vertbl .vver b { font-size:17px; color:#e8edf3; }
.vertbl .vver .vnum { display:block; font-size:11px; color:#6f7d8c; margin-top:1px; }
.vertbl .vcntc { white-space:nowrap; }
.vertbl .vst { display:inline-block; font-size:11px; letter-spacing:.05em; color:#cfd8e3;
  border:1px solid #2c3746; border-radius:5px; padding:1px 7px; margin:0 5px 2px 0; }
.vertbl .vwho { line-height:1.6; }
.vertbl .vcnt { color:#6f7d8c; font-size:11px; }
.vertbl .vsep { color:#3a4553; margin:0 6px; }
.vertbl .vnames { margin-top:3px; font-size:11.5px; line-height:1.55; }

.dvetfoot { margin-top:12px; font-size:12px; color:#6f7d8c; line-height:1.65; }
.dvetfoot .yellow { color:#d9a441; }
.dvetfoot a { color:#8fb6d8; }

@media (max-width:760px) {
  .dvetfl { grid-template-columns:minmax(0,1fr); }
  .dvetfl .dvetnum { grid-column:1; grid-row:auto; justify-content:flex-start; text-align:left; margin-top:9px; }
  .dvetfl .dvetage { grid-column:1; grid-row:auto; text-align:left; margin-top:5px; }
  .dvetgap { flex-wrap:wrap; padding:8px 0; }
  .dvetgap .ar { display:none; }
  .dvetask b { font-size:17px; }
  .dvetdeeps { display:block; }
  .dvetdeeps > details { margin:7px 0; }
}

/* ═══ РЕВИЗИЯ СОСТАВА: КЛАСС × ЭТАЖ (23.09.2026) ════════════════════════════════════════════
   Слово владельца: «проведи ревизию — что является инструментом, а что правилом и характером, и
   разложи на правильные полочки по категориям в стройке, выкачено мне и у клиентов».
   Форма — плотная таблица: вопрос тут сравнительный (три этажа рядом), а сравнение в списке не
   читается вовсе. Описание класса стоит В ТОЙ ЖЕ строке мелким, а не под ней: вторая строка на
   каждом из девяти классов стоила бы экрану 200 px ради слов, которые читают один раз.
   Раскрытия по классам идут КОЛОНКАМИ, а не столбиком: девять треугольников в столбик читаются
   как список дел, хотя это входы в справку. */
.revcard { padding:11px 13px; }
.revt { width:100%; border-collapse:collapse; font-size:13px; }
.revt th { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#5f6a78;
  font-weight:600; padding:0 0 5px; text-align:left; }
.revt th.revn { text-align:right; padding-right:2px; }
.revt th.revn.on, .revt td.revn.on { color:#dfe7f0; }
.revt td { padding:3px 0; border-top:1px solid #1b2028; vertical-align:baseline; line-height:1.4; }
.revt td.revc b { color:#d7e2ee; font-weight:600; margin-right:7px; }
.revt td.revc .mut { font-size:11.5px; color:#6f7d8c; }
.revt td.revn { width:104px; text-align:right; padding-right:2px; color:#9fb0c2;
  font-variant-numeric:tabular-nums; }
.revnote { margin-top:9px; font-size:12px; color:#7a8796; line-height:1.55; }
.revnote b { color:#cfd8e3; }
.revlists { margin-top:10px; columns:330px; column-gap:22px; }
.revd { break-inside:avoid; margin-bottom:3px; }
.revd > summary { cursor:pointer; font-size:12.5px; color:#8b98a8; padding:2px 0; }
.revd > summary b { color:#cfd8e3; font-weight:600; }
.revd > summary .mut { font-size:11.5px; }
.revd .ucnt { font-size:11.5px; padding:0 6px; }
.revpart { margin:4px 0 7px 12px; }
.revpart .k { font-size:11px; color:#5f6a78; letter-spacing:.04em; text-transform:uppercase; }
.revfiles { font-size:11px; color:#6f7d8c; line-height:1.55; margin-top:2px; }

@media (max-width:760px) {
  .revt td.revn, .revt th.revn { width:62px; }
  .revt td.revc .mut { display:none; }
  .revlists { columns:1; }
}

/* ── ДВИЖОК · КТО НА ЧЁМ. Список бортов ступени: группа-контур, её версия и имена бортов внутри.
   Имена идут плиткой, а не строкой через запятую: пятьдесят имён Release в строку читаются как
   абзац, а глазами ищут одно конкретное имя. */
.ktogrp { padding:9px 0; border-bottom:1px solid #222a33; }
.ktogrp:last-child { border-bottom:0; padding-bottom:2px; }
.ktogrp:first-child { padding-top:2px; }
.ktogh b { color:#e8edf3; font-size:13.5px; }
.ktogh .mut { font-size:11.5px; margin-left:8px; }
.ktogs { font-size:11.5px; margin-top:2px; }
.ktonames { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px 6px; }
.ktonames span { font-size:11.5px; color:#9fb0c2; background:#1a212a; border:1px solid #242d38;
  border-radius:5px; padding:2px 7px; }
.ktonames span.red { color:#ff8b8b; border-color:#4a2a2a; background:#241a1a; }

/* ── ДВИЖОК · ЦИКЛ СТУПЕНЕЙ ТАБЛИЦЕЙ С РАСКРЫТИЕМ (слово владельца 23.09.2026 вечером).
   Закрытая строка отвечает числами — правки, номер, разница, борта; раскрытая показывает живые
   борта: чей флот, ник агента в Telegram и его имя. Колонки закрытой строки и шапки заданы ОДНОЙ
   сеткой (`--dvs`): две сетки на одну таблицу разъезжаются молча при первой же правке. */
:root { --dvs: minmax(132px,1.05fr) 62px 112px 122px minmax(136px,1.15fr) minmax(100px,.78fr); }
.dvstages { margin:6px 0 10px; border:1px solid #232a34; border-radius:10px; overflow:hidden;
  background:#12161c; }
.dvsthead, .dvstage > summary { display:grid; grid-template-columns:var(--dvs); gap:14px;
  align-items:center; padding:9px 16px 9px 15px; }
.dvsthead { font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:#6f7d8c;
  background:#0f1319; border-bottom:1px solid #232a34; }
.dvstage { border-bottom:1px solid #1d242d; border-left:3px solid var(--c,#2a323c); }
.dvstage:last-child { border-bottom:0; }
.dvstage.dim { opacity:.72; }
.dvstage > summary { cursor:pointer; list-style:none; font-size:13.5px; color:#cfdae6; }
.dvstage > summary::-webkit-details-marker { display:none; }
.dvstage > summary:hover { background:#161c24; }
.dvstage[open] > summary { background:#161c24; border-bottom:1px solid #1d242d; }
.dvstage .c1 { display:flex; flex-direction:column; gap:1px; min-width:0; }
.dvstage .c1 b { font-size:14.5px; color:#e8edf3; }
.dvstage .c1 b::before { content:'▸'; color:#5f6a78; font-size:10px; margin-right:7px;
  display:inline-block; transition:transform .12s; }
.dvstage[open] .c1 b::before { transform:rotate(90deg); }
.dvstage .c1 i { font-style:normal; font-size:11.5px; color:#8b98a8; padding-left:17px; }
.dvstage .c2 { font-size:21px; font-weight:700; color:#e8edf3; }
/* Отставшая ступень красится ЧИСЛОМ, а не всей строкой: цвет тут отвечает «этот код старее
   предыдущей ступени», и красить им имя или борта значило бы говорить о них. */
.dvstage .c2.old { color:#ffb454; }
.dvstage .c3 b { font-size:13.5px; color:#d7e2ee; font-weight:600; }
.dvstage .c3 i, .dvstage .c4 i, .dvstage .c5 i, .dvstage .c6 i { display:block; font-style:normal; font-size:11px;
  color:#6f7d8c; margin-top:1px; }
/* Люди под бортами (24.09.2026). Борт остаётся крупным числом, владельцы стоят под ним второй
   строкой: два числа одной величины читались бы как одно составное. Цвет чуть светлее соседних
   подписей — это не пояснение к числу, а второе число. */
.dvstage .c6 i { color:#8b98a8; }
/* Час выкатки — моноширинный: столбец дат читается сверху вниз только при одинаковой ширине
   цифры, иначе «23.09, 09:04» и «22.09, 15:07» не сравниваются глазом. */
.dvstage .c4 b { font-size:12.5px; color:#d7e2ee; font-weight:600; letter-spacing:-.01em; }
.dvstage .c5 { font-size:12.5px; color:#9fb0c2; }
.dvstage .c6 { font-size:12.5px; color:#9fb0c2; }
.dvstage .c6 b { color:#e8edf3; font-size:15px; }
.dvstbody { padding:4px 16px 12px 15px; background:#0f1319; }
.dvswarn { font-size:12.5px; line-height:1.45; color:#ffb454; padding:7px 0 2px; }
.dvsnote { font-size:12.5px; line-height:1.45; color:#9fb0c2; padding:7px 0 2px; }
.dvsgrp { padding:9px 0; border-bottom:1px solid #1b222a; }
.dvsgrp:last-child { border-bottom:0; padding-bottom:2px; }
.dvsgh b { color:#e8edf3; font-size:13px; }
.dvsgh .mut { font-size:11.5px; margin-left:8px; }
/* Борт — строка в ЧЕТЫРЕ колонки, ровно как назвал владелец: имя бота, описание, юзернейм, час
   выкатки. Колонки, а не плитка: владелец читает их сверху вниз одним столбцом, а ник ищет
   глазами по левому краю своей колонки. Имени сервиса в строке нет — оно в карточке борта. */
.dvsbots { margin-top:6px; }
.dvsbot { display:grid;
  grid-template-columns:minmax(120px,.95fr) minmax(150px,1.1fr) minmax(150px,.8fr) 122px;
  gap:10px; padding:3px 0; font-size:12.5px; align-items:baseline; }
.dvsbot .n { color:#d7e2ee; }
.dvsbot .d { color:#9fb0c2; font-size:12px; }
.dvsbot .u { color:#79c0ff; font-size:12px; }
/* Час выкатки КАЖДОГО борта: на общей ветке соседние заказчики поднимаются в разные часы, и один
   час на группу приписал бы чужую свежую выкатку тому, кто стоит на старом коде. */
.dvsbot .t { color:#9fb0c2; font-size:11.5px; }
.dvsbot.red .n { color:#ff8b8b; }
/* Шапка столбцов внутри группы: тише строк, но читается как заголовок. */
.dvsbh, .dvsbh span { color:#6b7684 !important; font-size:11px; }
.dvsbh { border-bottom:1px solid #1b222a; padding-bottom:4px; margin-bottom:3px; }

@media (max-width:760px) {
  :root { --dvs: minmax(0,1fr) 58px 92px; }
  .dvsthead .c4, .dvsthead .c5, .dvsthead .c6, .dvstage .c5 { display:none; }
  .dvstage .c4 { grid-column:1 / -1; }
  .dvstage .c4 i { display:inline; margin-left:6px; }
  .dvstage .c6 { grid-column:1 / -1; }
  .dvsbot { grid-template-columns:minmax(0,1fr); gap:0; padding:5px 0; }
}

/* ── ЗАДАЧИ — доска владельца (06.10.2026). Слева сферы и проекты, сверху горизонты. Пока
   делается компьютерная версия (слово Вячеслава 06.10: «телефон мне не надо»); на узком экране
   колонка просто встаёт над списком, отдельной телефонной раскладки нет. */
.zd { display:grid; grid-template-columns:250px minmax(0,1fr); gap:22px; align-items:start; }
.zd-left { display:flex; flex-direction:column; gap:2px; position:sticky; top:12px; }
.zd-left a { display:flex; justify-content:space-between; gap:8px; padding:7px 10px; border-radius:9px; color:#c9d0d9; text-decoration:none; font-size:15px; }
.zd-left a:hover { background:#1b2029; }
.zd-left a.on { background:#1f2733; color:#fff; }
.zd-left a b { color:#7d8796; font-weight:normal; }
.zd-sf { margin-top:6px; font-weight:600; }
.zd-sf.all { margin-top:0; }
.zd-sf.none span { color:#c9a54e; }
.zd-grp { margin-top:6px; }
.zd-grp > summary { list-style:none; display:flex; align-items:stretch; cursor:pointer; }
.zd-grp > summary::-webkit-details-marker { display:none; }
.zd-grp.solo { display:flex; align-items:stretch; }
.zd-grp .zd-sf { flex:1; min-width:0; margin-top:0; padding-left:4px; }
.zd-grp .zd-sf span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zd-left a b { white-space:nowrap; }
.zd-car { flex:0 0 16px; display:flex; align-items:center; justify-content:center; color:#5f6875; font-style:normal; font-size:9px; border-radius:6px; }
.zd-grp > summary .zd-car { margin-bottom:2px; }
.zd-grp > summary .zd-car::before { content:'▶'; transition:transform .12s; }
.zd-grp[open] > summary .zd-car::before { transform:rotate(90deg); }
.zd-grp > summary .zd-car:hover { color:#c9d0d9; background:#1b2029; }
.zd-pr { padding-left:30px !important; font-size:14px !important; color:#9aa5b3 !important; }
.zd-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.zd-head h2 { font-size:22px; color:#e8eaed; font-weight:600; }
.zd-hand { display:flex; background:#161a21; border:1px solid #242a34; border-radius:10px; overflow:hidden; }
.zd-hand a { padding:6px 14px; color:#9aa5b3; text-decoration:none; font-size:14px; }
.zd-hand a.on { background:#2a3442; color:#fff; }
.zd-tabs { display:flex; gap:4px; border-bottom:1px solid #242a34; margin-bottom:12px; }
.zd-tab { padding:8px 14px; color:#9aa5b3; text-decoration:none; font-size:15px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.zd-tab span { margin-left:7px; color:#5f6875; font-size:13px; }
.zd-tab.on { color:#fff; border-bottom-color:#7fb0ff; }
.zd-tab.on span { color:#9aa5b3; }
.zd-note { background:#1d1a10; border:1px solid #3a3115; color:#d9c48a; border-radius:10px; padding:9px 13px; font-size:14px; line-height:1.45; margin-bottom:10px; }
.zd-inbox { display:block; background:#332a12; color:#f2c14e; border-radius:10px; padding:9px 13px; font-size:15px; text-decoration:none; margin-bottom:10px; }
.zd-list { display:flex; flex-direction:column; gap:6px; }
.zd-card { background:#161a21; border:1px solid #242a34; border-radius:11px; }
.zd-card.late { border-color:#5a2a33; }
.zd-card summary { list-style:none; cursor:pointer; padding:10px 14px; }
.zd-card summary::-webkit-details-marker { display:none; }
.zd-t { color:#e8eaed; font-size:15.5px; line-height:1.35; }
.zd-st { color:#8b95a3; font-size:13.5px; margin-top:3px; line-height:1.35; }
.zd-m { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.zd-m .tag { font-size:12.5px; padding:1px 8px; }
.zd-nosf { color:#c9a54e !important; }
.zd-full { padding:2px 14px 12px; color:#b4bcc7; font-size:14px; line-height:1.5; white-space:pre-wrap; border-top:1px solid #1f242d; padding-top:9px; }
.zd-src { color:#5f6875; font-size:12.5px; margin-top:6px; }
.zd-empty { color:#8b95a3; padding:20px 4px; }
@media (max-width:760px) { .zd { grid-template-columns:1fr; } .zd-left { position:static; } }
/* Запись доски (06.10.2026): кнопки в раскрытии карточки и строка «+ дело». Появляются только когда
   запись подключена; до того экран только читает. */
.zd-note.red { background:#2a1418; border-color:#5a2a33; color:#f0a3ad; }
.zd-note.green { background:#122219; border-color:#25432f; color:#9fd8b0; }
.zd-act { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; white-space:normal; }
.zd-act form, .zd-new { display:flex; gap:6px; align-items:center; }
.zd-new { margin-bottom:10px; flex-wrap:wrap; }
.zd-new { flex-wrap:wrap; }
.zd-new > * { flex:0 0 auto; margin-top:0; }
.zd-new input[name="текст"] { flex:1 1 100%; min-width:0; width:auto; font-size:15px; padding:8px 10px; }
.zd-new select, .zd-new input[name="проект"] { width:150px; }
.zd-new input[name="рука"] { width:90px; }
.zd-act input, .zd-new input, .zd-new select { background:#0f1217; border:1px solid #2a313c; color:#e8eaed; border-radius:8px; padding:5px 8px; font-size:14px; }
.zd-act button, .zd-new button { background:#243246; border:1px solid #33465f; color:#e8eaed; border-radius:8px; padding:5px 12px; font-size:14px; cursor:pointer; }
.zd-act button:hover, .zd-new button:hover { background:#2d3f58; }