@import url("./field-dialog.css?v=8c8b3f1411a9");
@import url("./contact-grid.css?v=1f2a27f4a9cd");
@import url("./lead-card.css?v=a52afde8b4d4");
@import url("./operator-leads.css?v=20261029t");
@import url("./operator-tasks.css?v=4c1bde956d89");
@import url("./my-schedule.css?v=b1938b848e91");
@import url("./my-account.css?v=c3b30032b998");
@import url("./my-salary.css?v=70f3d4722fbd");
/* Стили компьютерной версии. Вынесены из index.html 17.10.2026 без изменений, на то же
   место по порядку (после заставки, до seller.css), поэтому порядок правил прежний. */
@import url("./select.css?v=9de5ea954082");
@import url("./search.css?v=d1ac76270474");@import url("./booking-card.css?v=20261029a");@import url("./booking-journal.css?v=20261029a");@import url("./student-card.css?v=20261029a");@import url("./staff-calendar.css?v=20261029a");@import url("./dist-board.css?v=20261029a");@import url("./lead-card-swap.css?v=20261029d");
 :root{
 /* Базовые токены. Значения задаются ЗДЕСЬ и нигде больше — массовая замена цветов на
    var(...) 25.08 задела и сами определения, получилась рекурсия --tx:var(--tx), и в
    базовой теме переменные переставали существовать. Значения ниже совпадают с палитрой
    из docs/DESIGN_SYSTEM.md и проверены на контраст (WCAG AA, 4.5:1 на мелком тексте). */
 /* ЕДИНАЯ ГАММА САЙТА И ТЕЛЕФОНА — Radix Colors, семейство indigo (Рустам 12.09.2026:
    «чтобы и на сайт, и на desktop, и на мобилку — всё едино»). Коды берутся ТОЛЬКО из
    Radix, на глаз ничего не подбирается: там просчитаны и сам цвет, и бледная подложка,
    и текст на нём. Правила — docs/DESIGN_SYSTEM.md, раздел «Откуда берутся цвета». */
 --bg:#ffffff; --card:#ffffff; --card2:#f0f0f3; --line:#e8e8ec;
 --on-acc:#ffffff; --tx:#1c2024; --mut:#60646c; --mut2:#8b8d98;
 --grn:#208368; --yel:#ab6400; --red:#d13415; --blu:#3e63dd; --acc:#3e63dd; --acc-deep:#3358d4; --acc-press:#1f2d5c; --line-2:#d9d9e0;
 --acc-soft:#edf2fe; --blu-soft:#edf2fe; --yel-soft:#fefbe9; --red-soft:#feebe7; --grn-soft:#e6f7ed;
 /* Стекло нижней панели: полупрозрачная карточка под backdrop-filter. Отдельный токен,
    а не литерал в правиле — палитра правится в одном месте (docs/DESIGN_AUDIT.md). */
 --glass:rgba(255,255,255,.78);
 --sh:none;
 --shf:0 6px 28px rgba(16,24,40,.10);
 /* UI-kit токены (правим тут → меняется на всём сайте) */
 --card-radius:8px; --card-pad:14px 16px;
 --card-sh:none; --card-sh-hover:none;
 --line2:#d9d9e0;
 }
 *{box-sizing:border-box}
 /* ── ШРИФТ. Раньше стоял системный: на маке SF Pro, на Windows Segoe UI, на Android
    Roboto — один и тот же экран выглядел у сотрудников по-разному, а веса и ширины букв
    у этих гарнитур не совпадают. Inter лежит у нас на сервере (/static/fonts), сторонних
    запросов нет, работает одинаково везде. Именно Inter указан как замена и в разборе
    Stripe, и у Apple, и у Airbnb, и у BMW. */
 body{margin:0;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
 font:15px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 font-feature-settings:"cv05","ss03";letter-spacing:-.006em}
 input,select,textarea,button{font-family:inherit}
 header{padding:0 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;background:var(--card);position:sticky;top:0;z-index:100; height:52px; min-height:52px; box-shadow:none;}
 .menutgl{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--tx);align-items:center}
 .hdrlogo{height:24px;width:auto;display:block;cursor:pointer}
 header h1{font-size:16px;margin:0;font-weight:500;letter-spacing:-.006em} header .sub{color:var(--mut);font-size:13.5px}
/* ═══ Attio: общий вид основной CRM по прямому поручению28.10.2026. ═══
   Существующая отметка body.stripe включается после загрузки профиля у всех ролей. Правила работают через ПЕРЕМЕННЫЕ: перекрашиваем токены, а не
   отдельные экраны — иначе половина панели останется в старом виде.
   Источник значений — DESIGN Stripe.md: индиго только для действий, глубокий сине-чёрный
   вместо чёрного текста, холодный фон, волосяные границы, лёгкий шрифт с отрицательным
   трекингом, кнопки-пилюли, табличные цифры. */
body.stripe{
  font-feature-settings:"ss01";
  letter-spacing:-.01em;  --sidebar-bg:#fcfcfd; --desktop-sidebar:220px;
}
/* Тонкий вес — подпись бренда. Заголовкам дополнительно отрицательный трекинг: чем крупнее,
   тем плотнее, как в исходной системе (-1.4px на 56px → -0.2px на 20px). */
html:not(.dc-hand) body.stripe{font-size:13px;line-height:1.45;font-weight:400}
body.stripe h1,body.stripe h2,body.stripe h3{font-weight:600;letter-spacing:-.035em}
body.stripe .oday .v{font-weight:400;letter-spacing:-.025em}
body.stripe .oday .k{color:var(--mut);font-weight:400}
/* Цифры денег и счётчиков — табличные: это «тихий финансовый сигнал» бренда. */
body.stripe .oday .v,body.stripe td,body.stripe .num,body.stripe .mono{font-feature-settings:"tnum"}
/* Кнопки-пилюли, индиго только у главного действия. */
body.stripe .act{background:var(--acc);border-radius:6px;padding:6px 10px;font-weight:500; min-height:32px; font-size:12px; line-height:18px; border:1px solid var(--line2);}
body.stripe .act:hover{background:var(--acc-deep)}
body.stripe .act:active{background:var(--acc)}
/* Канон кнопок ПК; мобильная оболочка задаёт собственные размеры и роли. */
body.stripe:not(.m-shell) .act{background:var(--acc-soft);color:var(--acc)}
body.stripe:not(.m-shell) .act:hover,body.stripe:not(.m-shell) .act:active{background:var(--card2);filter:none}
body.stripe .tb{border-radius:6px;padding:6px 10px;border:1px solid var(--line2);
                color:var(--tx);background:var(--card);font-weight:500; min-height:32px; font-size:12px; line-height:18px; box-shadow:none;}
body.stripe .tb:hover{border-color:var(--acc)}
body.stripe .pill,body.stripe .dc-tag{border-radius:5px}
/* Карточки: тонкая граница вместо тени, мягкий подъём при наведении. */
body.stripe .dc-card,body.stripe .oday>div,body.stripe .otile{
  border:1px solid var(--line);box-shadow:none; border-radius:8px;}
body.stripe .dc-click:hover,body.stripe .oday>div.dc-click:hover{
  box-shadow:none;transform:none}
/* Поля ввода — прохладная граница и мягкий радиус, фокус индиго. */
body.stripe .fld{border-radius:6px;border:1px solid var(--line2);background:var(--card); min-height:34px; padding:7px 10px; font-size:13px; line-height:18px; color:var(--tx); box-shadow:none;}
/* Кольцо фокуса вместо жёсткой рамки — у Stripe поле «поднимается», а не обводится. */
/* Кольцо фокуса. Ночная правка теней приняла его за тень карточки и заменила на
   обычную — поле переставало отзываться на фокус. Кольцо это не глубина, а состояние. */
body.stripe .fld:focus{border-color:var(--acc);outline:none;box-shadow:none}
/* ── КАРТОЧКА КАНДИДАТА: воздух вместо подчёркиваний. Значения полей были подчёркнуты
   пунктиром и набраны полужирным, у каждой строки торчали скрепка и крестик — рябило.
   Копирование по клику осталось: строка подсвечивается при наведении, этого довольно. */
body.stripe .ohc-r{padding:9px 0;gap:10px}
body.stripe .ohc-l{color:var(--mut2);font-size:12.5px;width:118px}
body.stripe .ohc-v{color:var(--tx);font-weight:400}
body.stripe .ohc-v.ohc-copy{text-decoration:none}
body.stripe .ohc-r:hover .ohc-v.ohc-copy{color:var(--acc-deep)}
/* Кнопки правки и удаления проявляются на наведении, а не висят в каждой строке. */
body.stripe .ohc-e{opacity:0;transition:opacity .12s}
body.stripe .ohc-r:hover .ohc-e,body.stripe .ohc-e:focus{opacity:1}
/* На телефоне наведения нет — кнопки «изменить»/«удалить» оставались прозрачными и
   выглядели белыми, то есть отсутствующими (Ника 26.08). Там показываем их всегда. */
@media (hover:none){ body.stripe .ohc-e{opacity:1} }
/* Кнопки связи — ровный ряд тихих пилюль, без разноцветных заливок. */
body.stripe .qa{border-radius:9999px;background:var(--card);border:1px solid var(--line);
  color:var(--tx);font-weight:400;padding:8px 15px}
body.stripe .qa:hover{border-color:var(--acc);color:var(--acc)}
body.stripe .kbspec{border-radius:9999px;font-weight:500}
/* ── ОДИН ВИД КНОПОК В КАРТОЧКЕ. Их рисовали три разных класса: .ohm (связь), .ohst
   (этапы воронки), .tb (действия по задаче) — у каждого свой радиус, вес и заливка,
   плюс отдельные цвета у «Объединить» и «Не реализовано». Получался набор случайных
   плашек. Теперь форма, высота и вес общие; цветом отличается только выбранное и
   опасное действие. */
body.stripe .ohm:not(.ohm-book),body.stripe .ohst,body.stripe .bkside .tb,body.stripe .ohacts a{
  font-size:13.5px;font-weight:400;padding:8px 15px;border-radius:9999px;
  border:1px solid var(--line);background:var(--card);color:var(--tx);line-height:1.2}
body.stripe .ohm:not(.ohm-book):hover,body.stripe .ohst:hover,body.stripe .bkside .tb:hover{
  border-color:var(--acc);color:var(--acc);background:var(--card)}
body.stripe .ohm.on,body.stripe .ohst.on{background:var(--acc-soft);border-color:transparent;
  color:var(--acc-deep);font-weight:500}
/* Действие, которое закрывает путь кандидата, остаётся красным — но той же формы. */
body.stripe .ohst[data-k="refused"],body.stripe .ohst.danger{color:var(--red)}
body.stripe .ohst[data-k="refused"]:hover{border-color:var(--red);color:var(--red)}
/* Главная кнопка карточки — единственная заливка на экране. */
body.stripe .bkside .act,body.stripe .ohm-book{border-radius:9999px;font-weight:500;
  padding:12px 20px;background:var(--acc);color:var(--on-acc);border:none}
body.stripe .ohm-book:hover{background:var(--acc-deep);color:var(--on-acc);filter:none}
/* Канал без подключения — та же пилюля, но тише: видно, что кнопка есть, а связи нет. */
body.stripe .ohm:not(.on):not(.ohm-book){color:var(--mut2)}
/* Подписи блоков («ЭТАП ВОРОНКИ», «ТЕГИ») — тише и с воздухом. */
body.stripe .ohc-cap{font-size:10.5px;color:var(--mut2);letter-spacing:.06em;margin-bottom:8px}
body.stripe .ohstages{gap:7px}
/* ── БОКОВОЕ МЕНЮ в том же стиле, что и лента. Разница между кабинетами только в том,
   где меню стоит; оформление одно (Рустам 25.08). Было: крупные полужирные пункты,
   активный с плотной заливкой и толстой полосой слева — из общего вида выбивалось. */
/* ⛔ РАЗДЕЛ VPN — ПО КАНОНУ (Рустам 21.09.2026, увидел экран у себя: «как это в наш
   стиль вписывается?»). Было: QR во всю ширину экрана и залитые синие/красные кнопки —
   это стиль ds.css, а канон 12.09 требует воздушные кнопки и спокойный экран.
   Ширина раздела ограничена: на большом мониторе карточка не растягивается на метр. */
/* Область VPN: независимая сетка, перенос текста вместо обрезания кнопок. */
.vpnscr{width:100%;max-width:1040px;min-width:0}
.vpn-intro{margin:8px 0 24px;line-height:1.5}
.vpn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px;align-items:start}
.vpnscr .vpn-panel{min-width:0;margin:0;padding:24px;box-sizing:border-box}
.vpnscr .vpn-heading{font-size:20px;font-weight:600;color:var(--tx);margin:0 0 12px;text-transform:none;letter-spacing:normal;line-height:1.4}
.vpn-status{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.vpn-upd{font-size:13px}
.vpn-shot{display:block;width:100%;max-width:300px;height:auto;border-radius:14px;margin-top:10px;box-shadow:0 0 0 1px var(--line)}
.vpn-all{margin-top:16px}
.vpn-all-row{display:grid;grid-template-columns:1fr auto auto;gap:8px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.vpn-all-who{min-width:0}.vpn-all-who b{display:block;font-weight:600;overflow-wrap:anywhere}.vpn-all-who span{display:block;font-size:13px}
.vpnscr .vpn-all-act{width:auto;min-height:36px;padding:6px 12px}
@media (max-width:640px){.vpn-all-row{grid-template-columns:1fr auto}.vpn-all-row .ui-badge{grid-column:1/-1;justify-self:start;grid-row:2}}
.vpn-howto{display:block;width:100%;max-width:240px;height:auto;aspect-ratio:540/1174;border-radius:18px;margin-top:12px;background:var(--line)}
.vpn-hico{width:20px;height:20px;border-radius:5px;margin-right:8px;box-shadow:0 0 0 1px rgba(62,99,221,.18)}
.vpn-appr{display:flex;align-items:center;gap:12px;margin-top:10px}
.vpn-appr img{width:40px;height:40px;border-radius:9px;box-shadow:0 0 0 1px var(--line);flex:0 0 auto}
.vpn-appr b{display:block;font-weight:600}.vpn-appr span{display:block;font-size:13px}
.vpn-link{color:var(--acc);font-weight:500;text-decoration:none}
.vpn-more{margin-top:6px}.vpn-more summary{cursor:pointer;list-style:none;min-height:36px;display:flex;align-items:center}
.vpn-more summary::-webkit-details-marker{display:none}
.vpnscr .ui-badge{max-width:100%;height:auto;min-height:24px;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;line-height:1.4;text-transform:none;letter-spacing:normal}
.vpnscr .vpnqr{width:100%;max-width:240px;margin:16px auto}
.vpnscr .vpnqr svg{max-width:100%;width:100%;height:auto;display:block}
.vpn-note{font-size:14px;line-height:1.5;margin:12px 0 16px;overflow-wrap:anywhere}
.vpn-actions{display:grid;gap:8px}
.vpnscr .vpn-b{width:100%;min-width:0;max-width:100%;min-height:44px;height:auto;box-sizing:border-box;padding:12px 16px;display:flex;justify-content:center;align-items:center;
  background:var(--card);color:var(--tx);border:1px solid var(--line);font-family:inherit;font-size:14px;font-weight:500;line-height:1.4;white-space:normal;overflow-wrap:anywhere;text-align:center;text-decoration:none}
.vpnscr .vpn-b:hover{border-color:var(--acc);color:var(--acc)}
.vpnscr .vpn-b-acc{background:var(--acc-soft);color:var(--acc);border-color:transparent}
.vpnscr .vpn-b-red{background:var(--red-soft);color:var(--red);border-color:transparent}
.vpnscr .vpn-b-red:hover{color:var(--red)}
.vpnscr .vpntabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0}
.vpnscr .vpn-tab{width:auto;padding:12px 4px}
.vpnscr .vpn-tab.on{background:var(--acc-soft);color:var(--acc);border-color:transparent}
.vpn-step{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;margin-bottom:16px;line-height:1.5;overflow-wrap:anywhere}
.vpn-step-number{color:var(--mut);font-weight:600}
.vpn-download{margin-bottom:16px}
html:not(.dc-hand) body.stripe:not(.topnav) #side{position:sticky;top:52px;height:calc(100dvh - 52px);overflow-y:auto;align-self:flex-start;scrollbar-width:thin}
body.stripe #side{background:var(--sidebar-bg);border-right:1px solid var(--line);padding:12px 8px; width:var(--desktop-sidebar); min-width:var(--desktop-sidebar);}
/* Размер и цвет ровно те же, что у пунктов верхней ленты (14px / 400 / #64748d) —
   иначе кабинеты выглядят набранными разными шрифтами. */
body.stripe .sideitem{font-size:12px;font-weight:400;color:var(--mut);padding:6px 10px;
  border-radius:5px;margin:1px 0;box-shadow:none;letter-spacing:-.006em; min-height:30px; line-height:18px; border:0;}
body.stripe .sideitem:hover{background:var(--card2);color:var(--tx)}
body.stripe .sideitem.on{background:var(--card2);color:var(--tx);font-weight:500;box-shadow:none}
body.stripe .sidesec{font-size:10.5px;font-weight:500;color:var(--mut2);letter-spacing:.06em;
  padding:14px 11px 5px}
/* Счётчики задач и сообщений — тихая пилюля, а не крупный ярлык. */
body.stripe #side .dc-count{font-size:11px;font-weight:500;border-radius:9999px;
  padding:1px 7px;min-width:0}
/* Переключатель «Мой стол ↔ Управление» — сегмент, как и в ленте. */
body.stripe .opmodebox{padding:0 4px 12px!important;gap:0!important}
body.stripe .opmodebox .opmode{border-radius:0!important;font-weight:400!important;
  font-size:13.5px!important;padding:7px 12px!important;border:1px solid var(--line)!important}
body.stripe .opmodebox .opmode:first-child{border-radius:9999px 0 0 9999px!important}
body.stripe .opmodebox .opmode:last-child{border-radius:0 9999px 9999px 0!important;
  border-left:none!important}

/* ── КЛАВИАТУРА. Видимого фокуса в системе не было вовсе: человек, идущий по Tab (или
   работающий без мыши), не видел, где находится. Кольцо появляется только при управлении
   с клавиатуры — мышью его не видно, вид не меняется. */
body.stripe :focus-visible{outline:2px solid #3e63dd;outline-offset:2px}
/* У полей ввода фокус показывает сама рамка поля (2px акцентом). Системное кольцо
   поверх неё давало ВТОРУЮ обводку с отступом 2px — на телефоне поле выглядело
   как две рамки (Рустам 14.09.2026). Текстовые поля по стандарту :focus-visible
   срабатывают и от пальца, не только от клавиатуры, поэтому снимаем их все. */
body.stripe .fld:focus-visible,
body.stripe input:focus-visible,
body.stripe textarea:focus-visible,
body.stripe select:focus-visible,
body.stripe [contenteditable]:focus-visible{outline:none}
/* ── ДВИЖЕНИЕ. Если человек попросил систему уменьшить анимацию, подъём карточек и
   раскрытие панелей происходят мгновенно. */
@media (prefers-reduced-motion: reduce){
  body.stripe *,body.stripe *::before,body.stripe *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important}
  body.stripe .dc-click:hover{transform:none}
}
/* ── ПОЛЯ ВВОДА: три класса-синонима. .fld основной, .wzinp в мастере продажи,
   .gcinp в карточке записи — отличались фоном, радиусом и отсутствием кольца. */
body.stripe .wzinp,body.stripe .gcinp{
  background:var(--card);border:1px solid var(--mut2);border-radius:6px;padding:11px 13px;
  font-size:14px;color:var(--tx)}
body.stripe .wzinp:focus,body.stripe .gcinp:focus{
  border-color:var(--acc);outline:none;box-shadow:0 0 0 3px rgba(83,58,253,.14)}
/* ── КНОПКИ: .mbtn (окна) и .bknav (стрелки журнала) остались от прежней системы. */
body.stripe .mbtn{border-radius:9999px;padding:9px 17px;font-weight:400;font-size:14px}
body.stripe .bknav{border:1px solid var(--line);background:var(--card);border-radius:9999px;
  width:36px;height:36px;font-size:18px;color:var(--tx)}
body.stripe .bknav:hover{border-color:var(--acc);color:var(--acc)}
body.stripe select.fld,body.stripe textarea.fld{border-radius:6px}
body.stripe .segbtn{border-radius:9999px;background:var(--card);font-weight:400;color:var(--tx)}
body.stripe .segbtn:hover{border-color:var(--acc);color:var(--acc)}
body.stripe .segbtn.on,body.stripe .tb.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-deep)}

/* ── ТАБЛИЦЫ. У Stripe шапка не кричит капсом: мелкая, серая, обычным регистром;
   строки разделены волосяной линией, при наведении подсвечиваются целиком. */
body.stripe table{border-radius:12px;box-shadow:0 1px 3px rgba(0,55,112,.08);
  border:1px solid var(--line);font-size:13.5px}
body.stripe th{background:var(--sidebar-bg);color:var(--mut);font-size:12px;font-weight:500;
  text-transform:none;letter-spacing:0;padding:10px 12px;border-bottom:1px solid var(--line)}
body.stripe td{padding:11px 12px;color:var(--tx)}
body.stripe tbody tr:hover td,body.stripe tr:hover td{background:var(--card2)}

/* ── КАРТОЧКИ И ЦИФРЫ. Крупные значения — лёгкого веса, как на главной. */
/* ── ОДИН КОНТЕЙНЕР НА ВСЕХ. Контейнеры рисуют четыре класса-синонима: .dc-card,
   .card, .panel, .mhcard, .ds-card — они появлялись в разные годы и отличались радиусом
   (12 или 14), отступами и наличием рамки. Разметку не трогаем: 41 место с .dc-card и
   сотни с остальными переписывать рискованно и незачем — приводим сами стили. */
body.stripe .card,body.stripe .panel,body.stripe .mhcard,body.stripe .ds-card,
body.stripe .dc-card{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:none;padding:16px 18px}
body.stripe .card .v{font-weight:400;letter-spacing:-.025em;font-feature-settings:"tnum"}
body.stripe .card .k{color:var(--mut);font-weight:400}
body.stripe .money,body.stripe .num{font-feature-settings:"tnum"}

/* ── СООБЩЕНИЯ. Мягкая заливка без цветной планки слева. */
body.stripe .alert{border-radius:8px;box-shadow:none;border:1px solid var(--line)}
body.stripe .alert.warn,body.stripe .alert.danger,body.stripe .alert.info{border-left:none;
  border:1px solid transparent}

/* ── МЕТКИ И ССЫЛКИ. */
body.stripe .ds-badge{border-radius:5px;font-weight:500;font-size:12px;padding:3px 7px}
body.stripe .lnk{color:var(--acc);font-weight:400}
body.stripe .lnk:hover{color:var(--acc-deep)}

/* ── ОКНА. Тень мягче и глубже, чем у карточек: окно «над» страницей. */
body.stripe .modal{border-radius:10px;box-shadow:var(--shf);
  border:1px solid var(--line)}
body.stripe .modal-bg{background:rgba(13,37,61,.35)}
html:not(.dc-hand) body.stripe .modal-bg{padding:24px;background:#00000040}
html:not(.dc-hand) body.stripe .modal{width:min(560px,calc(100vw - 48px));max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);padding:24px;border-color:var(--line2);box-shadow:0 16px 48px #00000024;overscroll-behavior:contain}
html:not(.dc-hand) body.stripe .modal>h3{font-size:16px;font-weight:600;line-height:24px;margin:0 32px 18px 0;letter-spacing:-.025em}
html:not(.dc-hand) body.stripe .modalX{right:16px;top:16px;width:28px;height:28px;border-radius:5px;background:transparent;color:var(--mut)}
html:not(.dc-hand) body.stripe .modalX:hover{background:var(--card2);color:var(--tx)}
html:not(.dc-hand) body.stripe .modal .sub{line-height:1.6}

/* ── ШАПКА СТРАНИЦЫ. Заголовок лёгкий, подпись под ним серая. */
body.stripe .ds-head h1,body.stripe .ds-head h2{margin:0}
body.stripe .sub,body.stripe .cap,body.stripe .ph{color:var(--mut)}

/* Веса приведены прямо в разметке 25.08 (936 объявлений → 300/400/500/600), поэтому
   принудительного приведения весов здесь больше нет — костыль был нужен, пока в
   разметке жили 28 начертаний. Новый образец28.10: крупные значения400, заголовки600. */
/* Крупные значения — обычное начертание с табличными цифрами; заголовки отдельно ниже. */
body.stripe [style*="font-size:2"],
body.stripe [style*="font-size:3"],
body.stripe [style*="font-size:4"],
body.stripe [style*="font-size:5"]{font-weight:400!important;letter-spacing:-.025em;
  font-feature-settings:"tnum"}
/* Заголовки всех существующих экранов —600 по новому образцу. */
body.stripe h1,body.stripe h2,body.stripe h3,body.stripe h4{font-weight:600!important}
/* Шапка раздела = пункт меню: 22 / 600. Правило выше утоньшает всё от 20 px,
   и «Мой кабинет» / «Коммуникации» становились тонкими (аудит 26.09). */
body.stripe .scr-h1,body.stripe .ds-title{font-weight:600!important;letter-spacing:-.02em;
  font-feature-settings:inherit}
/* Мелкие подписи и метки остаются читаемыми: их не утоньшаем. */
body.stripe .dc-tag,body.stripe .ds-badge,body.stripe th,body.stripe .pill{
  font-weight:500!important;letter-spacing:0}
body.stripe code{background:var(--card2);border:1px solid var(--line);border-radius:6px;
  padding:1px 5px;font-size:12.5px;color:var(--acc-deep)}

/* Кегли приведены прямо в разметке 25.08 (1805 объявлений → девять ступеней), поэтому
   принудительного приведения размеров здесь больше нет. Шкала описана в
   docs/DESIGN_SYSTEM.md и соблюдается в самом коде, а не поверх него. */

/* Радиусы приведены в разметке 25.08 (460 объявлений → 6/8/12/14/пилюля).
   Принудительного приведения здесь больше нет. */
/* 20–30px НЕ сводим к пилюле: этот радиус носят не только метки, но и крупные блоки —
   шапка кабинета продавца превратилась в таблетку (25.08). Крупным оставляем радиус
   окна, а форму пилюли метки получают по своим классам (.pill, .dc-tag, .ds-badge). */
body.stripe [style*="border-radius:20px"],
body.stripe [style*="border-radius:22px"],
body.stripe [style*="border-radius:24px"],
body.stripe [style*="border-radius:25px"],
body.stripe [style*="border-radius:30px"]{border-radius:14px!important}
/* Тени приведены в разметке 25.08 (58 объявлений → три уровня глубины).
   Принудительного приведения здесь больше нет. */
/* Левое меню: активный пункт индиго-пастелью, а не заливкой. */
@media(min-width:761px){
/* ── МЕНЮ СВЕРХУ. Только у владельца и админа (класс topnav): они ходят по разделам
   редко и обзорно. Операторам и продавцам меню вернули слева (Рустам 25.08) — у них
   рабочий стол, и счётчики «Задачи 56», «Новые сообщения 37» должны быть на виду
   постоянно, а не открываться наведением. Делается только
   стилями: .shell из строки становится колонкой, меню растягивается на всю ширину и
   превращается в горизонтальную ленту. Разметка и обработчики не тронуты — если вид не
   зайдёт, снимается удалением этого блока. */
body.topnav .shell{flex-direction:column}
body.topnav #side{width:100%;min-width:0;border-right:none;border-bottom:1px solid var(--line);
  background:var(--card);padding:0 30px;display:flex;align-items:center;gap:2px;
  overflow:visible;white-space:nowrap;position:sticky;top:0;z-index:50}
body.topnav .sideitem{width:auto;flex:0 0 auto;margin:0;padding:15px 12px;border-radius:0;
  border-bottom:none;font-size:14px;font-weight:400;color:var(--mut)}
body.topnav .sideitem:hover{background:transparent;color:var(--tx)}
body.topnav .sideitem.on{background:transparent;color:var(--tx);font-weight:400;box-shadow:none}
/* Группы («Деньги», «Люди», «Система») в строку не помещаются — в верхней ленте они
   становятся выпадающими: виден только заголовок, пункты открываются при наведении. */
body.topnav .sidegrp{flex:0 0 auto;position:relative}
body.topnav .sidesec{padding:15px 12px;margin:0;font-size:14px;font-weight:400;color:var(--mut);
  text-transform:none;letter-spacing:0;cursor:default;white-space:nowrap;
  display:flex;align-items:center;gap:7px;border-bottom:none}
body.topnav .secarr{display:none}          /* ▸/▾ — рудимент бокового меню */
/* Шеврон справа от названия — две линии под 45°, как у Stripe; при раскрытии
   переворачивается вверх. */
body.topnav .sidesec::after{content:'';width:6px;height:6px;margin-top:-3px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .14s}
body.topnav .sidegrp:hover .sidesec::after{margin-top:2px;transform:rotate(-135deg)}
/* Панель раскрывается на всю ширину ленты и раскладывает пункты колонками — как у Stripe.
   Отсчёт идёт от #side (он sticky, то есть positioned), поэтому вбок ничего не вываливается
   и на узком экране панель не уезжает за край. */
/* Панель — по размеру содержимого и прямо под своим заголовком, а не во всю ширину
   экрана: с растянутой панелью три пункта «Денег» жались слева, а справа зияла пустота.
   Колонки набираются flex-переносом: пункты идут сверху вниз, и только когда столбик
   упирается в max-height, начинается следующий — так «Кабинеты» остаются читаемыми. */
body.topnav .sidegrp-i{position:absolute;top:100%;left:0;right:auto;padding:10px;
  display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;
  max-height:min(70vh,470px);overflow-y:auto;width:max-content;max-width:min(860px,90vw);gap:0 22px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,55,112,.08),0 2px 6px rgba(0,55,112,.04);opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity .14s,transform .14s;z-index:60}
/* Крайняя правая группа раскрывается влево, иначе панель уходит за край экрана. */
body.topnav #side .sidegrp:last-child .sidegrp-i{left:auto;right:0}
/* !important — у свёрнутой группы стоит display:none прямо в разметке (память о боковом
   меню), иначе выпадашка не откроется. */
body.topnav .sidegrp:hover .sidegrp-i{display:block!important;opacity:1;visibility:visible;
  transform:translateY(0)}
/* Пункты в панели — обычный тёмный текст: сплошная фиолетовая простыня утомляет, а
   индиго в системе значит «сюда нажать», и здесь нажимаемо всё подряд. */
body.topnav .sidegrp-i .sideitem{display:block;width:auto;min-width:200px;padding:9px 11px;
  border-radius:6px;border-bottom:none;white-space:nowrap;color:var(--tx);font-weight:400}
body.topnav .sidegrp-i .sideitem:hover{background:var(--card2);color:var(--acc)}
body.topnav .sidegrp-i .sideitem.on{background:var(--acc-soft);color:var(--acc-deep);box-shadow:none}
/* Подзаголовки внутри группы («ОПЕРАТОРЫ КОЛЛ-ЦЕНТРА» и т.п.) — это div без класса,
   он приходит из общего рендера меню; в колонке ему нужен воздух сверху и линия. */
body.topnav .sidegrp-i > div{color:var(--tx)!important;font-size:12.5px!important;
  min-width:200px;margin:12px 0 4px;padding:0 0 7px 11px!important;
  border-bottom:1px solid var(--line)}
body.topnav .sidegrp-i > div:first-child{margin-top:2px}
/* Заголовок открытой группы подсвечивается — видно, что именно раскрыто. */
body.topnav .sidegrp:hover .sidesec{color:var(--tx)}
body.topnav #app{padding:26px 30px 56px}
/* Переключатель режима управляющей («Мой стол» ↔ «Управление») в ленте читался как ещё
   две вкладки меню. Собираем его в один сегмент и отделяем чертой — видно, что это выбор
   режима, а не раздел. */
body.topnav .opmodebox{flex:0 0 auto;padding:0!important;margin-right:14px;gap:0!important;
  border:1px solid var(--line);border-radius:9999px;overflow:hidden;position:relative}
body.topnav .opmodebox::after{content:"";position:absolute;right:-8px;top:50%;
  transform:translateY(-50%);width:1px;height:20px;background:var(--line)}
body.topnav .opmodebox .opmode{border:none!important;border-radius:0!important;
  padding:7px 15px!important;font-weight:400!important;font-size:13.5px!important;flex:0 0 auto!important}
}

 main{padding:20px 24px 40px;max-width:none; min-width:0;}
 .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:14px 0}
 .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--sh)}
 .card .k{color:var(--mut);font-size:13.5px;font-weight:500} .card .v{font-size:27px;font-weight:600;margin-top:7px;letter-spacing:-.02em;color:var(--tx)}
 /* ——— UI-kit: единая карточка. .dc-click — кликабельна (провалиться в объект), .acc — цветная полоса статуса ——— */
 .dc-card{background:var(--card);border-radius:var(--card-radius);box-shadow:var(--card-sh);padding:var(--card-pad)}
 .dc-card.acc{border-left:4px solid var(--dc-accent,var(--acc))}
 .dc-click{cursor:pointer;transition:box-shadow .12s,transform .12s}
 .dc-click:hover{box-shadow:var(--card-sh-hover);transform:translateY(-1px)}
 /* ЧЕТЫРЕ ПОВТОРА → ЧЕТЫРЕ КЛАССА (аудит 26.08, пункт 2). Одни и те же связки
    инлайн-стилей встречались 118 раз: заголовок экрана — 64, подпись под значением — 29,
    кнопка панели — 13, имя человека — 12. Правка заголовков стоила шестидесяти четырёх
    правок; теперь одной. Значения не меняются — те же ступени шкалы. */
 .scr-h1{font-size:22px;font-weight:600}
 .sub-note{font-size:12.5px;margin-top:2px}
 .tb-sm{padding:5px 12px;font-size:12.5px}
 .person{font-weight:500;font-size:14px}
 .dc-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;border-radius:6px;padding:1px 7px;white-space:nowrap}
 .alert{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);
 border-radius:8px;padding:13px 16px;margin:9px 0;box-shadow:var(--sh)}
 .alert.warn{background:var(--yel-soft);border-color:transparent;border-left:3px solid var(--yel);box-shadow:none}
 .alert.danger{background:var(--red-soft);border-color:transparent;border-left:3px solid var(--red);box-shadow:none}
 .alert.info{background:var(--blu-soft);border-color:transparent;border-left:3px solid var(--blu);box-shadow:none}
 table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px;background:var(--card);
 border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--sh)}
 th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
 tr:last-child td{border-bottom:none}
 th{color:var(--mut);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--card2)}
 tbody tr:hover td,tr:hover td{background:var(--card2)}
 .pill{display:inline-block;padding:3px 11px;border-radius:14px;font-size:12.5px;font-weight:500;background:var(--card2);color:var(--mut)}
 /* ═══ ДИЗАЙН-СИСТЕМА: общие компоненты (используются на всех экранах) ═══ */
 .ds-badge{display:inline-block;padding:3px 11px;border-radius:8px;font-size:12.5px;font-weight:600;white-space:nowrap;border:1px solid;color:var(--tx)}
 .ds-empty{text-align:center;padding:40px 20px}
 .ds-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
 .ds-title{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--tx)}
 .ds-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
 .ds-card{background:var(--card);border:1px solid var(--line);border-radius:14px}
 /* QA-панель (?qa=1) */
 #qaPanel{position:fixed;left:14px;bottom:14px;z-index:99998;width:290px;background:var(--tx);color:var(--line);border:1px solid var(--tx);border-radius:12px;box-shadow:0 15px 45px rgba(13,37,61,.18);font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}
 #qaPanel .qahd{display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--tx);border-bottom:1px solid var(--tx)}
 #qaPanel .qahd b{font-family:-apple-system,system-ui,sans-serif;letter-spacing:.04em;font-size:12.5px}
 #qaPanel .qadot{width:8px;height:8px;border-radius:50%;background:var(--grn);flex:none}
 #qaPanel .qahd button{background:none;border:none;color:var(--mut);cursor:pointer;font-size:13.5px;padding:0 3px;line-height:1}
 #qaPanel .qahd button:hover{color:var(--line)}
 #qaPanel .qamut{color:var(--mut)}
 #qaPanel .qabody{padding:6px 10px 10px;max-height:60vh;overflow:auto}
 #qaPanel.qamin .qabody{display:none}
 #qaPanel .qarow{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid var(--tx);line-height:1.5}
 #qaPanel .qak{color:var(--mut);flex:none}
 #qaPanel .qav{color:var(--line);text-align:right;word-break:break-all}
 #qaPanel .qaerrs{margin-top:6px;padding-top:6px;border-top:1px solid var(--tx)}
 #qaPanel .qaerr{color:var(--red);font-size:11px;padding:1px 0;word-break:break-all}
 #qaPanel .qafoot{margin-top:8px}
 #qaPanel .qafoot button{width:100%;background:var(--tx);border:1px solid var(--mut);color:var(--line);border-radius:6px;padding:6px;cursor:pointer;font-family:-apple-system,system-ui,sans-serif;font-size:12.5px}
 #qaPanel .qafoot button:hover{background:var(--tx)}
 /* Единая карточка кандидата (renderLeadCard + fallback-контакт — ОДИН компонент, одинаковый вид) */
 .ohacts{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
 .ohstages{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
 .ohst{font-size:11px;font-weight:500;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--mut);cursor:pointer;transition:all .12s}
 .ohst:hover{border-color:var(--acc);color:var(--acc)} .ohst.on{background:var(--acc);color:var(--on-acc);border-color:transparent}
 .ohm{font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--mut);cursor:pointer;text-decoration:none;transition:all .12s}
 .ohm:hover{border-color:var(--acc);color:var(--acc)} .ohm.on{background:var(--acc-soft);color:var(--acc);border-color:transparent}
 .ohm-book{width:100%;justify-content:center;background:var(--acc);color:var(--on-acc);border-color:transparent;font-weight:600;font-size:13.5px;padding:10px;margin:2px 0 12px;display:flex;align-items:center;gap:7px}
 .ohm-book:hover{color:var(--on-acc);filter:brightness(1.05)}
 .ohc-r{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13.5px} .ohc-r+.ohc-r{border-top:1px solid var(--line)}
 .ohc-l{color:var(--mut2);width:106px;flex:0 0 auto;font-size:12.5px;white-space:nowrap} .ohc-v{color:var(--tx);font-weight:500;flex:1;min-width:0;word-break:break-word}
 .ohc-v.ohc-empty{color:var(--mut2);font-weight:400}
 /* ГЛАВНАЯ. Палитра системная: синий — поток, зелёный — результат, оранжевый и красный —
    потери, серый — прошлое. Один акцент на смысл, не на украшение. */
 .ohome{--o-blu:var(--acc); --o-grn:var(--grn); --o-org:var(--yel); --o-red:var(--red);
        --o-gry:var(--mut); --o-ink:var(--tx); --o-sub:var(--mut); --o-hair:rgba(0,0,0,.06);
        max-width:1060px}
 .ohome h2{font-size:23px;font-weight:500;letter-spacing:-.02em;color:var(--o-ink);margin:0}
 .ohome .cap{font-size:13.5px;color:var(--o-sub);margin-top:4px;line-height:1.45;
             letter-spacing:-.006em}
 .obk{background:var(--card);border-radius:14px;padding:22px 24px 24px;margin-top:22px;
      box-shadow:0 1px 3px rgba(0,55,112,.08)}
 .obk-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
 /* Тот же приём: глобальный h2 мелкий, серый и капсом. Внутри карточек кабинета
    заголовок должен читаться как заголовок, а не как служебная метка. */
 .obk-h h2{font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--o-ink);
           margin:0;text-transform:none}
 /* Кабинет руководителя: плитки периода + путь + вкладки (не простыня).
    Радиус/тень — docs/DESIGN_SYSTEM.md (.dc-card). */
 /* Раскладка по макету Главной (Рустам 24.08): ТРИ плитки в ряд, а не шесть в строчку.
    Шесть узких колонок на широком мониторе давали полоску высотой в экран и цифры впритык;
    три ряда по три читаются с одного взгляда. Значения — из DESIGN_SYSTEM.md. */
 .oday{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
 @media(max-width:900px){.oday{grid-template-columns:repeat(2,1fr)}}
 @media(max-width:620px){.oday{grid-template-columns:1fr}}
 .oday>div{background:var(--card);border:1px solid var(--line);border-radius:14px;
           padding:16px 18px;cursor:default;box-shadow:0 1px 3px rgba(0,55,112,.08);
           transition:box-shadow .12s,transform .12s;min-height:118px;
           display:flex;flex-direction:column}
 /* Приподнимается и подсвечивается только та плитка, по которой есть куда перейти.
    Раньше рука на курсоре была у всех, включая «Отклики» — она никуда не ведёт. */
 .oday>div.dc-click{cursor:pointer}
 .oday>div.dc-click:hover{box-shadow:0 8px 24px rgba(0,55,112,.08),0 2px 6px rgba(0,55,112,.04);transform:translateY(-1px)}
 .oday>div.dc-click:active{transform:translateY(0)}
 .oday .k{font-size:12.5px;color:var(--o-sub);font-weight:500;letter-spacing:-.006em;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .oday .v{font-size:27px;font-weight:600;letter-spacing:-.025em;margin-top:9px;
          font-variant-numeric:tabular-nums;line-height:1.1;color:var(--o-ink)}
 .oday .d{font-size:12.5px;font-weight:500;margin-top:7px;letter-spacing:-.006em}
 .oday .d.up{color:var(--o-grn)}.oday .d.dn{color:var(--o-red)}.oday .d.fl{color:var(--o-sub)}
 .hmbars{display:flex;align-items:flex-end;gap:2px;height:28px;margin-top:auto;padding-top:10px}
 .hmbars span{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;
              background:rgba(0,0,0,.04);border-radius:6px;overflow:hidden}
 .hmbars i{display:block;width:100%;border-radius:6px 2px 0 0}
 .opath{display:flex;flex-direction:column;gap:10px}
 .opath-row{display:grid;grid-template-columns:150px 1fr 68px 54px;gap:14px;align-items:center}
 .opath-lab{font-size:14px;font-weight:500;color:var(--o-ink);letter-spacing:-.006em}
 .opath-bar{height:30px;background:rgba(0,0,0,.035);border-radius:8px;overflow:hidden}
 .opath-bar>i{display:block;height:100%;border-radius:8px;background:var(--o-blu);opacity:.88;
              transition:width .35s ease}
 .opath-n{font-size:18px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
 .opath-p{font-size:12.5px;color:var(--o-sub);text-align:right}
 .otabs{display:flex;gap:6px;margin:18px 0 0;flex-wrap:wrap;padding:3px;background:var(--card2);
        border-radius:12px;width:fit-content;max-width:100%}
 .otabs button{border:0;background:none;font-size:13.5px;font-weight:500;color:var(--o-sub);
               padding:8px 14px;border-radius:8px;cursor:pointer;font-family:inherit;transition:.13s}
 .otabs button.on{background:var(--card);color:var(--o-ink);box-shadow:0 1px 3px rgba(0,55,112,.08)}
 .opanel{display:none}.opanel.on{display:block}
 @media(max-width:980px){
   .oday{grid-template-columns:repeat(3,1fr)}
   .opath-row{grid-template-columns:110px 1fr 56px 48px;gap:8px}
 }
 @media(max-width:560px){
   .oday{grid-template-columns:repeat(2,1fr);gap:10px}
   .oday>div{padding:12px 13px;min-height:104px}
   .oday .v{font-size:23px}
   .opath-row{grid-template-columns:1fr;gap:4px}
   .opath-n,.opath-p{text-align:left}
 }
 /* Таблицы: заголовки не кричат капсом, разделители волосяные, строки просторнее —
    список должен читаться сверху вниз без усилия. */
 .otab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
 /* Глобальный стиль th красит шапку в серую заливку и капс — для плотных служебных
    таблиц это уместно, а здесь ломает вид: карточка светлая, а шапка внутри неё серая
    полоса. Перебиваем явно, чтобы не зависеть от порядка правил. */
 .otab th{font-size:12.5px;font-weight:500;color:var(--o-sub);letter-spacing:-.006em;
          text-align:right;padding:0 0 12px;white-space:nowrap;
          background:transparent;text-transform:none}
 .otab th:first-child{text-align:left}
 .otab td{font-size:14px;padding:11px 0;border-top:1px solid var(--o-hair);text-align:right;
          white-space:nowrap;letter-spacing:-.006em}
 .otab td:first-child{text-align:left;font-weight:500;color:var(--o-ink)}
 .otab td b{font-weight:500}
 .otab tbody tr:hover td{background:rgba(0,0,0,.018)}
 .otab .mn{color:var(--o-sub);font-size:12.5px}
 .otab .zr{color:var(--mut2)}
 .otab td.big{font-weight:500;font-size:14px}
 .otab tr.now td{background:var(--acc-soft)}
 /* Полоска-мера в ячейке: длина = доля от максимума месяца. */
 /* Полоска шла на всю ширину ячейки, а число прижато вправо — они смотрелись как два
    разных элемента, и таблица выглядела разъезжающейся. Теперь полоска под числом,
    той же стороной. */
 .obar{display:block;height:4px;border-radius:6px;background:var(--o-hair);margin:4px 0 0 auto;
       overflow:hidden;max-width:120px}
 .obar i{display:block;height:100%;border-radius:6px}
 .otag{font-size:10.5px;font-weight:500;color:var(--o-sub);background:var(--card2);
       border-radius:6px;padding:2px 6px;letter-spacing:.04em;vertical-align:2px}
 /* Выбор периода: кнопка + попап с двумя месяцами. Раньше тут стояли два голых
   input[type=date] — рабочие, но выбирать «1–15 августа» ими неудобно: не видно недель
   и не видно, что попало в диапазон. */
.hmper{position:relative}
.hmperbtn{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--tx);font-size:13.5px;font-weight:500;cursor:pointer}
.hmperbtn:hover{border-color:var(--acc)}
.hmperbtn i{font-style:normal;color:var(--mut);font-size:11px}
.hmpop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 15px 45px rgba(13,37,61,.18);
  padding:16px;min-width:600px;display:none}
.hmpop.on{display:block}
.hmpop.dayp{min-width:0;padding:14px}
.hmpop.dayp.inmodal{width:auto;max-width:100%}
.hmpop.dayp.inmodal .hmcal{min-width:0}
.hmpop.dayp .hmcal{min-width:262px}
.hmperbtn.mutbtn span{color:var(--mut)}
/* Тот же календарь внутри модального окна. Окно узкое (480px) и со своим скроллом, поэтому
   всплывающий блок в 600px обрезался краем окна (Рустам 09.09, скрин заявки на командировку).
   Внутри модалки он раскрывается прямо в потоке, по ширине окна, месяцы — друг под другом. */
.hmpop.inmodal{position:static;min-width:0;width:100%;margin-top:8px;box-shadow:none;padding:14px}
.hmpop.inmodal .hmcal{min-width:0}
/* «Города продавцов» на телефоне — карточкой: таблица в 5 столбцов обрезалась, и столбца
   «Приезжает» с датой окончания командировки было не видно (Чагина 18.09.2026, #5181). */
html.dc-hand .trip-tbl thead{display:none}html.dc-hand .trip-tbl, html.dc-hand .trip-tbl tbody, html.dc-hand .trip-tbl tr, html.dc-hand .trip-tbl td{display:block;width:100%;box-sizing:border-box}html.dc-hand .trip-tbl tr{padding:12px 16px}html.dc-hand .trip-tbl td{padding:4px 0 !important;white-space:normal !important}html.dc-hand .trip-tbl td:first-child{font-size:16px;padding-bottom:8px !important}html.dc-hand .trip-tbl td[data-l]::before{content:attr(data-l);display:block;font-size:12px;color:var(--mut2);margin-bottom:4px}html.dc-hand .trip-tbl td select.fld{width:100%;min-width:0 !important;margin:0 0 8px !important}html.dc-hand .trip-tbl .dc-tag{display:inline-flex;align-items:center;gap:6px;margin:0 6px 6px 0}html.dc-hand .trip-tbl .dc-tag a[data-until-emp]{font-size:13px !important;padding:4px 0}html.dc-hand .trip-tbl td{border:0 !important;background:none !important}html.dc-hand .trip-tbl tr + tr{border-top:1px solid var(--line)}html.dc-hand .trip-tbl td select.fld{display:block;min-height:44px;padding:10px 12px;border-radius:12px;
   background:var(--fld,#f0f0f3);border:1px solid var(--fld-line,#e8e8ec);font-size:15px}
/* На узком экране месяцы встают друг под друга, на обычном — рядом, как в отчётах */
.hmpop.inmodal .hmcals{flex-direction:column;gap:16px}
@media (min-width:640px){.hmpop.inmodal .hmcals{flex-direction:row;gap:20px}}
/* СЕГОДНЯ — отдельная полоса над плитками (Рустам 10.09: «важно сегодня, потом за период»).
   Отдельная, а не внутри плиток: плитки слушаются переключателя периода, а этот день —
   всегда сегодняшний, и мешать их в одной цифре нельзя — переключаешь период, а число
   не меняется, и экран выглядит сломанным. */
.hmtoday{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--card-radius,12px);padding:13px 18px;margin-bottom:14px}
.hmtoday .lbl{font-size:11px;font-weight:500;color:var(--mut2);text-transform:uppercase;
  letter-spacing:.06em;margin-right:4px}
.hmtoday .it{display:inline-flex;align-items:baseline;gap:6px;font-size:13.5px;color:var(--mut)}
.hmtoday .it b{font-size:19px;font-weight:600;color:var(--tx);letter-spacing:-.01em;
  font-feature-settings:'tnum';font-variant-numeric:tabular-nums}
.hmpre{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.hmpre button{padding:7px 16px;border:1px solid transparent;border-radius:14px;background:var(--acc-soft);
  color:var(--tx);font-size:13.5px;cursor:pointer}
.hmpre button.on{border-color:var(--tx);background:var(--card);font-weight:500}
.hmcals{display:flex;gap:26px;align-items:flex-start}
.hmcal{flex:1;min-width:250px}
.hmcal-h{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;
  font-size:14px;font-weight:500}
.hmcal-h .y{color:var(--mut);font-weight:500}
.hmnav{border:0;background:transparent;color:var(--mut);font-size:16px;cursor:pointer;padding:2px 8px;border-radius:8px}
.hmnav:hover{background:var(--acc-soft);color:var(--tx)}
/* Выбор периода. Было грубо: концы залиты почти-чёрным --tx (цвет текста, не акцент),
   полоса рвалась щелями по 2px, а «50% 0 0 50%» на квадратной ячейке давало приклеенную
   пилюлю (Рустам 25.08). Теперь по канону: сплошная светлая дорожка индиго между концами,
   концы — ровный круг акцентом. Дорожка идёт вплотную (колонки без зазора), ряды дышат. */
.hmgrid{display:grid;grid-template-columns:repeat(7,1fr);column-gap:0;row-gap:3px}
.hmgrid .dow{text-align:center;font-size:11px;color:var(--mut);padding:4px 0}
.hmgrid button{position:relative;z-index:0;aspect-ratio:1;border:0;background:transparent;
  color:var(--tx);font-size:13.5px;cursor:pointer;border-radius:0;padding:0}
.hmgrid button:hover:not(:disabled):not(.edge){box-shadow:inset 0 0 0 1.5px var(--acc);border-radius:50%}
.hmgrid button:disabled{color:var(--mut2);cursor:default;opacity:.45}
/* дорожка между концами — едва заметная, чтобы читались числа, а не заливка */
.hmgrid button.in{background:rgba(83,58,253,.07)}
/* концы: круг акцентом; половина дорожки под ним продолжает линию к соседнему дню */
.hmgrid button.edge{color:var(--on-acc);font-weight:500}
.hmgrid button.edge::before{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--acc);z-index:-1}
.hmgrid button.edge.a{background:linear-gradient(to right,transparent 50%,rgba(83,58,253,.07) 50%)}
.hmgrid button.edge.b{background:linear-gradient(to left,transparent 50%,rgba(83,58,253,.07) 50%)}
.hmgrid button.edge.solo{background:transparent}
.hmgrid button.edge:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(83,58,253,.14);border-radius:50%}
.hmpfoot{display:flex;gap:8px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.hmpfoot .cap{margin:0;flex:1}
html.dc-hand .hmpop{position:fixed;left:8px;right:8px;top:auto;bottom:8px;min-width:0;max-height:82vh;overflow:auto}html.dc-hand .hmcals{flex-direction:column;gap:18px}
.oera{display:inline-flex;background:var(--card2);border-radius:8px;padding:3px;gap:2px}
 .oera button{border:0;background:none;font-size:13.5px;font-weight:500;color:var(--o-sub);
              padding:6px 14px;border-radius:8px;cursor:pointer;font-family:inherit;transition:.13s}
 .oera button.on{background:var(--card);color:var(--o-ink);box-shadow:0 1px 3px rgba(0,55,112,.08)}
 .hmc{background:var(--card2);border:0;border-radius:14px;padding:15px 17px;cursor:pointer}
 .hmc .k{font-size:12.5px;font-weight:500;color:var(--o-sub)}
 .hmc .v{font-size:27px;font-weight:500;letter-spacing:-.025em;line-height:1;margin-top:9px;
         font-variant-numeric:tabular-nums}
 .hmc .s{font-size:11px;color:var(--o-sub);margin-top:5px}
 .hmcards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
 html.dc-hand .hmcards{grid-template-columns:repeat(2,1fr)}
 .hmsrc{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--o-hair);
        font-size:13.5px;flex-wrap:wrap}
 .hmsrc .nm{font-weight:500;min-width:124px} .hmsrc .wh{color:var(--o-sub);flex:1;min-width:110px}
 .hmsrc .nn{font-weight:500;font-variant-numeric:tabular-nums}
 /* Раньше период всегда уезжал на отдельную строку с отступом — даже когда помещался
    рядом. Теперь переносится только если места действительно нет. */
 .hmsrc .pd{color:var(--o-gry);font-size:11px;margin-left:10px}
 .hmgap{background:var(--yel-soft);border-radius:12px;padding:12px 15px;font-size:12.5px;line-height:1.5}
 .hmgap b{display:block;margin-bottom:4px;font-size:13.5px}
 /* Экран слияния дублей: две карточки рядом, чтобы решение принималось глазами. */
 .mtabs{display:flex;gap:7px;margin:14px 0 16px;flex-wrap:wrap}
 .mtabs button{border:0;background:var(--card2);border-radius:8px;padding:8px 15px;font-size:13.5px;
   font-weight:500;cursor:pointer;font-family:inherit;color:var(--mut)}
 .mtabs button.on{background:var(--card);color:var(--tx);box-shadow:0 1px 3px rgba(0,55,112,.08)}
 .mpair{background:var(--card);border-radius:14px;padding:17px 19px;margin-bottom:14px;
   box-shadow:0 1px 3px rgba(0,55,112,.08)}
 .mhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
 .mkey{font-size:16px;font-weight:600;letter-spacing:-.006em}
 .mwhy{font-size:12.5px;color:var(--mut);margin-left:9px}
 .mwarn{background:var(--red-soft);color:var(--yel);border-radius:8px;padding:10px 13px;font-size:12.5px;
   line-height:1.5;margin-bottom:11px}
 .mcards{display:grid;grid-template-columns:1fr 1fr;gap:13px}
 @media(max-width:720px){.mcards{grid-template-columns:1fr}}
 .mcard{background:var(--card2);border-radius:12px;padding:14px 16px}
 .mtop{display:flex;align-items:baseline;gap:9px;margin-bottom:10px;flex-wrap:wrap}
 .mtop b{font-size:14px}
 .mid{font-size:11px;color:var(--mut2);margin-left:auto}
 .mrow{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13.5px}
 .mrow span{color:var(--mut)} .mrow b{font-weight:500;font-variant-numeric:tabular-nums}
 .mfoot{margin-top:9px;padding-top:9px;border-top:1px solid rgba(0,0,0,.07);font-size:12.5px;color:var(--mut)}
 .mkeep{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:12.5px;color:var(--mut);cursor:pointer}
 .mact{display:flex;align-items:center;gap:10px;margin-top:13px;flex-wrap:wrap}
 .mbtn{border:0;border-radius:8px;padding:9px 17px;font-size:13.5px;font-weight:500;cursor:pointer;
   font-family:inherit;background:var(--card2);color:var(--tx)}
 .mbtn:disabled{opacity:.5;cursor:default}
 .mprim{background:var(--acc);color:var(--on-acc)}
 .mnote{font-size:12.5px;color:var(--mut2);flex:1;min-width:200px}
 .mhint{background:var(--yel-soft);border-radius:12px;padding:13px 16px;font-size:12.5px;line-height:1.5;margin-bottom:16px}
 .ohc-v.ohc-copy{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;-webkit-tap-highlight-color:rgba(79,70,229,.12)} .ohc-v.ohc-copy:active{opacity:.55}
 .ohc-add{background:none;border:1px dashed var(--line);color:var(--acc);border-radius:6px;padding:3px 9px;font-size:12.5px;cursor:pointer}
 .ohc-e{margin-left:auto;background:none;border:none;color:var(--mut2);cursor:pointer;font-size:12.5px} .ohc-e:hover{color:var(--acc)}
 .ohc-e.ohc-del{margin-left:2px} .ohc-e.ohc-del:hover{color:var(--red)}
 .ohc-cap{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut2);font-weight:500;margin-bottom:10px}
 .tl{display:flex;flex-direction:column;gap:2px}
 .tlrow{display:flex;gap:9px;padding:7px 0;position:relative}
 .tlrow:not(:last-child)::before{content:'';position:absolute;left:5px;top:22px;bottom:-7px;width:1px;background:var(--line)}
 .tldot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;margin-top:3px;border:2px solid var(--card);box-shadow:0 1px 3px rgba(0,55,112,.08)}
 .tlbody{flex:1;min-width:0} .tltitle{font-size:13.5px;color:var(--tx);line-height:1.45;word-break:break-word}
 .tlwhen{font-size:11px;color:var(--mut2);margin-top:2px}
 /* пузырь по содержимому, но не шире 70% ленты: на широкой карточке строка во весь экран
    нечитаема, а короткая реплика в растянутом пузыре выглядит нелепо */
 .tlmsg{border-radius:8px;padding:8px 11px;font-size:13.5px;line-height:1.45;word-break:break-word;max-width:min(70%,720px)}
 .tlmsg.in{background:var(--card2);color:var(--tx)} .tlmsg.out{background:var(--acc-soft);color:var(--tx)}
 .tlch{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mut2);margin-bottom:3px}
 .lctabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:4px 0 12px}
 /* Карточка кандидата: слева — кто это и что делать, справа — история жизни кандидата.
    История занимает основную площадь: оператор читает её чаще всего остального вместе взятого. */
 /* левая колонка фиксированной ширины: в процентах на широком экране она раздувалась,
    а данных в ней ровно на одну колонку. Всё лишнее место достаётся истории. */
 /* Левая CRM-панель фиксированная (320–380px), всё остальное — рабочая область справа
    (вкладки Диалог/История/Звонки/Записи/AI живут в ней сверху). Окно широкое, не сужаем. */
 .lcgrid{display:grid;grid-template-columns:minmax(320px,360px) minmax(0,1fr);gap:24px;align-items:start}
 .lcright{min-width:0}                     /* без этого длинные сообщения распирают колонку */
 /* Левая панель прижата к верху и не уезжает: оператор всегда видит, кому звонит и какие
    кнопки под рукой, даже пролистав историю за год. Прокрутка — только у ленты. */
 .lcleft{min-width:0;position:sticky;top:0;align-self:start}
 /* минимальная высота — чтобы короткая история не схлопывалась в полоску и область
    читалась как рабочая зона, а не как обрывок */
 .lcright .lcpane{max-height:min(62vh,720px);min-height:320px;overflow-y:auto;overscroll-behavior:contain;padding-right:8px}

 /* НА ТЕЛЕФОНЕ ВНУТРЕННЕЙ ПРОКРУТКИ НЕТ. Панель с max-height + overflow-y ловит палец
    плохо: человек тянет ленту вниз, а едет вся страница, и переписка выглядит обрезанной
    (Чагина 25.08, раздел «Новые сообщения», три скриншота). На узком экране лента растёт
    по содержимому, скроллится страница — как в любом мессенджере. */
 html.dc-hand .lcright .lcpane{max-height:none;min-height:0;overflow:visible;overscroll-behavior:auto;padding-right:0}html.dc-hand .lcleft{position:static}
 .lcright .lcpane::-webkit-scrollbar{width:8px}
 .lcright .lcpane::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
 /* Узкий экран: колонки складываются в одну, и залипающая левая начинает НАКРЫВАТЬ ленту
    (Чагина 29.07: «в мобильной версии идёт накладка»). В одну колонку липнуть не к чему —
    снимаем sticky и убираем ограничение высоты панели, чтобы всё листалось единым потоком. */
 /* Карточка в УЗКОЙ панели (правая колонка «Новых сообщений» — 388px) раскладывается в
    одну колонку по ширине самой панели, а не окна: при широком мониторе медиа-запрос ниже
    не срабатывал, две колонки не помещались, и вкладка «История» уезжала за край — «в разделе
    сообщений при открытии карточки нет этой информации» (Чагина 23.09, #5411, #5414). */
 .lcgrid.narrow{grid-template-columns:1fr;gap:14px}
 .lcgrid.narrow .lcleft{position:static;top:auto}
 .lcgrid.narrow .lcright .lcpane{max-height:none;overflow-y:visible;padding-right:0}
 @media (max-width:1000px){
   .lcgrid{grid-template-columns:1fr;gap:14px}
   .lcleft{position:static;top:auto}
   .lcright .lcpane{max-height:none;overflow-y:visible;padding-right:0}
 }
 .lctab{background:none;border:none;padding:8px 13px;font-size:13.5px;font-weight:500;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
 .lctab:hover{color:var(--tx)} .lctab.on{color:var(--acc);border-bottom-color:var(--acc)}
 /* Современный корпоративный чат: пузыри ≤65%, светлые цвета, воздух между сообщениями,
    шапка только при смене отправителя, время в углу пузыря, тонкий разделитель даты. */
 .lcpane[data-tab="dialog"]{background:var(--line);border-radius:14px;padding:14px 16px}
 :root[data-theme="dark"] .lcpane[data-tab="dialog"]{background:var(--tx)}
 .lcday{display:flex;align-items:center;gap:12px;margin:20px 4px 14px;color:var(--mut2);font-size:11px;font-weight:500}
 .lcday::before,.lcday::after{content:"";flex:1;height:1px;background:var(--line)}
 .lcmsg{display:flex;margin:1px 0} .lcmsg.out{justify-content:flex-end}
 .lcmsg.grp{margin-top:12px}                /* воздух ТОЛЬКО между сериями (смена отправителя) */
 .lcbub{position:relative;max-width:65%;padding:6px 11px 5px;border-radius:14px;font-size:14px;line-height:1.45;word-break:break-word}
 /* внутри серии углы у своей стороны почти прямые — сообщения читаются как единый поток */
 .lcmsg:not(.grp) .lcbub.in{border-top-left-radius:6px;border-bottom-left-radius:6px}
 .lcmsg:not(.grp) .lcbub.out{border-top-right-radius:6px;border-bottom-right-radius:6px}
 .lcbub.in{background:var(--card);border-bottom-left-radius:5px;box-shadow:0 1px 3px rgba(0,55,112,.08)}
 .lcbub.out{background:var(--yel-soft);border-bottom-right-radius:5px}
 :root[data-theme="dark"] .lcbub.in{background:var(--tx);color:var(--line)}
 :root[data-theme="dark"] .lcbub.out{background:var(--grn);color:var(--line)}
 .lcch{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;margin-bottom:3px;color:var(--tx)}
 .lcch .lcsrc{color:var(--mut2);font-weight:500}
 .lctext{white-space:pre-wrap}
 .lcmeta{font-size:10.5px;color:var(--mut2);text-align:right;margin-top:3px;user-select:none}
 .lcbk{border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-bottom:8px;cursor:pointer} .lcbk:hover{border-color:var(--acc)}
 /* skeleton загрузки карточки — вместо текста «Карточка появится…» */
 .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite;flex:0 0 auto}
 @keyframes spin{to{transform:rotate(360deg)}}
 .opd-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:500;padding:1px 7px;border-radius:14px;flex:0 0 auto}
 .cardhd{display:flex;align-items:center;gap:11px;margin-bottom:12px}
 .cardhd .av{width:46px;height:46px;border-radius:14px;background:var(--line);color:var(--mut2);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;flex:0 0 auto;position:relative;overflow:visible}
 .cardhd .nm{font-size:16px;font-weight:600;letter-spacing:-.02em} .cardhd .sub{color:var(--mut);font-size:12.5px;margin-top:2px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
 .chlogo{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;overflow:hidden;box-shadow:0 1px 3px rgba(0,55,112,.08)} .chlogo svg{width:100%;height:100%;display:block}
 .dept{color:var(--acc);font-weight:600;padding:14px 12px 4px;font-size:13.5px}
 h2{font-size:12.5px;color:var(--mut);font-weight:500;margin:24px 0 8px;text-transform:uppercase;letter-spacing:.06em}
 .mut{color:var(--mut)} .money{font-variant-numeric:tabular-nums}
 .act{background:var(--acc);color:var(--on-acc);border:none;border-radius:8px;padding:9px 16px;cursor:pointer;
 font-size:14px;font-weight:500;box-shadow:var(--sh)} .act:hover{filter:brightness(.94)}
 .act:disabled{opacity:.55;cursor:default}
 .tb{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:8px;
 padding:8px 14px;cursor:pointer;font-size:14px} .tb:hover{background:var(--card2)}
 .shell{display:flex;align-items:stretch;min-height:calc(100vh - 52px)}
 /* Футер — единый для всего приложения, стандарт как у крупных продуктов (Apple/Stripe) */
 #siteFooter{background:var(--card);border-top:1px solid var(--line);margin-top:0; padding:0 24px 0 calc(var(--desktop-sidebar,220px) + 24px);}
 html:not(.dc-hand) #siteFooter .dc-footer-help{padding:12px 0;font-size:12px;color:var(--mut)}
 html:not(.dc-hand) #siteFooter .dc-footer-help>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;width:max-content;min-height:28px;border-radius:4px}
 html:not(.dc-hand) #siteFooter .dc-footer-help>summary::-webkit-details-marker{display:none}
 html:not(.dc-hand) #siteFooter .dc-footer-help>summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
 html:not(.dc-hand) #siteFooter .dc-footer-arrow{display:flex;align-items:center;justify-content:center}
 html:not(.dc-hand) #siteFooter .dc-footer-help[open] .dc-footer-arrow{transform:rotate(180deg)}
 #siteFooter .ft-in{max-width:none;margin:0;padding:16px 0;display:grid;gap:24px;flex-wrap:wrap; grid-template-columns:160px minmax(0,1fr);}
 #siteFooter .ft-brand{flex:1 1 240px;min-width:0;max-width:none}
 #siteFooter .ft-logo{font-size:13px;font-weight:600;letter-spacing:-.02em;color:var(--tx)}
 #siteFooter .ft-logo span{color:var(--acc);margin-left:6px;font-weight:500}
 #siteFooter .ft-tag{margin:8px 0 0;font-size:12px;line-height:18px;color:var(--mut)}
 #siteFooter .ft-cols{flex:2 1 560px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
 #siteFooter .ft-h{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--tx);margin-bottom:8px}
 #siteFooter .ft-l{display:block;width:100%;text-align:left;background:none;border:none;padding:4px 0;cursor:pointer;font-size:12px;color:var(--mut);transition:color .12s}
 #siteFooter .ft-l:hover{color:var(--acc)}
 #siteFooter .ft-bottom{max-width:none;margin:0;padding:10px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
 #siteFooter .ft-copy,#siteFooter .ft-meta{font-size:12.5px;color:var(--mut2)}
 #siteFooter .ft-meta{display:flex;align-items:center;gap:8px}
 #siteFooter .ft-dot{opacity:.6}
 html.dc-hand #siteFooter{margin-top:28px}html.dc-hand #siteFooter .ft-in{padding:34px 16px 26px;gap:30px}html.dc-hand #siteFooter .ft-cols{flex-basis:100%;grid-template-columns:1fr 1fr;gap:22px}html.dc-hand #siteFooter .ft-bottom{padding:18px 16px 26px;flex-direction:column;align-items:flex-start;gap:8px}
 body.hastab #siteFooter{margin-bottom:76px}
 #side{width:244px;min-width:244px;border-right:1px solid var(--line);padding:16px 12px;background:var(--card)}
 #app{flex:1;min-width:0;padding:24px 30px;max-width:none}
 .sideitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;color:var(--mut);
 border:none;border-radius:8px;padding:10px 13px;margin:1px 0;cursor:pointer;font-size:14px;font-weight:500}
 .sideitem:hover{background:var(--card2);color:var(--tx)}
 .sideitem.on{background:var(--acc-soft);color:var(--acc);font-weight:600;box-shadow:inset 3px 0 0 var(--acc)}
 /* Единый компонент-счётчик Detailing City OS (капсула-pill, не браузерный кружок).
    Один на всю систему: Мои задачи, Заявки, Уведомления, Чат. Фиолетовый = обычный счётчик,
    красный (.urgent) — ТОЛЬКО просроченное/критическое. */
 .dc-count{margin-left:auto;flex:0 0 auto;min-width:24px;height:22px;padding:0 8px;
   display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;
   font-size:12.5px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;
   background:var(--acc-soft);color:var(--acc)}
 .dc-count.urgent{background:var(--red-soft);color:var(--red)}
 .sidesec{font-size:11px;color:var(--mut2);text-transform:uppercase;letter-spacing:.06em;
 font-weight:500;padding:16px 13px 5px;cursor:pointer;user-select:none}
 .sidesec:hover{color:var(--mut)}
 html.dc-hand header{padding:12px 16px;gap:8px}html.dc-hand .sub{display:none}html.dc-hand .menutgl{display:inline-flex}html.dc-hand .shell{flex-direction:column;min-height:auto}html.dc-hand #side{position:fixed;top:0;left:0;bottom:0;width:82vw;max-width:300px;min-width:0;z-index:5000;background:var(--card);
    border-right:1px solid var(--line);padding:16px 12px;overflow:auto;display:block;transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:var(--shf)}html.dc-hand #side.open{transform:none}html.dc-hand .sidebackdrop{position:fixed;inset:0;background:rgba(16,24,40,.4);z-index:4900;opacity:0;pointer-events:none;transition:opacity .26s}html.dc-hand .sidebackdrop.on{opacity:1;pointer-events:auto}html.dc-hand .sideitem{width:auto}html.dc-hand .dash{grid-template-columns:1fr;gap:14px}html.dc-hand .grid{grid-template-columns:1fr 1fr;gap:10px}/* Нижний лист: при центрировании flex обрезает ВЕРХ высокого окна вместе с крестиком —
     он уезжал под шапку (Халякин 02.08). Прижимаем к низу и разрешаем прокрутку фона. */html.dc-hand .modal-bg{align-items:flex-end;padding:0;overflow-y:auto}html.dc-hand .modal{width:100%;max-width:100%;max-height:92vh;border-radius:14px 18px 0 0;}/* iOS: vh не учитывает адресную строку Safari — окно выше видимой области и верх с
     крестиком уезжает под панель (Халякин 02.08). dvh считает по видимой части.
     Строка с vh выше — фолбэк для браузеров без поддержки dvh. */html.dc-hand .modal{max-height:92dvh}html.dc-hand .modal-bg{max-height:100dvh}html.dc-hand table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}html.dc-hand h2{font-size:23px}html.dc-hand header img{height:17px}html.dc-hand #who{display:none}html.dc-hand #impBar{padding:4px 10px!important;font-size:11px!important;gap:8px!important}html.dc-hand .wizwrap{flex-direction:column;gap:12px}html.dc-hand .wizard{max-width:none;border-radius:14px}html.dc-hand .wizard .fld, html.dc-hand .modal .fld{font-size:16px;padding:12px 14px}/* «Далее» встаёт над панелью: 64px + safe-area до её верха, плюс воздух. */html.dc-hand .wzfoot{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom));background:var(--card);padding:10px 0 4px;margin-top:16px}html.dc-hand .wzprimary{flex:1;}html.dc-hand .fld{max-width:100%!important;width:100%;box-sizing:border-box}html.dc-hand .kv2{grid-template-columns:1fr}html.dc-hand #app{padding:18px 16px}html.dc-hand .mhcard{margin-bottom:14px;border-radius:14px}html.dc-hand .mbk{margin-bottom:12px}html.dc-hand .panel{margin-bottom:16px}html.dc-hand .mhcard, html.dc-hand .mbk, html.dc-hand .panel{animation:scrin .3s cubic-bezier(.2,.7,.2,1) both}html.dc-hand .mhcard:nth-child(2), html.dc-hand .mbk:nth-child(2){animation-delay:40ms}html.dc-hand .mhcard:nth-child(3), html.dc-hand .mbk:nth-child(3){animation-delay:80ms}html.dc-hand .mhcard:nth-child(4), html.dc-hand .mbk:nth-child(4){animation-delay:120ms}html.dc-hand .mhcard:active, html.dc-hand .mbk:active, html.dc-hand .chip:active, html.dc-hand .docobj:active{transform:scale(.977);transition:transform .1s}html.dc-hand .tb:active, html.dc-hand .act:active{transform:scale(.96)}
 @keyframes scrin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
 #tabbar{display:none}
 /* ПЛАВАЮЩАЯ КАПСУЛА (ТЗ Рустама 26.08, форма — панель Телефона в iOS, цвета наши).
     Была плоская полоса во всю ширину, приклеенная к краю. Правила высоты и отступов
     держим ЗДЕСЬ и только здесь: раньше их дублировали ещё два блока ниже по файлу,
     и «правка» в одном месте не доходила до экрана. Геометрия одной строкой:
     кнопка 44 + отбивки 6+6 = капсула 56px, снизу 8px + safe-area → верх панели
     на 64px + safe-area от низа экрана. Отсюда три числа ниже. */html.dc-hand #tabbar{
    position:fixed; z-index:950;
    left:calc(14px + env(safe-area-inset-left));
    right:calc(14px + env(safe-area-inset-right));
    bottom:calc(8px + env(safe-area-inset-bottom));
    display:flex; align-items:stretch; justify-content:space-around; gap:2px; padding:6px;
    background:var(--card); border:1px solid var(--line); border-radius:999px;
    box-shadow:0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.05);
  }/* Стекло — только там, где браузер его умеет. Иначе панель остаётся плотной:
     полупрозрачный фон без размытия — это дыра, сквозь неё читается лента. */@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){html.dc-hand #tabbar{ background:var(--glass);
             -webkit-backdrop-filter:saturate(180%) blur(20px);
             backdrop-filter:saturate(180%) blur(20px); }}html.dc-hand #tabbar.off{display:none}/* Ширина по содержимому, а не поровну: подложка активного пункта должна облегать
     иконку с подписью, как в iOS. При flex:1 она растягивалась на треть панели и
     превращалась в блямбу. Равномерность даёт space-around. */html.dc-hand #tabbar button{flex:0 1 auto; min-width:0; background:none;border:none;color:var(--mut);
   font-size:10.5px;font-weight:500;display:flex;flex-direction:column;align-items:center;
   justify-content:center;gap:3px;padding:4px clamp(9px, 3.2vw, 18px);border-radius:999px;
   cursor:pointer;transition:background .16s,color .16s}/* Активный — светлая капсула-подложка, как Recents в iOS: состояние видно формой,
     а не только цветом. Индиго остаётся, но он тут не единственный признак. */html.dc-hand #tabbar button.on{color:var(--acc);background:var(--card2)}html.dc-hand #tabbar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html.dc-hand #tabbar .tbfab{width:50px;height:50px;border-radius:50%;background:var(--acc);color:var(--on-acc);margin-top:-26px;
   box-shadow:0 1px 3px rgba(0,55,112,.08);font-size:27px;font-weight:300;justify-content:center;flex-direction:row;padding:0}/* ⛔ ОДНО ПРАВИЛО НА ВСЕ ЭКРАНЫ (Рустам 24.09.2026: «почему за нижней панелью скрывается?
   все экраны посмотри, чтобы такого бага не было»). Высоту панели меряет seller.js и
   кладёт в --m-tabh: числа 78 и 66 были списаны с прежней панели-капсулы, а нынешняя
   со значком и подписью выше — последняя строка любого экрана уезжала под неё. */
html.dc-hand body.hastab #app{padding-bottom:calc(var(--m-tabh, 84px) + 16px + env(safe-area-inset-bottom))}html.dc-hand body.hastab .fab{bottom:calc(74px + env(safe-area-inset-bottom))}
 .mhcard{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:16px 18px;margin-bottom:12px}
 .mbk{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--bar,var(--mut2));border-radius:14px;
  padding:13px 15px;margin-bottom:10px;box-shadow:var(--sh);cursor:pointer}
 .mbk:active{transform:scale(.985)}
 .fab{position:fixed;right:18px;bottom:22px;width:56px;height:56px;border-radius:50%;background:var(--acc);color:var(--on-acc);
  border:none;font-size:27px;font-weight:400;line-height:1;cursor:pointer;z-index:900;
  box-shadow:0 1px 3px rgba(0,55,112,.08);display:flex;align-items:center;justify-content:center}
 .fab:active{transform:scale(.94)}
 .dash{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-top:20px}
 @media(max-width:980px){ .dash{grid-template-columns:1fr} }
 .col{display:flex;flex-direction:column;gap:18px}
 .panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--sh)}
 .ph{font-size:12.5px;color:var(--mut);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
 .lnk{color:var(--acc);cursor:pointer;font-size:13.5px;font-weight:500} .lnk:hover{text-decoration:underline}
 /* Строка списка с галочкой (фильтры обзора записей) — подсветка при наведении, чтобы
    было видно, куда попадёшь. */
 .bkr-opt:hover{background:var(--card2)}
 /* ═══ МОИ НАСТРОЙКИ. Раскладка как в настройках Stripe: секция с иконкой в кружке,
    внутри строки «метка — значение — действие», разделённые волосяной линией. ═══ */
 .my-sec{background:var(--card);border:1px solid var(--line);border-radius:12px;
   box-shadow:var(--card-sh);margin-top:14px;overflow:hidden}
 .my-h{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line)}
 .my-ic{width:32px;height:32px;flex:0 0 32px;border-radius:8px;background:var(--acc-soft);
   color:var(--acc);display:flex;align-items:center;justify-content:center}
 .my-ic svg{width:17px;height:17px;display:block}
 .my-ht{font-size:14px;font-weight:500}
 .my-hs{font-size:12.5px;color:var(--mut);margin-top:1px}
 .my-r{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line)}
 .my-sec .my-r:last-child{border-bottom:none}
 .my-k{flex:0 0 190px;font-size:13.5px;color:var(--mut)}
 .my-v{flex:1;min-width:0;font-size:14px;font-variant-numeric:tabular-nums}
 .my-v .my-note{display:block;font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.45}
 .my-a{flex:0 0 auto}
 .my-row-form{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:14px 18px}
 .my-danger{color:var(--red);cursor:pointer;font-size:13.5px}
 .my-danger:hover{text-decoration:underline}
 @media (max-width:640px){
   .my-r{flex-direction:column;align-items:flex-start;gap:4px}
   .my-k{flex:none}
 }
 .chip{display:inline-block;padding:6px 13px;border-radius:14px;font-size:13.5px;font-weight:500;cursor:pointer;
 background:var(--card);border:1px solid var(--line);color:var(--mut);margin:0 6px 8px 0}
 .chip:hover{background:var(--card2)}
 .chip.on{background:var(--acc-soft);border-color:transparent;color:var(--acc)}
 .mdgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
 @media(max-width:900px){ .mdgrid{grid-template-columns:1fr} }
 .stickyp{position:sticky;top:16px}
 .sec{margin-top:18px}
 /* Сворачиваемые секции карточки: клик по заголовку → свернуть/развернуть (ТЗ Рустама из демо продавцам) */
 .panel.sec>.ph:first-child{cursor:pointer;user-select:none}
 .panel.sec>.ph:first-child::before{content:'▾';font-size:10.5px;color:var(--mut);margin-right:7px;display:inline-block;vertical-align:middle}
 .panel.sec.clps>.ph:first-child::before{content:'▸'}
 .panel.sec.clps>.ph:first-child{margin-bottom:0}
 .panel.sec.clps>.ph:first-child ~ *{display:none!important}
 .kv2{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
 @media(max-width:1000px){ .kv2{grid-template-columns:1fr} }
 .kvrow{display:grid;grid-template-columns:128px 1fr;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px;overflow-wrap:break-word;word-break:normal}
 .kvrow>span:last-child{min-width:0}
 .kvrow .kk{color:var(--mut)}
 .docgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
 .doctile{display:flex;align-items:center;justify-content:space-between;gap:10px;
 background:var(--card2);border-radius:8px;padding:13px 15px;font-size:14px}
 .doctile.miss{opacity:.55}
 .docobj{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--card2);border-radius:8px;padding:12px 15px;margin-bottom:8px}
 .docobj.miss{background:transparent;border:1px dashed var(--line)}
 .dz{border:1px dashed var(--line);border-radius:12px;padding:22px 16px;text-align:center;cursor:pointer;transition:.15s;background:var(--card)}
 .dz:hover,.dz.over{border-color:var(--acc);background:var(--acc-soft)}
 .dz .dzt{font-size:14px}.dz .dzt b{color:var(--acc);font-weight:500}
 .dz .dzh{font-size:12.5px;color:var(--mut);margin-top:6px}
 .dz .dzf{font-size:13.5px;color:var(--grn);margin-top:8px;min-height:16px}
 .tkrow{display:flex;align-items:center;gap:14px;padding:15px 16px;border-bottom:1px solid var(--line);cursor:pointer;flex-wrap:wrap}
 .tkrow:hover{background:var(--card2)}
 .tkday{background:var(--card2);padding:8px 16px;font-size:12.5px;font-weight:500;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;border-radius:8px;margin:16px 0 0}
 .nbell{position:relative;background:none;border:none;cursor:pointer;padding:6px;margin-left:auto;line-height:0;color:var(--mut);border-radius:8px;transition:.15s}
 .nbell:hover{color:var(--acc);background:var(--acc-soft)}
 .nbell svg,.nbell lord-icon{display:block}
 .nbell.has{color:var(--acc)}
 .nbell.has svg,.nbell.has lord-icon{transform-origin:50% 3px;animation:bellring 2.4s ease-in-out infinite}
 @keyframes bellring{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(11deg)}92%{transform:rotate(-9deg)}94%{transform:rotate(7deg)}96%{transform:rotate(-5deg)}98%{transform:rotate(2deg)}}
 .nbadge{position:absolute;top:-2px;right:-2px;background:var(--red);color:var(--on-acc);font-size:10.5px;font-weight:600;min-width:16px;height:16px;border-radius:8px;display:none;align-items:center;justify-content:center;padding:0 4px}
 .notifdrop{position:fixed;z-index:3000;width:340px;max-width:92vw;max-height:70vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shf)}
 .ndday{padding:8px 16px;font-size:12.5px;color:var(--mut);background:var(--card2);position:sticky;top:0}
 .nditem{padding:11px 16px;border-bottom:1px solid var(--line);font-size:14px}
 .nditem.unread,.nditem.read{display:flex;gap:10px;align-items:flex-start;cursor:pointer;transition:background .15s}
 .nditem .nddot{width:8px;height:8px;border-radius:50%;background:var(--acc);flex-shrink:0;margin-top:5px;transition:opacity .15s}
 .nditem .ndbody{flex:1;min-width:0}
 .nditem.read{background:var(--card2)}
 .nditem.read .nddot{opacity:0}
 .nditem.read .ndbody{color:var(--mut)}
 .nditem.unread .ndbody>div:first-child{font-weight:500;color:var(--tx)}
 .nditem.unread:hover,.nditem.read:hover{background:var(--acc-soft)}
 .ndhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px 9px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}
 .ndhead b{font-size:14px} .ndhead button{background:none;border:none;color:var(--acc);cursor:pointer;font-size:12.5px;font-weight:500;padding:4px 6px;border-radius:6px}
 .ndhead button:hover{background:var(--acc-soft)}
 .ndfoot{padding:10px 16px;text-align:center}.ndfoot a{color:var(--acc);cursor:pointer;font-size:14px}
 .wz-desk{margin-top:12px;height:calc(100vh - 200px);min-height:420px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
 .wz-desk iframe{display:block;width:100%;height:100%;border:0;background:var(--card)}
 .wz-desk-state{padding:48px 24px;color:var(--mut);font-size:14px;text-align:center}
 .nw-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:12px 0;max-width:720px}
 .nw-card img,.nw-card video{display:block;width:100%;max-height:320px;object-fit:cover;background:var(--card2)}
 .nw-card .nw-tx{padding:16px 18px 18px} .nw-card .nw-fig{margin:16px 0 0}.nw-card .nw-fig img{max-height:none;object-fit:contain;border-radius:12px}.nw-card .nw-fig figcaption{font-size:12.5px;margin-top:8px}
 .nw-card .nw-k{font-size:12.5px;font-weight:500;color:var(--acc);margin-bottom:4px}
 .nw-card .nw-t{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
 .nw-card .nw-d{font-size:12.5px;color:var(--mut);margin-top:4px}
 .nw-card .nw-h{font-size:16px;font-weight:600;margin:14px 0 6px}
 .nw-card .nw-p{font-size:14px;line-height:1.55;margin:0 0 8px}
 .nw-card .nw-ul{margin:0 0 10px 18px;padding:0;font-size:14px;line-height:1.5}
 .nt-row{cursor:pointer}
 .nt-row:hover{background:var(--acc-soft)}
 /* Масштаб доски и журнала («лупа», запрос Чагиной 27.07): уменьшил — влезает больше колонок/этапов.
    Значение хранится в браузере оператора, применяется к доске и к колонкам городов журнала. */

 /* Поиск партнёров: тот же список и карточка из утверждённого макета. */
 .pm-work{display:block}.pm-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.pm-head h2{font-size:22px;margin:0 0 4px}.pm-head .fld{min-width:180px}.pm-layout{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:16px;align-items:start}.pm-list,.pm-detail{overflow:hidden}.pm-filters{display:flex;overflow-x:auto;gap:8px;padding:16px}.pm-search{padding:0 16px 12px}.pm-search .fld{width:100%}#pmCount{padding:0 16px 10px;font-size:12px}.pm-row{width:100%;text-align:left}.pm-row.on{background:var(--acc-soft)}.pm-row .ui-row-b{min-width:0}.pm-row .ui-row-s{overflow-wrap:anywhere}.pm-card-h,.pm-history{padding:20px 24px}.pm-card-h{border-bottom:1px solid var(--line)}.pm-card-h h2{margin:8px 0;font-size:22px}.pm-tags,.pm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.pm-msg{min-height:20px;margin-top:8px}.pm-sections{display:grid;grid-template-columns:1fr 1fr}.pm-sections>div{padding:20px 24px;border-bottom:1px solid var(--line)}.pm-sections>div:first-child{border-right:1px solid var(--line)}.pm-sections h3,.pm-history h3,.pm-edit h3{font-size:16px;margin:0 0 12px}.pm-fact{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line)}.pm-fact span{color:var(--mut)}.pm-fact strong{text-align:right;font-weight:500;overflow-wrap:anywhere}.pm-media{display:flex;gap:8px;overflow:auto;margin-top:12px}.pm-media img,.pm-media video{height:100px;max-width:150px;border-radius:14px}.pm-event{padding:12px 0;border-top:1px solid var(--line)}.pm-event small{display:block;color:var(--mut);margin-top:4px}.pm-edit{padding:0 24px 24px}.pm-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.pm-form label{display:block;font-size:14px}.pm-form .fld{display:block;width:100%;margin-top:6px}.pm-form .wide{grid-column:1/-1}
 .kbboard{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start;zoom:var(--dczoom-board,1)}
 /* ── ЛЕНТА ГОРОДОВ. Масштаб (zoom) отсюда убран: он был обходом кривой раскладки —
    восемь городов «влезали» за счёт 80%, и карточки становились нечитаемыми. По канону
    (docs/DESIGN_SYSTEM.md) журнал — колонки фиксированной ширины с прокруткой вбок:
    видно 1–3 города, остальные листаются. */
 #bkCitiesScroll{scroll-snap-type:x mandatory;scroll-padding-left:2px;zoom:var(--dczoom-journal,1)}
 .bkcity{flex:0 0 380px;width:380px;min-width:380px;box-sizing:border-box;
   scroll-snap-align:start;overflow:hidden}
 @media (max-width:900px){ .bkcity{flex:0 0 320px;width:320px;min-width:320px} }
 /* Карточка живёт внутри колонки и не может её распирать. */
 #bkCitiesScroll .qrow{min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}
 /* ряд слота: время слева + столбец карточек. Без min-width:0 столбец не может стать
    уже содержимого и распирает колонку — из-за этого карточка «торчала» наружу. */
 #bkCitiesScroll .bkslot,#bkCitiesScroll .bkslot>div{min-width:0}
 #bkCitiesScroll .qrow .subline{min-width:0;overflow:hidden}
 /* Ряд отметок на карточке: сетка равных кнопок вместо flex-wrap. Раньше кнопки
    разъезжались по строке как попало («Отменил» ещё и другого размера) — Рустам 25.08. */
 /* Метка «Не пришёл/Отменён» рядом с именем нужна только на узком экране, где колонка
    «Статус» уехала за правый край. На широком она дублировала эту колонку и ломала строку:
    у одних записей вставала в строку с именем, у других переносом (Рустам 25.08). */
 @media (min-width:1000px){ .bkr-deadmark{display:none} }
 /* Раскладка строки журнала на телефоне задана блоком мобильного кабинета продавца
    в конце этого <style> (хендофф 26.08): строка 56px, отметки в ленте скрыты —
    они в карточке. Прежние правила отсюда убраны, чтобы не было двух правд. */
 .bk-wide{display:inline-flex}
 html.dc-hand .bk-wide{display:none}
 .bk-narrow{display:none}
 html.dc-hand .bk-narrow{display:block}
 .bkcitybar{display:flex;gap:7px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
 .bkseccap{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin:16px 2px 8px}
 /* Кнопка звонка в строке журнала — только на телефоне (хендофф: цель 44×44 под палец).
    На компьютере звонят из карточки, в ленте она лишняя. */
 .q-call{display:none}
 /* Была position:absolute — кнопка ложилась поверх статуса и закрывала «Подтвердил»
    (скрин Рустама 26.08). Теперь это обычный элемент строки: место под неё выделяет flex. */
 html.dc-hand .q-call{display:inline-flex;position:static;transform:none;flex:0 0 auto}
 /* Карточка записи: одна структура на оба экрана (ТЗ хендоффа 26.08).
    На компьютере она блочная и показывает всё — как было до перевёрстки;
    на телефоне мобильный блок в конце <style> складывает её в строку 56px. */
 .qrow{padding:11px 13px}
 .qrow .q-time{font-size:14px;font-weight:600;color:var(--tx);min-width:56px;display:inline-block;
   font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:4px}
 .qrow .q-name{font-weight:600;font-size:13.5px;color:var(--tx);line-height:1.35;min-width:0;
   display:flex;align-items:center;gap:6px;flex-wrap:wrap}
 .qrow .q-sub{min-width:0}
 /* ФИО оператора в строке: на узкой колонке города режем многоточием, на телефоне —
    переносим (там ширины хватает, а обрезанная фамилия ничего не говорит). */
 .bk-opname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .qrow .q-chip{display:block;margin-top:9px}
 .bkacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px;min-width:0}
 .bkacts>button{width:100%;box-sizing:border-box;text-align:center;overflow:hidden;text-overflow:ellipsis}
 /* Ряд отметок держим скрытым: в ячейке он съедал больше места, чем сама запись (Рустам 25.08).
    Отметить «Пришёл» по-прежнему можно не открывая карточку — кнопки выезжают при наведении.
    На тач-устройствах наведения нет, там оставляем как было — иначе отметить будет нечем. */
 @media (hover:hover){
   .bkcity .qrow .bkacts{display:none}
   .bkcity .qrow:hover .bkacts{display:grid}
 }
 #bkCitiesScroll .qrow .subline>a{overflow:hidden;text-overflow:ellipsis}
 .citiestbl{zoom:var(--dczoom-cities,1);overflow-x:auto}   /* лупа в разделе «Города» (Александра 28.07) */
 /* Колонка «Первичный контакт»: строка города. Была на flex-wrap — у одних городов кнопка
    «Распределить» вставала справа, у других сваливалась вниз, счётчик гулял по строке
    (Рустам 25.08: «сделай нормально»). Теперь жёсткая сетка: стрелка · город · счётчик · глаз,
    кнопка раздачи — отдельной строкой во всю ширину, одинаково у всех городов. */
 .distcity{border:1px solid var(--line);border-radius:12px;padding:6px;background:var(--card)}
 .distcity-h{display:grid;grid-template-columns:12px 1fr auto 22px;align-items:center;gap:7px;
   cursor:pointer;user-select:none;padding:2px 2px 2px 0;min-width:0}
 .distcity-h .dc-arrow{font-size:10.5px;color:var(--mut2);line-height:1}
 .distcity-h .dc-name{font-weight:600;font-size:13.5px;color:var(--tx);min-width:0;
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .distcity-h .dc-count{font-size:12.5px;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums}
 .distcity-h .dc-eye{border:none;background:transparent;color:var(--mut2);cursor:pointer;padding:0;
   line-height:0;opacity:0;transition:opacity .12s}
 .distcity:hover .dc-eye,.distcity-h:focus-within .dc-eye{opacity:1}
 .dc-share{display:block;width:100%;margin-top:6px;border:1px solid var(--acc);background:var(--acc-soft);
   color:var(--acc);font-size:11px;font-weight:600;border-radius:8px;padding:5px 10px;cursor:pointer}
 .dc-share:hover{background:var(--acc);color:var(--on-acc)}
 @media (hover:none){ .distcity-h .dc-eye{opacity:.7} }
 .dczoom{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:2px}
 .dczoom button{border:none;background:none;cursor:pointer;color:var(--tx);font-size:14px;font-weight:600;padding:3px 9px;border-radius:8px;line-height:1}
 .dczoom button:hover{background:var(--card2)}
 .dczoom span{font-size:11px;color:var(--mut);min-width:34px;text-align:center}
 .kbcol{flex:1 1 188px;min-width:176px;max-width:none;background:var(--card2);border-radius:14px;padding:8px;transition:.12s}
 .kbcol.drop{outline:2px dashed var(--acc);outline-offset:-2px}
 .kbcolh{font-size:13.5px;font-weight:500;color:var(--tx);padding:6px 8px 10px;display:flex;justify-content:space-between;align-items:center}
 .kbcolh .cnt{background:var(--card);color:var(--mut);border-radius:14px;padding:1px 8px;font-size:12.5px}
 .kbdrop{min-height:40px}
 .kbcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px;cursor:grab;box-shadow:0 1px 3px rgba(0,55,112,.08);min-height:76px;display:flex;flex-direction:column;justify-content:center}
 .kbcard:hover{border-color:var(--acc)}
 .kbcard.drag{opacity:.4}
 .kbcard .nm{font-weight:500;font-size:13.5px;line-height:1.35}
 .kbmini{background:none;border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:12.5px;cursor:pointer;color:var(--mut)}
 .kbmini:hover{border-color:var(--acc);color:var(--acc)}
 .kbmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:5px 0}
 .kbtag{font-size:11px;color:var(--mut);background:var(--card2);border-radius:14px;padding:1px 7px;white-space:nowrap}
 .kbaddr{font-size:12.5px;color:var(--mut);margin-top:2px;line-height:1.35}
 .kbnote{font-size:12.5px;color:var(--mut);margin-top:6px;border-top:1px dashed var(--line);padding-top:5px}
 .kbname{font-weight:600;font-size:13.5px;color:var(--tx);line-height:1.35;white-space:normal;overflow-wrap:break-word}
 .kbdate{font-size:11px;color:var(--mut2);white-space:nowrap;flex:0 0 auto}
 .kbspec{display:inline-block;font-size:10.5px;font-weight:500;color:var(--acc);background:var(--acc-soft);border-radius:6px;padding:1px 7px}
 .kbnext{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;margin-top:7px;line-height:1.35}
 .kbnext svg{flex:0 0 auto}
 .kbcard.danger{border-left:3px solid var(--red)}
 .kbcard.ok{border-left:3px solid var(--grn)}
 .kbchip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--mut)}
 .kbchip .d{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
 .archbadge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:500;color:var(--mut);background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;vertical-align:1px;white-space:nowrap}
 .livebadge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:500;color:var(--grn);background:var(--grn-soft);border-radius:6px;padding:1px 7px;vertical-align:1px;white-space:nowrap}
 .golive-div{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--acc);font-size:12.5px;font-weight:600}
 .golive-div::before,.golive-div::after{content:'';height:1px;background:var(--acc);opacity:.35;flex:1}
 .arch-band{display:flex;align-items:center;gap:7px;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:7px 11px;margin:8px 0 6px;font-size:12.5px;color:var(--mut);font-weight:500}
 .lifeseg{display:inline-flex;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
 /* Компактный выпадающий выбор с поиском. Нативный <select> раскрывает ВСЕ пункты на весь
    экран (24 города простынёй) — его высоту нельзя ограничить css. Этот — можно. */
 /* Детейлинги: свёрнутый город — компактная строка; раскрытый — отдельная «поверхность»
    с тенью, акцентной полосой и БОЛЬШИМ отступом снизу, чтобы не сливался со следующим. */
 .dtcity{margin:0 0 5px;transition:margin .15s,box-shadow .15s}
 .dtcity[open]{margin:6px 0 26px;box-shadow:0 8px 24px rgba(0,55,112,.08),0 2px 6px rgba(0,55,112,.04);border-left:3px solid var(--acc)}
 .dtcity[open]>summary{background:var(--card2);border-bottom:1px solid var(--line)}
 .dtcity[open]>summary>span:nth-child(2){color:var(--acc)}
 .lifeseg button{border:none;background:none;color:var(--mut);font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:8px;cursor:pointer;transition:.12s}
 .lifeseg button:hover{color:var(--tx)}
 .lifeseg button.on{background:var(--card);color:var(--acc);box-shadow:0 1px 3px rgba(0,55,112,.08)}
 .pcardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:4px}
 .pcardsec{border-top:1px solid var(--line);padding:13px 0}
 .pcardsec:last-of-type{padding-bottom:4px}
 .pcardlbl{font-size:12.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
 .bankhead{background:var(--card);border:1px solid var(--line);color:var(--tx);border-radius:14px;padding:22px 24px;margin-bottom:16px;max-width:none;box-shadow:var(--sh)}
 .bankbal{font-size:27px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--tx)}
 .avwrap{position:relative;width:84px;height:84px;flex:0 0 auto;cursor:pointer}
 .avwrap img,.avwrap .avph{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 1px 3px rgba(0,55,112,.08)}
 .avph{background:var(--acc-soft);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:600}
 .avcam{position:absolute;inset:0;border-radius:50%;background:rgba(16,24,40,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s}
 .avwrap:hover .avcam{opacity:1}
 .banksub{color:var(--mut);font-size:13.5px;margin-top:4px}
 .bankmeta{display:flex;gap:30px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
 .bankmeta .v{font-size:18px;font-weight:500;letter-spacing:-.006em;color:var(--tx)} .bankmeta .k{font-size:12.5px;color:var(--mut);margin-top:2px}
 .oprow{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line)}
 .opic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
 .opamt{margin-left:auto;font-weight:500;white-space:nowrap;font-size:14px}
 .paygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:8px}
 .paycard{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;transition:border-color .14s,background .14s}
 .paycard:hover{border-color:var(--mut2)}
 .paycard.sel{border-color:var(--acc);background:var(--acc-soft)}
 .paycard:active{transform:scale(.99)}
 .paycard .plogo{width:40px;height:40px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--card);border:1px solid var(--line)}
 .paycard .plogo svg{display:block;width:100%;height:100%}
 .paycard .plogo img{display:block;width:76%;height:76%;object-fit:contain}
 .paycard .ptitle{font-weight:500;font-size:14px;color:var(--tx);line-height:1.2}
 .paycard .psub{color:var(--mut);font-size:12.5px;margin-top:1px}
 .payhint{color:var(--mut);font-size:13.5px;margin-top:12px}
 /* Ячейка журнала — бело-воздушно под сайт (Google-календарь), статус = цвет слева, тип = пилюля в углу */
 .minical{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px;align-self:flex-start;box-shadow:var(--sh)}
 .mch{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
 .mch span{font-weight:600;font-size:14px;letter-spacing:-.006em;color:var(--tx)}
 .mch button{background:none;border:none;cursor:pointer;color:var(--mut);font-size:14px;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
 .mch button:hover{background:var(--acc-soft);color:var(--acc)}
 .mcgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
 .mcwd{font-size:10.5px;color:var(--mut2);text-align:center;padding:2px 0 7px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
 .mcd{text-align:center;height:32px;line-height:32px;font-size:13.5px;border-radius:8px;cursor:pointer;color:var(--tx);transition:background .1s,color .1s}
 .mcd:hover{background:var(--acc-soft);color:var(--acc)}
 .mcd.oth{color:var(--mut2);pointer-events:none}
 .mcd.today{color:var(--acc);font-weight:600;box-shadow:inset 0 0 0 1.5px var(--acc-soft)}
 .mcd.sel,.mcd.sel:hover{background:var(--acc);color:var(--on-acc);font-weight:600;box-shadow:none}
 .mcd.has::after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--acc);margin:2px auto -4px}
 /* Карточка = полноценное рабочее пространство: широкий слайд-овер ~46% с затемнением журнала (ТЗ Рустама). */
 .bkside-bg{position:fixed;inset:0;background:rgba(16,24,40,.42);z-index:4290;opacity:0;pointer-events:none;transition:opacity .22s;backdrop-filter:saturate(1) blur(1px)}
 .bkside-bg.on{opacity:1;pointer-events:auto}
 /* Карточка записи/лида — по центру (как YClients), а не боковой панелью (ТЗ Рустама, presentation only). */
 /* Карточка кандидата — главное рабочее окно, а не боковая панелька: 700px не хватало даже
    на телефон в одну строку. Ширина по экрану, потолок — чтобы на больших мониторах
    строка истории не растягивалась до нечитаемой длины. */
 /* по умолчанию — узкое окно (карточка записи/ученика одноколоночная). Широким становится
    ТОЛЬКО когда внутри двухколоночная карточка лида (.lcgrid: слева данные, справа история). */
 .bkside{position:fixed;top:50%;left:50%;width:min(760px,92vw);max-width:calc(100vw - 32px);max-height:90vh;height:auto;background:var(--card);border-radius:14px;box-shadow:0 15px 45px rgba(13,37,61,.18);z-index:4300;transform:translate(-50%,-50%) scale(.98);opacity:0;visibility:hidden;transition:transform .2s cubic-bezier(.2,.7,.2,1),opacity .2s;display:flex;flex-direction:column;overflow:auto}
 /* карточка лида: левая панель ~340 + лента переписки ~760 = ~1150px. Шире не нужно —
    лента-чат не растягивается на весь экран (иначе звонки слева, сообщения справа, пустота между). */
 .bkside:has(.lcgrid){width:min(1150px,94vw)}
 .bkside.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}
 /* 100dvh, а не 100vh: адресная строка Safari забирает часть vh, и низ карточки —
    вместе с кнопками — уезжал под неё (хендофф 26.08, шаг 3). */
/* ⛔ КАРТОЧКА ВЫЕЗЖАЕТ СПРАВА, КАК ЭКРАН (Рустам 26.09.2026, видео Bybit: «нажимаешь на
   монетку, и экран как будто справа налево выдвигается, и назад кнопка — убери эту
   историю со шторкой телеграммовской»). До этого пробовали лист-шторку с отступом
   сверху — не то: человек ждёт перехода на экран человека, а не окошка поверх списка.
   Теперь на телефоне карточка — полноэкранный слой, который въезжает справа за 0,22 с,
   с кнопкой «назад» слева в шапке. Прокрутка живёт ВНУТРИ карточки: шапка стоит,
   содержимое едет, и в конце списка движение не передаётся экрану под ним. */
 html.dc-hand .bkside{width:100vw;left:0;top:0;height:100dvh;max-height:none;
   border-radius:0;box-shadow:none;opacity:1;visibility:visible;
   display:flex;flex-direction:column;
   transform:translateX(100%);transition:transform .22s ease-out}
 html.dc-hand .bkside.open{transform:translateX(0)}
 @media (prefers-reduced-motion: reduce){ html.dc-hand .bkside{transition:none} }
 html.dc-hand .bkside .bksideh{flex:0 0 auto;position:static;padding:12px 14px;
   background:var(--card);border-bottom:1px solid var(--line);align-items:center;gap:10px}
 /* Кнопка «назад» — тот же кружок, что на всех мобильных экранах (.m-back), а не своя
    квадратная: «почему где-то кнопка назад в круге, где-то в квадратном?» (Рустам 26.09).
    Класс .tb на телефоне ей НЕ даём: мобильное правило .tb{border-radius:14px} сильнее
    и превращало круг в квадрат — именно это он и увидел. */
 html.dc-hand .bkside #bsX{order:-1;flex:0 0 44px;margin:0}
/* Карточка лида как экран: шапка в один ряд с кружком-инициалами, ничего не наезжает. */
 html.dc-hand body.m-shell .m-lead-card{padding:16px 16px 100px}
 html.dc-hand body.m-shell .m-lead-card #lpHost .ohacts{display:none!important}
 /* Плитки связи — те же .m-conn-b, что в карточке записи; там это ссылки <a>, здесь часть
    плиток — <button> (звонок через АТС, окно Wazzup), и браузер рисовал им свою рамку
    «outset». Снимаем её, остальное берётся из общего стиля плитки. */
 html.dc-hand body.m-shell .m-lead-card button.m-conn-b{border:0;-webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer}
 /* Кнопки связи — одной лентой, как чипы фильтров: «MAX» не должен падать на вторую строку. */
 html.dc-hand .bkside .ohacts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 html.dc-hand .bkside .ohacts::-webkit-scrollbar{display:none}
 html.dc-hand .bkside .ohacts>*{flex:0 0 auto}
 html.dc-hand .bkside #lpHost{flex:1 1 auto;min-height:0;overflow-y:auto;
   -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
 /* Медленная связь: тонкая полоса под шапкой вместо серых блоков. */
 .bkside.lp-wait .bksideh{position:relative}
 .bkside.lp-wait .bksideh:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
   background:linear-gradient(90deg,transparent,var(--acc),transparent);
   background-size:40% 100%;background-repeat:no-repeat;animation:lpwait 1.1s linear infinite}
 @keyframes lpwait{0%{background-position:-40% 0}100%{background-position:140% 0}}
 @media (prefers-reduced-motion: reduce){ .bkside.lp-wait .bksideh:after{animation:none;background-position:50% 0} }
 @supports not (height:100dvh){ html.dc-hand .bkside{height:100vh;max-height:100vh} }
/* ⛔ У КАРТОЧКИ ДОЛЖЕН БЫТЬ ВЕРХ (Рустам 26.09.2026: «у лида не нравится, что нет верха,
   как будто он туда впритык поставлен» — с примером профиля в Telegram). Раньше имя
   начиналось прямо у кромки экрана, без воздуха и без опоры для глаза. Теперь на телефоне
   шапка карточки — спокойная подложка во всю ширину: круг с инициалами, крупное имя, под
   ним телефон и город. Дальше идут привычные белые блоки. На компьютере всё как было. */
 /* Подложку шапки убрал 26.09: в примере Bybit шапка белая, а цветная плашка спорила
    с кнопкой «назад» и мешала читать имя. Круг с инициалами и крупное имя остались. */
 html.dc-hand body.m-shell #bkSide .bksideh{align-items:center;gap:12px;padding:12px 14px}
 html.dc-hand body.m-shell #bkSide .bksideh>div:nth-child(2)>div:first-child{font-size:20px!important;line-height:1.25}
 html.dc-hand body.m-shell #bkSide .bksideh .mut{font-size:13px!important;margin-top:3px}
 html.dc-hand body.m-shell .lp-ava{display:flex;align-items:center;justify-content:center;
   width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--acc-soft);color:var(--acc);
   font-size:15px;font-weight:600;overflow:hidden;position:relative}
 html.dc-hand body.m-shell .lp-ava svg{width:22px;height:22px}
 .lp-ava{display:none}
 .bksideh{padding:18px 24px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:sticky;top:0;background:var(--card);z-index:2}
 .bksideh:not(:where(.lead-record-panel .bksideh))>div>div:first-child{font-size:23px!important;font-weight:600}
 .bksec{padding:13px 24px;border-bottom:1px solid var(--line)}
 .bkside .pcardlbl{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut2);font-weight:600;margin-bottom:10px}
 .bkside .bksec>div>div[style*="font-size:14px"]{font-size:14px!important;padding:7px 0!important}
 /* Три состояния вместо двух (Чагина 25.08: «выделяй этапы потемнее, промежуточные
    не такие яркие»). Раньше пройденный и текущий выглядели одинаково, и было не понять,
    где человек сейчас. Текущий — самый тёмный и жирный, пройденные тише, будущие бледные. */
 .bkqa{display:flex;gap:8px;flex-wrap:wrap;padding:14px 22px 28px}
 .bkqa button[disabled]{opacity:.5;cursor:default}
 .bkqa button[disabled]:hover{background:transparent;border-color:var(--line)}
 .bkqa button{flex:1 1 45%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card2);cursor:pointer;font-size:13.5px;color:var(--tx)}
 .bkqa button:hover{border-color:var(--acc);color:var(--acc)}
 .segrow{display:flex;gap:8px;flex-wrap:wrap}
 .segbtn{padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card2);cursor:pointer;font-size:13.5px;color:var(--tx);transition:.12s}
 .segbtn:hover{border-color:var(--acc)}
 .segbtn.on{background:var(--mut);color:var(--on-acc);border-color:var(--mut)}
 /* ——— единый плавающий компонент (Чат + Нашёл баг): одинаковые размер/радиус/механика ——— */
 /* тихие плавающие кнопки — единый стиль: белый круг, волосок-рамка, тонкая контурная иконка акцентом */
 .fbtn{position:fixed;z-index:2450;width:46px;height:46px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--acc);display:none;align-items:center;justify-content:center;cursor:grab;box-shadow:0 1px 3px rgba(0,55,112,.08);touch-action:none;user-select:none;transition:transform .16s cubic-bezier(.2,.7,.2,1),width .16s,height .16s,opacity .16s,box-shadow .16s}
 .fbtn.on{display:flex}
 .fbtn:hover{box-shadow:0 8px 24px rgba(0,55,112,.08),0 2px 6px rgba(0,55,112,.04)}
 .fbtn.dragging{cursor:grabbing;transition:none}
 .fbtn .fico{display:flex;align-items:center;justify-content:center;pointer-events:none}
 .fbtn.mini{width:30px;height:30px;opacity:.55}
 .fbtn.mini .fico svg{width:15px;height:15px}
 .fbtn.mini:hover{opacity:1}
 /* контролы: тонкие линии, без белых кружков, фирменный/серый, только при наведении */
 .fctl{position:absolute;top:-15px;width:16px;height:16px;color:var(--mut2);display:none;align-items:center;justify-content:center;cursor:pointer}
 .fctl svg{width:13px;height:13px;display:block}
 .fctl:hover{color:var(--acc)}
 .fbtn:hover .fctl,.fbtn.showctl .fctl{display:flex}
 .fbtn.mini .fctl{display:none!important}
 .fclose{right:3px} .fmin{right:22px}
 /* подпись при наведении — фирменная плашка слева, не браузерный tooltip */
 .flabel{position:absolute;right:56px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 12px;font-size:12.5px;font-weight:500;color:var(--tx);box-shadow:0 8px 24px rgba(0,55,112,.08),0 2px 6px rgba(0,55,112,.04);opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}
 .fbtn:hover .flabel{opacity:1;transform:translateY(-50%) translateX(0)}
 .fbtn.mini .flabel{display:none}
 .fbadge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;background:var(--red);color:var(--on-acc);border-radius:8px;font-size:10.5px;font-weight:600;display:none;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg)}
 .fbtn.mini .fbadge{display:none}
 html.dc-hand .fbtn{display:none!important}
 .hdractions{margin-left:auto;display:flex;align-items:center;gap:4px}
 .hdractions .nbell{margin-left:0}
 .hdrsearch{background:none;border:none;color:var(--mut);padding:6px;cursor:pointer;display:inline-flex;border-radius:8px;transition:.15s}
 .hdrsearch:hover{background:var(--acc-soft);color:var(--acc)}
 .hdrsep{width:1px;height:20px;background:var(--line);margin:0 4px}
 #who{font-size:13.5px;color:var(--mut);white-space:nowrap;position:relative}
 /* ═══ ПРОФИЛЬ В ШАПКЕ. Было четыре элемента в ряд — имя, роль, «Настройки входа»,
    «Выйти». Теперь одна кнопка, всё остальное в выпадающем меню, как принято. ═══ */
 .me-btn{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 5px;border:1px solid transparent;
   border-radius:8px;background:transparent;cursor:pointer;font:inherit;color:var(--tx);transition:.12s}
 .me-btn:hover{background:var(--card2);border-color:var(--line)}
 .me-ava{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--acc-soft);
   color:var(--acc);display:flex;align-items:center;justify-content:center;
   font-size:11px;font-weight:600;letter-spacing:.04em}
 .me-nm{font-size:13.5px;font-weight:500;max-width:190px;overflow:hidden;text-overflow:ellipsis}
 .me-ch{width:7px;height:7px;border-right:1.5px solid var(--mut2);border-bottom:1.5px solid var(--mut2);
   transform:rotate(45deg);margin:-3px 2px 0 0;transition:transform .14s}
 .me-btn.on .me-ch{transform:rotate(-135deg);margin-top:2px}
 .me-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:262px;z-index:120;
   background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;
   box-shadow:0 15px 45px rgba(13,37,61,.18);display:none}
 html:not(.dc-hand) .me-pop{border-radius:8px;border-color:var(--line2);box-shadow:0 12px 36px #00000024;max-width:calc(100vw - 48px)}
 html:not(.dc-hand) .me-i{font-size:13px;line-height:20px;padding:8px 12px}
 html:not(.dc-hand) .me-top b{overflow-wrap:anywhere}
 .me-chevron{display:flex;width:14px;height:14px;transition:transform .14s}
 .me-btn.on .me-chevron{transform:rotate(180deg)}
 .me-pop.on{display:block}
 .me-top{padding:12px 12px 10px;text-align:center;border-bottom:1px solid var(--line);margin-bottom:6px}
 .me-top .me-ava{width:40px;height:40px;flex:none;margin:0 auto 8px;font-size:14px}
 .me-top b{display:block;font-size:14px;font-weight:500;color:var(--tx)}
 .me-top span{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
 .me-i{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:none;
   border-radius:8px;background:transparent;cursor:pointer;font:inherit;font-size:13.5px;
   color:var(--tx);text-align:left}
 .me-i:hover{background:var(--card2)}
 .me-i svg,.me-i lord-icon{width:16px;height:16px;flex:0 0 16px;color:var(--mut);display:block}
 .me-sep{height:1px;background:var(--line);margin:6px 4px}
 html.dc-hand .hdrsep{display:none}
 html.dc-hand #ctxSwitch button{max-width:42vw;overflow:hidden;text-overflow:ellipsis}
 .gcard:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 24px rgba(0,55,112,.08),0 2px 6px rgba(0,55,112,.04);border-color:var(--acc)!important;z-index:2}
 #navBackBar{padding:8px 30px 8px calc(244px + 30px);background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:57px;z-index:40;min-height:37px}
 #crumbs{display:flex;align-items:center;gap:1px;flex-wrap:wrap;font-size:13.5px}
 #crumbs .cb{background:none;border:none;cursor:pointer;color:var(--mut);font-weight:500;padding:3px 7px;border-radius:6px;font-size:13.5px;line-height:1.2;transition:background .12s,color .12s}
 #crumbs .cb:hover{background:var(--acc-soft);color:var(--acc)}
 #crumbs .cb.cur{color:var(--tx);font-weight:500;cursor:default}
 #crumbs .cb.cur:hover{background:none;color:var(--tx)}
 #crumbs .sep{color:var(--mut2);font-size:13.5px;margin:0 1px;user-select:none}
 html.dc-hand #navBackBar{padding:7px 14px;top:50px}html.dc-hand #crumbs{font-size:12.5px}

 /* ——— мессенджер ——— */
 #chatWidget{position:fixed;right:22px;bottom:22px;z-index:2450;width:372px;height:min(560px,78vh);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shf);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;transition:transform .18s cubic-bezier(.2,.7,.2,1),opacity .18s}
 #chatWidget.off{opacity:0;transform:scale(.94) translateY(8px);pointer-events:none}
 #chatWidgetHead{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
 #cwTitle{flex:1;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #chatWidgetHead button{background:none;border:none;color:var(--mut);cursor:pointer;display:flex;padding:5px;border-radius:8px}
 #chatWidgetHead button:hover{background:var(--card2);color:var(--tx)}
 #chatWidgetBody{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .chatscroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:12px 14px 6px;background:var(--bg)}
 .chatinner{margin-top:auto;width:100%;max-width:720px;margin-left:auto;margin-right:auto}
 .cbrow{display:flex;margin:2px 0}
 .cbrow.me{justify-content:flex-end}
 .cbub{max-width:76%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}
 .cbub.me{background:var(--acc);color:var(--on-acc);border-bottom-right-radius:5px}
 .cbub.them{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px}
 .cmeta{font-size:10.5px;margin-top:2px;display:flex;gap:4px;justify-content:flex-end;align-items:center}
 .cbub.me .cmeta{color:rgba(255,255,255,.78)}
 .cbub.them .cmeta{color:var(--mut)}
 .tick{display:inline-flex;align-items:center;font-size:11px;line-height:1}
 .tick i{font-style:normal}
 .tick .t2{margin-left:-5px;opacity:0;transform:translateX(-3px);transition:opacity .28s ease,transform .28s ease}
 .tick.read .t2{opacity:1;transform:none}
 .tick.read .t1{transition:transform .28s ease}
 .cday{text-align:center;margin:12px 0 8px}
 .cday span{font-size:11px;color:var(--mut);background:var(--card2);border-radius:8px;padding:3px 10px}
 .typebar{flex:0 0 auto;height:0;overflow:hidden;padding:0 16px;font-size:12.5px;color:var(--acc);display:flex;align-items:center;gap:7px;transition:height .15s;background:var(--card)}
 .typebar.on{height:24px}
 .tdots{display:inline-flex;gap:3px}
 .tdots i{width:5px;height:5px;border-radius:50%;background:var(--acc);animation:tbl 1.2s infinite}
 .tdots i:nth-child(2){animation-delay:.2s} .tdots i:nth-child(3){animation-delay:.4s}
 @keyframes tbl{0%,60%,100%{opacity:.3}30%{opacity:1}}
 .compose{flex:0 0 auto;display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);background:var(--card)}
 .compose .cinp{flex:1;border:1px solid var(--line);outline:none;background:var(--bg);font-size:14px;color:var(--tx);border-radius:14px;padding:9px 14px}
 .compose .cinp:focus{border-color:var(--acc)}
 .compose .csend{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--acc);color:var(--on-acc);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
 .tksug{flex:0 0 auto;padding:0 12px 8px;background:var(--card)}
 .tkcard{border:1px solid var(--acc);background:var(--acc-soft);border-radius:14px;padding:11px 13px;animation:tkin .22s ease}
 @keyframes tkin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
 @keyframes soldin{0%{opacity:0;transform:translateY(4px) scale(.985)}100%{opacity:1;transform:none}}
 .soldc{animation:soldin .28s cubic-bezier(.2,.7,.2,1);transition:box-shadow .18s,transform .18s}
 .soldc:hover{transform:translateY(-1px)}
 .tkcard.ok{border-color:var(--grn);background:var(--grn-soft);color:var(--tx);font-size:13.5px;display:flex;align-items:center;gap:7px}
 .tkcard.ok svg{color:var(--grn);flex:0 0 auto} .tkcard.ok a{color:var(--acc);font-weight:500;cursor:pointer;margin-left:auto;white-space:nowrap}
 .tkc-h{display:flex;align-items:center;gap:6px;color:var(--acc);font-size:12.5px} .tkc-h b{font-weight:500} .tkc-h svg{flex:0 0 auto}
 .tkc-x{margin-left:auto;cursor:pointer;font-size:18px;line-height:1;color:var(--mut);font-weight:400}
 .tkc-t{font-size:14px;font-weight:500;color:var(--tx);margin:5px 0 2px}
 .tkc-topic{font-size:12.5px;color:var(--mut)}
 .tkc-a{display:flex;gap:8px;margin-top:9px} .tkc-a .act{padding:7px 14px;font-size:13.5px}
 .tkc-no{background:transparent;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13.5px;color:var(--mut);cursor:pointer}
 .clist{overflow-y:auto;flex:1;min-height:0}
 .cdlg{display:flex;gap:11px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
 .cdlg:hover{background:var(--card2)}
 .cav{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--acc-soft);color:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:14px}
 .cdlg .txt{flex:1;min-width:0}
 .cdlg .nm{font-weight:500;font-size:14px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
 .cdlg .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .cdlg .nm em{flex:0 0 auto;font-style:normal;font-weight:400;font-size:11px;color:var(--mut)}
 .cdlg .pv{font-size:13.5px;color:var(--mut);margin-top:1px;display:flex;justify-content:space-between;gap:8px}
 .cdlg .pv span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .cbadge{flex:0 0 auto;background:var(--acc);color:var(--on-acc);border-radius:8px;min-width:19px;height:19px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
 .chatpane{position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;z-index:60;background:var(--bg)}
 .cpanehead{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--card)}
 .cbody{flex:1;min-height:0;display:flex;flex-direction:column}
 .steps{display:flex;gap:6px;align-items:flex-start;margin:10px 0 18px}
 .step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;text-align:center;min-width:0}
 .step::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--line)}
 .step:first-child::before{display:none}
 .step.done::before,.step.current::before{background:var(--grn)}
 .step .dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;border:2px solid var(--line);background:var(--card);color:var(--mut);position:relative;z-index:1}
 .step.done .dot{background:var(--grn);border-color:var(--grn);color:var(--on-acc)}
 .step.current .dot{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
 .step.refund .dot{background:var(--red);border-color:var(--red);color:var(--on-acc)}
 .step.refund::before{background:var(--red)}
 .step .slbl{font-size:12.5px;color:var(--mut);font-weight:500;margin-top:7px;padding:0 4px}
 .step.current .slbl,.step.done .slbl{color:var(--tx)}
 .step.refund .slbl{color:var(--red)}
 .battery{display:flex;gap:5px;margin:6px 0 14px}
 .batcell{flex:1;height:16px;border-radius:6px;background:var(--card2);border:1px solid var(--line)}
 .batcell.done{background:var(--grn);border-color:var(--grn)}
 .histrow{font-size:12.5px;line-height:1.45;padding:5px 0;border-bottom:1px solid var(--line);color:var(--tx)}
 .histrow:last-child{border-bottom:none} .histrow .mut{margin-right:6px}
 .qa{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;background:var(--card2);
 color:var(--tx);text-decoration:none;font-size:13.5px;font-weight:500;cursor:pointer} .qa:hover{background:var(--line)}
 .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
 /* Этапы воронки на телефоне — горизонтальная лента переключателей (канбан не помещается) */html.dc-hand .opstages{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}html.dc-hand .opstages::-webkit-scrollbar{display:none}html.dc-hand .opstages button{flex:0 0 auto;min-height:44px;border:1px solid var(--line);background:var(--card);
    border-radius:14px;padding:8px 16px;font-size:13.5px;font-weight:500;color:var(--tx);white-space:nowrap;cursor:pointer}html.dc-hand .opstages button.on{color:var(--on-acc)}
 /* Рабочий стол / задачи / звонки оператора: десктопный тулбар на телефоне не кладём —
    шапка, лента фильтров, карточки во всю ширину. Масштаб доски на пальце не нужен. */
 html.dc-hand .dczoom{display:none!important}
 html.dc-hand .op-deskhint{display:none}
 html.dc-hand #ohHead{display:none}
 html.dc-hand .ohtiles{display:none}
 html.dc-hand .op-mhead{display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
 html.dc-hand .op-mrow{display:flex;align-items:center;gap:8px}
 html.dc-hand .op-mrow .scr-h1{flex:1;min-width:0;line-height:1.2}
 html.dc-hand .op-mcnt{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--mut);background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
 html.dc-hand .op-mnew{display:flex;gap:6px;flex:0 0 auto}
 html.dc-hand .op-mnew .tb{padding:0 12px;min-height:40px;font-size:13px}
 html.dc-hand .op-search{width:100%;max-width:none!important;min-width:0!important;flex:none!important}
 html.dc-hand .op-mrow2{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
 html.dc-hand .op-mrow2 .dcsel,html.dc-hand .op-mrow2 .fld{min-width:0;width:100%;max-width:none!important}
 html.dc-hand .op-mchips{display:flex;gap:8px;overflow-x:auto;padding:0 0 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 html.dc-hand .op-mchips::-webkit-scrollbar{display:none}
 html.dc-hand .op-fchip{flex:0 0 auto;min-height:40px}
 html.dc-hand .op-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
 html.dc-hand .op-kpi .op-kpitile{min-width:0!important}
 html.dc-hand .op-respline{font-size:12.5px!important;margin:0 0 4px!important;line-height:1.4}
 html.dc-hand .opmlist .kbcard{margin-bottom:10px;cursor:pointer;border-radius:16px;padding:14px 16px;min-height:0;box-shadow:none}
 html.dc-hand .opmlist .kbname{font-size:16px;font-weight:600}
 html.dc-hand .opmlist .kbdate .mut{display:none}
 html.dc-hand .opmlist .kbnext{font-size:13.5px;margin-top:10px}
 html.dc-hand .kbboard{flex-direction:column}
 html.dc-hand .kbcol{flex:none;width:100%;max-width:none}
 html.dc-hand .callrow{display:grid!important;grid-template-columns:22px 44px minmax(0,1fr) auto;gap:4px 8px;padding:12px 14px;align-items:center}
 html.dc-hand .callrow > span:nth-child(4),html.dc-hand .callrow > span:nth-child(6){display:none}
 html.dc-hand .callrow .callbtns{grid-column:1/-1;width:auto!important;justify-content:flex-start!important;margin-top:2px}
 html.dc-hand .callbtn{width:40px;height:40px}
 html.dc-hand .op-tstats{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:12px!important}
 html.dc-hand .op-tstats > div[style*="width:1px"]{display:none}
 html.dc-hand .grid.op-cabgrid{grid-template-columns:1fr 1fr!important}
 html.dc-hand .optask{border-radius:16px;padding:14px 16px}
 html.dc-hand .optask .nm{font-size:16px;font-weight:600}
 html.dc-hand .op-callstats{display:grid!important;grid-template-columns:1fr 1fr;gap:10px 16px}
 html.dc-hand .op-more-row{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;min-height:56px}
 html.dc-hand .op-more-ic{width:40px;height:40px;border-radius:12px;background:var(--acc-soft);color:var(--acc);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
 /* Кабинет студии (партнёр) на телефоне — адаптируем первым: партнёры работают с телефона,
    и «обучить их как своих» нельзя. Ломалось: блок выплат прибит border-left, ряды этапов
    рассыпались из-за стрелок, «Последние ученики» — таблица в три колонки. */
 html.dc-hand .pdhead{padding:16px 14px !important;gap:14px !important}html.dc-hand .pdpay{min-width:0 !important;width:100%;border-left:none !important;padding-left:0 !important;
    border-top:1px solid var(--line);padding-top:14px;margin-top:4px}html.dc-hand .pdstages{display:grid !important;grid-template-columns:1fr 1fr}html.dc-hand .pdarr{display:none !important}/* стрелки между этапами — только на широком экране */html.dc-hand .pdrecent table{display:block}html.dc-hand .pdrecent th{display:none}html.dc-hand .pdrecent tr:first-child{display:none}/* шапка не нужна: строка читается как карточка */html.dc-hand .pdrecent tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid var(--line)}html.dc-hand .pdrecent td{display:block;border:none;padding:0}html.dc-hand .pdrecent td:first-child{flex:1 1 100%}
 /* ── Мобильный каркас (Mobile First; ориентир — приложение Т-Банка) ──────────────
    Крупные тач-зоны, ничего не уезжает вбок, поля не зумят iOS, панель учитывает
    «домашнюю полоску» iPhone. Всё внутри медиа-запроса — десктоп не трогаем. *//* тач-цель минимум 44px (Apple HIG). Точечно, не на все button — иначе «крестики» тегов раздует *//* Палец попадает не точнее 44 пикселей — норма Apple и WCAG. Раньше правило знало
     четыре класса кнопок; за это время появились .ohm (связь), .ohst (этапы воронки),
     .mbtn (окна), .bknav (стрелки журнала), .qa и строки списков с галочками. */html.dc-hand .act, html.dc-hand .tb, html.dc-hand .sideitem, html.dc-hand .segbtn, html.dc-hand .lifeseg button, html.dc-hand #tabbar button, html.dc-hand .ohm, html.dc-hand .ohst, html.dc-hand .mbtn, html.dc-hand .qa, html.dc-hand .bkr-opt, html.dc-hand .me-i{min-height:44px}html.dc-hand .bknav{width:44px;height:44px}/* iOS зумит страницу при фокусе, если шрифт поля меньше 16px */html.dc-hand input, html.dc-hand select, html.dc-hand textarea, html.dc-hand .fld{font-size:16px}/* широкая таблица скроллится ВНУТРИ СЕБЯ, а не тянет вбок всю страницу */html.dc-hand #app table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}/* безопасные зоны iPhone: чёлка сверху, полоска жестов снизу.
     Панель и отступ под неё описаны выше, в блоке #tabbar — второй копии здесь нет. */html.dc-hand .modal{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
 /* Подвал «Detailing City OS · Работа · Поддержка · Правовое» — это лендинговый элемент.
    Авторизованному человеку на телефоне он съедает пол-экрана на каждом разделе (ТЗ Рустама 23.07).
    На компьютере остаётся как был. */
 /* ⛔ ПОДВАЛА САЙТА НА ТЕЛЕФОНЕ НЕТ ВООБЩЕ. Раньше он прятался только когда снизу
    видна панель вкладок (body.hastab) — то есть на карточке, в мастере, на экранах без
    панели и в первые секунды загрузки он вылезал. Это десктопная история: колонки
    «Работа · Поддержка · Аккаунт · Правовое» на узком экране складываются в простыню
    под рабочим экраном (Рустам 11.09, четыре раза подряд: «ебучий подвал постоянно
    появляется»). Ссылки из него на телефоне доступны в меню и в профиле. */
 html.dc-hand #siteFooter{display:none !important}
 /* Пустая серая заглушка под документ забирала треть ширины карточки. Если документа нет —
    на телефоне не показываем её вовсе: место нужнее под ФИО. */
 html.dc-hand .docstub{display:none}
 .modal-bg{position:fixed;inset:0;background:rgba(16,24,40,.45);display:flex;align-items:center;justify-content:center;z-index:4500;padding:20px}
 .modal{background:var(--card);border-radius:14px;box-shadow:var(--shf);width:480px;max-width:100%;max-height:90vh;overflow:auto;padding:24px;position:relative;resize:none}
 /* Модалки — фиксированный размер, внутренний скролл, БЕЗ ручного растягивания (маркер resize у textarea убран) */
 .modal textarea{resize:none !important}
 .modalX{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:none;background:var(--card2);color:var(--mut);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .12s,color .12s}
 .modalX:hover{background:var(--red-soft);color:var(--red)}
 .modal h3{font-size:18px;font-weight:600;margin:0 0 2px}
 .modal .sub{color:var(--mut);font-size:13.5px;margin-bottom:16px}
 .modal label{display:block;font-size:13.5px;color:var(--mut);margin:0 0 5px}
 .fld{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card2);color:var(--tx);font-size:14px;outline:none;font-family:inherit}
 .fld:focus{border-color:var(--acc);background:var(--card)}
 select.fld{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23697586' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
 .modal .fld{margin-bottom:14px}
 .modal .row{display:flex;justify-content:space-between;gap:8px;margin-top:18px}
 /* Подвал карточки записи. Был инлайновым — на телефоне его нельзя было перебить классом,
    и кнопки уходили под нижние вкладки (скрин Рустама 26.08). */
 .gcfoot{display:flex;justify-content:flex-end;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}
 .gcfoot > .gcfoot-l{margin-right:auto}

 .step-dot{flex:1;height:4px;border-radius:6px;background:var(--line)} .step-dot.on{background:var(--acc)}
 .seg{display:inline-flex;background:var(--card2);border-radius:8px;padding:3px;gap:2px}
 .seg button{border:none;background:transparent;color:var(--mut);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:13.5px;font-weight:500}
 .seg button.on{background:var(--card);color:var(--tx);border:1px solid var(--line)}
 .wizard{flex:1;min-width:0;max-width:600px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 28px;box-shadow:var(--sh)}
 .wizwrap{display:flex;gap:22px;align-items:flex-start;margin:8px auto 0;max-width:940px;flex-wrap:wrap}
 .wizsum{width:290px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--sh)}
 .wizsumh{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;margin-bottom:6px;
   cursor:pointer;list-style:none} .wizsumh::-webkit-details-marker{display:none}
 .wizsumh::after{content:'▾';margin-left:auto;color:var(--mut2);font-size:12.5px;transition:transform .15s}
 details[open] > .wizsumh::after{transform:rotate(180deg)}
 .wizsumn{font-size:12.5px;font-weight:500;color:var(--mut);background:var(--card2);
   border-radius:999px;padding:1px 8px}
 .wizsumrow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
 .wizsumrow .k{color:var(--mut)} .wizsumrow .v{font-weight:500;text-align:right}
 .wzbar{height:5px;background:var(--card2);border-radius:6px;overflow:hidden}
 .wzfill{height:100%;background:var(--acc);border-radius:6px;transition:width .25s}
 .wizard input,.wizard select,.wizard textarea{font-size:14px}
 .taskc{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:8px;cursor:pointer;box-shadow:var(--sh)}
 .taskc:hover{background:var(--card2)}
 .tc-main{flex:1;min-width:0}
 .tc-act{font-weight:500;color:var(--acc)}
 .tc-go{color:var(--mut);font-size:13.5px;white-space:nowrap}
 .cardgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;max-width:1240px}
 /* та же история, что у .lcleft: в одну колонку липнуть не к чему, sticky накрывает содержимое */
 @media(max-width:1000px){ .cardgrid{grid-template-columns:1fr} }
 .cardmain{max-width:880px;min-width:0}
 .cardside{position:sticky;top:16px}
 .statrow{display:flex;flex-wrap:wrap;gap:28px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 20px;box-shadow:var(--sh);margin:12px 0}
 .statrow .st .k{font-size:12.5px;color:var(--mut)} .statrow .st .v{font-size:18px;font-weight:500;margin-top:2px}
 .wzback{background:none;border:none;color:var(--mut);font-size:14px;cursor:pointer;padding:0;margin-bottom:14px} .wzback:hover{color:var(--tx)}
 /* ⛔ КНОПКИ МАСТЕРА — ЛЁГКИЕ (канон §2, Рустам 14.09.2026: «кнопки слишком
    тяжёлые, у нас единый лёгкий стиль»). Бледная подложка + цветные буквы:
    залитых синих плашек в системе нет. Главная кнопка ОДНА и всегда одинаковая:
    зелёная разновидность .wzdone убрана 15.09.2026 — это была лишняя роль,
    которой нет в наборе («не плоди кучу кнопок» — Рустам). */
 .wzprimary{display:block;margin:18px 0 0 auto;background:var(--acc-soft);color:var(--acc);border:none;
   border-radius:8px;padding:11px 24px;cursor:pointer;font-size:14px;font-weight:600;min-width:170px}
 .wzprimary:hover{background:var(--line)}

 .wzclose{background:none;border:none;color:var(--mut);font-size:13.5px;cursor:pointer;padding:4px 6px}
 .wzprev{padding:3px 10px;font-size:12.5px;flex:0 0 auto;white-space:nowrap}
 .na-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
 .na-lbl{font-weight:600;font-size:18px;min-width:0}
 /* Плитка метрики на главной студии. Высота — от содержимого, не от min-height:
    четыре плитки раздували первый экран без нужды (FR-S2-1). Цель под палец
    остаётся: 12+13.5+2+23 = 62px, это выше 44. */
 .pd-tile{background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:var(--shf);
   cursor:pointer;min-height:62px;display:flex;flex-direction:column;justify-content:space-between;gap:4px}
 .wzlbl{display:block;font-size:13.5px;color:var(--mut);margin:12px 0 5px;font-weight:500}
 /* Строка выбора: суть сверху, подробности мельче и серым (см. seller.css). */
 .wzopt-b{display:flex;flex-direction:column;gap:3px;min-width:0}
 .wzopt-t{color:var(--tx)}
 .wzopt-s{font-size:12px;color:var(--mut);line-height:1.4}
 .wzinp{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card2);color:var(--tx);font-size:14px}
 .wzinp.err{border-color:var(--red);background:var(--red-soft)}
 .wzchk{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--tx);cursor:pointer;user-select:none;margin-top:4px}
 /* ФЛАЖКИ И ПЕРЕКЛЮЧАТЕЛИ — ОДИН ВИД НА ВСЮ СИСТЕМУ (Рустам 25.08: «стиль единый, как слева»).
    Раньше это были системные контролы разного размера (13/15/17px) с accent-color: в одном
    выпадающем списке квадраты выглядели так, в соседнем — иначе. Теперь рисуем сами:
    рамка, размер и цвет общие, форма по назначению — квадрат «можно несколько»,
    круг «только одно» (менять форму нельзя: по ней человек и понимает, что его ждёт). */
 /* Круг у переключателя убран по прямому требованию (Рустам 25.08, дважды): в системе
    один вид отметки — квадрат с галочкой. Смысл «выбрать можно только одно» держит сама
    логика списка: отметил другой пункт — прежний снимается. */
 input[type=checkbox],input[type=radio]{
   appearance:none;-webkit-appearance:none;box-sizing:border-box;border-radius:6px;
   width:18px;height:18px;flex:0 0 18px;margin:0;cursor:pointer;
   background:var(--card);border:1px solid var(--line-2);
   display:inline-grid;place-content:center;transition:background .12s,border-color .12s}

 input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--acc)}
 input[type=checkbox]::before{content:"";width:11px;height:11px;transform:scale(0);transition:transform .12s;
   background:var(--card);clip-path:polygon(14% 46%,0 60%,39% 100%,100% 22%,86% 8%,39% 72%)}
 input[type=radio]::before{content:"";width:11px;height:11px;transform:scale(0);transition:transform .12s;
   background:var(--card);clip-path:polygon(14% 46%,0 60%,39% 100%,100% 22%,86% 8%,39% 72%)}
 input[type=checkbox]:checked,input[type=radio]:checked{background:var(--acc);border-color:var(--acc)}
 input[type=checkbox]:checked::before,input[type=radio]:checked::before{transform:scale(1)}
 input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(83,58,253,.14)}
 input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:default;background:var(--card2)}
 .gctitle{width:100%;border:none;border-bottom:2px solid var(--line);font-size:23px;font-weight:500;padding:6px 2px 8px;outline:none;background:none;color:var(--tx)}
 .gctitle:focus{border-bottom-color:var(--acc)}
 /* Имя существующей записи менять нельзя — это текст, а не поле ввода. В <input>
    длинное ФИО не переносится и обрезалось («Виноградова Алина Викторовн»). */
 .gctitle-ro{overflow-wrap:break-word;line-height:1.25;cursor:default}
 .gctabs{display:flex;gap:8px;margin:16px 0 8px;flex-wrap:wrap}
 .gctab{border:none;background:var(--card2);border-radius:14px;padding:7px 16px;font-size:14px;cursor:pointer;color:var(--tx)}
 .gctab.on{background:var(--acc-soft);color:var(--acc);font-weight:500}
 .gcrow{display:flex;align-items:center;gap:14px;padding:7px 0}

 .gcic{width:22px;flex-shrink:0;color:var(--mut);display:flex;justify-content:center;align-self:center}
 .gcic svg{width:20px;height:20px}
 .gcinp{border:none;background:var(--card2);border-radius:8px;padding:10px 11px;font-size:14px;color:var(--tx);outline:none;font-family:inherit}
 .gcinp:focus{background:var(--acc-soft)}
 .gcsave{background:var(--acc);color:var(--on-acc);border:none;border-radius:14px;padding:10px 26px;font-size:14px;font-weight:500;cursor:pointer}
 .gcsave:hover{filter:brightness(1.05)}
 .bktoday{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:9px 22px;font-size:14px;cursor:pointer;color:var(--tx);font-weight:500}
 .bktoday:hover{background:var(--card2)}
 .bknav{border:none;background:none;width:38px;height:38px;border-radius:50%;font-size:23px;cursor:pointer;color:var(--tx);display:inline-flex;align-items:center;justify-content:center;line-height:1}
 .bknav:hover{background:var(--card2)}
 .bktitle{font-size:23px;font-weight:500;color:var(--tx);cursor:pointer;position:relative;user-select:none}
 .stcard{background:var(--card2);border-radius:12px;padding:16px 18px;margin-bottom:14px}
 .stcardh{font-weight:600;font-size:14px;margin-bottom:6px;color:var(--tx)}
 .wzlbl.err{color:var(--red)}
 .fielderr{color:var(--red);font-size:13.5px;margin:4px 0 2px}
 .wzdeal{background:var(--card2);border:1px solid var(--line);color:var(--tx);font-size:12.5px;
   cursor:pointer;padding:5px 10px;border-radius:8px;white-space:nowrap;max-width:100%;
   overflow:hidden;text-overflow:ellipsis;min-width:0}
 .wzsteph{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 12px}
 .wzsteph-t{font-size:16px;font-weight:500;min-width:0}
 .wzfio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:4px}
 .wzfoot{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-top:22px}
 .wzskip{background:none;border:none;color:var(--mut);font-size:14px;cursor:pointer} .wzskip:hover{color:var(--tx);text-decoration:underline}
.salrow{transition:background .12s}.salrow.dc-click:hover{background:var(--bg)}

/* ─── МОБИЛЬНЫЙ КАБИНЕТ ПРОДАВЦА — CSS дизайнера (хендофф latin, 26.08) ────────
   Блок целиком из handoff/mobile-seller.css. Всё внутри медиазапросов, десктоп не
   затрагивается. Правила описаны в docs/DESIGN_SYSTEM.md, «Телефон — кабинет продавца».
   Единственная правка против оригинала — кегль .m-h1 приведён к нашей шкале. */
/* ─────────────────────────────────────────────────────────────────────────────
   mobile-seller.css — мобильный кабинет продавца, Detailing City OS.
   Вставлять ОДНИМ блоком в конец <style> в web/static/index.html.

   Цель: работать на любом телефоне без правок под модель.
   Проверено по геометрии на: 320pt (iPhone SE 1), 360pt (Android базовый),
   375 (SE 2/3), 390 (14/15), 393 (Pixel 8), 402 (15 Pro), 414 (8 Plus),
   428 (13 Pro Max), 440 (16 Pro Max), 448 (складные в раскрытом виде),
   плюс альбомная ориентация и планшеты до 1000pt.

   Принципы: ширины в процентах и minmax, кегли через clamp, вертикаль через dvh,
   отбивки через env(safe-area-inset-*), нажимаемое — не меньше 44px.
   Цвета не объявляются: используются переменные, которые уже есть в файле
   (--acc, --acc-soft, --tx, --mut, --mut2, --line, --card, --card2, --sh,
   --grn, --grn-soft, --red, --red-soft, --yel, --yel-soft, --on-acc).
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══ A. База для любых узких экранов: до 760pt = телефон ═══════════════════ */
/* ── A1. Ни один экран не едет вбок ───────────────────────────────────────── */html.dc-hand, html.dc-hand body{ max-width:100%; overflow-x:hidden; }html.dc-hand #app{ max-width:100%; overflow-x:clip; }html.dc-hand #app *{ min-width:0; }/* flex-дети обязаны сжиматься */html.dc-hand img, html.dc-hand video, html.dc-hand canvas, html.dc-hand svg, html.dc-hand iframe{ max-width:100%; height:auto; }html.dc-hand pre, html.dc-hand code{ overflow-x:auto; }/* фиксированные ширины из десктопа снимаем */html.dc-hand .bkcity{ flex:0 0 100% !important; width:100% !important; min-width:0 !important; }html.dc-hand [style*="min-width:320px"], html.dc-hand [style*="width:320px"]{ min-width:0 !important; }/* таблицы скроллит их контейнер, а не страница */html.dc-hand .m-scrollx{ overflow-x:auto; -webkit-overflow-scrolling:touch; }html.dc-hand .m-scrollx > table{ min-width:min(560px, 150%); }/* ── A2. Вертикаль: адресная строка Safari ничего не срезает ──────────────── */html.dc-hand .bkside, html.dc-hand .gs-panel, html.dc-hand .chatpane{ height:100dvh; max-height:100dvh; }/* Отступ под панель и сама панель — в блоке #tabbar выше. Здесь были третьи по счёту
     значения (84px, свои safe-area), они и перебивали правку высоты. */html.dc-hand .modal{ padding-bottom:calc(20px + env(safe-area-inset-bottom)); }/* горизонтальные отбивки: вырез в альбомной ориентации, скруглённые углы */html.dc-hand #app{
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
  }html.dc-hand header{
    padding-left:calc(12px + env(safe-area-inset-left));
    padding-right:calc(12px + env(safe-area-inset-right));
  }/* липкая панель действий — «Сохранить»/«Далее» всегда на виду */html.dc-hand .m-actionbar{
    position:sticky; bottom:0; z-index:20;
    display:flex; gap:8px;
    padding:10px 0 calc(10px + env(safe-area-inset-bottom));
    background:var(--card); border-top:1px solid var(--line);
    box-shadow:0 -2px 10px rgba(0,55,112,.06);
  }html.dc-hand .m-actionbar > *{ flex:1; min-height:50px; border-radius:12px; font-size:14px; }/* ── A3. Палец: цели не меньше 44px на любом экране ───────────────────────── */html.dc-hand .bknav, html.dc-hand .m-iconbtn{
    width:44px; height:44px; min-width:44px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:12px; background:var(--card); border:1px solid var(--line);
  }html.dc-hand .bkacts{ display:flex; flex-wrap:wrap; gap:8px; }html.dc-hand .bkacts > button{ min-height:44px; padding:0 clamp(12px, 3.6vw, 16px); font-size:13.5px; }html.dc-hand .tb, html.dc-hand .act, html.dc-hand .fld, html.dc-hand select.fld, html.dc-hand .lnk{ min-height:44px; }html.dc-hand .lnk{ display:inline-flex; align-items:center; }html.dc-hand .fld{ font-size:16px; }/* < 16px — iOS зумит страницу на фокусе */html.dc-hand .ft-l{ min-height:44px; }/* ── A4. Кегли: тянутся с шириной, но не ниже читаемого минимума ──────────── */html.dc-hand .scr-h1{ font-size:clamp(17px, 4.6vw, 21px); }/* ── A5. Журнал: одна строка на запись ────────────────────────────────────── */html.dc-hand .bkseccap{ font-size:10.5px; font-weight:600; letter-spacing:.06em;
             text-transform:uppercase; margin:10px 2px 8px; }html.dc-hand .qrow{
    display:flex;  gap:clamp(8px, 2.6vw, 12px);
    min-height:56px; padding:8px clamp(10px, 3vw, 14px); margin-bottom:6px;
    border-radius:10px; background:var(--card);
    border:1px solid var(--line); border-left:3px solid var(--dc-accent, var(--mut));
    box-shadow:none;
  }html.dc-hand .qrow{ align-items:flex-start; }html.dc-hand .qrow .q-time{ width:clamp(40px, 12vw, 52px); flex:0 0 auto; padding-top:2px;
                 font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; }/* база 0, а не auto: иначе при переносе длинное имя задаёт ширину строки и кнопка
     звонка выдавливается на отдельную строку (проверено на 360pt). */html.dc-hand .qrow .q-main{ flex:1 1 0; min-width:0; }/* Имя НЕ режем многоточием: «Виноградова Алина Викторовн» — не имя (скрин Рустама 26.08).
     Переносим на вторую строку; строка растёт по высоте, ничего не теряется. */html.dc-hand .qrow .q-name{ font-size:14px; font-weight:500; line-height:1.3;
                 white-space:normal; overflow:visible; text-overflow:clip; }html.dc-hand .qrow .q-sub{ font-size:12.5px; color:var(--mut2); font-variant-numeric:tabular-nums; }html.dc-hand .qrow .ds-badge{ font-size:11px; padding:3px 9px; border:none; }html.dc-hand .qrow .q-chip{  margin-top:0;  }html.dc-hand .qrow .q-call{ align-self:center; }/* отметки живут в карточке: четыре кнопки в строке = 150px на запись */html.dc-hand .qrow .bkacts{ display:none; }/* Второстепенное в строке не показываем — так и было задумано в хендоффе, только правила
     не было: «на связи», метки клиента и напоминание раздували строку до четырёх строк,
     из-за чего имени и статусу не оставалось ширины. Всё это есть в карточке записи. */html.dc-hand .qrow .q-extra{ display:none; }html.dc-hand .qrow .bk-opname{ white-space:normal; overflow:visible; text-overflow:clip; }/* Имя переносим по словам, а не по буквам: правило E ниже ставит anywhere ради длинных
     номеров, и «Виноградов/а Алина» — его работа. Здесь оно нам мешает. */html.dc-hand .qrow .q-name{ overflow-wrap:break-word; }/* Статус — отдельной строкой под именем, на любой ширине телефона. В строку он не
     помещается: на 440pt отъедал ~90px и резал сначала ФИО клиента, потом ФИО оператора
     (скрин Рустама 26.08), на 360pt не влезал вовсе. Кнопка звонка ОСТАЁТСЯ в первой
     строке — порядок задаём явно, без order она падала на пустую строку под временем. */html.dc-hand .qrow{ flex-wrap:wrap; }html.dc-hand .qrow .q-main{ order:2; }html.dc-hand .qrow .q-call{ order:3; }html.dc-hand .qrow .q-chip{ order:4; flex:0 0 100%; align-self:auto;
                 margin:8px 0 0 calc(clamp(40px, 12vw, 52px) + clamp(8px, 2.6vw, 12px)); }/* ── A6. Контейнеры: во всю ширину, без десктопных рамок ──────────────────── */html.dc-hand .panel, html.dc-hand .dc-card, html.dc-hand .mhcard{
    border-radius:14px; padding:clamp(12px, 3.6vw, 16px); margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,55,112,.08);
  }/* сетки: колонки убираем, масштаб не трогаем */html.dc-hand .grid, html.dc-hand .dash, html.dc-hand .cardgrid, html.dc-hand .hmcards, html.dc-hand .mcards, html.dc-hand .mdgrid, html.dc-hand .kv2, html.dc-hand .oday{
    grid-template-columns:1fr !important;
  }/* пара «ключ — значение» *//* ── A7. Мастер продажи ───────────────────────────────────────────────────── */html.dc-hand .m-steps{ display:flex; gap:6px; margin-bottom:14px; }html.dc-hand .m-steps > i{ flex:1; height:4px; border-radius:4px; background:var(--line); }html.dc-hand .m-steps > i.on{ background:var(--acc); }html.dc-hand .m-actionbar [disabled]{ background:var(--line-2); color:var(--mut); cursor:default; opacity:1; }/* ── A8. Ленты чипов: скроллятся внутри себя ──────────────────────────────── */html.dc-hand .m-chips{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
            padding-bottom:2px; scrollbar-width:none; }html.dc-hand .m-chips::-webkit-scrollbar{ display:none; }html.dc-hand .m-chips > *{ flex:0 0 auto; }/* ── A9. Чат и списки ─────────────────────────────────────────────────────── */html.dc-hand .cdlg{ min-height:56px; padding:11px clamp(10px, 3vw, 14px); border-radius:14px;
         margin-bottom:6px; background:var(--card); border:1px solid var(--line); }html.dc-hand .cdlg .cav{ width:44px; height:44px; font-size:14px; }html.dc-hand .cdlg .cbadge{ background:var(--acc); color:var(--on-acc); }/* красный — для просрочек */html.dc-hand .compose{ padding-bottom:calc(8px + env(safe-area-inset-bottom)); }/* ══ ШАПКА КАК В ПРИЛОЖЕНИИ (референс Альфа-Банк) ══════════════════════════
     Было три полосы: демо-полоса, логотип с бейджем «Опытная эксплуатация», крошки.
     Рустам 26.08: «супермусорно; должен быть профиль, который вылазит».
     Стало одна строка: аватар и имя слева (тап открывает меню профиля — оно уже
     есть, .me-pop), поиск и уведомления справа. Логотип, бейдж и крошки на телефоне
     не нужны: человек и так внутри приложения и видит, где он, по заголовку экрана. *//* Логотип внутри приложения не нужен — человек уже внутри. Селектор с body,
     иначе перебивает header img{height:17px} выше по файлу. */html.dc-hand body.m-shell .hdrlogo, html.dc-hand body.m-shell.stripe .hdrlogo{ display:none; }html.dc-hand body.m-shell header .sub, html.dc-hand body.m-shell.stripe #shadowBadge, html.dc-hand body.m-shell #shadowBadge{ display:none !important; }html.dc-hand body.m-shell #crumbs{ display:none; }html.dc-hand body.m-shell header{ padding:10px 14px; gap:10px; }/* Профиль слева, иконки справа — как у Альфы. #who лежит внутри .hdractions,
     а у той margin-left:auto (десктоп прижимает группу вправо). На телефоне группа
     занимает всю строку, иначе профиль уезжает в центр экрана вместе с иконками. */html.dc-hand body.m-shell header .hdractions{ margin-left:0; flex:1 1 auto; min-width:0; }html.dc-hand body.m-shell header #who{ display:block !important; order:-1; margin-right:auto; min-width:0; }html.dc-hand body.m-shell .hdrsep{ display:none; }html.dc-hand body.m-shell .me-btn{ display:flex; align-items:center; gap:10px; min-height:44px;
           background:none; border:none; padding:0; cursor:pointer; max-width:100%; }html.dc-hand body.m-shell .me-ava{ width:34px; height:34px; border-radius:50%; flex:0 0 auto;
           display:grid; place-items:center; font-size:13.5px; font-weight:600;
           background:var(--acc-soft); color:var(--acc); }html.dc-hand body.m-shell .me-nm{ font-size:16px; font-weight:600; color:var(--tx); min-width:0;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }html.dc-hand body.m-shell .me-ch{ flex:0 0 auto; }/* Гамбургера на телефоне нет. Всё, что открывалось из него, открывает вкладка
     «Ещё» в нижнем таб-баре (renderTabbar → more:open). Две двери в одно и то же
     место — это и был мусор в шапке. Селектор с body.stripe: тема ниже по файлу
     ставит .menutgl{display:inline-flex} и по специфичности сильнее. */html.dc-hand body.m-shell .menutgl, html.dc-hand body.m-shell.stripe .menutgl{ display:none; }/* — 0. ФОН ЭКРАНА. У Альфы он заметно серый, и только поэтому белые карточки
     читаются как отдельные объекты без единой линии. Наш --bg (#f7f9ff) почти белый:
     карточки на нём сливались, а серое поле ввода становилось невидимым. На телефоне
     фон уходит на ступень темнее, карточки и поля остаются как есть. *//* Цвет берётся из токена, а не литералом: палитра телефона собрана в
     mobile/seller.css, и литерал здесь её перебивал — фон оставался голубоватым,
     сколько бы токен ни правили (Рустам 12.09: «выглядит плюшево»). */html.dc-hand body.m-shell{ background:var(--bg); }html.dc-hand body.m-shell #app{ background:transparent; }/* ══ ОБЛИК ПРИЛОЖЕНИЯ (docs/DESIGN_MOBILE.md, референс Альфа-Банк) ═══════════
     Три приёма, которые убирают «плюшевость»:
     1) карточка — белая на сером БЕЗ обводки, границу рисует контраст фона;
     2) поле — заливка БЕЗ рамки, не «форма», а блок данных;
     3) кнопка действия — прямоугольник с радиусом, не капсула.
     Селекторы продублированы с body.stripe: тема объявлена ниже по файлу и по
     специфичности сильнее — без этого правило молча не сработает. *//* — 1. Карточки: радиус 20, тень вместо обводки — */html.dc-hand body.stripe .panel, html.dc-hand body.stripe .dc-card, html.dc-hand body.stripe .mhcard, html.dc-hand body.stripe .modal, html.dc-hand body.stripe .wizard, html.dc-hand body.stripe .wizsum, html.dc-hand body.stripe .docobj, html.dc-hand body.stripe .qrow, html.dc-hand body.m-shell .panel, html.dc-hand body.m-shell .dc-card, html.dc-hand body.m-shell .mhcard, html.dc-hand body.m-shell .wizard, html.dc-hand body.m-shell .wizsum, html.dc-hand body.m-shell .docobj, html.dc-hand body.m-shell .pd-tile, html.dc-hand body.m-shell .qrow, html.dc-hand body.m-shell .cdlg{
    border-radius:20px; border:none;
    box-shadow:0 1px 3px rgba(13,37,61,.07), 0 6px 16px rgba(13,37,61,.04);
  }html.dc-hand body.m-shell .modal{ border-radius:20px 20px 0 0; border:none; }/* строку журнала цветная полоса слева отличает от прочих карточек — она остаётся */html.dc-hand body.m-shell .qrow{ border-left:3px solid var(--dc-accent, var(--mut)); }/* — 2. Поля: заливка без рамки — */html.dc-hand body.stripe .fld, html.dc-hand body.stripe .gcinp, html.dc-hand body.stripe .wzinp, html.dc-hand body.m-shell .fld, html.dc-hand body.m-shell .gcinp, html.dc-hand body.m-shell .wzinp, html.dc-hand body.m-shell .gctitle{
    background:var(--card); border:none; border-radius:14px;
  }/* поле ВНУТРИ белой карточки — наоборот, серое: иначе не видно, где оно */html.dc-hand .modal .fld, html.dc-hand .modal .gcinp, html.dc-hand .wizard .fld, html.dc-hand .wizard .wzinp, html.dc-hand .panel .fld, html.dc-hand body.m-shell .dc-card .fld, html.dc-hand body.m-shell .mhcard .fld{ background:var(--card2); }html.dc-hand body.stripe .fld:focus, html.dc-hand body.stripe .gcinp:focus, html.dc-hand body.stripe .wzinp:focus, html.dc-hand body.m-shell .fld:focus, html.dc-hand body.m-shell .gcinp:focus, html.dc-hand body.m-shell .wzinp:focus{
    background:var(--card); border:none; outline:none;
    box-shadow:0 0 0 2px var(--acc);
  }html.dc-hand body.m-shell .gcinp, html.dc-hand body.m-shell .wzinp, html.dc-hand body.m-shell .fld, html.dc-hand body.m-shell select.fld{ min-height:52px; }html.dc-hand body.m-shell textarea.fld, html.dc-hand body.m-shell textarea.gcinp, html.dc-hand body.m-shell textarea.wzinp{ min-height:52px; }html.dc-hand body.m-shell .gctitle{ background:none; border-bottom:none; }/* — 3. Кнопки: прямоугольник с радиусом, капсул нет — */html.dc-hand body.stripe .act, html.dc-hand body.stripe .tb, html.dc-hand body.stripe .mbtn, html.dc-hand body.stripe .gctab, html.dc-hand body.m-shell .act, html.dc-hand body.m-shell .tb, html.dc-hand body.m-shell .mbtn, html.dc-hand body.m-shell .gctab, html.dc-hand body.m-shell .wzprimary, html.dc-hand body.m-shell .gcsave, html.dc-hand body.m-shell .wzprev, html.dc-hand body.m-shell .pd-refunds{
    border-radius:14px;
  }html.dc-hand body.m-shell .wzprimary, html.dc-hand body.m-shell .gcsave{ min-height:56px; }/* капсула остаётся ТОЛЬКО у таб-бара и статус-чипов */html.dc-hand body.m-shell #tabbar, html.dc-hand body.m-shell #tabbar button{ border-radius:999px; }html.dc-hand body.m-shell .ds-badge, html.dc-hand body.m-shell .q-chip .ds-badge, html.dc-hand body.m-shell .chip, html.dc-hand body.m-shell .city, html.dc-hand body.m-shell .wizsumn{ border-radius:999px; }/* круглые иконки-кнопки — это не «капсульные кнопки действия», а иконки */html.dc-hand body.m-shell.stripe .bknav, html.dc-hand body.m-shell .bknav, html.dc-hand body.m-shell .m-iconbtn, html.dc-hand body.m-shell .modalX{ border-radius:50%; }/* — 4. Заголовок экрана: крупный, слева, как у Альфы — */html.dc-hand body.m-shell .scr-h1{ font-size:23px; font-weight:600; letter-spacing:-.025em; }/* подпись секции над карточками — серая, мелкая, без рамок */html.dc-hand body.m-shell .ph{ font-size:12.5px; font-weight:500; color:var(--mut); padding:0 2px 6px;
       border:none; background:none; }/* ── A10. Починка по скринам Рустама (26.08) ──────────────────────────────── *//* Чип «курс · сумма» в шапке шага мастера. В строку с заголовком он не влезает и
     вылезал за правый край карточки. На телефоне — отдельной строкой под заголовком,
     во всю ширину, текст переносится. */html.dc-hand .wzsteph{ flex-wrap:wrap; align-items:flex-start; margin:14px 0 10px; }html.dc-hand .wzsteph > .wzsteph-t{ flex:1 1 100%; }html.dc-hand .wzdeal{ flex:1 1 100%; white-space:normal; overflow:visible; text-overflow:clip;
           text-align:left; line-height:1.35; }/* Имя клиента: подпись «Имя клиента» на телефоне лишняя — над ней уже стоит
     «Редактировать запись», а под ней само имя крупным кеглем. Экономит строку. */html.dc-hand .modal > label.wzlbl:first-of-type{ display:none; }html.dc-hand .gctitle{ font-size:18px; padding:2px 2px 6px; }html.dc-hand .gctitle-ro{ white-space:normal; }/* Строка «дата – время». Дата с min-width:140px тянула строку, и «конец» уезжал на
     вторую строку, оставляя тире висеть в пустоте. Дата занимает свою строку целиком,
     время встаёт парой под ней. *//* Дата и время — ОДНА строка. Раньше дата занимала свою, и карточка росла на
     лишние 54px; при этом информации в окне немного, а прокрутка появлялась
     (Рустам 26.08: «почему нельзя просто уменьшить, сохранив информацию»).
     Пропорции: дата 46%, два поля времени по 25%. На 440pt это 185/100/100 —
     «26.08.2026» и «21:28» читаются целиком. Осознанное отступление от P1
     (порог 160px): поле времени содержит пять символов, ему хватает 100px. */html.dc-hand .gcrow #bkDt{ flex:1 1 46% !important; min-width:0 !important; }html.dc-hand .gcrow #bkT1, html.dc-hand .gcrow #bkT2{ flex:1 1 25%; min-width:0; width:auto; }/* nowrap — ТОЛЬКО ряду «дата – время». Общее правило запрещало перенос всем рядам,
     и кнопка «Подтвердил» вылезала за карточку. */html.dc-hand .gcrow > .gc-when{ flex-wrap:nowrap !important; gap:6px !important; }/* Статусы — четыре в один ряд. Сетка 2×2 занимала 100px высоты, и вместе с
     подвалом карточка переставала помещаться в экран: нижний ряд «Не пришёл /
     Подтвердил» уходил под липкую панель (скрин Рустама 26.08). В ряд они влезают,
     если снять с кнопок горизонтальный отступ: «Подтвердил» — самое длинное слово,
     на 390pt ему достаётся 74px при кегле 12px. */html.dc-hand .gcrow .bkst{ flex:none; justify-content:center; padding:9px 2px !important;
                 text-align:center; min-height:44px; }html.dc-hand .bkst-w{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; flex:1; min-width:0; }/* Колонка иконок у ряда статусов («✓») забирала ширину у четырёх кнопок. *//* Пустая колонка иконки (у рядов связи и «Где на связи») забирала 32px ширины
     ни за чем — на телефоне ширина дороже. */html.dc-hand .modal .gcrow .gcic:empty{ display:none; }/* Кнопки связи стоят в строке телефона. Подпись убираем — остаётся иконка 44×44:
     трубка, WhatsApp, Telegram узнаются и без слов, а строка экономит 50px высоты. */html.dc-hand .bkcta span{ display:none; }html.dc-hand .bkcta{ width:44px; min-width:44px; padding:0 !important; }html.dc-hand .bkcta svg{ width:20px; height:20px; }/* «Где на связи»: подпись отдельной строкой + пять галочек занимали 110px. */html.dc-hand .modal .gcrow .wzlbl{ margin:0 0 3px !important; font-size:10.5px; font-weight:600;
                        letter-spacing:.04em; text-transform:uppercase; color:var(--mut); }html.dc-hand .modal .gcrow .wzchk{ gap:6px; font-size:13.5px; }html.dc-hand .modal .gcrow .wzchk + .wzchk{ margin:0; }/* ⛔ ЗУМ ПРИ ФОКУСЕ. iOS Safari увеличивает всю страницу, если у поля шрифт меньше
     16px — после этого вёрстка «выходит за рамки» и уже не возвращается (Рустам 26.08).
     Общее правило input/select/textarea тут есть, но его перебивают КЛАССЫ полей,
     объявленные ниже по файлу: .wzinp 14px, .gcinp 14px. Перечисляем их явно —
     это последнее слово в каскаде. */html.dc-hand body.stripe .wzinp, html.dc-hand body.stripe .gcinp, html.dc-hand body.stripe .fld, html.dc-hand .wzinp, html.dc-hand .gcinp, html.dc-hand .gctitle, html.dc-hand .fld, html.dc-hand input, html.dc-hand select, html.dc-hand textarea{ font-size:16px; }/* Safari центрирует содержимое input[type=date], когда поле широкое: дата вставала
     посередине пустой плашки и выглядела как незаполненное поле. Прижимаем влево —
     как в соседних полях «Телефон» и «Курс». */html.dc-hand #bkDt{ text-align:left; }html.dc-hand #bkDt::-webkit-date-and-time-value{ text-align:left; }html.dc-hand #bkT1, html.dc-hand #bkT2{ text-align:left; }/* ── ПЛОТНОСТЬ. «Огромно, разъёб» — Рустам 26.08. Воздух нужен, болото нет.
     Кегли и радиусы берём из шкалы DESIGN_SYSTEM, ничего не выдумываем. ─────────── *//* Плитки главной студии: четыре штуки занимали полэкрана. */html.dc-hand .m-tiles, html.dc-hand .mcards{ gap:8px; }/* FR-S5-2: поля мастера — одна колонка. Три поля ФИО в ряд на 390pt ломали строку:
     подпись «Отчество (если есть)» переносилась, поле съезжало вниз одно. Пары
     «дата рождения + телефон» и «серия + номер» оставлены в ряд: на 390pt каждому
     достаётся 173px, это выше порога 160px из P1. */html.dc-hand .wzfio{ grid-template-columns:1fr; gap:6px; }/* Мастер продажи: карточка шага дышала слишком широко. */html.dc-hand .wizard{ padding:14px 14px 18px; }html.dc-hand .wizard .fld{ margin-bottom:10px; }html.dc-hand .wzbar{ margin-bottom:2px; }html.dc-hand .m-guard, html.dc-hand .wizard .alert{ padding:11px 13px; font-size:13.5px; }/* Блок-подсказка «Обратите внимание» и такие же — плотнее по строкам. */html.dc-hand .wizard ul, html.dc-hand .wizard ol{ margin:6px 0 0; padding-left:18px; }html.dc-hand .wizard li{ margin:2px 0; }/* «Детали продажи» под шагом — справочная, не главная: кегль на ступень ниже. */html.dc-hand .wizsum{ padding:11px 14px; margin-top:10px; }html.dc-hand .wizsumh{ font-size:14px; margin-bottom:0; min-height:44px; }html.dc-hand details[open] > .wizsumh{ margin-bottom:4px; }html.dc-hand .wizsumrow{ font-size:13.5px; padding:6px 0; }/* Карточка записи: строки полей стояли с двойным воздухом, комментарии — по четыре
     строки при одной строке текста. Высота от содержимого, растягивается при вводе. *//* Ровно две строки текста. Было 2,5 — третья обрезалась по середине букв и
     читалась как поломка вёрстки. Длинная заметка прокручивается внутри поля. */html.dc-hand .modal textarea.gcinp{ min-height:44px; height:58px; line-height:1.35; padding:8px 10px; }/* «Оформить продажу →» в колонке подвала переносилось на две строки. */html.dc-hand .modal #bkSale{ font-size:14px; padding:0 6px; white-space:nowrap; }html.dc-hand .modal #bkSale .ar{ display:none; }/* Боковые поля окна. Правило .modal{padding:20px} в блоке выше по файлу молча
     не работало: базовый .modal{padding:24px} объявлен НИЖЕ и при равной
     специфичности побеждает. Отсюда же щель по краям липкого подвала — он
     отбивался на -20px, а окно отступало на 24px. Здесь последнее слово. */html.dc-hand .modal{ padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }html.dc-hand .modal .gcfoot{ margin:14px -16px calc(-16px - env(safe-area-inset-bottom));
                  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
                  bottom:calc(-16px - env(safe-area-inset-bottom)); }/* Колонка иконок — ровно под иконку, без запаса. */html.dc-hand .modal .gcrow > .gcic{ width:22px; min-width:22px; flex:0 0 22px; }/* ── Ширина внутри рядов. Замер на 375pt: обрезались дата и номер телефона. ──
     Поля в ряду «дата – время» отдают боковой отступ содержимому: «26.08.2026»
     требует 110px, каждому времени хватает 68px, вместе это ровно ширина ряда. *//* Дате нужно 8px сверх равных долей: «26.08.2026» длиннее, чем «14:30». */html.dc-hand .gc-when{ display:grid; align-items:center; flex:1; min-width:0; gap:4px;
            grid-template-columns:minmax(0,1.85fr) minmax(0,1fr) auto minmax(0,1fr); }html.dc-hand .bkcta-w{ display:flex; gap:6px; flex:0 0 auto; }html.dc-hand .bkcta{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }html.dc-hand .gcrow #bkPhone{ flex:1 1 auto; }html.dc-hand .gc-when > span{ font-size:13px; }html.dc-hand body.stripe .gc-when .gcinp, html.dc-hand .gc-when .gcinp{ padding-left:6px; padding-right:2px; }html.dc-hand body.stripe .modal #bkPhone, html.dc-hand .modal #bkPhone{ padding-left:10px; padding-right:6px; }/* У ряда телефона колонка иконки не нужна: трубка слева дублировала кнопку
     «Позвонить» справа, а её 32px как раз не хватало номеру. */html.dc-hand .modal .gcrow:has(> #bkPhone) > .gcic{ display:none; }/* Кнопки статусов: «Не пришёл» ломалось по пробелу на две строки. */html.dc-hand .gcrow .bkst{ white-space:nowrap; font-size:11.5px !important; }html.dc-hand .modal .gcrow{ padding:3px 0; gap:8px; }html.dc-hand .modal .fld{ margin-bottom:10px; }/* PHASE 3 · FR-S8-2/4: ряды действий и кнопки документов.
     Три кнопки в ряд («Предпросмотр · Скачать · Заменить») на 390pt сжимались до
     нечитаемых огрызков. Переносим и даём каждой нормальную высоту. */html.dc-hand .docobj > div:last-child{ flex-wrap:wrap; }html.dc-hand .docobj .tb, html.dc-hand .docobj a.tb{ flex:1 1 44%; min-height:44px; display:inline-flex;
                             align-items:center; justify-content:center; }/* Ряд действий карточки ученика — кнопки одной высоты, переносом, а не сжатием. */html.dc-hand .na-row > .act, html.dc-hand .na-row > button{ flex:1 1 100%; min-height:48px; }html.dc-hand .na-lbl{ flex:1 1 100%; font-size:16px; }/* PHASE 2 · FR-S4-3 + C6. В карточке записи до нормы не дотягивали: поля 41–43px,
     кнопки статуса 31px, крестик закрытия 30px. Всё, что нажимают пальцем, — 44+. */html.dc-hand .gcinp, html.dc-hand .modal .gcinp{ min-height:44px; box-sizing:border-box; }html.dc-hand .gctab, html.dc-hand .modal .gctab{ min-height:44px; padding:9px 16px; display:inline-flex;
                         align-items:center; }html.dc-hand .modalX{ width:44px; height:44px; top:8px; right:8px; font-size:20px; }/* ── ПАЛЕЦ. Правило «не меньше 44px» было, но его перебивали инлайновые размеры и
     базовые классы, объявленные ниже по файлу. Здесь — последнее слово. ─────────── *//* body.stripe .bknav задаёт 36px и по специфичности сильнее — повторяем с той же. */html.dc-hand body.stripe .bknav, html.dc-hand .bknav{ width:44px; height:44px; min-width:44px; font-size:20px; }html.dc-hand body.stripe #mbCal, html.dc-hand #mbCal{ width:auto; min-width:52px; padding:0 12px; }html.dc-hand .wzback{ padding:12px 4px; margin-bottom:6px; min-height:44px; display:inline-flex;
           align-items:center; }html.dc-hand .wzclose{ padding:12px 8px; min-height:44px; }html.dc-hand .wzprimary{ min-height:48px; padding:13px 24px; font-size:16px; width:100%;
              min-width:0; margin:18px 0 0; }html.dc-hand .pd-refunds{ width:100%; min-height:44px; margin-top:12px; background:none; border:none;
               color:var(--mut); font-size:12.5px; cursor:pointer; }/* Телефон в списке — текстовая ссылка 15px. Рядом есть кнопка звонка 44px, но в списке
     учеников её нет, поэтому даём саму ссылку нормальной высоты. *//* В журнале рядом с телефоном есть кнопка звонка 44px, поэтому ссылке хватает 32px.
     В списке учеников такой кнопки нет — там ссылка сама должна быть целью. */html.dc-hand .q-sub a[href^="tel:"]{ display:inline-flex; align-items:center; min-height:32px; padding:2px 0; }html.dc-hand .docobj a[href^="tel:"], html.dc-hand .m-kv a[href^="tel:"]{ display:inline-flex; align-items:center;
    min-height:44px; padding:4px 0; }/* Сводка мастера продажи была десктопной колонкой 290px: на телефоне «Детали продажи»
     выходили узким огрызком рядом с полноширинным шагом. Правило ширины в блоке выше
     перебивалось базовым .wizsum{width:290px}, объявленным НИЖЕ по файлу. */html.dc-hand .wizsum{ width:100%; box-sizing:border-box; }html.dc-hand .wizwrap{ align-items:stretch; }/* Пока открыта модалка, нижние вкладки не нужны: они перекрывали её последнюю строку —
     «Оформить продажу» и «Сохранить» нельзя было нажать пальцем (скрин Рустама 26.08). */html.dc-hand body.modal-on #tabbar, html.dc-hand body.modal-on .fab{ display:none; }/* Подвал модалки — липкая панель действий: кнопки видны, до какого бы места ни долистали. */html.dc-hand .modal .gcfoot{
    /* Нижняя отбивка модалки прокручивается вместе с содержимым — при bottom:0 в неё
       затекал текст под кнопками. Смещаем панель на эту же величину вниз: она встаёт
       вровень с нижним краем окна и закрывает полосу целиком. */
    position:sticky; bottom:calc(-20px - env(safe-area-inset-bottom)); z-index:3;
    display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch;
    margin:16px -20px calc(-20px - env(safe-area-inset-bottom));
    padding:10px 20px calc(12px + env(safe-area-inset-bottom));
    background:var(--card); border-top:1px solid var(--line);
  }html.dc-hand .modal .gcfoot > *{ min-height:48px; }html.dc-hand .modal .gcfoot > .gcfoot-w{ grid-column:1 / -1; margin-right:0; }/* Подвал был в три строки: «Оформить продажу», затем «Отмена» и «Сохранить».
     «Отмена» на телефоне лишняя — окно закрывает крестик в углу, это та же
     функция. Оставшиеся две кнопки встают в один ряд: 127px → 60px. */html.dc-hand .modal .gcfoot-cancel{ display:none; }html.dc-hand .modal .gcfoot > #bkSale{ grid-column:auto; }html.dc-hand .modal .gcfoot:not(:has(#bkSale)) > .gcsave{ grid-column:1 / -1; }/* Шапка на телефоне: бейдж «Опытная эксплуатация» и подпись под логотипом уводили
     полполосы под текст, который человек уже прочитал. Статус живёт в меню. */html.dc-hand #shadowBadge{ display:none; }

/* ═══ B. Альбомная ориентация телефона: мало высоты ═════════════════════════ */
@media (max-width:940px) and (max-height:520px) and (orientation:landscape){
  header{ padding-top:6px; padding-bottom:6px; }
  #tabbar{ padding:3px; }
  #tabbar button span{ display:none; }          /* подписи вкладок прячем, иконки остаются */
  #tabbar button{ min-height:44px; }
  .m-actionbar{ padding-top:8px; }
  .m-steps{ margin-bottom:8px; }
  .panel, .dc-card, .mhcard{ margin-bottom:8px; }
}

/* ═══ C. Планшеты и складные в раскрытом виде: 761–1000pt ══════════════════ */
/* Не телефон и не полный десктоп: две колонки вместо восьми, цели те же 44px. */
@media (min-width:761px) and (max-width:1000px){
  .grid, .cardgrid, .hmcards{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  .dash{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) !important; }
  .bkcity{ flex:0 0 clamp(280px, 46%, 360px); width:auto; min-width:0; }
  .tb, .act, .fld{ min-height:44px; }
  .bkacts > button{ min-height:44px; }
}

/* ═══ D. Устройства без наведения: hover-состояния не залипают ═════════════ */
@media (hover:none){
  .qrow:hover, .dc-card:hover, .panel:hover{ transform:none; box-shadow:none; }
  .qrow:active, .dc-card:active{ background:var(--card2); }
}

/* ═══ E. Крупный системный шрифт и масштаб текста ═════════════════════════ */
/* iOS/Android отдают пользователю увеличенный кегль: строки должны тянуться,
   а не обрезаться. Ничего не фиксируем по высоте, где есть текст. */
html.dc-hand .qrow, html.dc-hand .m-upload, html.dc-hand .cdlg, html.dc-hand .m-actionbar > *{ height:auto; }html.dc-hand .q-name, html.dc-hand .m-kv > dd, html.dc-hand .m-upload div{ overflow-wrap:anywhere; }