/* ==========================================================================
   Кабинет клиента — дизайн. Слой поверх lk.css, по тем же правилам, что
   design-3*.css на публичке (созвон 21.09.2026): без градиентов, серый
   нейтральный, а не тёплый, выделение — инверсией, красный только там,
   где у него есть смысл — не декоративная заливка.

   Идём по одному экрану за раз: готовы каркас (шапка, меню) и дашборд —
   они собраны из общих компонентов (.btn, .lk-panel, .lk-kpi…), поэтому
   их правки здесь автоматически подхватывают и остальные разделы. Своей,
   специфичной для экрана раскраски у других разделов пока нет: они и
   дальше выглядят как Ч/Б прототип, только на обновлённой палитре и
   кнопках — так и должно быть на этом шаге.

   client.html остаётся эталоном «как было», client-design.html — эта
   версия, точно так же, как index-design-3.html рядом с index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Палитра
   -------------------------------------------------------------------------- */
.lkd{
  --brand:#DD443C;
  --brand-600:#C8362F;
  --brand-300:#F08F88;
  --brand-100:#FBE3E1;
  --brand-50:#FEF3F2;

  /* Те же нейтральные ступени, что в design-3: без розовой примеси */
  --ink:#1B1B1B;
  --ink-2:#565656;
  /* Две нижние ступени серого темнее, чем на публичке. Там светло-серым
     набраны подписи, которые можно и пропустить; здесь им набраны шапки
     колонок, счётчики и вторые строки таблиц — то, к чему возвращаешься
     каждый раз, чтобы понять, что означает число в ячейке. На белом
     #B6B6B6 давал контраст 2.0 при норме 4.5: колонку приходилось
     угадывать. Ступени остались четырьмя различимыми, просто плотнее. */
  --ink-3:#767676;
  --ink-4:#949494;
  --line:#E8E8E8;
  --line-strong:#D3D3D3;
  --surface:#F6F6F6;
  --surface-2:#ECECEC;

  /* Статусные цвета — единственное место, где палитра выходит за белый,
     серый, чёрный и фирменный красный. design-3 разрешает цветовой код
     ровно там, где у цвета есть общепринятое значение: у состояния
     «работает / ждёт / сломалось» оно есть, и это светофор. Взяты
     приглушённые тона, чтобы рядом с фирменным красным не спорили. */
  --st-ok:#16663C;    --st-ok-bg:#E7F6EC;
  --st-wait:#8A5A00;  --st-wait-bg:#FDF1DC;
}

/* --------------------------------------------------------------------------
   Логотип в шапке меню
   --------------------------------------------------------------------------
   Было слово «Логотип» без начертания. Теперь фирменный знак и подпись,
   что за кабинет открыт — как на публичке, где под лого сразу видно,
   какой это сервис. */
.lkd .lk__logo{
  height:auto;margin:0 -16px;padding:18px 26px 14px;
  display:flex;align-items:center;gap:10px;
  border-bottom:0;
}
/* Ровно те же значения, что у .dz-logo в design.css и .dz3 в
   design-3-type.css: знак 46px по высоте, слово прописными в 14px без
   межбуквенного сжатия, наклон знака при наведении. Кабинет и витрина —
   один продукт, и логотип в них должен быть не «похожим», а тем же. */
.lkd-logo__mark{
  display:block;height:46px;width:auto;flex:0 0 auto;
  transform-origin:50% 90%;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.lkd .lk__logo:hover .lkd-logo__mark{transform:rotate(-8deg) translateY(-2px)}
.lkd-logo__word{
  font-family:"Onest",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;font-size:14px;line-height:1.02;letter-spacing:0;
  text-transform:uppercase;color:var(--ink);
}
.lkd-side__tag{
  display:block;margin:0 -16px 14px;padding:0 26px 16px;
  border-bottom:1px solid var(--line);
  font-size:12px;color:var(--ink-3);
}

/* --------------------------------------------------------------------------
   Ширина меню у партнёра
   --------------------------------------------------------------------------
   Колонка в 246px рассчитывалась по кабинету клиента, где самый длинный
   пункт — «Профиль компании». У партнёра названия длиннее: «Региональные
   клиенты» и «Маркетплейс · Мои коды» не помещались в строку и ломались
   на две, из-за чего ряд пунктов шёл рваным — часть в одну строку, часть
   в две. Самому длинному нужно 160px против доступных 149.

   Сокращать названия не стали: они различают два контура партнёра —
   региональных клиентов и селлеров маркетплейса, — и это различение
   важнее экономии пары десятков пикселей.

   Ширина считается по выбранному пункту, а не по обычному: у выбранного
   начертание жирнее, и «Маркетплейс · Мои коды» требует 171px против 160
   в покое — то есть пункт помещался, пока на него не перейдёшь, и ломался
   ровно на своей же вкладке. */
.lkd[data-role="partner"]{--lk-side:276px}

/* --------------------------------------------------------------------------
   Меню кабинета
   --------------------------------------------------------------------------
   Ряд слева — не разовая кнопка, а постоянный элемент интерфейса, поэтому
   тут не полная инверсия, как у тегов на витрине, а мягкое выделение:
   лёгкая подложка и красный значок текущего раздела, буквы остаются
   чёрными и просто набирают вес. */
.lkd .lk__nav a.is-on{
  background:var(--brand-50);color:var(--ink);font-weight:600;
}
.lkd .lk__nav a.is-on .lk__nav-i{color:var(--brand)}
.lkd .lk__nav a.is-on .lk__n{color:var(--ink-3)}
.lkd .lk__nav a:hover:not(.is-on){background:var(--surface);color:var(--ink)}
.lkd .lk__nav a:hover:not(.is-on) .lk__nav-i{color:var(--ink-2)}

/* --------------------------------------------------------------------------
   Кнопки
   --------------------------------------------------------------------------
   Тот же принцип, что на публичке: сплошная кнопка — фирменный красный,
   а не чёрный; контурная в покое нейтральная, под курсором тоже краснеет. */
.lkd .btn--solid{background:var(--brand);color:#fff}
.lkd .btn--solid:hover{background:var(--brand-600);opacity:1}
.lkd .btn--solid:focus-visible{outline:0;box-shadow:0 0 0 4px var(--brand-100)}
.lkd .btn--ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.lkd .lk-head__more:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}

/* --------------------------------------------------------------------------
   Учётная запись и уведомления в шапке
   --------------------------------------------------------------------------
   Аватар компании остаётся нейтральным: фирменный цвет в кабинете
   означает действие или требующее внимания состояние, а учётная запись —
   ни то, ни другое. Красный кружок рядом с красной кнопкой «Создать
   купон» к тому же спорил с ней за внимание в одной строке. */
.lkd .lk__wallet:hover{border-color:var(--brand-300);background:var(--brand-50)}
.lkd .lk__dot{background:var(--brand);border-color:var(--bg)}

/* Точка у непрочитанного пункта списка («Требует внимания», уведомления) —
   тот же красный, что у колокольчика: это один и тот же сигнал «посмотри». */
.lkd .lk-list__i.is-unread .lk-list__d{background:var(--brand)}

/* Свёрнутое приглашение на анкету: выгода набрана фирменным цветом — ради
   неё плашку и открывают, а название строкой выше только объясняет, что
   это. Рамка тоньше по цвету, чтобы плашка не спорила с панелями раздела. */
.lkd .lk-pill__body span{color:var(--brand);font-weight:500}

/* --------------------------------------------------------------------------
   Где красный, а где чёрный
   --------------------------------------------------------------------------
   Фирменный красный в кабинете значит одно — «здесь надо действовать»:
   главные кнопки, сигналы о том, что купон ждёт правки, выгода в плашке
   анкеты. Если красить им же ещё и выбранный фильтр, текущую страницу и
   поле в фокусе, цвет перестаёт что-либо значить: на экране «Моих купонов»
   он оказывался сразу в семи местах, из которых действием было одно.

   Поэтому выбранное состояние — табы, фильтры, чипы, текущая страница,
   фокус поля — остаётся чёрным, как в базовом lk.css, и отдельных правил
   здесь не требует. Правило простое: красный — призыв к действию,
   чёрный — где я сейчас нахожусь и что выбрано.

   Ховер контурных кнопок при этом красный: контурная кнопка — тоже
   действие, просто второстепенное, а красный там появляется лишь под
   курсором и в покое с главными кнопками не спорит. */

/* --------------------------------------------------------------------------
   Итоговая метрика в таблицах
   --------------------------------------------------------------------------
   «Забрали» — то, ради чего сервис и нужен: показы с просмотрами
   объясняют, как до него дошли, а забранный купон и есть результат. В
   ряду из четырёх одинаковых столбцов цифр он ничем не выделялся, хотя в
   статистике список ещё и отсортирован именно по нему — порядок строк
   выглядел случайным.

   Выделение только весом, без цвета: это не действие и не тревога,
   а просто главное число строки. */
.lkd .lk-t td.lk-t__key{font-weight:600;color:var(--ink)}
.lkd .lk-t th.lk-t__key{color:var(--ink-2)}

/* --------------------------------------------------------------------------
   Превью купона в мастере = карточка из ленты
   --------------------------------------------------------------------------
   Превью должно показывать будущий купон глазами посетителя, а значит
   совпадать с тем, что посетитель и увидит. Значения сняты с настоящей
   карточки: .cards-wb .card__badge и .card__title в style.css, плашка
   выгоды из design-3-cards.css, метка erid и угловая плашка оттуда же.

   Главное отличие от прежнего превью: выгода была гигантской цифрой по
   центру картинки, а в ленте она белой плашкой в левом нижнем углу.
   Человек сверял превью с лентой и видел два разных купона. */
.lkd .lk-prev__badge{
  position:absolute;left:10px;bottom:10px;z-index:2;
  max-width:calc(100% - 54px);padding:7px 13px;border-radius:12px;
  background:#fff;color:var(--brand);
  font-family:"Onest",ui-sans-serif,system-ui,sans-serif;
  font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.45);
}
/* Знак сервиса уходит в правый нижний угол — там он и стоит на карточке
   в ленте. Слева внизу теперь плашка выгоды, и вдвоём они налезали. */
.lkd .lk-wm-corner{left:auto;right:10px}

/* Подпись-заглушка уходит в центр картинки: снизу теперь стоит плашка
   выгоды, и на прежнем месте они налезали друг на друга. */
.lkd .lk-prev__hold{
  top:50%;bottom:auto;transform:translateY(-50%);
  padding:0 14px;line-height:1.4;
}

/* Плашка в углу. У регионального купона — время ходьбы до точки, белым
   чипом (.card__near в style.css). У маркетплейсного расстояния нет:
   вместо минут название площадки её фирменным цветом, и белый чип под
   ним убирается — цвет площадки сам отделяет плашку от снимка
   (.dz3 .card__near--mp в design-3-cards.css). */
.lkd .lk-prev__near{
  position:absolute;top:10px;left:10px;z-index:2;
  display:inline-flex;align-items:center;max-width:calc(100% - 96px);
  padding:4px 9px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.86);
  font-size:11px;font-weight:500;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lkd .lk-prev__near--mp{
  background:none;padding:0;border-radius:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.lkd .mp-name{
  display:inline-flex;align-items:center;
  padding:0 8px;height:20px;border-radius:var(--r-pill);
  background:var(--mp,#1B1B1B);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
}

/* Метка erid — не плашка, а почти невидимая подпись. Вилл: «я хочу его
   не видеть, а я его вижу. Смешай серый, зелёный и синий и высветли —
   должен получиться цвет пыли». Значения из design-3-cards.css: цвет
   фиксированный, тень оставлена намеренно, иначе на светлом снимке
   маркировка пропадает совсем, а она обязана оставаться различимой. */
.lkd .lk-prev__erid{
  top:8px;right:8px;
  background:none;padding:0;border-radius:0;max-width:calc(100% - 96px);
  color:#B9C0BE;opacity:.5;
  text-shadow:0 1px 2px rgba(0,0,0,.30);
  font-size:10px;line-height:1.3;letter-spacing:.01em;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   Правая колонка мастера не должна обрезаться
   --------------------------------------------------------------------------
   Колонка липкая целиком, а в ней четыре панели: прогресс, превью,
   стоимость и оплата — 1407px против 796px доступной высоты на экране
   900px. Когда колонка прилипала, всё, что ниже сгиба, становилось
   недосягаемым: у карточки обрезались кнопки, а «Чем платим» нельзя было
   увидеть вообще, сколько ни прокручивай — страница уже кончилась, а
   колонка стоит на месте.

   Ограничиваем колонку высотой экрана и даём ей собственную прокрутку.
   Так низ достижим при любой высоте монитора, а не только на высоком:
   на ноутбуке с 700px не помещалась даже одна карточка. Отрицательный
   отступ справа — чтобы тени панелей не срезались полосой прокрутки. */
.lkd .lk-prev{
  max-height:calc(100vh - var(--header-h) - 40px);
  overflow-y:auto;
  padding-right:6px;margin-right:-6px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
@media (max-width:1000px){
  /* Ниже этой ширины колонка уже не липкая и идёт под формой —
     ограничивать её нечем и незачем. */
  .lkd .lk-prev{max-height:none;overflow:visible;padding-right:0;margin-right:0}
}

/* Рамки вокруг карточки нет: в ленте .cards-wb .card{border:0} — обводка
   там только у фотографии, и радиус у неё свой, 14px. Прежняя рамка
   обводила карточку целиком вместе с кнопками, отчего превью читалось
   как ещё одна панель формы, а не как купон в ленте. */
.lkd .lk-prev__card{border:0;background:none;border-radius:0;overflow:visible}
.lkd .lk-prev__media{border-radius:14px;overflow:hidden;border:1px solid var(--line)}

/* Столбик метрик справа на фото — по .dz3 .card__stats в design-3-cards.css */
.lkd .lk-prev__stats{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:11px 5px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.93);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.4);
  pointer-events:none;
}
.lkd .lk-prev__stat{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:30px;padding:2px;color:var(--ink-2);line-height:1;
}
.lkd .lk-prev__stat i{display:flex}
.lkd .lk-prev__stat b{
  font-size:10px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--ink-3);
}

.lkd .lk-prev__body{padding:10px 2px 0;display:flex;flex-direction:column;gap:6px}
/* Заголовок в ленте — ровно одна строка (dz3.cards-wb .card__title) */
.lkd .lk-prev__title{
  font-size:13.5px;font-weight:500;line-height:1.32;letter-spacing:-.005em;
  min-height:0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.lkd .lk-prev__meta{
  display:flex;align-items:center;gap:8px;min-width:0;margin:0;
  font-size:11.5px;color:var(--ink-3);
}
.lkd .lk-prev__meta b{
  font-weight:500;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Кнопки — часть картинки, а не управление: превью ничего не делает.
   Ширина пополам, как в ленте (.dz3 .card__actions .btn{flex:1 1 0}):
   было 60 на 40 в пользу «Подробнее», Коля попросил поровну — коду
   маркетплейса нужно место, там бывает 8–12 знаков. */
.lkd .lk-prev__acts{display:flex;gap:8px;pointer-events:none}
.lkd .lk-prev__acts .btn{flex:1 1 0;min-width:0;padding:0 10px}

/* Прогресс заполнения — своей плашкой над превью, не внутри него */
.lkd .lk-prog__box{padding:16px 18px}
.lkd .lk-prog__box .lk-prog{margin:0}

/* Выбор раздела купона: под курсором значок заливается фирменным, а не
   чёрным — выбор раздела это шаг к созданию купона, то есть действие. */
.lkd .lk-pick__i:hover{border-color:var(--brand);background:var(--brand-50)}
.lkd .lk-pick__i:hover .lk-pick__ic{background:var(--brand);color:#fff}

/* --------------------------------------------------------------------------
   Чат ИИ-консультанта
   --------------------------------------------------------------------------
   Поле переписки высотой 280px, а в начале разговора в нём одна реплика —
   прижатая к верху, под ней пустота в три четверти блока. Читается как
   «что-то не загрузилось», хотя всё в порядке.

   Прижимаем реплики к низу, как в любом мессенджере: пустое место
   оказывается над первой репликой, и блок читается как начало разговора,
   а не как сломанный. Высоту не трогаем — она держит размер модалки,
   чтобы та не прыгала с каждым новым сообщением. */
.lkd .lk-chat{justify-content:flex-end}

/* --------------------------------------------------------------------------
   Показатели как цепочка
   --------------------------------------------------------------------------
   Четыре показателя клиента — одна воронка: купон показали, открыли,
   забрали код, перешли к компании. Каждый шаг вложен в предыдущий, но
   четыре одинаковые карточки этого не показывают, и 84 890 рядом с 903
   читаются как несвязанные числа.

   Связь показана промежутком между карточками, а не диаграммой: график
   тут прямо запрещён, да и незачем — ряд плиток остаётся рядом плиток,
   просто между ними появляется стрелка, а в режиме ?kpi=conv ещё и
   процент перехода. Никакой заливки в цвет: цифра и так главное в
   карточке, а стрелка — служебная связка.

   Ниже 1100px ряд переносится на две строки, и стрелка между второй и
   третьей карточкой показывала бы в пустоту — там её нет. */
.lkd .lk-kpi--funnel{gap:34px}
.lkd .lk-kpi--funnel .lk-kpi__c{position:relative}
.lkd .lk-kpi__step{
  position:absolute;left:-34px;top:50%;transform:translateY(-50%);
  width:34px;height:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  pointer-events:none;
}
/* Стрелка. В режиме процентов она уезжает под число, чтобы не спорить
   с ним за те же 34 пикселя. */
.lkd .lk-kpi__step::after{
  content:"";position:absolute;top:50%;left:50%;
  width:6px;height:6px;margin:-4px 0 0 -5px;
  border-right:1.5px solid var(--ink-4);border-top:1.5px solid var(--ink-4);
  transform:rotate(45deg);
}
.lkd .lk-kpi__step:not(:empty)::after{top:calc(50% + 11px)}
@media (max-width:1100px){
  .lkd .lk-kpi--funnel{gap:12px}
  .lkd .lk-kpi__step{display:none}
}

/* --------------------------------------------------------------------------
   Строка таблицы как ссылка
   --------------------------------------------------------------------------
   Клик по строке открывает карточку купона или клиента — это основной путь
   к ней, других входов почти нет. При этом строка ничем не отличалась от
   обычной: ни стрелки, ни подписи, только курсор менялся, когда до строки
   уже довели мышь. Пока не ткнёшь наугад, способ не найти.

   Стрелка у правого края появляется на наведении и с клавиатуры — так она
   не засоряет таблицу в покое, но отвечает на вопрос «сюда можно нажать?»
   ровно в тот момент, когда он возникает. Место под неё отведено всегда,
   поэтому от наведения колонки не дёргаются.

   Строки, где в последней ячейке уже стоит кнопка (архив), исключены:
   там стрелка спорила бы с «Опубликовать снова». */
.lkd .lk-t tr[data-coupon]:not(:has(td:last-child .btn)) > td:last-child,
.lkd .lk-t tr[data-client]:not(:has(td:last-child .btn)) > td:last-child{
  position:relative;padding-right:26px;
}
.lkd .lk-t tr[data-coupon]:not(:has(td:last-child .btn)) > td:last-child::after,
.lkd .lk-t tr[data-client]:not(:has(td:last-child .btn)) > td:last-child::after{
  content:"";position:absolute;right:10px;top:50%;
  width:6px;height:6px;margin-top:-4px;
  border-right:1.5px solid var(--ink-3);border-top:1.5px solid var(--ink-3);
  transform:rotate(45deg);
  opacity:0;transition:opacity .16s, right .16s;
}
/* Условие :not(:has(…)) повторено и здесь не для красоты: :has() поднимает
   вес селектора, и без него правило ниже проигрывало бы объявлению выше,
   а стрелка не показывалась бы вовсе. */
.lkd .lk-t tr[data-coupon]:not(:has(td:last-child .btn)):hover > td:last-child::after,
.lkd .lk-t tr[data-client]:not(:has(td:last-child .btn)):hover > td:last-child::after,
.lkd .lk-t tr[data-coupon]:not(:has(td:last-child .btn)):focus-visible > td:last-child::after,
.lkd .lk-t tr[data-client]:not(:has(td:last-child .btn)):focus-visible > td:last-child::after{
  opacity:1;right:6px;
}

/* --------------------------------------------------------------------------
   Статусы
   --------------------------------------------------------------------------
   В Ч/Б прототипе статусы намеренно набраны точкой и текстом без цвета —
   там и было записано, что цвет придёт на этапе дизайна и не должен
   остаться единственным носителем смысла. Подпись рядом остаётся везде,
   поэтому цвет здесь усиление, а не замена смысла.

   Светофор один на оба кабинета, потому что состояния у купона и у
   клиента об одном и том же:

     зелёный — работает и приносит результат (опубликован, активный);
     жёлтый  — ждёт и само не сдвинется (на модерации, новый без оплаты);
     красный — сломалось, нужно вмешаться (отклонён);
     серый   — вне игры (черновик, завершён, неактивный).

   Красный здесь не спорит с правилом «красный — призыв к действию»:
   отклонённый купон как раз требует действия, и это тот же красный, что
   у точек в «Требует внимания» и у колокольчика.

   Нормальная работа подсвечивается мягко: у «активного» и «опубликованного»
   не сплошная заливка, а светлый тон — им незачем кричать, кричать должно
   то, что ждёт или сломалось. */

/* Купон, выплата, начисленный бонус — точка перед подписью */
.lkd .lk-st--live::before,
.lkd .lk-st--ok::before{background:var(--st-ok)}
.lkd .lk-st--moderation::before,
.lkd .lk-st--wait::before{background:var(--st-wait);box-shadow:0 0 0 3px var(--st-wait-bg)}
.lkd .lk-st--rejected::before{background:var(--brand);border-color:var(--brand)}

/* Клиент партнёра: плашка целиком. «Активный» был сплошным чёрным и
   перетягивал на себя весь столбец, хотя это самое обычное состояние. */
.lkd .lk-cst--active{background:var(--st-ok-bg);color:var(--st-ok)}
.lkd .lk-cst--new{background:var(--st-wait-bg);color:var(--st-wait)}

/* --------------------------------------------------------------------------
   Заголовок раздела и показатели
   --------------------------------------------------------------------------
   Слоган дашборда крупнее служебного подзаголовка, но по насыщенности —
   тот же вес, что у остальных заголовков разделов (заголовки панелей
   здесь же, заголовки секций на публичке в design-3-type.css): в 800
   он спорил с ними, хотя это не первый экран витрины, а рабочий раздел
   кабинета. Цифры показателей увеличены и потяжелели по той же логике,
   что цена и код купона в design-3-type.css: главное число экрана должно
   быть самым весомым. */
.lkd .lk-head h1{
  font-family:"Onest",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:clamp(24px,2.3vw,32px);letter-spacing:-.02em;
}
.lkd .lk-kpi__v{font-size:32px;font-weight:700;letter-spacing:-.03em}