/* Кабинет. Поверх дизайн-системы сайта — только то, чего в ней нет. */
.lk-who{margin-left:auto;font-size:15px;color:var(--ink-50);display:none}
@media(min-width:700px){.lk-who{display:inline}}
.lk-exit{min-height:42px;padding:9px 16px;font-size:15px;margin-left:var(--s4)}
.lk-narrow{max-width:560px}
.lk-wide{max-width:860px}

.lk-alert{margin:0 0 var(--s5);padding:14px 16px;border-radius:var(--radius);
  font-size:15.5px;line-height:1.5}
.lk-alert[data-tone=err]{background:var(--red-wash);color:var(--red)}
.lk-alert[data-tone=ok]{background:var(--green-wash);color:var(--green)}
.lk-alert[data-tone=warn]{background:var(--amber-wash);color:var(--amber-deep)}

/* Шаги */
.lk-steps{display:flex;flex-wrap:wrap;gap:var(--s4);list-style:none;margin:0 0 var(--s6);padding:0}
.lk-steps li{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--ink-50)}
.lk-steps li[data-state=now]{color:var(--ink);font-weight:600}
.lk-steps__n{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  font-size:14px;font-weight:600;background:var(--surface-2);color:var(--ink-50);
  border:1.5px solid var(--line)}
.lk-steps li[data-state=now] .lk-steps__n{background:var(--amber);color:var(--ink);border-color:#D99C10}
.lk-steps li[data-state=done] .lk-steps__n{background:var(--green);color:#fff;border-color:var(--green)}

/* Выбор тарифа */
.lk-plans{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:760px){.lk-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lk-plan{position:relative;display:block;cursor:pointer}
.lk-plan input{position:absolute;opacity:0;width:0;height:0}
/* ⛔ Тело карточки — <span>: без display:block это строчный элемент, и рамка с отступами
   рисуется на КАЖДОЙ строке текста отдельно — карточка «разбита на части» (видео 04.09). */
.lk-plan__body{display:flex;flex-direction:column;box-sizing:border-box;
  border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:var(--s5);
  background:var(--surface);height:100%;transition:border-color .18s ease,box-shadow .18s ease}
.lk-plan__body>.h4{display:block}
.lk-plan:hover .lk-plan__body{border-color:var(--line-strong)}
.lk-plan input:checked + .lk-plan__body{border-color:var(--amber);border-width:2px;
  box-shadow:0 0 0 3px var(--amber-wash);padding:calc(var(--s5) - 0.5px)}
.lk-plan input:focus-visible + .lk-plan__body{outline:3px solid var(--amber-deep);outline-offset:2px}
.lk-plan__price{display:block;font-size:26px;font-weight:600;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;margin-top:8px}
.lk-plan__note{display:block;color:var(--ink-50);font-size:14.5px;margin-top:8px;line-height:1.45}

/* Карточка реквизитов */
.lk-req{background:var(--surface-2);border-radius:var(--radius-lg);padding:var(--s5);
  margin-top:var(--s5)}
.lk-req dl{display:grid;grid-template-columns:1fr;gap:10px 20px;margin:0}
@media(min-width:560px){.lk-req dl{grid-template-columns:150px 1fr}}
.lk-req dt{color:var(--ink-50);font-size:14.5px}
.lk-req dd{margin:0;font-size:15.5px}

.lk-docs{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:640px){.lk-docs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lk-doc{display:flex;align-items:center;gap:14px;padding:var(--s5);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);
  transition:border-color .18s ease,box-shadow .18s ease}
.lk-doc:hover{border-color:var(--amber);color:var(--ink);box-shadow:var(--shadow-2)}
.lk-doc svg{width:34px;height:34px;flex:none;color:var(--amber-deep)}
.lk-doc b{display:block;font-size:16.5px}
.lk-doc span{display:block;font-size:14px;color:var(--ink-50);margin-top:3px}

.lk-status{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  font-size:14px;font-weight:600}
.lk-status[data-s=draft]{background:var(--surface-2);color:var(--ink-50)}
.lk-status[data-s=issued]{background:var(--amber-wash);color:var(--amber-deep)}
.lk-status[data-s=paid]{background:var(--green-wash);color:var(--green)}
.lk-status[data-s=accepted]{background:var(--green-wash);color:var(--green)}
/* «Ждёт оплаты» как кнопка: тот же маркер, но нажимается и ведёт на форму банка.
   После оплаты на его месте зелёный неактивный «Оплачено». */
.lk-pay{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}
button.lk-status--btn{border:1.5px solid #D99C10;background:var(--amber);color:var(--ink);cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;padding:7px 14px;box-shadow:var(--shadow-1);
  transition:background-color .18s ease,box-shadow .18s ease}
button.lk-status--btn svg{width:16px;height:16px;flex:none}
button.lk-status--btn:hover{background:var(--amber-hi);box-shadow:var(--shadow-2)}
button.lk-status--btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lk-pay__hint{font-size:12.5px;color:var(--ink-50);line-height:1.3;white-space:nowrap}
.lk-status[data-s=paid] svg{width:15px;height:15px}
.lk-testpay{margin-top:var(--s5);padding:12px 16px;border-radius:var(--radius);background:var(--amber-wash);
  color:var(--amber-deep);font-size:14.5px;line-height:1.5}

/* Бесплатная первая задача (вход по ссылке из видео) */
.lk-promo{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:14px 16px;
  border-radius:var(--radius);background:var(--amber-wash);font-size:15px;line-height:1.5;color:var(--ink-70)}
.lk-plan--free .lk-plan__body{border-color:var(--amber)}
.lk-accept{padding:var(--s5);border-radius:var(--radius-lg);background:var(--amber-wash)}

/* ==========================================================================
   ЖУРНАЛ ЗАДАЧ — намеренно в логике списка документов 1С.
   Бухгалтер должен узнать привычную сетку: панель кнопок сверху, таблица
   с тонкими линиями, колонка «Состояние» с цветным маркером, номер документа.
   ========================================================================== */

/* Панель команд над списком — аналог командной панели формы списка */
.j-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);
  border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.j-bar .btn{min-height:38px;padding:8px 15px;font-size:15px}
.j-bar__sep{flex:1}
/* Учётка демо-базы рядом с кнопкой «Открыть базу» — та же подача, что в карточке задачи */
.j-bar__cred{font-size:13.5px;color:var(--ink-50);font-variant-numeric:tabular-nums}
.j-filter{display:flex;gap:2px;flex-wrap:wrap}
.j-filter a{padding:7px 12px;border-radius:7px;font-size:14.5px;text-decoration:none;
  color:var(--ink-70);white-space:nowrap}
.j-filter a:hover{background:var(--surface);color:var(--ink)}
.j-filter a[aria-current=true]{background:var(--ink);color:#fff}

/* Сама таблица списка */
.j-wrap{border:1px solid var(--line);border-radius:0 0 var(--radius-lg) var(--radius-lg);
  overflow-x:auto;background:var(--surface)}
.j-list{width:100%;border-collapse:collapse;font-size:15px;min-width:720px}
.j-list thead th{position:sticky;top:0;background:var(--surface-2);text-align:left;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-50);padding:9px 12px;border-bottom:1px solid var(--line-strong);
  white-space:nowrap}
.j-list td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.j-list tbody tr:hover{background:var(--amber-wash)}
.j-list tbody tr:last-child td{border-bottom:0}
.j-list a.j-link{color:var(--ink);text-decoration:none;font-weight:500}
.j-list a.j-link:hover{color:var(--amber-deep);text-decoration:underline}
.j-num{font-variant-numeric:tabular-nums;color:var(--ink-50);font-size:14px;white-space:nowrap}
.j-date{font-variant-numeric:tabular-nums;color:var(--ink-70);font-size:14px;white-space:nowrap}
.j-muted{color:var(--ink-50);font-size:13.5px;margin-top:3px;display:block}

/* Маркер состояния — как «пометка» в списке документов */
.j-state{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:14.5px}
.j-state::before{content:'';width:9px;height:9px;border-radius:2px;flex:none}
.j-state[data-t=wait]::before{background:var(--ink-50)}
.j-state[data-t=ask]::before{background:#C9821A}
.j-state[data-t=work]::before{background:#1F6FB2}
.j-state[data-t=demo]::before{background:var(--amber);box-shadow:0 0 0 3px var(--amber-wash)}
.j-state[data-t=ok]::before{background:#2E9E5B}
.j-state[data-t=done]::before{background:var(--green)}
.j-state[data-t=off]::before{background:var(--line-strong)}
.j-state[data-t=demo]{font-weight:600;color:var(--amber-deep)}
.j-state[data-t=ask]{font-weight:600;color:#8A5A00}

.j-empty{padding:var(--s7) var(--s5);text-align:center;color:var(--ink-50)}

/* На телефоне журнал — не таблица с боковым скроллом (состояние уезжало за экран),
   а карточки: номер+дата сверху, задача крупно, состояние и время снизу. */
@media(max-width:640px){
  .j-cards.j-list{min-width:0}
  .j-cards thead{display:none}
  .j-cards,.j-cards tbody,.j-cards tr,.j-cards td{display:block}
  .j-cards tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:4px;
    padding:14px 15px;border-bottom:1px solid var(--line)}
  .j-cards tbody tr:hover{background:transparent}
  .j-cards tbody tr:last-child{border-bottom:0}
  .j-cards td{padding:0;border:0}
  .j-cards td:nth-child(1){order:1;align-self:center}
  .j-cards td:nth-child(2){order:2;justify-self:end;text-align:right;align-self:center}
  .j-cards td:nth-child(3){order:3;grid-column:1/-1;margin:2px 0 4px}
  .j-cards td:nth-child(4){order:4;align-self:center}
  .j-cards td:nth-child(5){order:5;justify-self:end;text-align:right;align-self:center}
  .j-cards a.j-link{font-size:16px}
}

/* --- Карточка задачи ------------------------------------------------------ */
.t-head{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:flex-start;
  justify-content:space-between;padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.t-head__main{flex:1 1 380px;min-width:0}
/* Блок состояния — своя колонка с левым выравниванием: прижатая вправо
   подсказка рвалась на две строки и читалась хуже. */
.t-head__state{flex:0 0 auto;max-width:280px;text-align:left;
  background:var(--surface-2);border-radius:var(--radius);padding:14px 16px}
.t-props{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--s5);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(min-width:640px){.t-props{grid-template-columns:repeat(2,minmax(0,1fr))}}
.t-prop{display:flex;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--surface);font-size:14.5px}
.t-prop:nth-child(odd){border-right:1px solid var(--line)}
@media(min-width:640px){.t-prop:last-child:nth-child(odd){grid-column:1/-1;border-right:0}}
.t-prop b{color:var(--ink-50);font-weight:400;min-width:120px;flex:none}
.t-prop span{font-variant-numeric:tabular-nums}

/* Переписка */
.msg{display:flex;gap:12px;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.msg:last-of-type{border-bottom:0}
.msg__ava{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:13px;font-weight:600;background:var(--surface-2);color:var(--ink-50)}
.msg--adm .msg__ava{background:var(--ink);color:#fff}
/* Фото Маруси вместо буквы: лицо в переписке читается лучше инициала и показывает,
   что с той стороны живой человек. object-fit нужен, чтобы кадр не плющило. */
.msg__ava--photo{object-fit:cover;background:var(--surface-2)}

/* Доработка в карточке задачи: строка «что поставили», а не второй раздел. */
.t-dlv{margin-top:var(--s5);padding:14px 18px;border:1.5px solid var(--line);border-radius:var(--radius-lg)}
.t-dlv__row{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  padding:6px 0}
.t-dlv__name{display:flex;flex-direction:column;gap:2px;font-size:15px}
.t-dlv__name span{color:var(--ink-50);font-size:13.5px}
.t-dlv__row .btn{min-height:36px;padding:7px 14px;font-size:14.5px;width:auto}
.t-dlv__add{margin-top:var(--s4)}
.t-dlv__add>summary{list-style:none;cursor:pointer}
.t-dlv__add>summary::-webkit-details-marker{display:none}
.t-dlv__pair{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
@media (max-width:560px){.t-dlv__pair{grid-template-columns:1fr}}

/* Реестр доработок: карточка на доработку, версии — внутрь details, чтобы список
   не превращался в простыню из десяти одинаковых строк. */
.dlv__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.dlv__act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dlv__act .btn{min-height:38px;padding:8px 16px;font-size:15px;width:auto}
.dlv__how{margin-top:var(--s5);padding:14px 16px;background:var(--surface-2);border-radius:var(--radius)}
.dlv__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:var(--s4);font-size:13.5px;color:var(--ink-50)}
.dlv__meta code{font-size:12.5px}
.dlv__prev{margin-top:var(--s4)}
.dlv__prev>summary{cursor:pointer;font-size:14px;color:var(--ink-50);list-style:none;
  border-bottom:1px dashed var(--line-strong);display:inline-block;padding-bottom:1px}
.dlv__prev>summary::-webkit-details-marker{display:none}
.dlv__prev>summary:hover{color:var(--ink)}

/* Удаление копии базы: спокойная полоса, кнопка прячет подтверждение внутрь —
   действие необратимое, но пугать им человека на каждом заходе незачем. */
.b-erase{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  margin-top:var(--s6);padding:14px 18px;border:1.5px solid var(--line);border-radius:var(--radius-lg)}
.b-erase__text{display:flex;flex-direction:column;gap:2px;font-size:15px}
.b-erase__text span{color:var(--ink-50);font-size:14px}
.b-erase__act>summary{list-style:none;cursor:pointer}
.b-erase__act>summary::-webkit-details-marker{display:none}
.b-erase__form{margin-top:12px;font-size:14.5px;color:var(--ink-50);max-width:520px}
.b-erase__form .btn{margin-top:10px;min-height:38px;padding:8px 16px;font-size:15px;width:auto}

/* Доступ в демо-базу: одна полоса, без тяжёлой карточки — это подсказка, а не раздел. */
.t-demo{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  margin-top:var(--s5);padding:14px 18px;border:1.5px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface-2)}
.t-demo__text{display:flex;flex-direction:column;gap:2px;font-size:15px}
.t-demo__text span{color:var(--ink-50);font-size:14px}
.t-demo__act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.t-demo__act .btn{min-height:38px;padding:8px 16px;font-size:15px;width:auto}
.t-demo__cred{font-size:13.5px;color:var(--ink-50);font-variant-numeric:tabular-nums}

/* Оценка результата. Звёзды выводятся в обратном порядке (5→1) и подсвечиваются
   через ~ : так «наведение на третью» красит первые три без единой строки JS. */
/* «Изменить» под своим сообщением: служебное действие, а не часть разговора —
   поэтому мельче и тусклее текста, до наведения почти незаметно. */
.msg__edit>summary{font-size:13px;color:var(--ink-50);font-weight:500;cursor:pointer;list-style:none;
  display:inline-block;padding:2px 0;border-bottom:1px dashed transparent}
.msg__edit>summary::-webkit-details-marker{display:none}
.msg__edit>summary:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.msg__edit[open]>summary{color:var(--ink)}

.t-rate{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.t-rate__q{font-weight:600}
.t-rate__form{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;flex-wrap:wrap}
.t-rate__set{display:inline-flex;flex-direction:row-reverse;gap:2px}
.t-rate__star{background:none;border:0;cursor:pointer;font-size:26px;line-height:1;padding:2px 3px;
  color:var(--line);transition:color .12s ease,transform .12s ease}
.t-rate__star:hover,.t-rate__star:focus-visible{color:var(--amber);transform:scale(1.12);outline:none}
.t-rate__star:hover ~ .t-rate__star,.t-rate__star:focus-visible ~ .t-rate__star{color:var(--amber)}
.t-rate__done{display:flex;align-items:center;gap:10px;font-weight:600}
.t-rate__stars{color:var(--amber);font-size:20px;letter-spacing:1px}
.msg__body{flex:1;min-width:0}
.msg__who{font-size:14px;font-weight:600}
.msg__when{font-size:13px;color:var(--ink-50);margin-left:8px;font-weight:400;
  font-variant-numeric:tabular-nums}
.msg__text{margin-top:5px;font-size:15.5px;line-height:1.5;white-space:pre-wrap;
  overflow-wrap:anywhere}
.msg--sys{background:var(--surface-2);border-radius:var(--radius);padding:10px 14px;
  font-size:14px;color:var(--ink-50);border-bottom:0;margin:var(--s3) 0}

/* Вложения */
.att{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.att__img{display:block;border:1px solid var(--line);border-radius:9px;overflow:hidden;
  max-width:190px;line-height:0}
.att__img img{width:100%;height:auto;display:block}
.att__file{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;font-size:14px;
  border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--ink);
  background:var(--surface);max-width:100%}
.att__file:hover{border-color:var(--amber);color:var(--ink)}
.att__file svg{width:17px;height:17px;flex:none;color:var(--ink-50)}
.att__file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att__file b{font-weight:400;color:var(--ink-50);font-size:13px;flex:none}
.att video{max-width:320px;border-radius:9px;border:1px solid var(--line)}

/* Кнопки действий по задаче */
.t-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5);
  padding:var(--s5);background:var(--amber-wash);border-radius:var(--radius-lg)}
.t-acts p{width:100%;margin:0 0 4px;font-size:14.5px;color:var(--amber-deep);font-weight:600}

/* Поле загрузки */
.drop{display:block;width:100%;box-sizing:border-box;
  border:1.5px dashed var(--line-strong);border-radius:var(--radius);padding:14px;
  text-align:center;font-size:14.5px;color:var(--ink-50);cursor:pointer;
  transition:border-color .18s ease,background .18s ease}
.drop:hover,.drop[data-over=true]{border-color:var(--amber);background:var(--amber-wash)}
.drop input{display:none}
.drop__list{margin-top:10px;font-size:14px;color:var(--ink);text-align:left}
.drop__list div{padding:3px 0}

/* --- Передача копии базы ---------------------------------------------------
   Зона перетаскивания намеренно крупная: её ищут глазами, а не читают. */
.up-drop{border:2px dashed var(--line-strong);border-radius:var(--radius-lg);
  padding:var(--s7) var(--s5);text-align:center;color:var(--ink-50);
  transition:border-color .15s ease,background .15s ease}
.up-drop.is-over{border-color:var(--amber);background:var(--amber-wash)}
.up-drop__t{margin-top:var(--s4);font-size:17px;color:var(--ink)}
.up-drop__s{margin-top:var(--s3);font-size:14.5px}
.up-drop .btn{margin-top:var(--s4)}

.up-run__head{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;
  justify-content:space-between}
/* Полоса тонкая и во всю ширину: на 20 ГБ она — единственный признак жизни. */
.up-bar{margin-top:var(--s4);height:10px;border-radius:5px;background:var(--surface-2);
  overflow:hidden;border:1px solid var(--line)}
.up-bar i{display:block;height:100%;background:var(--amber);
  transition:width .3s ease}
.up-run__foot{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;
  margin-top:var(--s3);font-size:14.5px;color:var(--ink-50);
  font-variant-numeric:tabular-nums}
.up-run__foot .btn{margin-left:auto}
.btn--sm{padding:6px 14px;font-size:14px}

.up-how{margin-top:var(--s4);padding-left:22px;line-height:1.7}
.up-how li{margin-top:6px}

/* Журнал передач. Классы свои: у таблицы задач min-width 720px, и на телефоне
   она прокручивается вбок — списку из четырёх полей это не нужно. */
.b-wrap{border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface)}
.b-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--s4);
  align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px}
.b-row .j-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-sub{padding:0 16px 12px;font-size:14px;color:var(--ink-50);border-bottom:1px solid var(--line)}
.b-sub code{font-size:13px;background:var(--surface-2);padding:2px 6px;border-radius:4px}
/* Шапка кабинета: пунктов стало три, и на 390 px «Выйти» уезжало за край.
   ⛔ Правило обязано лежать в lk.css — он грузится ПОСЛЕ style.css,
   где .nav__inner идёт без переноса. */
@media(max-width:520px){
  .nav__inner{flex-wrap:wrap;row-gap:10px}
  /* Бренду — отдельная строка, пунктам — вторая. Иначе они переносятся
     по одному и шапка растягивается на три строки. */
  .brand{flex:1 0 100%}
  .brand__sub{display:none}
  .nav__lk{margin-left:0 !important;padding:8px 14px;font-size:14.5px}
  /* ⛔ В style.css на экранах уже 480 px любая .btn растягивается во всю ширину —
     из-за этого «Выйти» уезжало на отдельную третью строку. В шапке отменяем. */
  .lk-exit{margin-left:auto !important;width:auto !important;flex:0 0 auto;
    padding:8px 14px;font-size:14.5px}
}
@media(max-width:640px){
  .b-row{grid-template-columns:1fr auto;row-gap:6px}
  .b-row .j-date{order:1}
  .b-row .j-state{order:2}
  .b-row .j-name{order:3;grid-column:1/-1;white-space:normal}
  .b-row .j-muted{order:4;grid-column:1/-1}
}

/* Флажок «пароля нет». В кабинете это первый чекбокс, готового стиля не было:
   у браузерного по умолчанию 13 px — на телефоне в него не попасть пальцем. */
.lk-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px}
.lk-check input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--amber);cursor:pointer}

/* База для разработки: список типовых конфигураций — строки с радио, а не карточки.
   Пять карточек заняли бы экран, а выбирают тут по названию, одним взглядом. */
.lk-opts{display:grid;gap:8px;margin-top:var(--s4)}
.lk-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:var(--radius);background:var(--surface);cursor:pointer;font-size:15px;
  transition:border-color .15s ease,box-shadow .15s ease}
.lk-opt input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--amber);cursor:pointer;margin:0}
/* Название тянется и переносится ВНУТРИ строки: иначе на 390 px длинное «Зарплата и управление
   персоналом» целиком уезжало под радио, и кружок висел один на первой строке. */
.lk-opt>span:first-of-type{flex:1 1 0;min-width:0}
.lk-opt:hover{border-color:var(--line-strong)}
.lk-opt:has(input:checked){border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-wash)}
.lk-opt__s{margin-left:auto;color:var(--ink-50);font-size:14px;white-space:nowrap}
@media(max-width:480px){.lk-opt{flex-wrap:wrap}.lk-opt__s{margin-left:32px;flex:1 0 100%}}

/* Замечания к результату — раскрывающаяся панель вместо кнопки-с-ошибкой (видео Кирилла 04.09).
   Закрыта — обычная кнопка в ряду действий; открыта — занимает всю ширину, поле сразу под ней. */
.t-acts__row{display:contents}
.t-remark{flex:0 0 auto}
.t-remark[open]{flex:1 0 100%}
.t-remark summary{list-style:none;display:inline-flex;cursor:pointer}
.t-remark summary::-webkit-details-marker{display:none}
.t-remark[open] summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.t-remark__form{margin-top:var(--s4);padding:var(--s5);background:var(--surface);
  border:1.5px solid var(--amber);border-radius:var(--radius-lg)}
.t-remark__form .field{margin-bottom:var(--s4)}

/* ==========================================================================
   БОКОВОЕ МЕНЮ КАБИНЕТА (05.09.2026) — «все кнопки слева, как у SaaS».
   Слева фиксированная колонка: логотип, разделы, внизу компания и «Выйти».
   На телефоне колонка превращается в верхнюю плашку с горизонтальной лентой разделов.
   ========================================================================== */
.lk-app{display:flex;min-height:100vh;background:var(--paper)}
.lk-side{flex:0 0 248px;position:sticky;top:0;height:100vh;box-sizing:border-box;
  display:flex;flex-direction:column;background:var(--surface);
  border-right:1px solid var(--line);padding:18px 14px 16px}
.lk-side__top{display:flex;align-items:center;gap:10px;padding:2px 6px 16px}
.lk-side__top .brand__name{font-size:16px}
.lk-side__exit-m{display:none}
.lk-menu{display:flex;flex-direction:column;gap:2px}
.lk-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  color:var(--ink-70);text-decoration:none;font-size:15.5px;font-weight:500;line-height:1.2;
  transition:background .12s ease,color .12s ease}
.lk-menu a svg{width:20px;height:20px;flex:none;color:var(--ink-50)}
.lk-menu a:hover{background:var(--surface-2);color:var(--ink)}
.lk-menu a[aria-current=page]{background:var(--amber-wash);color:var(--ink);font-weight:600}
.lk-menu a[aria-current=page] svg{color:var(--amber-deep)}
.lk-menu__badge{margin-left:auto;min-width:22px;padding:2px 7px;border-radius:999px;background:var(--amber);
  color:var(--ink);font-size:12.5px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.lk-side__user{margin-top:auto;padding:14px 6px 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;min-width:0}
.lk-side__co{font-size:14.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-side__mail{font-size:13px;color:var(--ink-50);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-side__exit{margin-top:10px;min-height:38px;padding:7px 14px;font-size:14.5px;align-self:flex-start;width:auto !important}
.lk-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.lk-content{padding:var(--s6) var(--s7) var(--s8)}
.lk-content .wrap{margin:0;padding-inline:0}
/* В приложении заголовок страницы скромнее, чем на сайте: это рабочий экран, не лендинг. */
.lk-app .h1{font-size:clamp(26px,2.8vw,34px)}
.lk-app .lede{font-size:17px}
.lk-foot{margin-top:auto;padding:var(--s4) var(--s7);border-top:1px solid var(--line);font-size:13.5px;
  color:var(--ink-50);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between}
.lk-foot a{color:inherit}
@media(max-width:900px){
  .lk-app{display:block}
  .lk-side{position:sticky;top:0;z-index:var(--z-nav);height:auto;flex:none;max-width:100%;padding:10px 12px 0;
    border-right:0;border-bottom:1px solid var(--line)}
  .lk-side__top{padding:2px 4px 10px}
  /* ⛔ Правило шапки сайта `.brand{flex:1 0 100%}` (≤520 px, бренд на отдельной строке) здесь
     растягивало бренд на всю ширину и выталкивало «Выйти» за экран (454 px на 390). */
  .lk-side__top .brand{flex:0 1 auto;min-width:0}
  .lk-side__top .brand__sub{display:none}
  .lk-side__exit-m{display:inline-flex;margin-left:auto;min-height:36px;padding:6px 12px;font-size:14px;width:auto !important}
  /* ⛔ min-width:0 обязателен: flex-элемент не ужимается уже своего содержимого, и лента
     из восьми пунктов растягивала колонку до 454 px — страница ехала вбок. */
  .lk-menu{flex-direction:row;gap:4px;overflow-x:auto;min-width:0;max-width:100%;padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .lk-menu::-webkit-scrollbar{display:none}
  .lk-menu a{flex:none;padding:8px 11px;font-size:14.5px}
  .lk-menu a svg{width:18px;height:18px}
  .lk-menu__badge{margin-left:2px}
  .lk-side__user{display:none}
  .lk-content{padding:var(--s5) 16px var(--s7)}
  .lk-foot{padding:var(--s4) 16px}
}

/* Счета: карточки тарифов в один ряд компактнее, чем на онбординге */
.lk-plans--compact{grid-template-columns:1fr}
@media(min-width:640px){.lk-plans--compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.lk-plans--compact{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lk-plans--compact .lk-plan__price{font-size:22px}

/* ЭДО и обратная связь: карточка состояния */
.lk-state{display:flex;gap:14px;align-items:flex-start;padding:var(--s5);border-radius:var(--radius-lg);
  background:var(--surface-2)}
.lk-state .j-state{font-size:16px;font-weight:600}
.lk-hist{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.lk-hist__row{padding:14px 16px;border-bottom:1px solid var(--line)}
.lk-hist__row:last-child{border-bottom:0}
.lk-hist__meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:14px;color:var(--ink-50);margin-bottom:6px}
.lk-hist__text{white-space:pre-wrap;font-size:15px;line-height:1.5}

/* Группа «Настройки» в меню, показатели тарифа, база знаний (05.09.2026) */
.lk-menu__group{margin:12px 12px 4px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}
@media(max-width:900px){.lk-menu__group{display:none}}
.lk-kpis{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:700px){.lk-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lk-kpi{display:flex;flex-direction:column;gap:6px;padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.lk-kpi__l{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-50)}
.lk-kpi__v{font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lk-kpi__s{font-size:14px;color:var(--ink-50)}
.lk-bar{display:block;height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:4px}
.lk-bar i{display:block;height:100%;background:var(--amber)}
.kb{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)}
.kb p{margin-top:var(--s3);line-height:1.6}
.kb .up-how{margin-top:var(--s3)}

/* Переключатель подключённых баз (15.09.2026). Показывается только когда баз больше
   одной: у большинства клиентов база одна, и лишний ряд вкладок им ничего не говорит. */
.lk-tabs{display:flex;flex-wrap:wrap;gap:8px}
.lk-tab{display:inline-flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:var(--radius-lg);
  border:1.5px solid var(--line);background:var(--surface);text-decoration:none;color:inherit;
  font-weight:600;font-size:15px;line-height:1.2;transition:border-color .18s ease}
.lk-tab span{font-weight:400;font-size:13.5px;color:var(--ink-50)}
.lk-tab:hover{border-color:var(--line-strong)}
.lk-tab.is-on{border-color:var(--amber);border-width:2px;padding:calc(10px - .5px) calc(16px - .5px);
  box-shadow:0 0 0 3px var(--amber-wash)}

/* Служебный режим: последний ответ Маруси — первым экраном, с кнопками хода под ним.
   Рамка янтарная, как у выбранной вкладки: это то, ради чего открыли страницу. */
.t-last{margin-top:var(--s5);padding:var(--s5) var(--s6) var(--s4);background:var(--surface);
  border:2px solid var(--amber);border-radius:var(--radius-lg);box-shadow:0 0 0 3px var(--amber-wash)}
.t-last .eyebrow{margin:0}
.t-last>.msg:first-of-type{margin-top:var(--s3)}
.t-last__hint{margin:8px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-70)}
.t-last .t-acts{margin:var(--s3) calc(var(--s4) * -1) 0}
.t-last__ref{margin:var(--s3) 0 0;font-size:14.5px}
@media (max-width:560px){.t-last{padding:var(--s4)}.t-last .t-acts{margin-left:0;margin-right:0}}

/* Служебная карточка задачи — во всю ширину экрана (Иван 25.09.2026): длинные ответы Маруси
   со скриншотами читать в колонке 860 px неудобно. Шапку и подвал растягиваем вместе
   с содержимым, иначе логотип и текст стоят на разных вертикалях. Клиенту колонка прежняя. */
.lk-fluid,
body:has(.lk-fluid) .nav__inner,
body:has(.lk-fluid) .foot .wrap{max-width:1760px;padding-inline:clamp(20px,4vw,64px)}

/* Служебный экран, «Задачи»: фильтр по состояниям, плотная таблица, окно задачи
   (assets/adm-tasks.js). Строка кликается целиком — окно, а не переход. */
.at-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s7)}
.at-top .h3{margin:0;white-space:nowrap}
.at-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.at-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1.5px solid var(--line);
  border-radius:999px;background:var(--surface);cursor:pointer;font:inherit;color:var(--ink-50);opacity:.72}
.at-chip .j-state{font-size:13.5px;font-weight:500;color:inherit}
.at-chip b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-50)}
.at-chip:hover{border-color:var(--line-strong);opacity:1}
.at-chip.is-on{border-color:var(--amber);background:var(--amber-wash);color:var(--ink);opacity:1}
.at-filter__quick{font-size:13.5px;color:var(--ink-50);margin-left:6px}
.at-link{border:0;background:none;padding:0;font:inherit;color:var(--amber-deep);text-decoration:underline;cursor:pointer}
.at-list{font-size:14.5px}
.at-list td{padding:7px 12px;vertical-align:middle}
.at-list thead th{padding-top:9px;padding-bottom:9px}
.at-list tbody tr[data-task]{cursor:pointer}
.at-list tbody tr.is-cur{background:var(--amber-wash);box-shadow:inset 3px 0 0 var(--amber)}
.at-c-num{width:104px}.at-c-date{width:132px}.at-c-co{width:22%}.at-c-st{width:210px}.at-c-sp{width:150px}
.at-co{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;color:var(--ink-70)}
.at-title a{display:block}
.at-none td{padding:18px 12px;color:var(--ink-50);text-align:center;cursor:default}

.at-pop{padding:0;border:0;border-radius:var(--radius-lg);width:min(980px,94vw);max-height:90vh;
  background:var(--surface);box-shadow:0 24px 60px rgba(20,22,26,.28);overflow:auto}
.at-pop::backdrop{background:rgba(20,22,26,.42)}
.at-pop__box{padding:var(--s5) var(--s6)}
.at-pop__wait{padding:var(--s6) 0;text-align:center}
.pop__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.pop__head .j-state{margin-top:4px;font-size:15px}
.pop__tz{margin-top:var(--s3);font-size:14.5px}
.pop__tz summary{cursor:pointer;color:var(--amber-deep);font-weight:600}
.pop>.msg{margin-top:var(--s3)}
.pop .t-acts{margin-top:var(--s3)}
.pop__foot{margin-top:var(--s4);font-size:14px}
.at-flash{margin:0 0 var(--s3);padding:10px 14px;border-radius:var(--radius);background:#E7F5EC;
  color:#1E6B3E;font-weight:600;font-size:15px}
@media (max-width:560px){.at-pop__box{padding:var(--s4)}.pop__head{flex-direction:column}}
/* Листание в окне задачи: панель прилипает к верху, чтобы «Следующая» была под рукой
   и на длинном ответе со скриншотами. */
.at-pop__nav{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;
  padding:10px var(--s6);background:var(--surface-2);border-bottom:1px solid var(--line)}
.at-pop__nav .btn{min-height:36px;padding:6px 14px;font-size:14.5px;width:auto}
.at-pop__nav .btn:disabled{opacity:.4;cursor:default}
.at-pop__nav [data-at-pos]{font-size:14px;font-variant-numeric:tabular-nums;min-width:64px;text-align:center}
.at-pop__x{margin-left:auto;border:0;background:none;font-size:26px;line-height:1;color:var(--ink-50);
  cursor:pointer;padding:0 4px}
.at-pop__x:hover{color:var(--ink)}
@media (max-width:560px){.at-pop__nav{padding:8px var(--s4);gap:6px}.at-pop__nav .btn{padding:6px 10px;font-size:13.5px}}
@media (max-width:560px){.at-pop__nav .at-w{display:none}.at-pop__nav .btn{min-width:48px;font-size:18px}}

/* ---- 10.10.2026: шаблоны задач, ответы кнопкой, проверка входа, подсказки черновика ---- */
.t-kinds{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s6)}
.t-kinds a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:14.5px;
  text-decoration:none;color:var(--ink-70);background:#fff}
.t-kinds a:hover{border-color:var(--amber);color:var(--ink)}
.t-kinds a[aria-current=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.t-tpl__inn{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.t-tpl__inn .field{flex:1 1 220px;margin-bottom:0}
.t-tpl__inn .btn{width:auto;min-height:44px;margin-bottom:2px}
.t-quick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding:12px 14px;
  border-radius:var(--radius);background:var(--amber-wash)}
.t-quick__q{font-weight:600;font-size:14.5px;width:100%}
.t-quick__btn{width:auto;min-height:38px;padding:7px 14px;font-size:15px;background:#fff}
.t-quick .form-note{width:100%;margin:0}
.t-hints ul{margin:8px 0 0 18px;padding:0;display:grid;gap:6px}
.t-hints a{color:inherit;text-decoration:underline}
.t-hints__btn{border:0;background:none;padding:0;font:inherit;color:var(--ink);font-weight:600;
  text-decoration:underline;cursor:pointer}
.t-demo__health{font-size:13.5px;color:var(--green)}
.t-demo__health[data-ok="0"]{color:var(--amber-deep);font-weight:600}
.t-demo__noaccess{flex-basis:100%;margin-top:0}
.t-demo__noaccess summary{font-size:14.5px;color:var(--ink-70);cursor:pointer;text-decoration:underline}
.t-cont{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:var(--s5)}
.t-cont .btn{width:auto}
.msg__text a{color:var(--amber-deep);font-weight:600}
/* Пара полей в одну строку: второму полю сосед сверху не нужен (иначе ОГРН ниже КПП). */
.t-dlv__pair>.field+.field{margin-top:0}
.field+.t-dlv__pair,.t-dlv__pair+.field,.t-tpl__inn+.field{margin-top:var(--s4)}
@media (max-width:560px){.t-dlv__pair>.field+.field{margin-top:var(--s4)}}