/* Слой правок поверх cabinet.css. Дизайн lk-2026, перенос по SPEC-STYLE, 21.08.2026.

   Базовый cabinet.css не тронут (правило 14.9): весь редизайн живёт здесь, откат —
   git revert этого файла. Порядок подключения обязателен: сначала cabinet.css, потом
   этот файл; он переопределяет палитру и геометрию, при обратном порядке не сработает
   ничто. Штамп версии в адресе считается по обоим файлам сразу.

   Правило цвета (DESIGN.md): зелёный — действие и «хорошо»; Ember (оранжевый градиент) —
   долг «ждёт вас», кнопкой и промо не бывает; жёлтый — промо-метка «акция»; тёмно-синий
   #161C2C — структура и данные. Зелёных бейджей не бывает: бейдж — долг, нет долга —
   нет бейджа. Одна зелёная кнопка на экран (SPEC-NAV 14.2). */

/* ============================================================ шрифт
   Rubik самохостингом (SPEC-STYLE, решение владельца): переменные файлы 300–700,
   два поднабора. Без Google CDN. */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/rubik-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================ палитра */
:root {
  --ink: #161c2c;
  --muted: #6f7175;
  --gray: #9a9da2;
  --line: rgba(22, 28, 44, 0.09);
  --brand-green: #56a64b;
  --brand-green-dark: #3f8d3b;
  --green-ink: #3f8d3b;
  --green-soft: #e7f4e3;
  --green-mid: #a9d89e;
  /* Шкала Leaf — зелёный близнец шкалы Ember (решение владельца 22.08.2026): тот же
     наклон 165°, те же доли смешивания с белым (30 / 55 / 78%). Насыщенность означает
     силу «хорошо». Текст: на первой ступени белый, на остальных --green-ink. Плоский
     --brand-green остаётся кнопкам: правило «одна зелёная кнопка на экран» держится
     заливкой, а не градиентом. */
  --leaf: linear-gradient(165deg, #3f8d3b, #6cc25f);
  --leaf-2: linear-gradient(165deg, #79af76, #98d48f);
  --leaf-3: linear-gradient(165deg, #a9cca7, #bde4b7);
  --leaf-4: linear-gradient(165deg, #d5e6d4, #dff2dc);
  /* Шкала Ember: один тон и один наклон, четыре ступени насыщенности — вес долга
     виден цветом (решение владельца 22.08.2026). Ступени получены смешиванием
     обоих концов с белым на 30 / 55 / 78%, поэтому шкала ровная, а не подобранная
     на глаз. Текст: на первой ступени белый, на остальных --ember-ink (белый на
     светлых ступенях даёт контраст ниже 1.7 и не читается). */
  --ember: linear-gradient(165deg, #ff5c26, #ff9d5c);
  --ember-2: linear-gradient(165deg, #ff8d67, #ffba8d);
  --ember-3: linear-gradient(165deg, #ffb69d, #ffd3b6);
  --ember-4: linear-gradient(165deg, #ffdbcf, #ffe9db);
  --ember-soft: #ffece1;
  --ember-ink: #c05315;
  /* Coral из палитры Claude Design — плашки «плохо» и тёплый ряд графиков «Пульса»
     (решение владельца 22.08.2026); счётчики-долги в меню остаются Ember. */
  --coral-accent: #ff9473;
  --promo: linear-gradient(165deg, #ffc72e, #ffe066);
  --navy-grad: linear-gradient(175deg, #253150 0%, #161c2c 52%, #10141f 100%);
  --soft: #f6f6f7;
  --border: #e3e3e5;
  /* Старые имена, которыми пользуются шаблоны и карта характера: перекрашиваются
     здесь, разметка не меняется. Холодные углы — зелёный и синий, тёплые — Ember. */
  --mint: #e7f4e3;
  --powder: #eaeef5;
  --peach: #ffece1;
  --peach-ink: #c05315;
  --peach-soft: #ffece1;
  --coral: #ff5c26;
  --coral-dark: #c05315;
  --coral-soft: #ffece1;
  --blush: #fff4ee;
  --charcoal: #161c2c;
  --iris: #3f8d3b;
  --shadow: none;
  --shadow-h: none;
  /* 28 вместо 22 с 28.08.2026 — схема «Сочные карточки», выбор владельца. */
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 14px;
}

body {
  background: #fff;
  color: var(--ink);
  font-family: Rubik, "Segoe UI", Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
a:hover { color: var(--brand-green-dark); }
b, strong { font-weight: 500; }

/* ============================================================ типографика
   Вес 500 вместо 800: «дорого» здесь делается спокойствием, не жирностью. */
h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
h1 span { color: var(--gray); font-weight: 500; }
h2 { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; }
h2 .dim { color: var(--gray); font-weight: 500; }
h3 { font-weight: 500; }
.lead { font-size: 15px; color: var(--muted); }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; }
.muted { font-weight: 300; }
.num, td .num, .tile .k { font-variant-numeric: tabular-nums; }

/* ============================================================ раскладка */
.layout { min-height: 100vh; }
.panel { max-width: 1280px; padding: 26px 40px 90px; }
.panel h1 { font-size: clamp(26px, 3vw, 34px); }
.panel .sub1 { color: var(--muted); font-size: 14px; font-weight: 300; }

/* Шапка рабочей зоны: имя бизнеса, раздел, состояние бота (SPEC-STYLE 5). */
.pagehead { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; min-height: 34px; }
.pagehead .who { color: var(--muted); font-size: 14px; }
.pagehead .sep { color: var(--border); }
.pagehead .herename { font-size: 14px; font-weight: 500; }
.pagehead .st { padding: 7px 14px; border-radius: 999px; background: #eceef1; font-size: 13px; }
.pagehead .st.ok { background: var(--leaf); color: #fff; }
.pagehead .st.ok::before { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25); }

/* ============================================================ панель
   Классы прежней рельсы, вид новой панели: тёмно-синий градиент лендинга. */
.rail {
  width: 300px; padding: 24px 20px;
  gap: 2px;
  border-right: 0;
  background: var(--navy-grad);
  color: #fff;
  position: sticky; top: 0; align-self: flex-start;
  min-height: 100vh; max-height: 100vh; overflow-y: auto;
  /* Серый системный бегунок между панелью и контентом портил вид (владелец 22.08);
     колесо и тач продолжают листать панель. */
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail .brand {
  display: inline-flex; align-items: center; align-self: center;
  margin: 4px 0 30px; padding: 8px 16px;
  border-radius: 14px; background: #fff;
}
.rail .brand img { width: 176px; height: 38px; object-fit: contain; }
.rail .rgroup {
  margin: 24px 14px 8px; padding: 0; border: 0;
  color: #7d87a3; font-size: 10.5px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
}
.rail .rgroup:first-of-type { margin-top: 0; }
.rail .ritem {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 15px; border-radius: 16px;
  color: #c7cedf; font-size: 14.5px; font-weight: 400; line-height: 1.3;
}
.rail .ritem svg { flex: none; color: #93a0be; }
.rail .ritem:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.rail .ritem[aria-current="page"] {
  background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff; font-weight: 500;
}
.rail .ritem[aria-current="page"] svg { color: #6cc25f; }
.rail .ritem .n {
  margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 999px; background: var(--ember); color: #fff;
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.rail .rspace { flex: 1; min-height: 20px; }
.rail .rform { margin: 0; }
.rail .ritem.out {
  width: 100%; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; color: #c7cedf;
}
.rail .ritem.out:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

/* Телефон: панель прячется за бургер (SPEC-STYLE 5). */
.mnav-box { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.mbar { display: none; }
@media (max-width: 900px) {
  .mbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 210;
    padding: 10px 16px;
    background: var(--navy-grad);
  }
  .mbar .mlogo { width: 150px; height: 32px; padding: 5px 10px; border-radius: 11px; background: #fff; object-fit: contain; }
  .mbar .burger {
    display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: 12px; color: #fff; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  }
  .rail { display: none; }
  .mnav-box:checked ~ .layout .rail {
    display: flex; position: fixed; z-index: 220;
    top: 0; left: 0; bottom: 0; width: min(320px, 88vw);
    box-shadow: 20px 0 60px rgba(10, 14, 25, 0.35);
  }
  .panel { padding: 20px 16px 70px; }
}

/* ============================================================ кнопки */
.btn {
  min-height: 48px; padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--ink); font-size: 14px; font-weight: 500;
  transition: background 150ms ease, box-shadow 150ms ease;
}
.btn:hover { transform: none; background: #fff; box-shadow: inset 0 0 0 1px #c9ccd1; }
.btn:active { transform: none; }
.btn.primary {
  background: var(--brand-green); box-shadow: none; color: #fff;
}
.btn.primary:hover { background: var(--brand-green-dark); box-shadow: none; }
.btn.primary .n { background: rgba(255, 255, 255, 0.22); color: #fff; }
.btn.tint { background: var(--green-soft); box-shadow: none; color: var(--green-ink); }
.btn.tint:hover { background: #d9eed3; }
.btn.peach { background: var(--ember-soft); box-shadow: none; color: var(--ember-ink); }
.btn.peach:hover { background: #ffe0d0; }
.btn.danger { background: var(--coral-accent); box-shadow: none; color: #fff; }
.btn.danger:hover { background: #f8875f; box-shadow: none; }
.btn.plain { background: none; box-shadow: none; color: var(--muted); }
.btn.plain:hover { background: rgba(22, 28, 44, 0.05); color: var(--ink); }
.btn.sm { min-height: 38px; padding-inline: 16px; font-size: 13px; border-radius: 999px; }
.btn:focus-visible, .tab:focus-visible, .seg button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(86, 166, 75, 0.3);
}

/* ============================================================ пилюли-фильтры
   Подвкладки и фильтры — один вид: рамочные таблетки, активная тёмно-синяя. */
.subtabs { gap: 8px; padding: 0; border: 0; background: none; border-radius: 0; margin: 0 0 24px; }
.subtabs .tab, .segbar .btn {
  min-height: 42px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--border);
  color: #454b59; font-size: 13.5px; font-weight: 400;
}
.subtabs .tab:hover, .segbar .btn:hover { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px #c9ccd1; }
.subtabs .tab[aria-current="page"], .segbar .btn[aria-current] {
  background: var(--ink); box-shadow: none; color: #fff; font-weight: 500;
}
.subtabs .tab .n, .segbar .btn .n {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--ember); color: #fff; font-size: 11.5px; font-weight: 500;
}
.subtabs .tab[aria-current="page"] .n, .segbar .btn[aria-current] .n { background: rgba(255, 255, 255, 0.22); }
.segbar { gap: 8px; padding: 0; background: none; border-radius: 0; }
.subtabs.sub2 .tab { min-height: 38px; }

/* Старый сегмент-переключатель, где ещё остался. */
.seg { padding: 3px; background: rgba(22, 28, 44, 0.05); }
.seg button[aria-pressed="true"], .seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(22, 28, 44, 0.14); }

/* ============================================================ карточки */
.card {
  border: 0; border-radius: var(--radius-lg);
  background: var(--soft);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.card.lift:hover { transform: none; box-shadow: none; }
.card.flat { background: var(--soft); }
.cardhead { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.cardhead .dim { color: var(--gray); font-size: 13px; font-weight: 300; }
.section { margin: 40px 0 16px; }

/* Плашки-показатели, где остались (маршрут и админка): тихие подложки. */
.tile { border: 0; border-radius: var(--radius-md); box-shadow: none; }
.tile:hover { transform: none; box-shadow: none; }
.tile.green { background: var(--leaf-4); }
.tile.blush { background: var(--blush); }
.tile.peach { background: var(--powder); }
.tile.coral { background: var(--ember-4); }
.tile .k { font-weight: 500; letter-spacing: -0.03em; }
.tile.green .k { color: var(--ink); }
.tile.peach .k { color: var(--ink); }
.tile.coral .k { color: var(--ember-ink); }

/* ============================================================ значки и статусы */
.badge { font-weight: 500; }
.badge.green { background: var(--leaf-4); color: var(--green-ink); }
.badge.peach { background: var(--ember-4); color: var(--ember-ink); }
.badge.red { background: var(--ember); color: #fff; }
.badge.dark { background: var(--ink); color: #fff; }
.tag { font-weight: 500; }
.tag.peach { background: var(--promo); color: var(--ink); }
/* Таблетка цифры прайса — Coral вместо тёмно-синей (правка владельца 22.08.2026). */
.tag.num { background: var(--coral-accent); color: #fff; font-variant-numeric: tabular-nums; }
.tag.info { background: var(--powder); color: #4c5875; }
.st.ok::before { background: var(--brand-green); box-shadow: 0 0 0 4px rgba(86, 166, 75, 0.14); }
.st.warn::before { background: #ff9d5c; box-shadow: 0 0 0 4px rgba(255, 157, 92, 0.2); }
.st.bad::before { background: #ff5c26; box-shadow: 0 0 0 4px rgba(255, 92, 38, 0.16); }
.figchip.promo { background: var(--promo); }
.figchip.promo .fl, .figchip.promo .fv, .figchip.promo .fx, .figchip .fp { color: var(--ink); }

/* «Цены и акции», опубликованное группами (вариант A, выбор владельца 28.08.2026). */
.figgrp { background: var(--soft); border-radius: var(--radius-lg); padding: 20px 22px;
          margin-bottom: 14px; }
.figgrp .gt { margin: 0 0 10px; font-size: 15.5px; font-weight: 500; }
.figgrp .gt small { color: var(--gray); font-weight: 400; font-size: 13px; }
.figrow { background: #fff; border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; }
.figrow:last-child { margin-bottom: 0; }
.figrow .fr1 { display: flex; align-items: center; gap: 14px; }
.figrow .ft { flex: 1; min-width: 0; }
.figrow .ft b { font-weight: 500; }
.figrow .ft small { display: block; color: var(--gray); font-size: 12.5px; margin-top: 1px; }
.figrow details { margin-top: 6px; }
.figrow details summary { font-size: 13px; }

/* ============================================================ плашки-сообщения */
.note { border-radius: var(--radius-md); font-size: 14.5px; }
.note b { font-weight: 500; }
.note.ok { background: var(--leaf-4); }
.note.info { background: var(--powder); }
.note.warn { background: var(--ember-4); }
.note.warn > span { color: var(--ember-ink); }
/* Плашки состояния бота — градиенты в стилистике счётчиков меню (правки владельца
   22.08.2026): «плохо» — Ember, «бот включён» — зелёный той же геометрии. Весь текст
   белым и крупнее: тёмный жирный из базового слоя читался как два разных шрифта. */
.note.bad { background: var(--ember); color: #fff; font-size: 16px; }
.note.bad > span, .note.bad b { color: #fff; }
.note.live { background: var(--leaf); color: #fff; font-size: 16px; }
.note.live > span, .note.live b { color: #fff; }
.note.live a, .note.live a b { color: #fff; text-decoration: underline; }
.note.work { background: var(--powder); }
.note.work::before { border-color: #4c5875; border-top-color: transparent; }

/* ============================================================ таблицы */
.table { border: 0; border-radius: var(--radius-lg); background: var(--soft); box-shadow: none; }
thead th { color: var(--gray); font-weight: 500; letter-spacing: 0.09em; }
tbody tr:hover { background: rgba(22, 28, 44, 0.03); }
tbody td { color: var(--muted); }
td b { font-weight: 500; }
.table .toolbar, .table .foot { border-color: rgba(22, 28, 44, 0.06); }
.table .btn, .table .btn.sm { background: #fff; }
/* Новая заявка — долг целиком, тёплой подложкой (SPEC-STYLE 7). */
tr.newlead { background: var(--ember-4); }
tr.newlead:hover { background: #ffe4d6; }

/* ============================================================ формы */
label { color: #4b5668; font-weight: 500; }
input[type="text"], input[type="password"], input[type="url"], input[type="search"],
input[type="email"], textarea, select {
  border: 1px solid var(--border); border-radius: 14px;
  background: #fff;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(86, 166, 75, 0.55);
  box-shadow: 0 0 0 4px rgba(86, 166, 75, 0.12);
}

/* ============================================================ Главная (SPEC-STYLE 6) */
.ov { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; }
@media (max-width: 1200px) { .ov { grid-template-columns: 1fr; } }
.ovmain { min-width: 0; }
.ovcard { padding: 24px 26px; margin-top: 18px; }
/* Период на Главной — пилюлей в конце строки кнопок (28.08.2026, взамен трёх плашек).
   Активный сегмент тёмно-синий: по правилу цвета активные таблетки носят цвет структуры,
   а зелёный остаётся единственной кнопке действия. */
.ovtop { flex-wrap: wrap; }
.ovtop .period { margin-left: auto; }
.seg.period { gap: 0; padding: 4px; background: rgba(22, 28, 44, 0.05); }
.seg.period a {
  padding: 7px 14px;
  color: var(--muted); font-size: 13px; font-weight: 500;
  transition: color 160ms ease, background 160ms ease;
}
.seg.period a:hover { color: var(--ink); }
.seg.period a[aria-pressed="true"] {
  background: var(--ink); color: #fff; font-weight: 500; box-shadow: none;
}

@media (max-width: 560px) {
  .ovtop .period { margin-left: 0; }
  .seg.period a { padding-inline: 11px; font-size: 12.5px; }
}

.ovside { border-radius: var(--radius-lg); background: #f4f4f5; padding: 26px 28px; }
.ovcap { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; font-weight: 300; }
.bignum { font-size: 72px; font-weight: 500; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }

/* Схема «Сочные карточки» (28.08.2026): цветные поля по ролям — итог на синеватом,
   долг на тёплом, состояние на зелёном. Поле красит зону, элементы внутри белые;
   правило цвета данных не меняется. */
.field-powder, aside.field-powder, div.field-powder { background: var(--powder); }
.field-warm, aside.field-warm, div.field-warm { background: #fff4ee; }
.field-leaf, aside.field-leaf, div.field-leaf {
  background: linear-gradient(165deg, #d5e6d4, #dff2dc);
}
.field-leaf .pcap { color: var(--green-ink); }
.funnel .bar { height: 14px; }
.growthline { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 30px; font-size: 14px; }
.growthline .gr { font-weight: 500; font-variant-numeric: tabular-nums; }
.growthline .gr.up { color: var(--brand-green-dark); }
.growthline .gr.dn { color: var(--ember-ink); }
.growthline .sep { color: #c9ccd1; }
.growthline b { font-weight: 500; font-variant-numeric: tabular-nums; }
.growthline .mutedtail { color: var(--muted); font-weight: 300; }
.gaphead { margin-bottom: 12px; }
.gaphead h2 { font-size: 16.5px; }
.gaplist { display: flex; flex-direction: column; gap: 4px; }
.gaprow { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 16px; }
.gaprow.top { background: #fff; }
.gaprow .gn {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border-radius: 999px; background: var(--ember-3); color: var(--ember-ink);
  font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.gaprow.top .gn { background: var(--ember); color: #fff; }
.gaprow .gq { flex: 1; min-width: 0; }
.gaprow .gq b { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.gaprow .gq small { color: var(--muted); font-size: 12px; font-weight: 300; }
.gaprow .gadd {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: 999px; background: rgba(22, 28, 44, 0.06); color: var(--ink);
  transition: background 150ms ease;
}
.gaprow .gadd:hover { background: var(--promo); color: var(--ink); }
.ovhint { margin: 18px 0 0; color: var(--muted); font-size: 13px; font-weight: 300; line-height: 1.5; }

/* Воронка: ступени одной лестницей, цвет по ступени — тёмный, светло-зелёный,
   фирменный. Полоса тонкая, полностью скруглённая. */
.funnel { gap: 14px; }
.step { grid-template-columns: minmax(140px, 190px) 1fr auto auto; }
.step:hover { background: rgba(22, 28, 44, 0.03); }
.step .bar { height: 12px; border-radius: 999px; background: #eceef1; }
.step .bar i { border-radius: 999px; }
.step:nth-of-type(1) .bar i { background: var(--ink); }
.step:nth-of-type(2) .bar i { background: var(--green-mid); }
.step:nth-of-type(3) .bar i { background: var(--brand-green); }
.step .name { font-size: 14px; }
.step .n { font-size: 16px; font-weight: 500; }
.step .n small { font-weight: 300; }

/* График по дням: тихие серые столбики, пик — фирменный зелёный. */
.chart .b i { border-radius: 7px; background: #d8dadd; }
.chart .b:hover i { filter: none; background: #c8cbcf; }
.chart .b.peak i { background: var(--brand-green); }
.chart .b.peak:hover i { background: var(--brand-green-dark); }
.chart .b i[style*="--v:0%"] { min-height: 3px; border-radius: 3px; background: rgba(22, 28, 44, 0.12); }
.chart .b.peak .v { color: var(--brand-green-dark); }
.chart { border-bottom: 1px solid var(--line); }
.chart-x span { color: var(--gray); }

/* ============================================================ База ответов */
details.group > .items { padding: 0 0 4px 16px; }
details.group > .items > details.trow { border: 0; border-radius: 0; background: none; margin-top: 0; }
details.group > .items > details.trow + details.trow { border-top: 1px solid #ececee; }
details.group > .items > details.trow[open] { border-radius: var(--radius-md); background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
details.trow .q { font-size: 14.5px; font-weight: 500; }
details.trow .a { color: var(--muted); font-weight: 300; }
/* «Добавить тему» — главное действие списка: зелёный пунктир, «+» кружком. */
details.trow.addrow { border: 1.5px dashed rgba(86, 166, 75, 0.55); background: var(--green-soft); box-shadow: none; }
details.trow.addrow:hover { border-color: var(--brand-green); background: #dff0d8; }
details.trow.addrow > summary { padding: 16px 18px; }
details.trow.addrow .chev {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; background: var(--brand-green); color: #fff;
  font-size: 17px; font-weight: 500; line-height: 1; transform: none;
}
details.trow.addrow .chev::before { content: "+"; display: block; margin-top: -1px; }
details.trow.addrow[open] > summary .chev { transform: rotate(45deg); }
details.trow.addrow .q { color: #2f6b2a; font-size: 15px; font-weight: 500; }
details.trow.addrow .a { color: #4f7a49; }
details.trow.addrow[open] { background: #fff; border-style: solid; }
.inline { gap: 8px; }

/* ============================================================ маршрут (наследует) */
.panel h1 span { color: var(--gray); font-weight: 500; }
.buildrow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.buildrow .why { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.buildrow .btn[disabled] { opacity: 1; background: rgba(22, 28, 44, 0.05); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); cursor: not-allowed; }
.route { padding-bottom: 18px; }
.route { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); align-items: center; }
.route .rstep { min-width: 0; padding-right: 30px; }
.route .rstep .t { white-space: normal; line-height: 1.25; }
.route .rstep::after { top: 14px; left: auto; right: 8px; width: 20px; height: 2px; border-radius: 1px; background: var(--line); }
.rstep.done .no { background: var(--green-soft); color: var(--brand-green-dark); }
.rstep.now .no { box-shadow: 0 0 0 5px var(--green-soft); }
.rstep .no { background: rgba(22, 28, 44, 0.06); color: var(--gray); }

/* ============================================================ мелочи */
.btn.busy { pointer-events: none; opacity: 0.85; }
.avatar { border-radius: 12px; }
.bubble.ask { background: var(--brand-green); }
.login { background: rgba(246, 247, 248, 0.92); }
.login .box { border-radius: var(--radius-lg); }

/* ============================================================ оптическая центровка
   Правка владельца 22.08.2026: у Rubik вынос вверх больше выноса вниз, поэтому цифры
   в кружках и строки без нижних выносов («Включить», «Открыть») сидят выше середины
   пилюль. Плашки прижимали текст к верху рядом с центрированной кнопкой. */
.note { align-items: center; }
.btn, .subtabs .tab, .segbar .btn { padding-top: 2px; }
.seg button { padding-top: 8px; padding-bottom: 6px; }
.tab .n, .seg .n, .ritem .n, .rail .ritem .n,
.subtabs .tab .n, .segbar .btn .n { padding-top: 1px; line-height: 1; }
.gaprow .gn { padding-top: 2px; line-height: 1; }
.gaprow .gadd { padding-top: 1px; }

/* ============================================================ «Разговоры и заявки»
   Экран из SPEC-CLIENTS, перенос с канвы (страница «По рынку»). Раскладка не выдумана:
   у Intercom, HubSpot, Help Scout и Chatwoot один и тот же скелет — узкий список слева,
   разговор в самом широком месте, карточка человека справа, плюс переключатель на
   табличный вид. Взята структура, не чужая отделка: цвет, шрифт и формы наши. */

/* Рабочая зона у этого экрана шире обычной: три полосы в 1280 не помещаются. */
.panel:has(.cols), .panel:has(.tbl) { max-width: none; }

.head3 { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 8px; }
.head3 h1 { margin: 0; }
.head3 .sp2 { flex: 1; }
.switch { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); }
.switch a { padding: 8px 16px; border-radius: 999px; color: var(--ink); font-size: 13px; }
.switch a.on { background: var(--ink); color: #fff; font-weight: 500; }

/* Оба вида лежат на странице сразу, лишний скрыт: переключатель тогда работает без
   сервера, а без скрипта его же ссылки делают то же самое перезагрузкой. Прячет
   палитра, а не скрипт, — иначе до его загрузки видно оба. */
.views[data-view="chat"] .tbl, .views[data-view="chat"] [data-lead="table"],
.views[data-view="table"] .cols, .views[data-view="table"] [data-lead="chat"] { display: none; }
.lead[data-lead] { margin-top: 0; }

.cols { display: grid; grid-template-columns: 340px minmax(0, 1fr) 320px; gap: 14px;
        align-items: start; margin-top: 22px; }
.cols > * { min-width: 0; }
/* Две правые полосы приезжают одним куском и живут в общей обёртке: скрипт меняет её
   содержимое целиком, поэтому сетка должна принадлежать ей, а не им. */
.panes { display: contents; }

/* --- полоса первая: список --- */
.pane3 { background: var(--soft); border-radius: var(--radius-lg); }
.folders { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 12px 10px; }
.fold { padding: 7px 13px; border-radius: 999px; background: #fff; color: var(--ink);
        font-size: 12.5px; }
.fold .fn { margin-left: 6px; color: var(--muted); font-size: 12px; }
.fold.on { background: var(--ink); color: #fff; font-weight: 500; }
.fold.on .fn { color: #b9c0d0; }
/* Тёплые срезы — долг владельца, а не итог разговора. */
.fold.warm { background: var(--ember-4); color: var(--ember-ink); }
.fold.warm .fn { color: var(--ember-ink); }
.fold.on.warm { background: var(--ember); color: #fff; }
.fold.on.warm .fn { color: #ffe3d5; }

.rowsx { padding: 2px 8px 10px; max-height: 68vh; overflow-y: auto; }
.rx { display: flex; gap: 11px; padding: 11px 12px; border-radius: var(--radius-sm);
      color: var(--ink); }
.rx + .rx { margin-top: 2px; }
.rx:hover { background: rgba(255, 255, 255, 0.6); }
.rx.on { background: #fff; }
/* Точка исхода: зелёная — заявка, Ember — долг и передача, серая — бот справился сам. */
.rx .dt { width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; flex: none; }
.rx .dt.lead { background: var(--brand-green); }
.rx .dt.unanswered { background: #ff5c26; }
.rx .dt.handover { background: #ff9d5c; }
.rx .dt.answered { background: var(--gray); }
/* Разговор ведёт человек: долг владельца, поэтому шкала Ember, как у «ждут звонка». */
.rx .dt.held { background: var(--ember); }
/* Аватар реплики сотрудника: тот же белый кружок, но с буквой имени вместо панды. */
.conv .avatar.him9 { display: flex; align-items: center; justify-content: center;
                     font-size: 15px; font-weight: 500; color: var(--ink); }
.rx .bd { flex: 1; min-width: 0; }
.rx .bd .l1 { display: flex; align-items: baseline; gap: 8px; }
.rx .bd .who8 { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx .bd .tm { flex: none; color: var(--gray); font-size: 11.5px; font-weight: 300; }
.rx .bd .l2 { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px;
        font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more { display: flex; align-items: center; gap: 10px; padding: 10px 14px 14px; }
.more .tiny { flex: 1; color: var(--gray); }

/* --- полоса вторая: разговор, самое широкое место экрана --- */
.conv { background: var(--soft); border-radius: var(--radius-lg); padding: 20px 24px 22px; }
.conv .cvh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.conv .cvh h2 { margin: 0; font-size: 18px; }
.conv .cvh span { color: var(--muted); font-size: 13px; font-weight: 300; }
/* Суть над перепиской. Белая карточка, как строка состояния под ней: два одинаковых
   по весу поля обнимают разговор сверху и снизу и не спорят с ним за внимание. */
.gist { margin-bottom: 16px; padding: 13px 16px; background: #fff;
        border-radius: var(--radius-md); }
.gist .gt { margin: 0 0 6px; color: var(--gray); font-size: 10.5px; font-weight: 500;
        letter-spacing: 0.14em; text-transform: uppercase; }
.gist p { margin: 0; font-size: 13.5px; font-weight: 300; line-height: 1.5; }
.gist p + p { margin-top: 4px; }
/* Дыра в базе — долг владельца, а не описание: тот же Ember, что у срезов. */
.gist .miss { color: var(--ember-ink); }

.conv .dialog { max-height: 62vh; overflow-y: auto; }
/* Пузыри — те же, что в продукте (cabinet.css, блок .bubble). Здесь только фон полосы
   светлее белого, поэтому белую карточку бота нужно вернуть в непрозрачность. */
.conv .bubble.reply { background: #fff; }
.conv .answer .tiny { color: var(--gray); }
.reply { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 13px 16px;
        background: #fff; border-radius: var(--radius-md); color: var(--gray);
        font-size: 13.5px; font-weight: 300; }
.reply .sp3 { flex: 1; }
.btn8 { padding: 8px 15px; border: 0; border-radius: 999px; background: var(--soft);
        font-family: inherit; font-size: 12.5px; color: var(--ink); white-space: nowrap;
        cursor: pointer; }
.reply form { display: contents; }

/* Ответить самому. Поле во всю ширину полосы: писать клиенту в щель шириной с кнопку
   неудобно, а места под перепиской ровно столько же, сколько под ней самой. */
.sayform { display: flex; gap: 8px; margin-top: 8px; }
.sayform input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--border);
        border-radius: var(--radius-md); background: #fff; color: var(--ink);
        font-family: inherit; font-size: 14px; }
.sayform input:focus { outline: none; border-color: var(--brand-green); }
.sayform .btn { flex: none; }

/* --- полоса третья: карточка человека. Контекст, а не содержимое --- */
.ctx { background: var(--soft); border-radius: var(--radius-lg); padding: 18px 20px; }
.ctx .cg { margin: 0 0 10px; color: var(--gray); font-size: 10.5px; font-weight: 500;
        letter-spacing: 0.14em; text-transform: uppercase; }
.ctx .cg.next { margin-top: 20px; }
/* Карточка человека — по записке владельца 28.08.2026: кружок-инициалы, крупнее имя,
   скругление и поля схемы «Сочные карточки». С вечера 28.08 (его выбор) карточка
   стоит на тёплом поле ВСЕГДА — том же персиковом, что «Ожидает решения» на Главной;
   долг остаётся ярким: строка «ждёт звонка» — плашкой Ember первой ступени, как
   «Заявка № N без звонка» там же. Класс warm по-прежнему значит «есть долг»: он
   зажигает плашку и единственную зелёную кнопку экрана. */
.pers { padding: 16px; background: var(--blush); border-radius: 16px; }
.pers .ph { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.pers .pava { width: 40px; height: 40px; border-radius: 999px; background: #fff;
        color: #4c5875; display: inline-flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 500; flex: none; }
.pers .pid { min-width: 0; }
.pers .pid b { font-size: 16.5px; letter-spacing: -0.01em; }
.pers .pid .tel8 { margin-top: 1px; }
.pers b { display: block; font-size: 15px; font-weight: 500; }
.pers .tel8 { display: block; margin-top: 3px; font-size: 13.5px;
        font-variant-numeric: tabular-nums; }
.pers .fld { display: block; margin-top: 5px; font-size: 13px; font-weight: 300; }
.pers .fld .fk8 { color: var(--muted); }
.pers .wt { display: block; margin-top: 8px; color: var(--muted); font-size: 12.5px;
        font-weight: 300; }
.pers .wt.note8 { margin-top: 3px; color: var(--ink); }
.pers.warm .wt:not(.note8) { margin-top: 12px; padding: 12px 14px; border-radius: 16px;
        background: var(--ember); color: #fff; font-size: 13px; font-weight: 500; }
.ctx .cg .no8 { margin-left: 4px; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* Аварийный выход: смена статуса на любой с заметкой. Свёрнуто — нужно редко. */
.restatus { margin-top: 10px; }
.restatus summary { color: var(--muted); font-size: 12.5px; font-weight: 300;
        cursor: pointer; list-style: none; }
.restatus summary::-webkit-details-marker { display: none; }
.restatus summary::before { content: "+ "; }
.restatus[open] summary::before { content: "− "; }
.restatus summary:hover { color: var(--ink); }
.restatus form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.restatus select, .restatus input { width: 100%; padding: 8px 11px; border: 1px solid var(--border);
        border-radius: var(--radius-sm); background: #fff; color: var(--ink);
        font-family: inherit; font-size: 13px; }
.restatus .btn { align-self: flex-start; }
/* Ловушка цвета: зелёный у продукта зовётся --brand-green. Кнопка, покрашенная
   именем --green, исчезает — белый текст на пустом фоне (SPEC-CLIENTS 7). */
.btn9 { display: block; width: 100%; margin-top: 12px; padding: 11px 0; border: 0;
        border-radius: 999px; background: var(--brand-green); color: #fff;
        font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.btn9:hover { background: var(--brand-green-dark); }
.fact { display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
        border-bottom: 1px solid var(--line); font-size: 13.5px; }
.fact:last-of-type { border-bottom: 0; }
.fact .fk { width: 108px; flex: none; color: var(--muted); font-size: 12.5px; font-weight: 300; }
.fact .fv { flex: 1; min-width: 0; }
.hist { display: block; padding: 10px 12px; background: #fff; border-radius: var(--radius-sm);
        font-size: 13px; }
.hist + .hist { margin-top: 6px; }
.hist small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px;
        font-weight: 300; }

/* --- вид «Списком»: тот же набор с высоты птичьего полёта --- */
.tbl { margin-top: 22px; padding: 10px 12px 12px; background: var(--soft);
       border-radius: var(--radius-lg); }
.th, .tr2 { display: flex; align-items: center; gap: 14px; padding: 11px 14px; }
.th { color: var(--gray); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em;
      text-transform: uppercase; }
.tr2 { border-radius: var(--radius-sm); color: var(--ink); }
.tr2:hover { background: #fff; }
.tr2.warm { background: var(--ember-4); }
.tr2.warm .c1, .tr2.warm .c4x, .tr2.warm .c6 { color: var(--ember-ink); }
.c1 { width: 64px; flex: none; color: var(--muted); font-size: 13px; font-weight: 300; }
.c3 { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap; }
.c3 b { font-weight: 500; }
/* Разделитель-день в виде «Списком» (прогон 28.08): дата словами один раз,
   в строках только время. */
.trday { padding: 16px 14px 4px; color: var(--muted); font-size: 11.5px;
         font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.c4x { width: 190px; flex: none; color: var(--muted); font-size: 13px; font-weight: 300; }
.c5 { width: 150px; flex: none; }
.c6 { width: 130px; flex: none; color: var(--muted); font-size: 13px; font-weight: 300; }
.pill2 { padding: 4px 11px; border-radius: 999px; background: #e9eaee; color: var(--muted);
         font-size: 11.5px; }
.pill2.lead { background: var(--leaf-4); color: var(--green-ink); }
.pill2.unanswered { background: var(--ember-4); color: var(--ember-ink); }

/* Планшет: три полосы складываются в одну, всё остальное как было. */
@media (max-width: 1100px) {
  .cols { grid-template-columns: 1fr; }
  .rowsx, .conv .dialog { max-height: none; }
  .tbl { overflow-x: auto; }
  .th, .tr2 { min-width: 900px; }
}

/* Телефон (SPEC-CLIENTS 15): за раз видно что-то одно — либо список, либо разговор.
   Складывать полосы в одну колонку здесь мало: список из полусотни строк отодвигает
   переписку на экран вниз, и до поля ответа человек не долистывает. */
.back9 { display: none; }
@media (max-width: 900px) {
  .views:not([data-open]) .panes { display: none; }
  .views[data-open] .pane3 { display: none; }
  .back9 { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
           color: var(--muted); font-size: 14px; }
  .head3 .keys { display: none; }
  .conv { padding: 14px 14px 16px; }
  .ctx { padding-top: 4px; }
  .sayform { position: sticky; bottom: 0; background: var(--soft);
             padding: 10px 0 6px; margin-bottom: 0; }
}

/* ---------------------------------------------------------------- SPEC-HELPER 7
   Помощник-наставник: кнопка в углу и панель поверх страницы. Слоем поверх базы, как
   и всё в этом файле; компоненты и цвета — по design/lk-2026/DESIGN.md. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.helper-open {
  position: fixed;
  z-index: 60;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 12px 30px rgba(63, 141, 59, 0.34);
  color: white;
  cursor: pointer;
  place-items: center;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.helper-open:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(63, 141, 59, 0.42);
}

.helper {
  position: fixed;
  z-index: 61;
  right: 22px;
  bottom: 84px;
  display: flex;
  width: min(374px, calc(100vw - 44px));
  max-height: min(560px, calc(100vh - 130px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  box-shadow: var(--shadow-h);
}

.helper[hidden] { display: none; }

.helper-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}

.helper-head strong { font-size: 14px; }
.helper-head span { color: var(--gray); font-size: 11px; }

.helper-close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--gray);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.helper-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding: 16px;
}

.helper-msg {
  width: fit-content;
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
}

.helper-msg--bot {
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  background: var(--soft, #f6f6f7);
}

.helper-msg--me {
  margin-left: auto;
  border-bottom-right-radius: 5px;
  background: var(--brand-green);
  color: white;
}

.helper-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
}

.helper-form input {
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border, #e3e3e5);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
}

.helper-form button {
  width: 38px;
  flex: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-green);
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.helper-form button:disabled { cursor: default; opacity: 0.45; }

/* На узком экране панель занимает почти всё: чат в углу телефона нечитаем. */
@media (max-width: 640px) {
  .helper {
    right: 12px;
    bottom: 76px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 120px);
  }
  .helper-open { right: 14px; bottom: 14px; }
}

/* «Чего бот не знал»: форма ответа свёрнута до нажатия (прогон 28.08). Summary
   одет кнопкой, стандартный маркер списка убран. */
details.gap > summary { list-style: none; width: fit-content; cursor: pointer;
                        margin-top: 4px; }
details.gap > summary::-webkit-details-marker { display: none; }
details.gap[open] > summary { margin-bottom: 10px; }

/* ============================================================ симулятор (SPEC-SIM)
   Переписка берёт готовые пузыри из .conv и .bubble — здесь только две вещи, которых
   там нет: выбор кабинета в строке состояния и разбор реплики под ответом бота. */
.conv .reply select { width: auto; min-width: 150px; padding: 8px 12px; font-size: 13px;
        border-radius: 999px; }
.simx { margin-top: 6px; }
.simx summary { cursor: pointer; color: var(--gray); font-size: 12.5px; }
.simx > span { display: block; margin-top: 3px; color: var(--gray); }
.simx > span b { font-weight: 500; color: var(--ink); }