/* ==========================================================================
   Личные кабинеты — Ч/Б прототип.
   Токены, кнопки и типографика наследуются из ../assets/style.css:
   кабинет должен читаться как тот же продукт, что и публичная часть.
   ========================================================================== */

.lk{background:var(--surface)}

/* Каркас: фиксированная колонка навигации + рабочая область.
   Ширина боковой колонки небольшая — Виль просил не перегружать интерфейс,
   и разделов немного даже в самом полном кабинете. */
:root{--lk-side:246px}
.lk__shell{display:grid;grid-template-columns:var(--lk-side) minmax(0,1fr);min-height:100vh}

.lk__side{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:18px;
  padding:0 16px 20px;
  background:var(--bg);border-right:1px solid var(--line);
  overflow-y:auto;
}

/* Логотип занимает ровно ту же высоту, что и шапка справа, и подчёркнут
   той же линией — верхняя полоса тогда читается как одна, а не как две
   разные плашки, стык которых приходится на пустое место слева. */
.lk__logo{
  display:flex;align-items:center;
  height:var(--header-h);
  margin:0 -16px;padding:0 26px;
  border-bottom:1px solid var(--line);
  font-weight:700;font-size:17px;letter-spacing:-.02em;
}

/* Вертикальная граница между колонками начинается ниже верхней полосы:
   иначе она разрезает полосу надвое и слева от неё висит пустой отрезок.
   Фиксированная, чтобы не уезжала вместе с прокруткой меню. */
@media (min-width:901px){
  .lk__side{border-right:0}
  .lk__side::after{
    content:"";position:fixed;z-index:1;
    left:var(--lk-side);top:var(--header-h);bottom:0;width:1px;
    background:var(--line);
  }
}


.lk__nav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto}
.lk__nav-group{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  padding:14px 10px 6px;
}
.lk__nav a{
  display:flex;align-items:center;gap:10px;
  min-height:38px;padding:8px 10px;border-radius:var(--r-sm);
  font-size:14px;color:var(--ink-2);line-height:1.3;
  transition:background .16s, color .16s;
}
.lk__nav a:hover{background:var(--surface);color:var(--ink)}
.lk__nav a.is-on{background:var(--ink);color:var(--bg);font-weight:500}
.lk__nav a .lk__n{
  margin-left:auto;font-size:12px;color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.lk__nav a.is-on .lk__n{color:rgba(255,255,255,.6)}
/* Иконка приглушена: она помогает найти пункт взглядом, но не спорит с
   названием. У активного пункта светлеет вместе с текстом. */
.lk__nav-i{flex:0 0 auto;display:grid;place-items:center;color:var(--ink-4)}
.lk__nav a:hover .lk__nav-i{color:var(--ink-3)}
.lk__nav a.is-on .lk__nav-i{color:rgba(255,255,255,.75)}


.lk__main{display:flex;flex-direction:column;min-width:0}

/* Шапка рабочей области */
.lk__top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  height:var(--header-h);padding:0 28px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.lk__spacer{flex:1 1 auto}
.lk__burger{display:none;width:38px;height:38px;border-radius:var(--r-sm);color:var(--ink-2)}

/* hidden сам по себе не сработает: .btn задаёт display:inline-flex
   с той же специфичностью и перебивает его */
.lk__cta[hidden]{display:none}

.lk__bell{
  position:relative;width:38px;height:38px;border-radius:var(--r-pill);
  display:grid;place-items:center;color:var(--ink-2);
  border:1px solid var(--line-strong);
}
.lk__bell:hover{color:var(--ink);border-color:var(--ink-3)}
.lk__dot{
  position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--ink);border:1.5px solid var(--bg);display:none;
}
.lk__dot.is-on{display:block}

/* Учётная запись живёт в подвале бокового меню: место под разделами всё
   равно пустует, а шапка остаётся под действия. Выход — иконкой справа,
   без промежуточного меню: в кабинете это единственное действие над
   учётной записью, профиль и так есть отдельным разделом. */
.lk__me{
  display:flex;align-items:center;gap:4px;
  padding-left:12px;margin-left:4px;border-left:1px solid var(--line);
}
.lk__me-link{display:flex;align-items:center;gap:9px;min-width:0;max-width:230px;border-radius:var(--r-sm);padding:4px 6px}
.lk__me-link:hover{background:var(--surface)}
.lk__me-ava{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--surface-2);color:var(--ink-3);
  display:grid;place-items:center;font-size:12px;font-weight:600;
}
.lk__me-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.lk__me-name,.lk__me-role{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lk__me-name{font-size:13px;font-weight:500;line-height:1.25}
.lk__me-role{font-size:12px;color:var(--ink-3);line-height:1.25}

.lk__me-exit{
  flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--ink-4);
  transition:background .16s, color .16s;
}
.lk__me-exit:hover{background:var(--surface);color:var(--ink)}

.lk__view{padding:28px;max-width:1320px;width:100%}

/* Строка под заголовком карточки купона: статус, категория, срок */
.lk-sub{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:-12px 0 20px;font-size:14px;color:var(--ink-3);
}
.lk-sub .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4)}
.lk-reason{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}

/* Строка купона открывает его карточку */
.lk-t tr[data-coupon]{cursor:pointer}
.lk-t tr[data-coupon]:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
[data-coupon-row]{cursor:pointer}
[data-coupon-row]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}

/* Заблокированные поля: видно, что правка сейчас недоступна */
.lk-i:disabled,.lk-s:disabled,.lk-ta:disabled{
  background:var(--surface);color:var(--ink-2);cursor:default;
}

/* --------------------------------------------------------------------------
   Заголовок раздела
   -------------------------------------------------------------------------- */
.lk-head{margin-bottom:20px}
.lk-head__row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.lk-head h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.03em}
.lk-head__act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.lk-head__more{
  background:#fff;
  border:1px solid var(--ink);
  color:var(--ink);
}
.lk-head__more:hover{
  background:var(--surface);
  border-color:var(--ink);
  color:var(--ink);
}
.lk-head__more:focus-visible{box-shadow:0 0 0 3px rgba(34,26,25,.12)}

/* --------------------------------------------------------------------------
   Карточки показателей. Ровно четыре у клиента — Коля: «4 показателя всего,
   будет немного». Ни спарклайнов, ни графиков: Виль отдельно просил не
   перегружать разделы с аналитикой.
   -------------------------------------------------------------------------- */
/* auto-fit, а не жёсткие четыре колонки: в профиле партнёра показателей три */
.lk-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:20px}
@media (max-width:1100px){.lk-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.lk-kpi{grid-template-columns:1fr}}
.lk-kpi__c{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;
}
.lk-kpi__l{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.lk-kpi__v{
  font-size:28px;font-weight:600;letter-spacing:-.03em;margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.lk-kpi__h{font-size:12px;color:var(--ink-4);margin-top:4px;line-height:1.4}

/* --------------------------------------------------------------------------
   Панель — универсальный блок раздела
   -------------------------------------------------------------------------- */
.lk-panel{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;margin-bottom:16px;
}
.lk-panel__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.lk-panel__head h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.lk-panel__head .lk-panel__act{margin-left:auto;display:flex;gap:8px}

/* --------------------------------------------------------------------------
   Таблица. Горизонтальный скролл живёт внутри своей обёртки, страница
   вправо не едет.
   -------------------------------------------------------------------------- */
.lk-tw{overflow-x:auto;margin:0 -20px;padding:0 20px}
.lk-t{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
/* В парных блоках таблицы короткие — на три колонки, и общий минимум в
   640px выдавливал у них скролл на ровном месте */
.lk-pair .lk-t{min-width:0}
.lk-t th{
  text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);font-weight:500;padding:0 12px 10px;white-space:nowrap;
}
.lk-t td{padding:13px 12px;border-top:1px solid var(--line);vertical-align:top}
.lk-t tr:hover td{background:var(--surface)}
.lk-t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lk-t__title{font-weight:500;display:block}
.lk-t__sub{font-size:12px;color:var(--ink-3);margin-top:3px;display:block}

/* Статусы — точкой и текстом, без цветовой заливки: прототип чёрно-белый,
   цвет появится на этапе дизайна и не должен быть единственным носителем
   смысла. */
.lk-st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px}
.lk-st::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--ink-4);
}
.lk-st--live::before{background:var(--ink)}
.lk-st--moderation::before,
.lk-st--wait::before{background:var(--ink-3);box-shadow:0 0 0 3px var(--surface-2)}
/* Состояния не только у купона: у выплаты и у начисленного бонуса они
   те же по смыслу — сработало, ждёт, вышло из игры. Общие модификаторы,
   чтобы не заводить третий словарь статусов на те же три состояния. */
.lk-st--ok::before{background:var(--ink)}
.lk-st--draft::before{background:none;border:1.5px solid var(--ink-4)}
.lk-st--rejected::before{background:none;border:1.5px solid var(--ink);position:relative}
.lk-st--done::before{background:var(--surface-3)}

.lk-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;border-radius:var(--r-pill);
  background:var(--surface);font-size:12px;color:var(--ink-2);white-space:nowrap;
}
.lk-erid{font-size:11px;color:var(--ink-4);white-space:nowrap}

/* Фильтры над таблицей */
.lk-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.lk-filters button{
  height:34px;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--bg);
  font-size:13px;color:var(--ink-2);
  transition:background .16s,color .16s,border-color .16s;
}
.lk-filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.lk-filters button.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.lk-filters button .lk__n{margin-left:6px;font-size:12px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.lk-filters button.is-on .lk__n{color:rgba(255,255,255,.6)}

/* --------------------------------------------------------------------------
   Форма создания купона
   -------------------------------------------------------------------------- */
.lk-form{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
@media (max-width:1000px){.lk-form{grid-template-columns:1fr}}

/* Форма без предпросмотра: ограничиваем ширину, иначе поля растягиваются
   на всю рабочую область и читаются тяжело */
.lk-narrow{max-width:560px}

.lk-f{display:flex;flex-direction:column;gap:16px}
.lk-f__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.lk-f__row{grid-template-columns:1fr}}

.lk-l{display:block}
.lk-l__t{
  display:block;font-size:13px;font-weight:500;margin-bottom:6px;
}
.lk-i,
.lk-s,
.lk-ta{
  width:100%;height:44px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--bg);font-size:14px;color:var(--ink);
  transition:border-color .16s;
}
.lk-ta{height:auto;padding:12px 14px;resize:vertical;min-height:92px;line-height:1.5;font-family:inherit}
.lk-i:focus,.lk-s:focus,.lk-ta:focus{outline:none;border-color:var(--ink)}
.lk-i::placeholder,.lk-ta::placeholder{color:var(--ink-4)}
.lk-s{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px, calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}

/* Поле-заглушка под загрузку изображения. Пропорция 4:5 — та же, что у
   карточки на публичке: купоны ретранслируются в соцсети, и на сайте они
   должны выглядеть так же (решение 04.09). */
.lk-drop{
  aspect-ratio:4/5;max-width:230px;
  border:1.5px dashed var(--line-strong);border-radius:var(--r-md);
  background:var(--surface);
  display:grid;place-items:center;text-align:center;padding:16px;
  color:var(--ink-3);font-size:13px;line-height:1.5;cursor:pointer;
  transition:border-color .16s,color .16s;
}
.lk-drop:hover{border-color:var(--ink-3);color:var(--ink-2)}

/* Живой предпросмотр карточки рядом с формой */
.lk-prev{position:sticky;top:calc(var(--header-h) + 20px)}
.lk-prev__card{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg);overflow:hidden;
}
.lk-prev__media{
  aspect-ratio:4/5;position:relative;
  background:var(--surface);
  background-image:repeating-linear-gradient(135deg,var(--surface) 0 9px,var(--surface-2) 9px 18px);
  display:grid;place-items:center;
}
.lk-prev__val{font-size:34px;font-weight:600;letter-spacing:-.03em}
.lk-prev__erid{
  position:absolute;top:10px;right:10px;
  font-size:10px;color:var(--ink-3);
  background:rgba(255,255,255,.86);border-radius:var(--r-pill);padding:3px 8px;
  max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lk-prev__body{padding:14px 16px 16px}
.lk-prev__title{font-size:15px;font-weight:500;line-height:1.35;min-height:2.7em}
.lk-prev__meta{font-size:12px;color:var(--ink-3);margin-top:8px}

/* --------------------------------------------------------------------------
   Пустое состояние и мелочи
   -------------------------------------------------------------------------- */
.lk-empty{
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);
  padding:36px 24px;text-align:center;color:var(--ink-3);font-size:14px;
}
.lk-empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px}


.lk-list{display:flex;flex-direction:column}
.lk-list__i{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.lk-list__i:first-child{border-top:0}
.lk-list__i.is-unread{font-weight:500}
.lk-list__d{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:8px;
  background:var(--ink);
}
.lk-list__i:not(.is-unread) .lk-list__d{background:var(--surface-3)}
.lk-list__w{font-size:12px;color:var(--ink-3);margin-top:4px;font-weight:400}

.lk-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:900px){.lk-pair{grid-template-columns:1fr}}

/* Итоговая строка отчёта */
.lk-total{
  display:flex;align-items:baseline;gap:10px;
  padding-top:14px;margin-top:4px;border-top:1px solid var(--line);
}
.lk-total b{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lk-total span{font-size:13px;color:var(--ink-3)}

/* --------------------------------------------------------------------------
   Мобильная раскладка: боковая колонка уезжает в шторку
   -------------------------------------------------------------------------- */
.lk__scrim{
  position:fixed;inset:0;z-index:40;background:rgba(21,21,20,.34);
  opacity:0;pointer-events:none;transition:opacity .24s var(--ease-soft);
}
@media (max-width:900px){
  .lk__shell{grid-template-columns:1fr}
  .lk__side{
    position:fixed;left:0;top:0;z-index:50;width:264px;
    transform:translateX(-100%);transition:transform .26s var(--ease);
    box-shadow:var(--shadow-2);
  }
  body.lk-nav-open .lk__side{transform:none}
  body.lk-nav-open .lk__scrim{opacity:1;pointer-events:auto}
  .lk__burger{display:grid;place-items:center}
  .lk__top{padding:0 16px}
  .lk__view{padding:18px 16px}
  .lk__cta span:last-child{display:none}
  .lk__cta{width:38px;padding:0}
  .lk__me-txt,.lk__wallet i{display:none}
  .lk__me{padding-left:6px}
  .lk-head h1{font-size:22px}
}



/* ==========================================================================
   Мастер купона: города, каналы, калькулятор, оплата
   ==========================================================================
   Всё это появилось из ТЗ v7.0: купон размещается сразу в нескольких
   городах, соцсети входят в цену, а платят за него монетами и бонусами
   одновременно. Одними полями ввода такую форму не собрать. */

/* Города — переключатели, а не список: их несколько сразу, и каждый
   добавленный виден в цене */
.lk-chips{display:flex;flex-wrap:wrap;gap:8px}
.lk-chipbtn{
  padding:9px 15px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--bg);font-size:14px;font-weight:500;color:var(--ink-2);
  transition:border-color .18s,background .18s,color .18s;
}
.lk-chipbtn:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.lk-chipbtn.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.lk-chipbtn:disabled{opacity:.55;cursor:default}

/* Каналы публикации: строка с галочкой и надбавкой к цене справа */
.lk-checks{display:flex;flex-direction:column;gap:2px}
.lk-ch{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:var(--r-sm);cursor:pointer;
  font-size:14px;color:var(--ink-2);
  transition:background .16s,color .16s;
}
.lk-ch:hover{background:var(--surface)}
.lk-ch.is-on{color:var(--ink);font-weight:500}
.lk-ch input{
  width:18px;height:18px;flex:0 0 auto;accent-color:var(--ink);cursor:pointer;
}
.lk-ch span{flex:1 1 auto}
.lk-ch i{font-style:normal;font-size:12px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.lk-ch.is-fixed{cursor:default}
.lk-ch.is-fixed:hover{background:none}
.lk-ch input:disabled{cursor:default}

/* Канал уведомлений: галочка слева, адрес справа */
.lk-chrow{display:flex;align-items:center;gap:10px}
.lk-chrow .lk-ch{flex:1 1 auto}
.lk-chrow__v{font-size:13px;color:var(--ink-3);white-space:nowrap}
/* Поле для канала без привязки (Max): узкое, растёт вместо статичной
   подписи «не подключён» и оживает только при включённой галочке */
.lk-chrow__inp{width:220px;max-width:45%}
.lk-chrow__inp:disabled{background:none;border-style:dashed}

/* Подтверждение сохранения — то же решение, что «Скопировано» на
   публичке: короткая надпись рядом с кнопкой, без модалок и уведомлений */
.lk-save-ok{font-size:13px;color:var(--ink-3);align-self:center}

/* Калькулятор: три строки, итог отбит линией */
.lk-calc{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.lk-calc__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:8px 0;font-size:14px;color:var(--ink-2);
}
.lk-calc__row b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.lk-calc__row--total{
  border-top:1px solid var(--line);margin-top:6px;padding-top:14px;
  font-weight:500;color:var(--ink);
}
.lk-calc__row--total b{font-size:22px;font-weight:600;letter-spacing:-.02em}

/* Оплата двумя суммами. Бегунок делит цену между монетами и бонусами —
   ровно то, что в ТЗ названо «два бегунка»: сдвигая один, клиент видит,
   сколько остаётся заплатить деньгами. */
.lk-pay{margin-bottom:12px}
/* Подписи по краям бегунка — без них направление «тащи вправо, получишь
   бонусы» было не видно, суммы под слайдером читались как две отдельные
   цифры, а не как одна расходящаяся сумма */
.lk-pay__ends{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--ink-4);margin-bottom:2px;
}
.lk-pay__sums{
  display:flex;justify-content:space-between;gap:16px;margin-top:8px;
}
.lk-pay__sums b{font-size:17px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.lk-pay__hint{font-size:12px;color:var(--ink-4);margin-top:8px;line-height:1.5}
/* Заливка бегунка красится в JS через background — иначе в Chrome не видно,
   куда именно доехал ползунок, и слайдер выглядит как декорация, а не как
   управление */
.lk-range{
  -webkit-appearance:none;
  width:100%;height:6px;border-radius:999px;
  background:var(--surface-2);
  margin:14px 0 4px;accent-color:var(--ink);cursor:pointer;
}
.lk-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:transparent}
.lk-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--ink);cursor:pointer;margin-top:-6px;
  box-shadow:0 0 0 4px var(--bg);
}
.lk-range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--ink);cursor:pointer;border:none;
  box-shadow:0 0 0 4px var(--bg);
}

/* Предупреждение перед публикацией: условия потом не поменять */
.lk-warn{
  margin:18px 0;padding:14px 16px;border-radius:var(--r-md);
  background:var(--surface);border-left:3px solid var(--ink);
  font-size:13px;line-height:1.55;color:var(--ink-2);
}

/* Пояснение под блоком формы — то, что в продукте будет подсказкой */
.lk-note{font-size:13px;line-height:1.55;color:var(--ink-3)}

/* Правила списком: ими подписаны условия партнёра и пула бонусов */
.lk-rules{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:9px}
.lk-rules li{font-size:13px;line-height:1.55;color:var(--ink-2)}

/* Списание в истории операций отбиваем от пополнения */
.lk-t td.is-out{color:var(--ink-3)}

/* Статус клиента у партнёра: три состояния из ТЗ */
.lk-cst{
  display:inline-flex;align-items:center;padding:4px 10px;
  border-radius:var(--r-pill);font-size:12px;font-weight:500;
  background:var(--surface);color:var(--ink-2);white-space:nowrap;
}
.lk-cst--active{background:var(--ink);color:var(--bg)}
.lk-cst--new{background:var(--surface-2);color:var(--ink)}
.lk-cst--inactive{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-3)}

.lk-t tr[data-client]{cursor:pointer}
.lk-t tr[data-client]:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

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

   Ниже модалки по слою (z-index 30 против 60): открытая анкета должна
   перекрывать плашку, из которой её открыли.
   -------------------------------------------------------------------------- */
.lk-pill{
  position:fixed;right:20px;bottom:20px;z-index:30;
  display:flex;align-items:flex-start;
  max-width:290px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);
}
.lk-pill__body{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:13px 6px 13px 16px;
}
.lk-pill__body b{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.lk-pill__body span{font-size:12px;color:var(--ink-3)}
.lk-pill__body:hover b{text-decoration:underline}
.lk-pill__x{
  flex:0 0 auto;width:28px;height:28px;margin:7px 7px 0 0;
  border-radius:50%;display:grid;place-items:center;color:var(--ink-4);
  transition:background .16s, color .16s;
}
.lk-pill__x::before{content:"✕";font-size:11px}
.lk-pill__x:hover{background:var(--surface);color:var(--ink)}
/* На телефоне плашка тянется во всю ширину: в углу она там перекрывала бы
   кнопки таблиц, а места под аккуратный угол всё равно нет. */
@media (max-width:560px){
  .lk-pill{left:16px;right:16px;bottom:16px;max-width:none}
}

/* --------------------------------------------------------------------------
   Модалка кабинета. То же визуальное решение, что у попапа купона на
   публичке (.overlay/.modal__box в ../assets/style.css), но свой узел —
   в ЛК он нужен для коротких действий вроде запроса промокода.
   -------------------------------------------------------------------------- */
.lk-modal-ov{
  position:fixed;inset:0;z-index:60;
  background:rgba(21,21,20,.34);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease-soft);
}
.lk-modal-ov.is-on{opacity:1;pointer-events:auto}
.lk-modal{
  position:relative;width:100%;max-width:420px;
  background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--shadow-2);
  padding:24px;transform:translateY(8px);transition:transform .2s var(--ease-soft);
}
.lk-modal-ov.is-on .lk-modal{transform:none}
.lk-modal__x{
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  border-radius:50%;color:var(--ink-3);display:grid;place-items:center;
}
.lk-modal__x::before{content:"✕";font-size:13px}
.lk-modal__x:hover{background:var(--surface);color:var(--ink)}
.lk-modal__body h3{margin:0 0 8px;padding-right:24px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.lk-modal__body .lk-f{margin-top:14px}

/* --------------------------------------------------------------------------
   Конструктор купона (созвон 16.09.2026)
   -------------------------------------------------------------------------- */
[data-addr-row][hidden],
[data-addr-add][hidden],
[data-img] [hidden]{display:none!important}

/* Адреса применения купона */
.lk-addr .lk-checks{margin:0 -12px}
.lk-addr__add{margin-top:8px}
.lk-addr__plus{
  margin:6px 0 10px;padding:6px 0;
  font-size:14px;font-weight:500;color:var(--ink);
}
.lk-addr__plus:hover{text-decoration:underline}

/* Прогресс заполнения над превью */
.lk-prog{margin-bottom:14px}
.lk-prog__t{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);margin-bottom:8px}
.lk-prog__t b{color:var(--ink);font-variant-numeric:tabular-nums}
.lk-prog__bar{height:6px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.lk-prog__bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:inherit;transition:width .3s var(--ease, ease)}

/* Превью: текст накладывается сразу, картинка — последней */
.lk-prev__media{overflow:hidden}
.lk-prev__val{position:relative;z-index:1}
.lk-prev__erid{z-index:2}
.lk-prev__hold{
  position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-size:12px;color:var(--ink-3);
}
.lk-prev__media.has-img .lk-prev__hold{display:none}
.lk-prev__media.has-img .lk-prev__val{
  background:#fff;border-radius:var(--r-pill);padding:4px 16px;
}
.lk-prev__title.is-empty{color:var(--ink-4)}
.lk-prev__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lk-prev__tags:empty{display:none}
.lk-prev__tags span{
  font-size:11px;line-height:1;padding:5px 9px;border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink-2);
}

/* Водяной знак. Пока купон создаётся — по диагонали на всё изображение,
   после публикации — маленький в углу. Рисунок знака — за Иваном. */
.lk-wm{
  position:absolute;inset:-40%;
  display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
  gap:26px 34px;transform:rotate(-30deg);pointer-events:none;
  opacity:0;transition:opacity .3s;
}
.lk-prev__media.has-img .lk-wm{opacity:1}
.lk-wm span{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.42);white-space:nowrap;
}
.lk-wm-corner{
  position:absolute;left:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;gap:5px;
  font-size:9px;color:var(--ink-2);
  background:rgba(255,255,255,.86);border-radius:var(--r-pill);padding:3px 8px 3px 4px;
}
.lk-wm-corner i{width:10px;height:10px;border-radius:50%;background:var(--ink)}

/* Заглушки изображений: своё и варианты генерации */
.lk-up{background:linear-gradient(180deg,#c9c8c5,#6f6d69)}
.lk-gen--1{background:radial-gradient(circle at 32% 36%,#dedddb 0 20%,transparent 21%),linear-gradient(160deg,#8d8b87,#3d3c39)}
.lk-gen--2{background:radial-gradient(ellipse at 60% 68%,#b3b1ad 0 30%,transparent 31%),linear-gradient(200deg,#dedddb,#6f6d69)}
.lk-gen--3{background:linear-gradient(135deg,transparent 44%,rgba(255,255,255,.3) 44% 56%,transparent 56%),linear-gradient(180deg,#55534f,#b3b1ad)}
.lk-gen--4{background:radial-gradient(circle at 50% 45%,#f5f5f4 0 15%,#8d8b87 16% 30%,transparent 31%),#2b2a28}

/* Блок изображения */
.lk-img__lock{
  border:1px dashed var(--line-strong);border-radius:var(--r-md);
  padding:18px 20px;font-size:13px;line-height:1.55;color:var(--ink-3);
}
.lk-img__lock b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.lk-img__todo{margin:10px 0 0;padding-left:18px;color:var(--ink-2)}
.lk-img__todo:empty{display:none}

.lk-seg{
  display:inline-flex;padding:3px;margin-bottom:16px;
  background:var(--surface);border-radius:var(--r-pill);
}
.lk-seg button{
  padding:8px 16px;border-radius:var(--r-pill);
  font-size:13px;font-weight:500;color:var(--ink-3);
}
.lk-seg button.is-on{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.lk-img__up{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:560px){.lk-img__up{grid-template-columns:1fr}}
.lk-img__up .lk-drop{width:100%;font:inherit;font-size:13px}
.lk-drop.is-done{border-style:solid;border-color:var(--ink);color:var(--ink)}
[data-img-rights] .lk-ch{margin:0 -12px}
[data-img-rights].is-warn .lk-ch{background:var(--surface-2);animation:lkShake .35s}
@keyframes lkShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.lk-img__bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lk-img__left{margin-left:auto;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lk-img__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.lk-img__grid:empty{display:none}
.lk-img__v{
  aspect-ratio:4/5;border-radius:var(--r-sm);position:relative;
  border:2px solid transparent;outline:none;
}
.lk-img__v span{
  position:absolute;left:6px;bottom:6px;font-size:11px;
  background:rgba(255,255,255,.86);border-radius:var(--r-pill);padding:2px 7px;color:var(--ink-2);
}
.lk-img__v.is-on{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg) inset}
.lk-img__v.is-busy{background:var(--surface-2);animation:lkPulse 1s ease-in-out infinite alternate}
@keyframes lkPulse{to{background:var(--surface-3)}}
.lk-img__out{grid-column:1/-1;font-size:13px;color:var(--ink-2)}


/* ==========================================================================
   Правки созвонов 10.09 и 14.09
   ========================================================================== */

/* Кошелёк в шапке: баланс виден всегда, бонусы — отдельной строкой */
.lk__wallet{
  display:flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:14px;color:var(--ink);white-space:nowrap;
}
.lk__wallet[hidden]{display:none}
.lk__wallet:hover{border-color:var(--ink-3);background:var(--surface)}
.lk__wallet b{font-weight:600;font-variant-numeric:tabular-nums}
.lk__wallet i{font-style:normal;font-size:12px;color:var(--ink-3)}
.lk__wallet [data-icon]{display:grid;color:var(--ink-2)}

/* Дашборд: «Требует внимания» с кнопкой «Исправить» */
.lk-att{align-items:center}
.lk-att__txt{flex:1 1 auto;min-width:0}
.lk-att .btn{flex:0 0 auto}

/* Полоса баланса */
.lk-bal{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0;padding:0}
.lk-bal__part{display:flex;align-items:center;gap:24px;padding:18px 20px;flex-wrap:wrap}
.lk-bal__part + .lk-bal__part{border-left:1px solid var(--line)}
.lk-bal__part .btn{margin-left:auto}
.lk-bal__n{display:flex;flex-direction:column;gap:2px}
.lk-bal__n span{font-size:13px;color:var(--ink-3)}
.lk-bal__n b{font-size:26px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lk-bal__n em{font-style:normal;font-size:12px;color:var(--ink-3)}
.lk-bal__n--burn span,.lk-bal__n--burn b{color:var(--warn)}
@media (max-width:900px){
  .lk-bal{grid-template-columns:1fr}
  .lk-bal__part + .lk-bal__part{border-left:0;border-top:1px solid var(--line)}
}

.lk-t__muted{color:var(--ink-3)}

/* Блок помощи внизу дашборда */
.lk-help{padding:28px}
.lk-help__h{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em;max-width:640px}
.lk-help__lead{margin:6px 0 20px;font-size:14px;color:var(--ink-3)}
.lk-help__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.lk-help__grid{grid-template-columns:1fr}}
.lk-help__c{
  display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
}
.lk-help__c b{font-size:16px;font-weight:600}
.lk-help__c p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2);flex:1 1 auto}
.lk-help__c .btn{align-self:flex-start}

/* Мои купоны: разделы, поиск, действия слева.
   Раздел витрины и порядок сортировки — два списка слева: оба управляют
   одним и тем же, что и в каком порядке лежит в таблице. Поиск занимает
   остаток строки — он не настройка списка, а способ выдернуть из него
   одну строку. Раньше раздел занимал отдельный ярус чипов над статусами,
   и два ряда плашек подряд весили больше, чем таблица под ними. */
.lk-tools{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.lk-tools__sec{flex:0 0 220px}
.lk-tools__sort{flex:0 0 230px}
.lk-tools__q{flex:1 1 260px}
.lk-t__acts{width:1%;white-space:nowrap}
.lk-acts{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.lk-acts .btn{height:32px;padding:0 12px;font-size:13px}
.lk-t tr[hidden]{display:none}
[data-q-empty][hidden]{display:none}

.lk-page{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}
.lk-page__meta{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lk-page__nav{display:flex;align-items:center;gap:6px}
.lk-page__btn{
  display:grid;place-items:center;min-width:36px;height:36px;padding:0 10px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:#fff;color:var(--ink);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.lk-page__btn:hover:not(:disabled):not(.is-current){background:var(--surface);border-color:var(--ink);transform:translateY(-1px)}
.lk-page__btn.is-current{background:var(--ink);border-color:var(--ink);color:#fff}
.lk-page__btn:disabled{opacity:.3;cursor:default}
.lk-page__btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(34,26,25,.12)}
.lk-page__arrow{font-size:16px;font-weight:500}
@media (max-width:560px){
  .lk-page{align-items:flex-start;flex-direction:column}
  .lk-page__nav{width:100%;justify-content:space-between}
  .lk-page__btn{flex:1 1 auto}
}

/* Модалки пошире — для выбора раздела, бонусов, консультации, чата */
.lk-modal--wide{max-width:560px;max-height:calc(100vh - 40px);overflow-y:auto}
.lk-modal__lead{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3)}

.lk-pick{display:flex;flex-direction:column;gap:10px;margin-top:16px}
/* Значок раздела слева, текст колонкой справа — те же три знака, что у
   закреплённых разделов на витрине */
.lk-pick__i{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:14px;text-align:left;
  padding:16px 18px;border:1px solid var(--line-strong);border-radius:var(--r-md);
  transition:border-color .16s,background .16s;
}
.lk-pick__i:hover{border-color:var(--ink);background:var(--surface)}
.lk-pick__ic{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-2);
  transition:background .16s,color .16s;
}
.lk-pick__i:hover .lk-pick__ic{background:var(--ink);color:var(--bg)}
.lk-pick__t{display:flex;flex-direction:column;gap:4px;min-width:0}
.lk-pick__i b{font-size:15px;font-weight:600}
.lk-pick__i .lk-pick__t span{font-size:13px;color:var(--ink-3)}

.lk-ways{display:flex;flex-direction:column;margin-top:14px}
.lk-ways__i{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.lk-ways__t{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.lk-ways__t b{font-size:14px;font-weight:500}
.lk-ways__t span{font-size:12px;color:var(--ink-3)}
.lk-ways__r{font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.lk-ways__i .btn{height:34px;padding:0 12px;font-size:13px;flex:0 0 auto}
.lk-ways__i.is-used{opacity:.5}
.lk-ways__i .btn:disabled{cursor:default;transform:none}

/* Чат ИИ-консультанта */
.lk-chat{
  display:flex;flex-direction:column;gap:8px;margin-top:14px;
  height:280px;overflow-y:auto;padding:14px;
  background:var(--surface);border-radius:var(--r-md);
}
.lk-chat__m{
  align-self:flex-start;max-width:85%;padding:10px 13px;border-radius:14px 14px 14px 4px;
  background:var(--bg);font-size:14px;line-height:1.5;
}
.lk-chat__m.is-me{align-self:flex-end;background:var(--ink);color:var(--bg);border-radius:14px 14px 4px 14px}
.lk-chat__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.lk-chat__chips .lk-chipbtn{font-size:12px}
.lk-chat__in{display:flex;gap:8px;margin-top:10px}

/* Конструктор: варианты заголовка от нейросети */
.lk-ai{margin-top:-6px;padding:12px;border-radius:var(--r-md);background:var(--surface)}
.lk-ai__h{font-size:12px;color:var(--ink-3);margin-bottom:8px}
.lk-ai__list{display:flex;flex-direction:column;gap:6px}
.lk-ai__i{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:9px 12px;border-radius:var(--r-sm);background:var(--bg);border:1px solid transparent;
}
.lk-ai__i:hover{border-color:var(--ink-3)}
.lk-ai__i b{font-size:14px;font-weight:500}
.lk-ai__i span{font-size:12px;color:var(--ink-3)}

/* Подсказки по механике и сроку */
.lk-tip{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:-6px;padding:10px 12px;border-radius:var(--r-md);
  border:1px dashed var(--line-strong);font-size:13px;color:var(--ink-2);
}
.lk-tip[hidden]{display:none}
.lk-tip span{flex:1 1 240px}
.lk-tip .btn{height:32px;padding:0 12px;font-size:13px}

.lk-code{display:flex;gap:8px}
.lk-code .lk-i{flex:1 1 auto;min-width:0}
.lk-code .btn{flex:0 0 auto;height:44px}

/* Каналы: снятая соцсеть краснеет (созвон 10.09) */
:root{--warn:#c8372d}
.lk-ch.is-off{color:var(--warn)}
.lk-ch.is-off i{color:var(--warn)}
.lk-reach{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-2);padding:10px 12px;border-radius:var(--r-md);background:var(--surface)}
.lk-reach.is-bad{color:var(--warn);background:rgba(200,55,45,.07)}

/* Тайный покупатель — блок, который хочется включить */
.lk-secret{border-color:var(--ink);padding:22px}
.lk-secret__top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.lk-secret__k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lk-secret__h{margin:4px 0 0;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.lk-secret__badge{
  flex:0 0 auto;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;white-space:nowrap;
}
.lk-secret__list{margin:14px 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-2)}
.lk-secret__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 0;border-top:1px solid var(--line);margin-bottom:6px;
}
.lk-secret__foot .lk-ch{margin-left:-12px}
.lk-secret__foot b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.lk-prev__trust{margin-top:8px;font-size:12px;font-weight:500}
.lk-prev__trust[hidden]{display:none}

.lk-warn--tight{margin:0}
.lk-link{text-decoration:underline;color:var(--ink)}

/* Короткий список внутри панели — «что откроется после одобрения» и
   подобные перечисления. Маркер — точка тем же цветом, что подписи. */
.lk-ul{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px}
.lk-ul li{font-size:13.5px;line-height:1.55;color:var(--ink-2)}