/* Общие компоненты. У каждого компонента один блок правил. Цвета, отступы и радиусы — из tokens.css. Теней нет. */

/* ===== Кнопка «Button» (Figma 2547:40504): Md 36 (отступ 16, радиус 8) / Sm 32 (отступ 12, радиус 6), зазор 4, 14 Жирный, рамка 1 внутрь.
   Вторичная: Белый + рамка Серый/200 → наведение Серый/100 без рамки → нажата Серый/200 + рамка Серый/100 → фокус Белый + рамка и текст Серый/500 → disabled Серый/100, текст Серый/200.
   Основная: Основной/500 → 600 → 500 + рамка 200 → фокус рамка 600 → disabled 100, текст 200. Опасная (Error): Красный/500 → 600 → 500 + рамка 200 → фокус рамка 600 → disabled 100, текст 200.
   Кнопки с текстом — без иконок (правило ДС; в компоненте иконки есть, но скрываются) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-4);height:var(--h-md);padding:0 var(--s-16);border-radius:var(--r-8);border:1px solid var(--c-gray-200);background:var(--c-white);color:var(--c-primary-500);font:700 14px/20px var(--font);white-space:nowrap}
.btn:hover{background:var(--c-gray-100);border-color:transparent}
.btn:active{background:var(--c-gray-200);border-color:var(--c-gray-100)}
.btn:focus-visible{background:var(--c-white);border-color:var(--c-gray-500);color:var(--c-gray-500)}
.btn-sm{height:var(--h-sm);padding:0 var(--s-12);border-radius:var(--r-6)}
.btn-pri{background:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-white)}
.btn-pri:hover{background:var(--c-primary-600);border-color:var(--c-primary-600)}
.btn-pri:active{background:var(--c-primary-500);border-color:var(--c-primary-200)}
.btn-pri:focus-visible{background:var(--c-primary-500);border-color:var(--c-primary-600);color:var(--c-white)}
.btn-danger{background:var(--c-red-500);border-color:var(--c-red-500);color:var(--c-white)}
.btn-danger:hover{background:var(--c-red-600);border-color:var(--c-red-600)}
.btn-danger:active{background:var(--c-red-500);border-color:var(--c-red-200)}
.btn-danger:focus-visible{background:var(--c-red-500);border-color:var(--c-red-600);color:var(--c-white)}
.btn:disabled,.btn:disabled:hover{background:var(--c-gray-100);border-color:transparent;color:var(--c-gray-200);cursor:not-allowed}
.btn-pri:disabled,.btn-pri:disabled:hover{background:var(--c-primary-100);border-color:var(--c-primary-100);color:var(--c-primary-200)}
.btn-danger:disabled,.btn-danger:disabled:hover{background:var(--c-red-100);border-color:var(--c-red-100);color:var(--c-red-200)}

/* ===== Ссылка: 14 Полужирный Основной/400; внутри текста — по базовой линии ===== */
.lnk{display:inline-flex;align-items:center;gap:var(--s-4);min-height:var(--h-sm);padding:0;border:0;background:none;font:600 14px/20px var(--font);color:var(--c-primary-400);text-align:left;text-decoration:none}
.lnk:hover{text-decoration:underline}
.lnk:disabled{color:var(--c-gray-300);cursor:not-allowed;text-decoration:none}
.lnk-in{display:inline;min-height:0;vertical-align:baseline}
.lnk-danger{color:var(--c-red-500)}
.lnk-mute{color:var(--c-gray-500)} /* «‹ Назад к …»: Серый/500 как в Figma */
.lnk-mute:hover{color:var(--c-gray-600)}
.lnk>svg.i{flex:none;width:16px;height:16px} /* «‹ Назад к …»: шеврон 16 слева */

/* ===== Кнопка-иконка: Md 32 (иконка 20) / Sm 28 (иконка 16), радиус 6, Серый/50 и иконка Серый/400.
   В «Button» вариантов «только иконка» нет; образец — «Icon button» в «Modals header» (Figma 2667:24373): 28, r6, Серый/50, иконка Серый/400 ===== */
.ib{width:32px;height:32px;flex:none;display:inline-grid;place-items:center;padding:0;border:1px solid transparent;border-radius:var(--r-6);background:var(--c-gray-50);color:var(--c-gray-500)}
.ib:hover{background:var(--c-gray-100);border-color:var(--c-gray-300);color:var(--c-gray-500)}
.ib:focus-visible{background:var(--c-white);border-color:var(--c-gray-500);color:var(--c-gray-500)}
.ib[aria-expanded=true]{background:var(--c-white);border-color:var(--c-primary-500);color:var(--c-primary-500)}
.ib:disabled,.ib:disabled:hover{background:var(--c-gray-50);border-color:transparent;color:var(--c-gray-200);cursor:not-allowed}
.ib-sm{width:28px;height:28px}
.ib-sm svg.i{width:16px;height:16px}
.ib-ghost{background:transparent}
/* опасное действие (например «Отозвать»): иконка красная, как опасный пункт меню */
.ib.ib-danger,.ib.ib-danger:hover{color:var(--c-red-600)}
/* ⋮ в шапке страницы: вторичная кнопка — рамка, высота и радиус как у «Button» Md */
.ib-hd{width:var(--h-md);height:var(--h-md);border:1px solid var(--c-gray-200);border-radius:var(--r-8);background:var(--c-white);color:var(--c-primary-500)}
.ib-hd:hover{background:var(--c-gray-100);border-color:transparent;color:var(--c-primary-500)}
.ib-hd:focus-visible{background:var(--c-white);border-color:var(--c-gray-500);color:var(--c-gray-500)}

/* ===== Бейдж «Badge» Outline=Yes, Shape=Pill, Theme=Light (Figma 1423:18569): Md 24 / 14 Полужирный, Sm 20 / 12 Полужирный (единственный текст 12 px), отступ 8, зазор 4.
   Тон Active: заливка X/50, рамка и текст X/500. Без тона — Grey Active (Серый/50, Серый/500). «Проверка…» — Default: Белый, рамка Основной/100, текст Основной/500.
   Отступление: у янтарного текст Янтарный/900 вместо Янтарный/500 (в Figma контраст 1,7:1, нечитаемо) ===== */
.bd{display:inline-flex;align-items:center;gap:var(--s-4);height:24px;padding:0 var(--s-8);border-radius:var(--r-pill);border:1px solid var(--c-gray-500);background:var(--c-gray-50);color:var(--c-gray-500);font:600 14px/20px var(--font);white-space:nowrap;vertical-align:middle}
.bd-sm{height:20px;font:600 12px/16px var(--font)}
.bd-ok{border-color:var(--c-green-500);background:var(--c-green-50);color:var(--c-green-500)}
.bd-err{border-color:var(--c-amber-500);background:var(--c-amber-50);color:var(--c-amber-900)}
.bd-off{border-color:var(--c-red-500);background:var(--c-red-50);color:var(--c-red-500)}
.bd-dis{border-color:var(--c-gray-500);background:var(--c-gray-50);color:var(--c-gray-500)}
.bd-pend{border-color:var(--c-primary-100);background:var(--c-white);color:var(--c-primary-500)}
.bd-info{border-color:var(--c-primary-400);background:var(--c-primary-50);color:var(--c-primary-400)}


/* ===== Спиннер (в бейдже «Проверка…» и в строках проверки) ===== */
.spin{width:12px;height:12px;flex:none;border-radius:50%;border:2px solid var(--c-gray-200);border-top-color:var(--c-gray-600);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Плашка «Alert and Notification» (Figma 2725:22775), цветные варианты по типу (решение 04.11): светлая заливка и рамка тона, радиус 8, отступ 12, зазор 8;
   иконка 16, заголовок, текст и ссылка — тёмный оттенок тона (контраст ≥ 4,5:1), ✕ 16 Серый/500.
   Тоны: ошибка (alarm) — Красный, предупреждение (warn) — Янтарный, информация (info) — Основной, успех (ok) — Зелёный; plain — серая строка без заливки.
   Одна строка «Заголовок — что делать. [ссылка]» ===== */
.al{--al-bg:var(--c-primary-50);--al-bd:var(--c-primary-200);--al-fg:var(--c-primary-400);display:flex;align-items:flex-start;gap:var(--s-8);padding:var(--s-12);border:1px solid var(--al-bd);border-radius:var(--r-8);background:var(--al-bg);color:var(--al-fg);font:600 14px/20px var(--font)}
.al>svg.i{width:16px;height:16px;margin-top:var(--s-2);color:var(--al-fg)}
.al-alarm{--al-bg:var(--c-red-50);--al-bd:var(--c-red-200);--al-fg:var(--c-red-600)}
.al-warn{--al-bg:var(--c-amber-50);--al-bd:var(--c-amber-200);--al-fg:var(--c-amber-900)}
.al-ok{--al-bg:var(--c-green-50);--al-bd:var(--c-green-200);--al-fg:var(--c-green-600)}
.al-plain{padding:0;border:0;background:none;color:var(--c-gray-600)}
.al-b{flex:1 1 auto;min-width:0}
.al-t{font-weight:700;color:inherit}
.al-plain .al-t{color:var(--c-primary-500)}
.al .lnk{color:inherit;text-decoration:underline}
.al-more{margin:var(--s-4) 0 0;padding-left:var(--s-20);display:grid;gap:var(--s-2)}
.al-x{margin:calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) 0}
.al-x .ib{color:var(--c-gray-500)}
.alerts{display:grid;gap:var(--s-8)}

/* ===== Поле «Input» (Figma 2537:36168): Md 36, отступ 8, радиус 8, рамка Серый/100, наведение Серый/50 + рамка Серый/200, фокус Основной/500; текст 14 Полужирный; подпись 16 Жирный (Md); ошибка — после ухода из поля ===== */
.field{display:grid;gap:var(--s-4);min-width:0;align-content:start}
.field-l{display:flex;align-items:flex-start;gap:var(--s-4);font:700 16px/24px var(--font);color:var(--c-primary-500)}
.sum-l{font:700 14px/20px var(--font);color:var(--c-primary-500)}
.field-req{color:var(--c-red-500)}
.field-opt{font-weight:400;color:var(--c-gray-600)}
.field-help{font:400 14px/20px var(--font);color:var(--c-gray-600)}
.field-help-i{display:flex;gap:var(--s-4);align-items:flex-start}
.field-help-i svg.i{width:12px;height:12px;margin-top:var(--s-4);color:var(--c-gray-500)}
/* выбор в виде карточек (радио): две в ряд поровну с отступом 16 как между полями; на телефоне — одна под другой */
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16)}
@media (max-width:767px){.rgrid{grid-template-columns:minmax(0,1fr)}}
.rcard{position:relative;display:block;min-width:0;cursor:pointer}
.rcard-in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.rcard-b{display:grid;gap:var(--s-4);height:100%;padding:var(--s-12) var(--s-16);border:1px solid var(--c-gray-100);border-radius:var(--r-8);background:var(--c-white)}
.rcard:hover .rcard-b{background:var(--c-gray-50);border-color:var(--c-gray-200)}
.rcard-t{font:700 14px/20px var(--font);color:var(--c-primary-500)}
.rcard-d{font:400 14px/20px var(--font);color:var(--c-gray-600)}
.rcard-in:checked+.rcard-b{border-color:var(--c-primary-500);background:var(--c-primary-50);box-shadow:inset 0 0 0 1px var(--c-primary-500)}
.rcard-in:focus-visible+.rcard-b{outline:2px solid var(--c-primary-400);outline-offset:2px}
.field-err{display:flex;gap:var(--s-4);align-items:flex-start;font:400 14px/20px var(--font);color:var(--c-red-500)}
.field-err svg.i{width:16px;height:16px;margin-top:var(--s-2)}
.inp{width:100%;min-width:0;height:var(--h-md);padding:0 var(--s-8);border:1px solid var(--c-gray-100);border-radius:var(--r-8);background:var(--c-white);font:600 14px/20px var(--font);color:var(--c-primary-500)}
.inp::placeholder{color:var(--c-gray-500);opacity:1;font-weight:600}
.inp:hover{background:var(--c-gray-50);border-color:var(--c-gray-200)}
.inp:focus{background:var(--c-white);border-color:var(--c-primary-500)}
.inp[aria-invalid=true]{border-color:var(--c-red-500)}
.inp:disabled{background:var(--c-gray-100);border-color:var(--c-gray-200);color:var(--c-gray-400);cursor:not-allowed}
/* неактивное поле (как в мастере): подпись и звёздочка Серый/300, шеврон Серый/400; пояснение под полем остаётся Серый/600 */
.field:has(> .inp:disabled,> .sel > .inp:disabled,> .cbl > .cb:disabled) > .field-l,.tp-dict-ed:has(.inp:disabled) > .field-l{color:var(--c-gray-300)}
.field:has(> .inp:disabled,> .sel > .inp:disabled,> .cbl > .cb:disabled) .field-req,.field:has(> .inp:disabled,> .sel > .inp:disabled) .field-opt{color:var(--c-gray-300)}
.sel:has(> .inp:disabled) > svg.i{color:var(--c-gray-400)}
.inp-sm{height:var(--h-sm);border-radius:var(--r-6)}
.sel{position:relative;min-width:0}
.sel .inp{appearance:none;-webkit-appearance:none;padding-right:var(--s-32);cursor:pointer;text-overflow:ellipsis}
.sel>svg.i{position:absolute;right:var(--s-8);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--c-gray-500)}
.srch{position:relative;min-width:0}
.srch>svg.i{position:absolute;left:var(--s-8);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--c-gray-500)}
.srch .inp{padding-left:var(--s-32);text-overflow:ellipsis}
/* ✕ очистки в поле поиска: виден, пока есть текст; иконка «x» набора (маска, цвет — токеном), глиф 16, зона нажатия 32 (на телефоне 40) */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;box-sizing:content-box;width:16px;height:16px;margin:0 calc(-1 * var(--s-8)) 0 var(--s-4);padding:var(--s-8);opacity:1;pointer-events:auto;cursor:pointer;background-color:var(--c-gray-500);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L12 12M12 12L6 18M12 12L6 6M12 12L18 18'/%3E%3C/svg%3E") center/16px 16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L12 12M12 12L6 18M12 12L6 6M12 12L18 18'/%3E%3C/svg%3E") center/16px 16px no-repeat}
input[type=search]::-webkit-search-cancel-button:hover{background-color:var(--c-primary-500)}
@media (max-width:767px){input[type=search]::-webkit-search-cancel-button{padding:var(--s-12)}}

/* ===== Значок «i» у технических терминов: зона 32, глиф 16 ===== */
.inf{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin:calc(-1 * var(--s-8) + var(--s-2)) calc(-1 * var(--s-8)) calc(-1 * var(--s-8) + var(--s-2)) calc(-1 * var(--s-4));padding:0;border:0;border-radius:var(--r-6);background:none;color:var(--c-gray-500);cursor:help;vertical-align:middle}
.inf svg.i{width:16px;height:16px}
.inf:hover{color:var(--c-primary-400)}

/* ===== Чекбокс ДС: 20, радиус 4, рамка Серый/400; неполное состояние ===== */
.cb{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;border:1px solid var(--c-gray-400);border-radius:var(--r-4);background:var(--c-white) center/12px no-repeat;cursor:pointer;vertical-align:middle}
.cb:hover{border-color:var(--c-gray-500)}
.cb:checked{background-color:var(--c-primary-500);border-color:var(--c-primary-500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cb:indeterminate{background-color:var(--c-primary-500);border-color:var(--c-primary-500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.cb:disabled{background-color:var(--c-gray-100);border-color:var(--c-gray-200);cursor:not-allowed}
.cb:disabled:checked,.cb:disabled:indeterminate{background-color:var(--c-gray-300);border-color:var(--c-gray-300)} /* отмечен, но неактивен: серая заливка, чтобы белая галочка читалась */
/* значок-чекбокс внутри пункта списка (без вложенного поля ввода) */
.cbx{flex:none;width:20px;height:20px;border:1px solid var(--c-gray-400);border-radius:var(--r-4);background:var(--c-white) center/12px no-repeat}
.cbx-on{background-color:var(--c-primary-500);border-color:var(--c-primary-500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cbl{display:inline-flex;align-items:flex-start;gap:var(--s-8);font:500 14px/20px var(--font);cursor:pointer}
.cbl:has(> .cb:disabled){color:var(--c-gray-300);cursor:not-allowed}
.cbl .field-help{display:block} /* пояснение под названием галочки — отдельной строкой */

/* ===== Фильтр по компоненту «Select» (Figma 4811:103585): 36, отступ 8, радиус 8, рамка Серый/100, наведение Серый/50 + рамка Серый/200, раскрыт — рамка Основной/500, шеврон 20 Серый/500. «Все станции ▾» → «Название ✕» → «3 станции ✕»; выбранный подсвечен рамкой Основной/400 ===== */
.flt{position:relative;display:inline-flex;min-width:0;max-width:300px}
.flt-b{display:flex;align-items:center;gap:var(--s-8);width:100%;min-width:150px;height:var(--h-md);padding:0 var(--s-8);border:1px solid var(--c-gray-100);border-radius:var(--r-8);background:var(--c-white);font:600 14px/20px var(--font);color:var(--c-primary-500);text-align:left}
.flt-b:hover{background:var(--c-gray-50);border-color:var(--c-gray-200)}
.flt-b[aria-expanded=true]{background:var(--c-white);border-color:var(--c-primary-500)}
.flt-b svg.i{color:var(--c-gray-500)}
.flt-v{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flt-on .flt-b{padding-right:var(--s-40);border-color:var(--c-primary-400);font-weight:600}
.flt-x{position:absolute;right:var(--s-8);top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-6);background:transparent;color:var(--c-gray-500)}
.flt-x:hover{background:var(--c-gray-100);color:var(--c-primary-500)}
.flt-x svg.i{width:16px;height:16px}
.fbar{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap;min-width:0}
/* «Сбросить» — в конце ряда фильтров, по правому краю ряда (на телефоне — тоже справа, в своей строке) */
.fbar>.lnk{margin-left:auto;justify-self:end}

/* ===== Выпадающий слой «Dropdown menu» (Figma 3942:71594): белый, рамка Серый/100, радиус 8, отступ 8, зазор 2 (тень из компонента не переносим — в ДС теней нет).
   «Menu item» 3942:71428: 36, отступ 8/12, зазор 12, радиус 6, иконка 20, 14 Средний Основной/500; наведение Серый/50, выбран Основной/50, disabled текст Серый/300;
   опасный — Красный/600, наведение Красный/50. «Menu divider» 3942:71429: 4 + линия 1 Серый/100 + 4 ===== */
.pop{position:fixed;z-index:var(--z-pop);min-width:200px;max-width:min(360px,calc(100vw - 32px));max-height:min(360px,calc(100vh - 32px));display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-8);border:1px solid var(--c-gray-100);border-radius:var(--r-8);background:var(--c-white)}
.pop .srch{flex:none;margin-bottom:var(--s-4)}
.plist{list-style:none;margin:0;padding:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);min-height:0;scrollbar-width:thin;scrollbar-color:var(--c-gray-200) transparent}
.pdiv{height:1px;margin:var(--s-4) 0;background:var(--c-gray-100)}
.pempty{padding:var(--s-8) var(--s-12);color:var(--c-gray-600)}
.opt{width:100%;min-height:var(--h-md);display:flex;align-items:center;gap:var(--s-12);padding:var(--s-8) var(--s-12);border:0;border-radius:var(--r-6);background:none;font:500 14px/20px var(--font);color:var(--c-primary-500);text-align:left}
.opt:hover{background:var(--c-gray-50)}
.opt:focus-visible{background:var(--c-gray-50);outline:var(--focus);outline-offset:-2px}
.opt svg.i{color:var(--c-gray-500)}
.opt-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt-m{flex:none;color:var(--c-gray-600);font-weight:400}
.opt-danger,.opt-danger>svg.i{color:var(--c-red-600)}
.opt-danger:hover{background:var(--c-red-50)}
.opt:disabled{color:var(--c-gray-300);cursor:not-allowed;background:none}
.opt:disabled>svg.i{color:var(--c-gray-300)}
.pop-note{flex:none;margin:0;padding:var(--s-8) var(--s-12) var(--s-4);border-top:1px solid var(--c-gray-100);font:400 14px/20px var(--font);color:var(--c-gray-600)}
.opt-2{align-items:flex-start}
.opt-2>svg.i{margin-top:0}
.opt-why{display:block;font:400 14px/20px var(--font);color:var(--c-gray-600);white-space:normal}

/* ===== Сегмент и вкладки «Tab bar» (Figma 2583:25358): контейнер 40, отступ 4, зазор 4, рамка Серый/100, радиус 8.
   «Tab bar(base)» 2583:22468: 28, отступ 4/12, зазор 4, радиус 6; не выбрана — Белый, 14 Полужирный Основной/500, наведение Серый/100, фокус рамка Основной/500;
   выбрана — Основной/500, 14 Жирный Белый (счётчик 14 Полужирный), наведение Основной/600, фокус рамка Основной/600.
   disabled — только у сегмента-фильтра (у вкладок его нет по правилу ДС): текст Серый/200 ===== */
.seg{display:inline-flex;align-items:center;gap:var(--s-4);min-height:40px;max-width:100%;padding:var(--s-4);border:1px solid var(--c-gray-100);border-radius:var(--r-8);background:var(--c-white);overflow-x:auto;scrollbar-width:none;justify-self:start;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--seg-fade)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--seg-fade)),transparent);animation:seg-fade linear both;animation-timeline:scroll(self inline)} /* не помещается — прокрутка внутри; правый край затухает, пока есть что листать */
.seg-b{flex:none;height:28px;padding:var(--s-4) var(--s-12);border:0;border-radius:var(--r-6);background:var(--c-white);font:600 14px/20px var(--font);color:var(--c-primary-500);white-space:nowrap}
.seg-b:hover{background:var(--c-gray-100)}
.seg-b[aria-pressed=true],.seg-b[aria-selected=true],.seg-b[aria-current=page]{background:var(--c-primary-500);color:var(--c-white);font-weight:700}
.seg-b[aria-pressed=true]:hover,.seg-b[aria-selected=true]:hover,.seg-b[aria-current=page]:hover{background:var(--c-primary-600)}
.seg-b:focus-visible{outline:1px solid var(--c-primary-500);outline-offset:-1px}
.seg-b[aria-pressed=true]:focus-visible,.seg-b[aria-selected=true]:focus-visible,.seg-b[aria-current=page]:focus-visible{outline-color:var(--c-primary-600)}
.seg-b:disabled{background:var(--c-white);color:var(--c-gray-200);cursor:not-allowed}
@property --seg-fade{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes seg-fade{from{--seg-fade:32px}to{--seg-fade:0px}}
.seg-n{margin-left:var(--s-4);font-weight:600;font-variant-numeric:tabular-nums}
/* ширина кнопки — по жирному начертанию: выбор вкладки не сдвигает соседей (невидимая жирная копия подписи) */
.seg-in{display:inline-grid}
.seg-in::after{content:attr(data-t);height:0;overflow:hidden;visibility:hidden;font-weight:700;user-select:none;pointer-events:none}
.segl{display:flex;align-items:center;gap:var(--s-8);min-width:0}
.segl-l{font:500 14px/20px var(--font);color:var(--c-gray-600);white-space:nowrap}

/* ===== Карточка: белая, радиус 12, отступ 12, без рамки; шапка 40: 16 Жирный + подзаголовок ===== */
.card{display:grid;gap:var(--s-16);align-content:start;min-width:0;padding:var(--s-12);border-radius:var(--r-12);background:var(--c-white)}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-12);flex-wrap:wrap;min-height:40px}
.card-t{font:700 16px/24px var(--font);color:var(--c-primary-500);display:flex;align-items:center;gap:var(--s-4)}
.card-s{font:400 14px/20px var(--font);color:var(--c-gray-600);margin-top:var(--s-4)}
.card-a{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap}

/* ===== Таблица «Table» (Figma 3943:95453): рамка Серый/100, радиус 8 (шапка скруглена сверху за счёт обрезки), только горизонтальные линии Серый/100.
   «Table header cell» 3943:71584: 36, Серый/100, отступ 0 8 0 16 (справа — 0 16 0 8), зазор 4, 14 Жирный Серый/500, значок сортировки 16 Серый/500.
   «Table cell» 3943:71639: 44, отступ 0 8 0 16, 14 Средний Основной/500; Secondary — 14 Обычный Серый/500.
   «Table row» 3943:95452: наведение Серый/50, выбрана Основной/50 ===== */
.twrap{position:relative;min-width:0;overflow-x:auto;border:1px solid var(--c-gray-100);border-radius:var(--r-8);background:var(--c-white)}
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{height:36px;padding:0 var(--s-8) 0 var(--s-16);background:var(--c-gray-100);text-align:left;font:700 14px/20px var(--font);color:var(--c-gray-500);white-space:nowrap;vertical-align:middle}
/* верхние углы шапки скруглены одинаково — левый и правый (таблица со своей рамкой, не зависит от обёртки и прокрутки) */
.tbl thead th:first-child{border-top-left-radius:var(--r-8)}
.tbl thead th:last-child{border-top-right-radius:var(--r-8)}
.tbl td{height:44px;padding:0 var(--s-8) 0 var(--s-16);border-bottom:1px solid var(--c-gray-100);font:500 14px/20px var(--font);color:var(--c-primary-500);white-space:nowrap;vertical-align:middle;background:var(--c-white)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--c-gray-50)}
.tbl tr[aria-selected=true] td{background:var(--c-primary-50)}
.tbl .t-r{padding:0 var(--s-16) 0 var(--s-8);text-align:right}
.tbl .t-ck{width:44px;padding-right:0}
/* «Действия»: закреплена справа, шапка и кнопки по центру; t-act — столбец с одной кнопкой-иконкой, t-pin — с текстовыми кнопками */
/* «Действия»: закреплена справа, шапка и кнопки — по правому краю; отступы — как у остальных ячеек */
.tbl .t-act,.tbl .t-pin{position:sticky;right:0;text-align:right;padding:0 var(--s-8) 0 var(--s-16)}
/* длинный заголовок «Последнее использование» переносится в шапке (ячейки остаются в одну строку), чтобы таблица не вылезала за блок */
.tbl th.pk-used{white-space:normal}
.tbl .t-act{padding:0 var(--s-8) 0 var(--s-16)}
.tbl td{max-width:360px;overflow:hidden;text-overflow:ellipsis} /* ячейка в одну строку: длинный текст — троеточие, полный виден в подсказке (ui/tooltip.js, markCuts) */
.tbl .t-mute{font-weight:400;color:var(--c-gray-500)}
.thb{display:inline-flex;align-items:center;gap:var(--s-4);min-height:var(--h-md);padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left}
.thb svg.i{width:16px;height:16px}
.thb:hover{color:var(--c-primary-500)}
.thb:focus-visible{outline-offset:-2px;border-radius:var(--r-4)}
.thb-off svg.i{opacity:.35}
.rowb{padding:0;border:0;background:none;font:500 14px/20px var(--font);color:var(--c-primary-400);text-align:left}
.rowb:hover{text-decoration:underline}
.tsort{display:none;align-items:center;gap:var(--s-8)}

/* ===== Пейджер «Pagination» (Figma 2517:30563): 52, отступ 12 (рамка внутрь: 11 + 1), зазор 12, рамка Серый/100, радиус 8; слева зазор 8: «Показать» 14 Жирный Основной/500 + выбор (зазор 4),
   «1–20 из 191» 14 Жирный Серый/300; справа зазор 8: номера 28 r4 (14 Полужирный Серый/500, текущий Основной/500 + 14 Жирный Белый), «…» — такая же клетка 28, стрелки 28 r6, шеврон 20.
   «Pagination Base» 2517:30437: 28, отступ 0 4 0 12, зазор 4, r6, рамка Серый/100, 14 Жирный, шеврон 20 Серый/500; наведение Серый/100 + рамка Серый/300 ===== */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);flex-wrap:wrap;min-height:52px;padding:calc(var(--s-12) - 1px);border:1px solid var(--c-gray-100);border-radius:var(--r-8);background:var(--c-white);font:700 14px/20px var(--font);color:var(--c-primary-500)}
.pg-l{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap}
.pg-sz{display:inline-flex;align-items:center;gap:var(--s-4);font-weight:700}
.pg-sz .sel{width:auto}
.pg-sz .sel .inp{width:auto}
.pg-sz .inp{height:28px;padding:0 calc(var(--s-24) + var(--s-4)) 0 var(--s-12);border-radius:var(--r-6);font-weight:700}
.pg-sz .inp:hover{background:var(--c-gray-100);border-color:var(--c-gray-300)}
.pg-sz .sel>svg.i{right:var(--s-4)}
.pg-i{color:var(--c-gray-500)}
.pg-r{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap}
.pg-b,.pg-e{width:28px;height:28px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--c-gray-100);background:var(--c-white);color:var(--c-gray-500);font:600 14px/20px var(--font)}
.pg-n,.pg-e{border-radius:var(--r-4)}
.pg-a{border-radius:var(--r-6)}
.pg-b:hover{background:var(--c-gray-50)}
.pg-n[aria-current=page]{background:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-white);font-weight:700}
.pg-a:disabled{background:var(--c-white);color:var(--c-gray-200);cursor:not-allowed}

/* ===== KPI-плитка «Карточки» (Figma 1190:14685): 92, отступ 12 (рамка в Figma внутрь — в CSS отступ 11 + рамка 1), зазор иконка / текст 20, рамка 1 Основной/100, радиус 12;
   подложка иконки — квадрат 40 r6 Серый/50, иконка 24 Серый/400; подпись 14 Полужирный Серый/500; число «Заголовок 3» 20/28 Жирный;
   строки текста без зазора; единица по базовой линии числа ===== */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
/* шесть плиток в один ряд (связь устройств): компактные отступы, шрифт не меняется; в ряд — от 1280, 768–1279 по три, на телефоне по одной */
.kpis-6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:1280px){.kpis-6{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-8)}.kpis-6 .kpi{gap:var(--s-8);padding:var(--s-8)}.kpis-6 .kpi-lt{overflow:visible;text-overflow:clip}}
.kpi{display:flex;align-items:flex-start;gap:var(--s-20);min-width:0;min-height:92px;padding:calc(var(--s-12) - 1px);border:1px solid var(--c-primary-100);border-radius:var(--r-12);background:var(--c-white)}
.kpi-ic{align-self:center;flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-6);background:var(--c-gray-50);color:var(--c-gray-400)}
.kpi-ic svg.i{width:24px;height:24px}
.kpi-c{display:grid;gap:0;flex:1 1 auto;min-width:0}
.kpi-l{display:flex;align-items:center;min-width:0;font:600 14px/20px var(--font);color:var(--c-gray-500)}
.kpi-lt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-v{display:flex;align-items:baseline;gap:var(--s-4);min-height:28px;font:700 20px/28px var(--font);font-variant-numeric:tabular-nums;color:var(--c-primary-500);white-space:nowrap}
.kpi-u{font:600 16px/24px var(--font);letter-spacing:0;color:var(--c-gray-600)}
.kpi-f{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-8);font:400 14px/20px var(--font);color:var(--c-gray-500)}

/* ===== Окно «Modals» (Figma 2667:27674): Sm 400 / Md 560 / Lg 720, подтверждение 480; подложка — токен --overlay (Основной 800 · 45); рамка Серый/100, радиус 8.
   «Modals header» 2667:24373: отступ 20, зазор 12, заголовок 16 Жирный Основной/500, подзаголовок 14 Полужирный Серый/500, ✕ — кнопка-иконка 28.
   «Modals content» 2667:24717: по бокам 20, зазор 20. «Modals footer» 2667:24599: отступ 20, зазор 12, кнопки справа. Линии шапки и подвала Серый/100 ===== */
.ov{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--s-16) max(var(--s-16),env(safe-area-inset-right,0px)) var(--s-16) max(var(--s-16),env(safe-area-inset-left,0px));background:var(--overlay)}
.modal{display:flex;flex-direction:column;width:min(720px,100%);max-height:min(92vh,880px);overflow:hidden;border:1px solid var(--c-gray-100);border-radius:var(--r-8);background:var(--c-white)}
.modal-sm{width:min(400px,100%)}
.modal-md{width:min(560px,100%)}
.modal-imp{width:min(1200px,100%)}
.mh{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-12);padding:var(--s-20);border-bottom:1px solid var(--c-gray-100)}
.mh h2{font:700 16px/24px var(--font);color:var(--c-primary-500)}
.mh-s{margin-top:0;font:600 14px/20px var(--font);color:var(--c-gray-500)}
.mb{display:grid;gap:var(--s-20);align-content:start;min-height:0;overflow:auto;padding:var(--s-20);scrollbar-gutter:stable;padding-right:max(0px,calc(var(--s-20) - var(--sbw,0px)))} /* полоса прокрутки занимает место справа: --sbw (её ширина, main.js) вычитается из отступа, и правый край содержимого совпадает с кнопками подвала */
.mf{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-12);flex-wrap:wrap;padding:var(--s-20);border-top:1px solid var(--c-gray-100)}
.mf-l{margin-right:auto}

/* ===== Окно-подтверждение (size 'ask', Figma «Modals» 480 + «Modals footer» для подтверждения): короткий вопрос, пояснение, 2 кнопки.
   Подвал: отступ 20, зазор 8, кнопки делят ряд поровну (в больших окнах-формах — по содержимому, справа, зазор 12); «Отмена» слева, главная справа ===== */
.modal-ask{width:min(480px,100%)}
.modal-ask .mf{gap:var(--s-8)}
.modal-ask .mf .btn{flex:1 1 0;min-width:max-content} /* делят ряд поровну, но не уже своей подписи с полями; вместе не помещаются — каждая в своём ряду */
.modal-ask .mf:has(>:nth-child(3)){flex-direction:column} /* три кнопки — столбиком */
.modal-ask .mf:has(>:nth-child(3)) .btn{flex:none;width:100%}
.cf{position:relative}
.cf .mh{align-items:center;min-height:68px;padding-right:calc(var(--s-20) + var(--s-40))} /* 68 = 20 + ✕ 28 + 20: высота как у «Modals header» с ✕ */
.cf-x{position:absolute;top:var(--s-20);right:var(--s-20)} /* ✕ «Icon button» 28, справа сверху — как в шапке «Modals» */
.cf-t{font:400 14px/20px var(--font);color:var(--c-gray-500)}

/* ===== Список «подпись — значение» (<dl class="kv">) по «Key-value row» (Figma 3946:71880, Horizontal; на телефоне — Vertical): строка без линий и отступов, зазор 12;
   подпись 14 Обычный Серый/300 слева, значение 14 Средний Основной/500 у правого края строки, действие строки («Открыть», «Скопировать») — сразу за значением;
   длинное значение переносится внутри правой части, подпись не сжимается и стоит сверху строки ===== */
.kv{display:grid;gap:var(--s-12);margin:0;min-width:0}
.kv-r{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-12);min-width:0}
.kv dt{flex:none;max-width:50%;font:400 14px/20px var(--font);color:var(--c-gray-500);overflow-wrap:anywhere}
.kv dd{flex:1 1 0;margin:0;min-width:0;text-align:right;font:500 14px/20px var(--font);color:var(--c-primary-500);overflow-wrap:anywhere}
.kv .dv-in,.kv .wz-kd{justify-content:flex-end}
@media (min-width:768px){.kv .lnk{min-height:20px}.kv-r:has(dd .btn){align-items:center}} /* ссылка в строке не выше строки: подпись и значение на одной линии (на телефоне зона нажатия остаётся); строка с кнопкой выше на высоту кнопки, подпись по центру группы «значение + кнопка» */

/* ===== Панель справа «Drawer» 480 ===== */
.drov{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--overlay-panel)}
.drawer{position:fixed;z-index:var(--z-drawer);top:0;right:0;bottom:0;width:min(480px,100vw);display:flex;flex-direction:column;border-left:1px solid var(--c-gray-200);background:var(--c-white)}
.drawer .mb{flex:1 1 auto}

/* ===== Тост = «Alert and Notification» (Figma 2725:22775, Default Sm): ширина до 460, белый, рамка Серый/100, радиус 8, отступ 12, зазор 8,
   иконка 16 (цветная только она), текст 14 Жирный Основной/500; внизу по центру ===== */
.toasts{position:fixed;z-index:var(--z-toast);left:50%;bottom:calc(var(--s-24) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;gap:var(--s-8);width:min(460px,calc(100vw - 32px))}
.toast{display:flex;align-items:flex-start;gap:var(--s-8);padding:var(--s-12);border:1px solid var(--c-gray-100);border-radius:var(--r-8);background:var(--c-white);font:700 14px/20px var(--font);color:var(--c-primary-500)}
.toast>svg.i{width:16px;height:16px;margin-top:var(--s-2);color:var(--c-green-500)}
.toast-info>svg.i{color:var(--c-primary-400)}
.toast-danger>svg.i{color:var(--c-red-500)}
.toast-t{flex:1 1 auto;min-width:0}
.toast .lnk{min-height:20px}

/* ===== Подсказка «Tooltip» (Figma 4257:77163, Theme=Dark): Серый/900, радиус 8, отступ 8/12, 12/16 Полужирный Белый (12 px у тултипов разрешены ДС),
   хвостик — квадрат 12 r1, повёрнутый на 45°; тень из компонента не переносим ===== */
.tip{position:fixed;z-index:var(--z-tip);max-width:320px;padding:var(--s-8) var(--s-12);border-radius:var(--r-8);background:var(--c-gray-900);color:var(--c-white);font:600 12px/16px var(--font);white-space:pre-line;pointer-events:none}
.tip::before{content:"";position:absolute;left:var(--ax,50%);top:calc(-1 * var(--s-4));width:12px;height:12px;margin-left:calc(-1 * var(--s-4) - var(--s-2));border-radius:var(--r-2);background:var(--c-gray-900);transform:rotate(45deg)}
.tip-up::before{top:auto;bottom:calc(-1 * var(--s-4))}
.tip-side::before{display:none}

/* ===== Пустое состояние «Empty state» (Figma 3944:71930, Size=Sm): ширина до 480, отступ 32/20, зазор 12; круг 48 Основной/50, глиф 24 Основной/500;
   заголовок 16 Жирный Основной/500, описание 14 Обычный Серый/300. Без иконки для «хорошей новости» ===== */
.emp{display:grid;justify-items:center;gap:var(--s-12);max-width:480px;margin:0 auto;padding:var(--s-32) var(--s-20);text-align:center}
.emp-i{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--c-primary-50);color:var(--c-primary-500)}
.emp-i svg.i{width:24px;height:24px}
.emp-t{font:700 16px/24px var(--font);color:var(--c-primary-500)}
.emp-x{font:400 14px/20px var(--font);color:var(--c-gray-500)}
.emp-w{display:grid;gap:var(--s-16);min-width:0}
.emp-top{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-8);flex-wrap:wrap;min-height:40px} /* действие блока — справа вверху, как в .card-h */
.emp-w>.emp{padding-top:0}

/* ===== Скелетон «Skeleton» (Figma 3946:71904): Серый/100, строки 16 r4 (Line 240 / Line short 120), мягкая пульсация ===== */
.sk{display:block;height:16px;border-radius:var(--r-4);background:var(--c-gray-100);animation:sk 1.2s ease-in-out infinite alternate}
@keyframes sk{to{opacity:.55}}
.sk-wrap{display:grid;gap:var(--s-12)}
.sk-h{height:32px;width:40%}
.sk-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-16)}


/* ---------- телефон ---------- */
@media (max-width:767px){
  /* KPI — как «Аналитика — Обзор · Mobile» (Figma 4661:98795): по одной в ряд, между карточками 8; карточка 12/12, r12, белая, без рамки;
     иконка «Icon button / Lg X» 40 — круг Серый/50, иконка Серый/400; подпись 16 Средний Серый/500; число 28/36 ExtraBold, единица 14 Обычный по базовой линии, зазор 8; пояснение 14 Обычный Серый/600 */
  .kpis{grid-template-columns:minmax(0,1fr);gap:var(--s-8)}
  .kpi{gap:var(--s-12);min-height:0;padding:var(--s-12);border:0}
  .kpi-ic{border-radius:var(--r-pill)}
  .kpi-l{font:500 16px/24px var(--font)}
  .kpi-v{gap:var(--s-8);min-height:36px;font:800 28px/36px var(--font)}
  .kpi-u{font:400 14px/20px var(--font);color:var(--c-gray-500)}
  /* Сегмент (Figma «Tab bar» в «Аналитике · Mobile»): во всю ширину, одна строка, кнопка 44 (зона нажатия; в Figma 28);
     помещаются — делят ширину поровну, не помещаются — прокрутка внутри контейнера, выбранная кнопка прокручивается в видимую часть (revealSegments) */
  .seg{display:flex;width:100%;min-height:38px;flex-wrap:nowrap}
  .seg-b{flex:1 0 0;min-width:max-content}
  .segl{flex-wrap:wrap}
  .fbar{display:grid;grid-template-columns:minmax(0,1fr)}
  .flt{max-width:none}
  /* Окно по центру, не снизу (Figma «Удаление» 4055:103876, мастер отчёта 4074:80736): 328 = 360 − 2×16, r16.
     «Modals header / Sm»: 68 = 20 + ✕ 28 + 20, по бокам 16. Контент 12/16, 14 Обычный Серый/500. Низ 0/16/20/16, зазор 12, кнопки Sm 32 в ряд */
  .modal,.modal-sm,.modal-md,.modal-ask,.modal-imp{width:100%;max-height:calc(100dvh - 2 * var(--s-16));border-radius:var(--r-16)}
  .mh{align-items:center;padding:var(--s-20) var(--s-16)}
  .mb{padding:var(--s-12) max(0px,calc(var(--s-16) - var(--sbw,0px))) var(--s-12) var(--s-16)}
  .mf{padding:0 var(--s-16) var(--s-20);border-top:0}
  .mf-l{flex:1 0 100%;margin-right:0}
  /* обычное окно — как мастер отчёта 4074:80736: вторичная по ширине текста, главная растягивается */
  .mf .btn{height:var(--h-sm);padding:0 var(--s-12);border-radius:var(--r-6)}
  .mf .btn-pri,.mf .btn-danger{flex:1 1 auto}
  /* подтверждение: кнопки столбцом на всю ширину (Position=Full width) */
  .modal-ask .mf{flex-direction:column;gap:var(--s-12)}
  .modal-ask .mf .btn{flex:none;width:100%;min-width:0}
  .cf .mh{padding-right:calc(var(--s-16) + var(--s-40))}
  .cf-x{right:var(--s-16)}
  .toasts{bottom:calc(var(--s-16) + env(safe-area-inset-bottom,0px))}
  .tsort{display:flex}
  /* «Key-value row / Vertical»: подпись сверху, значение под ней через 2 (значения многострочные, подписи длинные); пары через 12 — .kv gap; действие строки стоит рядом со значением */
  .kv-r{flex-direction:column;gap:var(--s-2)}
  .kv dt{max-width:none}
  .kv dd{flex:none;width:100%;text-align:left}
  .kv .dv-in,.kv .wz-kd{justify-content:flex-start}
  /* Таблица → карточки «Report item» (Figma 4055:79145): белая, рамка 1 Серый/100, r12, отступ 12, стопкой через 8.
     Первая строка — название 14 Полужирный + кнопки-иконки Sm 28 (⋮ справа сверху); ниже строки «Key-value row / Horizontal» (3946:71880):
     20, зазор 12, подпись 14 Обычный Серый/300 слева, значение 14 Средний Основной/500 справа, строки через 4 (название → строки: 8) */
  .tcards{overflow:visible;border:0;background:none}
  .tcards .tbl,.tcards tbody{display:block}
  .tcards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tcards tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);margin-bottom:var(--s-8);padding:calc(var(--s-12) - 1px);border:1px solid var(--c-gray-100);border-radius:var(--r-12);background:var(--c-white)}
  .tcards td{display:block;height:auto;min-height:20px;padding:0;border:0;white-space:normal;min-width:0;background:none}
  .tcards td:first-child{grid-column:1/-1}
  .tcards td:empty{display:none} /* пустая ячейка в карточке — без подписи */
  .tcards .tbl .t-r{text-align:left}
  .tcards td[data-l]::before{content:attr(data-l);float:left;margin-right:var(--s-12);font:400 14px/20px var(--font);color:var(--c-gray-500);text-align:left}
  /* значение справа и название 14 Полужирный — кроме таблиц, которые сами раскладывают карточку без подписей (цепочка связи .cn-chain, теги устройства в .dv-tags — screens.css) */
  .tcards .tbl:not(.cn-chain,.dv-tags *) td[data-l]:not(:first-child){padding:0;text-align:right;overflow-wrap:break-word}
  .tcards .tbl:not(.cn-chain,.dv-tags *) td:first-child{margin-bottom:var(--s-4);font-weight:600}
  .tcards .tbl:not(.cn-chain,.dv-tags *) td:first-child .rowb{font-weight:600}
  .tcards td:first-child[data-l]::before{content:none} /* у названия подписи нет */
  /* меню ⋮ строки — в правом верхнем углу карточки, без подписи; кнопка-иконка Sm 28 */
  .tcards td.t-pin{position:static}
  .tcards td.t-act{position:absolute;top:calc(var(--s-12) - 1px);right:calc(var(--s-12) - 1px);width:auto;min-height:0;padding:0}
  .tcards td.t-act[data-l]::before{content:none}
  .tcards td.t-act .ib{width:28px;height:28px}
  .tcards td.t-act .ib svg.i{width:16px;height:16px}
  .tcards tr:has(>td.t-act)>td:first-child{min-height:28px;padding:var(--s-4) var(--s-40) var(--s-4) 0}
  /* Зоны нажатия 44 (--hit). Кнопки и поля растут через --h-sm / --h-md (tokens.css). Кнопки-иконки, значок «i» и ✕ фильтра
     сохраняют вид, а зону нажатия получают невидимой накладкой по центру. Сегмент и вкладки — настоящие 44 (внутри прокрутки накладка обрезалась бы).
     Исключения: ссылка внутри предложения (.lnk-in) — строчный текст; подпись поля (label for) — само поле уже 44 */
  .ib,.inf{position:relative} /* .flt-x уже absolute */
  .ib::after,.inf::after,.flt-x::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--hit));height:max(100%,var(--hit));transform:translate(-50%,-50%)}
  .rowb,.lnk-mute,.cbl{display:inline-flex;align-items:center;min-width:var(--hit);min-height:var(--hit)}
  .seg-b{height:var(--hit)}
  .pg-sz .inp{height:var(--hit)}
  /* Пейджер «Pagination / Pages=Few» (Figma, Устройства/Отчёты · Mobile): 52, рамка Серый/100, r8, отступ 12; не помещается в 328 — номера страниц переносятся вправо второй строкой */
  .pg-r{margin-left:auto}
}
@media (max-width:767px),(pointer:coarse){.pg-b{min-width:var(--hit);min-height:var(--hit)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}.sk{animation:none}}