@import "./tokens.css";

/* GoodWink — стили кабинета.
   Источник правды: templates/workspace/app/static/styles.css — его отдаёт кабинет.
   Копия для Claude Design: design-system/src/styles.css
   (`npm run sync-css` в design-system/, расхождение ловит `npm test`).
   Оттуда её берёт /design-sync как cssEntry — поэтому макеты в Claude Design
   выглядят ровно как живой кабинет.
   Обновлено из Claude Design 24.07.2026 (рефреш: плотность, две темы,
   таблица данных — липкая шапка, закреплённая первая колонка, сортировка,
   фильтр по колонке). Накат пришёл без импорта токенов — первая строка файла
   добавлена при применении, без неё все var() пустые.
   NB: не писать в комментариях строку импорта целиком (со скобками и путём):
   валидатор /design-sync ищет импорты регуляркой по всему файлу, комментарии не
   вырезает, и упоминание в тексте валит синк как [CSS_IMPORT_MISSING]. */
*{box-sizing:border-box}
/* `hidden` должен побеждать любой display из класса: UA-правило [hidden] слабее
   селектора по классу, и кнопка `.iconbtn` (display:inline-flex) оставалась
   видимой, хотя скрипт её прятал — в карточке заявки так висело «удалить
   событие» от прошлого открытого события. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent-soft-2)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}

/* ——— шапка ——— */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.bar{max-width:1440px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--text)}
.logo::before{content:"";width:11px;height:11px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.logo:hover{text-decoration:none;color:var(--text)}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav a{position:relative;padding:7px 12px;border-radius:var(--r-sm);color:var(--text-2);font-weight:500;font-size:.9rem;transition:color .12s,background .12s}
nav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
nav a.on{color:var(--text)}
nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-12px;height:2px;background:var(--accent);border-radius:2px}
.sp{margin-left:auto}
a.sp{color:var(--muted);font-size:.86rem}
a.sp:hover{color:var(--text)}

/* ——— каркас страницы ——— */
/* 1440, а не 1240: кабинет — не лендинг, его широкая страница ровно одна —
   таблица заявок, и на 1240 она упиралась в горизонтальную прокрутку уже на
   восьми колонках. Ширину держат вместе `.bar` и `main`, иначе шапка и
   содержимое разъезжаются. Узкие страницы (формы) ограничены `.narrow`. */
main{max-width:1440px;margin:0 auto;padding:26px 22px 60px}
main.narrow{max-width:840px}
h1{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;margin:0 0 5px}
.sub{color:var(--text-2);margin:0 0 22px;max-width:70ch}

/* ——— карточки ——— */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;margin-bottom:16px;box-shadow:var(--elev-1),var(--hair)}
.card>*:first-child{margin-top:0}

/* ——— формы ——— */
label{display:block;font-size:.8rem;font-weight:500;color:var(--text-2);margin:12px 0 5px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);padding:9px 11px;font:inherit;transition:border-color .12s,box-shadow .12s,background .12s}
/* background-COLOR, не сокращение `background`: сокращение сбрасывает
   background-repeat/position, и стрелка select (она из data:-URI) начинает
   тайлиться по всему полю. Правило светлой темы идёт после `select{...}`,
   поэтому сброс был бы виден только в светлой теме. */
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{background-color:var(--surface)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa1ac'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
[data-theme="light"] select{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23586170'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E")}

/* ——— кнопки ——— */
button,.btn{font:inherit;cursor:pointer;background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--r-sm);padding:9px 15px;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .12s,box-shadow .12s,transform .06s}
button:not(.ghost),.btn:not(.ghost){box-shadow:var(--hair),var(--elev-1)}
button:hover:not(.ghost),.btn:hover:not(.ghost){background:var(--accent-2)}
button:active:not(.ghost),.btn:active:not(.ghost){transform:translateY(1px)}
button.ghost,.btn.ghost{background:transparent;color:var(--text-2);border:1px solid var(--border);font-weight:500}
button.ghost:hover,.btn.ghost:hover{color:var(--text);border-color:var(--border-2);background:var(--surface-2);text-decoration:none}
button:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--ring)}
button svg,.btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button:disabled,.btn:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
button:disabled:hover:not(.ghost),.btn:disabled:hover:not(.ghost){background:var(--accent)}

/* ——— переключатель режима (сегменты) ——— */
/* Заявки ↔ события: одни и те же данные под разным углом, а не два раздела —
   поэтому сегменты рядом с заголовком, а не пункт меню. Внутри — обычные
   ссылки: адрес с фильтрами пересылается и открывается в новой вкладке. */
/* Высота — из --ctl-h, а не из суммы паддингов: сегмент стоит в одном ряду с
   чипами и кнопками, и «почти одинаковые» высоты читаются как контролы из
   разных мест. align-items:stretch + inline-flex у ссылки центрируют подпись
   внутри заданной высоты. */
.seg{display:inline-flex;align-items:stretch;box-sizing:border-box;height:var(--ctl-h);gap:2px;padding:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm)}
.seg a{display:inline-flex;align-items:center;padding:0 13px;border-radius:calc(var(--r-sm) - 2px);color:var(--text-2);font-size:.86rem;font-weight:500;line-height:1.2;white-space:nowrap;transition:color .12s,background .12s}
.seg a:hover{color:var(--text);background:var(--surface);text-decoration:none}
.seg a.on,.seg a.on:hover{background:var(--accent);color:var(--accent-ink);box-shadow:var(--elev-1)}
/* счётчик рядом с подписью (сегмент, чип фильтра) — табличными цифрами:
   иначе панель дёргается по ширине, когда 9 сменяется на 11 */
.n{margin-left:6px;font-family:var(--mono);font-variant-numeric:tabular-nums;opacity:.7}
/* мелкий сегмент — внутри диалога (переключатель «Разобранное / Как пришло») */
.seg.xs{height:28px}
.seg.xs a{padding:0 10px;font-size:.78rem}

/* ——— шапка экрана источника ——— */
/* Экспорты стоят в шапке, а не в ряду фильтров: «сырые события в CSV» лежало
   там голой ссылкой справочного кегля и читалось как подпись к фильтрам, а не
   как действие. Два экспорта рядом — и видно, что это выбор из двух. */
.pagehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pagehead h1{margin:0;font-size:1.35rem}
.pagehead .exports{margin-left:auto;display:flex;align-items:center;gap:8px}
/* все кнопки шапки — той же высоты, что сегменты: «назад» в 41px рядом со
   «Скачать CSV» в 34px читается как кнопка из другого экрана */
.pagehead .btn{height:var(--ctl-h);box-sizing:border-box;padding:0 13px;font-size:.86rem}
.showing{margin:9px 0 14px;font-size:.82rem;color:var(--muted)}
.showing .mono{color:var(--text-2)}

/* ——— панель фильтров: один ряд, одна высота ——— */
/* Была `.chips` — класс форм, у него margin-top:6px под лейблом; в панели с
   align-items:center он сдвигал всю группу чипов ниже сегментов, и панель
   выглядела ссыпанной в кучу. Отдельный класс, все контролы от --ctl-h. */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
/* только прямые дети: `.toolbar button` захватывал бы и крестик внутри тега
   «фильтры колонок», раздувая его до высоты панели */
.toolbar>.seg,.toolbar>.chip.sm,.toolbar>.tag,.toolbar>.btn,.toolbar>button{height:var(--ctl-h);box-sizing:border-box}
.toolbar>.chip.sm{margin:0;padding:0 12px}
.toolbar>.btn,.toolbar>button{padding:0 13px;font-size:.86rem}
.toolbar-sep{width:1px;height:22px;background:var(--border);flex:none}
.toolbar-end{margin-left:auto}

/* ——— таблицы (сердце платформы данных) ——— */
/* Высота — от окна, а не фиксированный потолок: 560px запирали таблицу в
   треть высокого экрана, под ней оставалась пустота, и получалось два скролла
   (страницы и внутренний). Вычет — шапка сайта, заголовок страницы и отступы. */
.tablewrap{max-height:calc(100vh - 260px);overflow:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.tablewrap::-webkit-scrollbar{height:10px;width:10px}
.tablewrap::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:6px;border:2px solid var(--surface)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem}
thead th{position:sticky;top:0;z-index:2;text-align:left;color:var(--muted);font-weight:600;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
tbody tr:hover td{background:var(--surface-2)}
/* закреплённая первая колонка (время) — не теряется при прокрутке многих колонок */
.tablewrap table.leads td:first-child,.tablewrap table.leads th:first-child{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--border)}
.tablewrap table.leads thead th:first-child{z-index:3}
.tablewrap table.leads td:first-child{background:var(--surface)}
.tablewrap table.leads tbody tr:nth-child(even) td:first-child{background:color-mix(in srgb,var(--surface-2) 45%,var(--surface))}
.tablewrap table.leads tbody tr:hover td:first-child{background:var(--surface-2)}
/* колонка действий прибита справа — при десятке колонок она иначе уезжает за
   горизонтальную прокрутку, и до крестика надо докручивать */
/* width:1% — колонка по содержимому: иначе браузер отдавал ей остаток ширины
   (было 173px под две иконки), и данные ужимались в пользу пустоты */
.tablewrap table.leads td.actions,.tablewrap table.leads th.actions{position:sticky;right:0;z-index:1;white-space:nowrap;width:1%;text-align:right;box-shadow:-1px 0 0 var(--border)}
.tablewrap table.leads thead th.actions{z-index:3}
.tablewrap table.leads td.actions{background:var(--surface)}
.tablewrap table.leads tbody tr:nth-child(even) td.actions{background:color-mix(in srgb,var(--surface-2) 45%,var(--surface))}
.tablewrap table.leads tbody tr:hover td.actions{background:var(--surface-2)}
/* Действия строки — иконками одного размера: слово «открыть» занимало больше
   места, чем сама колонка данных рядом, и тянуло взгляд на служебное действие.
   Обе кнопки одного бокса, поэтому колонка не пляшет по ширине от строки к
   строке. */
/* Селектор без `td.actions`: компонент, который выглядит собой только внутри
   конкретного родителя, — не компонент. В витрине дизайн-системы такая кнопка
   рисовалась чужим стилем (проверено на контактном листе 25.07). */
.rowact{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:none;background:transparent;
  border-radius:5px;color:var(--muted);font-size:1.05rem;line-height:1;
  vertical-align:middle;cursor:pointer;transition:color .12s,background .12s}
.rowact:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.rowact.danger:hover{color:var(--bad)}
.rowact svg{width:16px;height:16px}
/* заголовок липкой колонки: подпись мелкая, как у прочих th, но без сортировки
   и фильтра — это не данные */
th.actions .lbl{font-size:.62rem;letter-spacing:.08em;color:var(--muted)}
/* «Повторы» стоит сразу за закреплённым временем, а не в конце строки: в конце
   её на две трети перекрывала прибитая справа колонка действий, и пилюля ×N —
   единственное, чем заявка отличается от события — была видна наполовину. */
.tablewrap table.leads td.dupcell,.tablewrap table.leads th.dupcell,
.tablewrap table.leads td.idcell,.tablewrap table.leads th.idcell{white-space:nowrap;width:1%}
/* строка, где ни одна колонка не заполнена: показываем то, что реально пришло —
   приглушённо, чтобы не спорить с обычными значениями */
.tablewrap table.leads td.nofields{color:var(--muted)}
/* Длинное значение поля (комментарий из формы) раздувало строку до трёх сотен
   пикселей и съедало половину таблицы. Показываем до трёх строк, полностью —
   в карточке заявки; на ховере длинного значения есть `title`. */
.tablewrap table.leads tbody td{max-width:300px}
/* именно `break-word`, а не `anywhere`: `anywhere` обнуляет min-content ширину
   ячейки, и авто-раскладка таблицы ужимает колонки до нескольких символов —
   короткий email начинает переноситься посреди слова. */
.tablewrap table.leads .cell{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:break-word}
/* Структура в ячейке — значок со счётчиком, а не значение. Показывать её текстом
   нельзя (в ячейку приехал бы JSON во всю ширину), а прочерком — врать: прочерк
   означает «поля не пришло», а тут данные есть. Высота строки от значка не
   меняется: таблица должна читаться по вертикали. */
.tablewrap table.leads .cell.struct{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface-2);
  color:var(--text-2);font-family:var(--mono);font-size:.78rem;white-space:nowrap;cursor:default}
.mono{font-family:var(--mono);font-size:.85em;font-variant-numeric:tabular-nums}
td.mono,th.mono{font-variant-numeric:tabular-nums}
/* сортировка по колонке (asc/desc) */
th.sortable{cursor:pointer;user-select:none}
th.sortable .th-in{display:inline-flex;align-items:center;gap:6px}
/* метка ключевого поля в заголовке — подсказка, не кнопка: без ховера и курсора */
th .th-key{display:inline-flex;color:var(--accent);opacity:.75;cursor:help}
th .th-key svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
th .sort-ind{display:inline-flex;color:var(--muted);opacity:.4;transition:transform .12s,opacity .12s,color .12s}
th .sort-ind svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
th.sortable:hover{color:var(--text)}
th.sortable:hover .sort-ind{opacity:.85}
th[aria-sort]{color:var(--text)}
th[aria-sort] .sort-ind{opacity:1;color:var(--accent)}
th[aria-sort="descending"] .sort-ind{transform:rotate(180deg)}
/* фильтр по колонке — иконка-воронка в заголовке + поповер */
.th-in .filter-btn{width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;box-shadow:none;opacity:.55;transition:opacity .12s,color .12s,background .12s}
.th-in .filter-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.th-in .filter-btn:hover{background:var(--surface);color:var(--text);opacity:1}
.th-in .filter-btn.on{color:var(--accent);opacity:1}
.th-in .filter-btn.on svg{fill:currentColor}
.filter-pop{position:fixed;z-index:60;min-width:194px;max-width:264px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--elev-2);padding:10px;font-weight:400;text-transform:none;letter-spacing:0}
.filter-opts{max-height:210px;overflow:auto;margin-bottom:8px}
.pop-opt{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:6px;font-size:.85rem;color:var(--text);cursor:pointer;font-family:var(--font);white-space:nowrap}
.pop-opt:hover{background:var(--surface-2)}
.pop-opt input{width:auto;margin:0;accent-color:var(--accent);cursor:pointer;flex:none}
.filter-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--border);padding-top:8px}
.filter-foot .ghost{padding:5px 11px;font-size:.82rem}
.pop-ok{padding:5px 15px;font-size:.82rem}
.colfilter{width:100%;min-width:76px;padding:6px 9px;font-size:.82rem;font-family:var(--mono);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text)}
[data-theme="light"] .colfilter{background-color:var(--surface)}
.colfilter::placeholder{color:var(--muted);font-family:var(--font)}
.filter-pop .colfilter{margin-bottom:8px}
.colfilter:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* ——— пилюли статуса ——— */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:500;font-family:var(--mono)}
.st-spam{background:var(--bad-soft);color:var(--bad)}
.pill.dup{background:var(--warn-soft);color:var(--warn);cursor:pointer}
.st-actual{background:var(--good-soft);color:var(--good)}
.pill.off{background:var(--muted-soft);color:var(--muted)}
/* качество данных события: потеря при разборе (красная), имя поля не по
   конвенции (жёлтая), событие без ключа (серая) */
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
/* В таблице метка — только значок, и все три одного бокса: текстовые глифы
   (✕ ⚠ ⌀) шли разной ширины, и колонка «Заявка» плясала от строки к строке, а
   ⌀ в мелком кегле не читался вовсе — его принимали за «выключено». */
.pill.ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:20px;padding:0;vertical-align:middle}
.pill.ico svg,.pill.lbl svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* перечёркнутый ключ мельче деталями — тоньше обводка, иначе слипается */
.pill.off.ico svg,.pill.off.lbl svg{stroke-width:1.9}
/* тот же значок со словом — в окне заявки и в чипах фильтра, где место есть и
   метку надо назвать вслух */
.pill.lbl{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px}
/* метки идут в одну строку с номером и не переносятся под него */
.idcell .marks{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
/* тот же значок без подложки — в чипе фильтра: чип уже сам себе бокс, вторая
   рамка внутри него читалась бы как отдельная метка */
.qico{display:inline-flex;align-items:center;flex:none}
.qico svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.qico.bad{color:var(--bad)}
.qico.warn{color:var(--warn)}
.qico.off{color:var(--text-2)}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.row>div{flex:1;min-width:140px}
.chk{display:flex;align-items:center;gap:6px;color:var(--text);white-space:nowrap;font-size:.9rem;cursor:pointer}
.chk input{width:auto;margin:0}

/* ——— chip-тумблер ——— */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.chip{position:relative;display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--text-2);font-size:.85rem;line-height:1;white-space:nowrap;cursor:pointer;user-select:none;transition:border-color .12s,background .12s,color .12s}
[data-theme="light"] .chip{background-color:var(--surface)}
.chip:hover{border-color:var(--border-2);color:var(--text)}
.chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.chip .box{width:16px;height:16px;border:1.5px solid var(--muted);border-radius:5px;flex:none;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.chip .box::after{content:"";width:4px;height:8px;margin-bottom:2px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .12s}
.chip input:checked~.box{border-color:var(--accent);background:var(--accent)}
.chip input:checked~.box::after{transform:rotate(45deg) scale(1)}
.chip:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.chip input:focus-visible~.box{outline:2px solid var(--accent);outline-offset:2px}
/* компактный чип — ровно под высоту сегмента (.seg), когда фильтры стоят в
   одной строке: разница даже в пару пикселей читается как «контролы из разных
   мест». Считается так: .seg = 2×1px рамки + 2×2px паддинга + строка
   (6+6 паддинг + line-height 1.2) = 34.5px; у чипа рамка та же, поэтому
   8+8+1.2 даёт ту же высоту. Не min-height: тогда при смене шрифта разъедется
   снова, а так обе высоты выводятся из одних и тех же чисел. */
.chip.sm{padding:8px 12px;border-radius:var(--r-sm);font-size:.86rem;
  line-height:1.2;gap:7px}
.chip.sm .box{width:14px;height:14px;border-radius:4px}
.chip.sm .box::after{width:3px;height:7px;margin-bottom:1px}
.chip-input{flex:1 1 200px;width:auto;min-width:180px}

.x{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:1.15rem;line-height:1;padding:0 4px;border-radius:5px}
.x:hover{color:var(--bad)}

/* ——— иконные кнопки ——— */
.iconbtn{position:relative;width:36px;height:36px;padding:0;flex:none;background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.iconbtn:hover{color:var(--text);border-color:var(--border-2);background:var(--surface-2);opacity:1}
.iconbtn.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft-2)}
.iconbtn.danger:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.iconrow{display:flex;gap:6px;align-items:center;flex:none;min-width:0}
.cardhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cardhead-main{flex:0 1 auto;min-width:0}
.iconbtn[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--surface);color:var(--text);border:1px solid var(--border-2);padding:5px 9px;border-radius:6px;font-size:.76rem;font-weight:400;line-height:1.2;white-space:nowrap;box-shadow:var(--elev-2);pointer-events:none;opacity:0;transition:opacity .12s,transform .12s;z-index:30}
.iconbtn[data-tip]::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--border-2);pointer-events:none;opacity:0;transition:opacity .12s;z-index:30}
.iconbtn[data-tip]:hover::after,.iconbtn[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.iconbtn[data-tip]:hover::before,.iconbtn[data-tip]:focus-visible::before{opacity:1}

.editpanel{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.editpanel[hidden]{display:none}
.iconbtn.chevron svg{transition:transform .15s}
.iconbtn.chevron.open svg{transform:rotate(180deg)}

/* ——— таблица полей хука ——— */
table.fields{width:auto;min-width:min(420px,100%);border-collapse:collapse}
table.fields td,table.fields th{border-bottom:1px solid var(--border);padding:7px 10px}
table.fields thead th{position:static;background:none;border-bottom:1px solid var(--border)}
table.fields td:first-child,table.fields th:first-child{font-family:var(--mono);font-size:.85em;color:var(--text);text-align:left}
table.fields td+td,table.fields th+th{text-align:center;width:1%;white-space:nowrap;padding-left:16px;padding-right:16px}
table.fields tbody tr:nth-child(even) td{background:none}
table.fields tbody tr:hover td{background:var(--surface-2)}
table.fields input[type=checkbox]{width:18px;height:18px;padding:0;margin:0;accent-color:var(--accent);cursor:pointer;vertical-align:middle}
table.fields td.col-type{text-align:left;width:auto}
table.fields td.col-type select{width:auto;padding:4px 26px 4px 9px;font-size:.85em;background-position:right 7px center}

/* ——— сводка по хукам ——— */
.hookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.hookcard{display:block;position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;color:var(--text);box-shadow:var(--elev-1),var(--hair);overflow:hidden;transition:border-color .14s,transform .14s,box-shadow .14s}
.hookcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:0;transition:opacity .14s}
.hookcard:hover{border-color:var(--border-2);text-decoration:none;transform:translateY(-2px);box-shadow:var(--elev-2)}
.hookcard:hover::before{opacity:1}
.hookcard.arch{opacity:.55}
.hc-name{font-weight:600;font-size:.95rem;margin-bottom:10px}
.hc-count{font-size:2rem;font-weight:600;line-height:1;font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hc-meta{color:var(--muted);font-size:.78rem;margin-top:5px}
.hc-open{color:var(--accent);font-size:.82rem;font-weight:500;margin-top:14px}

details>summary{cursor:pointer;color:var(--text-2);font-size:.9rem;user-select:none;list-style-position:inside}
details>summary:hover{color:var(--text)}
details[open]>summary{color:var(--text);margin-bottom:6px}
.scrolly{max-height:340px;overflow:auto}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg);color:var(--text-2);font-size:.84rem;line-height:1}
[data-theme="light"] .tag{background-color:var(--surface)}

.checklist{max-height:320px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-sm);padding:4px}
.chk-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:5px;font-size:.9rem;cursor:pointer;color:var(--text)}
.chk-row:hover{background:var(--surface-2)}
.chk-row input[type=checkbox]{width:auto;height:16px;margin:0;padding:0;accent-color:var(--accent);cursor:pointer}
.chk-group{padding:12px 9px 4px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
table.fields tr.fields-group td{font-family:inherit;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:14px;border-bottom:none;text-align:left}
table.fields tr.fields-group:hover td{background:none}
dialog input[type=text],dialog select{width:100%}

/* ——— kv-таблица (API, справка) ——— */
.kv{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:6px}
.kv td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text)}
.kv td:first-child{white-space:nowrap;font-family:var(--mono);font-size:.82rem;color:var(--accent);width:1%}
.kv tr:last-child td{border-bottom:none}
.hint{color:var(--text-2);font-size:.88rem}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.inline select{width:auto;min-width:160px}
.muted{color:var(--muted)}
.msg{padding:10px 14px;border-radius:var(--r-sm);margin-bottom:16px;font-size:.9rem;border:1px solid transparent}
.msg.ok{background:var(--good-soft);color:var(--good);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.msg.err{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
code{font-family:var(--mono);background:var(--surface-2);padding:2px 6px;border-radius:5px;font-size:.85em;word-break:break-all}

/* ——— диалоги ——— */
dialog{background:var(--surface);color:var(--text);border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--elev-2);max-width:min(680px,92vw);width:100%;max-height:90vh;padding:0}
dialog::backdrop{background:var(--scrim)}
/* Прокручивается ОДНА зона внутри окна, а не окно целиком: заявка с полусотней
   полей вырастала на 1200px, и на ноутбуке уезжали и шапка с номером, и подвал
   с действиями. Шапка, мета и подвал остаются на месте — данные прокручиваются
   под ними. */
dialog[open]{display:flex;flex-direction:column}
dialog>*{flex:none}
dialog .dlg-scroll{flex:1 1 auto;overflow:auto;min-height:0}
/* Окно — четыре зоны с одинаковым ритмом: шапка → мета → тело → подвал.
   Раньше зон не было: заголовок с кнопкой «закрыть» во всю подпись, ключ
   строкой мелкого текста под формой, данные в <pre> без контейнера, «как
   пришло» спрятано в <details>. Найти в этом ключ заявки было нечем. */
.dlg-h{display:flex;align-items:flex-start;gap:16px;padding:15px 18px;border-bottom:1px solid var(--border)}
.dlg-h .t{font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.dlg-h .meta{margin-top:4px;font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.dlg-h .iconbtn{margin-left:auto}
/* мета-сетка: то, чем заявка отличается от соседней, — ключ и качество.
   Читается первым, до данных и до заметки. */
.dlg-meta{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;align-items:baseline;padding:14px 18px;border-bottom:1px solid var(--border)}
.dlg-lbl{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dlg-marks{display:flex;gap:7px;flex-wrap:wrap}
.dlg-b{padding:14px 18px;border-bottom:1px solid var(--border)}
.dlg-b:last-of-type{border-bottom:none}
.dlg-b>label:first-child{margin:0 0 6px}
/* поле заметки и кнопка одной высоты: «Сохранить» в 44px доминировала над
   всем окном, хотя это не главное действие карточки */
.dlg-note{display:flex;gap:8px;align-items:center}
.dlg-note input{flex:1;height:38px}
.dlg-note button{height:38px;flex:none}
.dlg-datahead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.dlg-datahead .seg{margin-left:auto}
.dlg-f{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border)}
.dlg-f .btn{height:32px;padding:0 12px;font-size:.84rem;display:inline-flex;align-items:center;gap:6px}
.dlg-f .btn.del{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.dlg-f .btn.del:hover{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.rowact.sm{width:28px;height:28px}
dialog pre{margin:0;padding:16px;overflow:auto;max-height:60vh;font-family:var(--mono);font-size:.8rem;white-space:pre-wrap;word-break:break-word}
pre.block{background:var(--bg);padding:12px;border-radius:var(--r-sm);border:1px solid var(--border);overflow:auto;font-family:var(--mono);font-size:.8rem}

/* ——— панель данных события ——— */
/* Данные показываем разобранными парами «поле — значение», а не куском JSON:
   скобки и кавычки — синтаксис нашего хранилища, а человек пришёл прочитать
   заявку. Точные байты остаются в один клик («Как пришло»). */
.fieldbox{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);overflow:hidden}
[data-theme="light"] .fieldbox{background-color:var(--surface-2)}
.fieldbox .f{display:grid;grid-template-columns:minmax(90px,26%) 1fr;gap:0 14px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:.82rem}
.fieldbox .f:last-child{border-bottom:none}
.fieldbox .fk{font-family:var(--mono);color:var(--accent);word-break:break-word;display:flex;align-items:baseline;gap:6px}
/* имя поля не по конвенции — жёлтым и с подсказкой: полем источника оно не
   станет, и это единственное место, где видно, какое именно имя виновато */
.fieldbox .f.odd .fk{color:var(--warn)}
.fieldbox .fv{font-family:var(--mono);color:var(--text);white-space:pre-wrap;word-break:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
/* длинное значение (комментарий из формы) разворачивается по клику: в свёрнутом
   виде шесть строк, иначе одно поле выталкивает из окна все остальные */
.fieldbox .fv.open{-webkit-line-clamp:none;line-clamp:none;display:block}
.fieldbox .fv.clip{cursor:pointer}
.fieldbox .f.lost .fv{color:var(--bad)}
.fieldbox .fv .empty{color:var(--muted)}
/* «показаны не все поля» — строка того же бокса, а не подпись под ним:
   выборка данных должна быть видна там же, где данные */
.fieldbox .more{display:block;width:100%;padding:8px 12px;background:none;border:none;border-top:1px solid var(--border);color:var(--text-2);font-size:.8rem;text-align:left;cursor:pointer}
.fieldbox .more:hover{background:var(--surface-2);color:var(--text)}
/* Структура в карточке: свёрнута в кнопку со счётчиком, разворачивается строкой
   ниже. Разворот — отдельный блок, а не содержимое ячейки значения: подтаблица
   шире колонки значений, и внутри колонки она была бы нечитаемой. */
.fieldbox .structbadge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface-2);
  color:var(--text-2);font-family:var(--mono);font-size:.78rem;cursor:pointer}
.fieldbox .structbadge:hover{background:var(--surface);color:var(--text);border-color:var(--accent)}
.fieldbox .structbox{border-bottom:1px solid var(--border);background:var(--surface-2);
  padding:8px 12px;overflow-x:auto}
.fieldbox .structbox .f{padding:4px 0;border-bottom:none}
.fieldbox .structbox .hint{margin:6px 0 0;font-size:.76rem;color:var(--muted)}
/* Однородный массив объектов — таблица: у элементов одинаковый набор ключей,
   значит табличная форма ничего не теряет. Горизонтальная прокрутка живёт
   внутри блока (`.structbox`), иначе широкая подтаблица растянула бы карточку
   и по горизонтали поехала бы вся страница. */
.fieldbox .structtable{border-collapse:collapse;font-family:var(--mono);font-size:.76rem}
.fieldbox .structtable th{padding:4px 10px 4px 0;text-align:left;white-space:nowrap;
  color:var(--muted);font-weight:500;border-bottom:1px solid var(--border)}
.fieldbox .structtable td{padding:4px 10px 4px 0;vertical-align:top;color:var(--text);
  border-bottom:1px solid var(--border);max-width:320px;overflow-wrap:break-word}
.fieldbox .structtable tr:last-child td{border-bottom:none}
/* Список имён, которые полем не стали, — с причиной у каждого. Причина именно
   у каждого, а не одна на список: имя с пробелом по краям на экране выглядит
   нормальным, и общая фраза про кодировку на него не отвечает. */
ul.skipped{margin:6px 0 8px;padding-left:18px}
ul.skipped li{margin:2px 0}
/* без своей max-height: зона данных карточки уже прокручивается, вторая
   полоса прокрутки внутри первой — способ потерять то, что ниже */
.rawbox{margin:0;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:.8rem;line-height:1.7;color:var(--text-2);white-space:pre-wrap;word-break:break-word}
[data-theme="light"] .rawbox{background-color:var(--surface-2)}
.datanote{margin:0 0 8px;font-size:.78rem;color:var(--muted)}
.datanote a{margin-left:4px}
.overflow{overflow-x:auto}
@media(max-width:640px){td .mono{max-width:150px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}