/* =====================================================================================
   tbk — набор компонентов для стендов site/2023 (новая версия сайта).
   Собран 19.10.2026 из CSS 18 стендов, ушедших в задачи (lk-profile, lk-bidders, agents, market-analytics,
   trial-end, trial-max, similar-lots, whats-new, tarifi-promo, map-cards, no-ecp-2026 и др.),
   токены сверены с site-lab/cowork-design-system/04-final/DESIGN.md.
   19.10 дополнен: кнопки 4px как боевые .button (main.css) и /about; элементы /about, lk-profile, error-tickets,
   how-found, trial-max, tarifi-promo, no-ecp-2026, whats-new, market-analytics, agents, ai-search (поиск).
   Подключать после боевого CSS (main.css, modal.css). Витрина — /2023/_kit/.
   Нет нужного компонента — добавить сюда и на витрину, а не в CSS варианта.
   ===================================================================================== */

:root {
    /* текст */
    --tbk-text: #1F1F1F;      --tbk-text-2: #2F3237;    --tbk-gray: #5E636E;      --tbk-muted: #9497A3;     --tbk-value: #545B6A;
    /* акценты и статусы */
    --tbk-navy: #2E3C54;      --tbk-blue: #156CE1;      --tbk-lime: #BED600;      --tbk-lime-hover: #C6E206;   /* светлее, как #head .button.fill:hover (2023/web/css/head.css:151), с 22.10.2026; было #B3CA00 */
    --tbk-green: #369236;     --tbk-red: #EB4563;       --tbk-orange: #C25E00;    --tbk-violet: #7456A8;
    --tbk-green-2: #2DBF47;   --tbk-red-dark: #CE1A35;  --tbk-check: #BAD407;     --tbk-blue-pale: #C5DAF8; --tbk-sale: #FF4954;
    /* поверхности */
    --tbk-bg: #F8F9FA;        --tbk-surface: #FFFFFF;   --tbk-hover: #F8F9FC;     --tbk-plate: #F1F3F9;     --tbk-active: #EAEDF1;
    --tbk-sel-bg: #F1F6FE;
    /* линии */
    --tbk-line: #F2F4F8;      --tbk-line-2: #F4F5F8;    --tbk-border: #DDDFE0;    --tbk-border-btn: #E3E7EE; --tbk-sel: #D5DBE3;
    --tbk-border-dash: #C9D0DC; --tbk-ok-line: #ABE5B5;
    /* выпадающие списки — боевой .listselect (css/realEstateAnalyticsNew.css), «Выбрать все» — .check_all_row (2023/web/css/search.css) */
    --tbk-dd-line: #CCCCCC;   --tbk-dd-text: #333333;   --tbk-dd-hover: #F3F3F3;  --tbk-dd-muted: #8F96A3;
    --tbk-dd-all: #707070;    --tbk-dd-sep: #F0F0F0;    --tbk-dd-arrow: rgba(34, 34, 34, .3);
    --tbk-dd-press: #E6E6E6;  /* подсветка кнопки внутри подсвеченной строки списка: стрелка группы tbk-grp--check (25.10.2026) */
    /* автодополнение — .autocomplete (2023/web/css/es_search.css); крестик выбранного фильтра — .underSearchRow .icon-close (2023/web/css/search.css) */
    --tbk-sg-line: #E5E7EB;   --tbk-sg-hover: #F1F5F9;  --tbk-close: #908F8F;
    /* группа кнопок — .btn-group «Радиус» (css/realEstateAnalyticsNew.css) */
    --tbk-grp-line: #DCDCDC;  --tbk-grp-hover: #EFEFEF;
    /* группа --filter — .pill_group расширенного поиска на главной (2023/web/css/es_search.css) */
    --tbk-fl-text: #313948;   --tbk-fl-hover: #F7FAE0;
    /* кнопки подменю — .sub_menu_button (css/style.css:8856): тёмно-синий 10%; наведение — светлее (21.10.2026, на бою — тёмно-синяя заливка) */
    --tbk-sub-bg: color-mix(in srgb, var(--tbk-navy) 10%, transparent);
    --tbk-sub-hover: color-mix(in srgb, var(--tbk-navy) 6%, transparent);
    --tbk-btns-sel: #F1F5F9;  /* выбранная в группе — как боевой .btn-group > div.active (20.10.2026; было бледно-салатовая --tbk-grp-sel) */
    /* бледно-салатовый — календарь: сегодня и полоса периода (решение 19.10.2026: салатовый вместо синего) */
    --tbk-grp-sel: color-mix(in srgb, var(--tbk-lime) 25%, #fff);
    --tbk-grp-sel-hover: color-mix(in srgb, var(--tbk-lime) 38%, #fff);
    --tbk-grp-sel-text: var(--tbk-text);
    --tbk-blue-soft: color-mix(in srgb, var(--tbk-blue) 15%, #fff);   /* бледно-синий: шаги */
    --tbk-ico: #C2C9D6;       /* значки меню «⋯» и стрелки сортировки колонок: .v_dots, .selectItem icon (favorite.css), .sortable svg (analitika.css) */
    --tbk-border-hover: #C9D4E4;
    /* загрузка и «нет доступа»: es_search.css, modal.css #max_qr_skeleton, lot.css .photo_badge, map2.css .lots-gate, slider.css */
    --tbk-skel: #F3F5FA;      --tbk-gate-bg: #F4F6F9;   --tbk-photo-bg: #D8E0E7;
    --tbk-badge-bg: rgba(31, 31, 31, .82);  --tbk-photo-shade: rgba(17, 24, 39, .18);
    --tbk-ph-chip-bg: rgba(0, 0, 0, .55);   --tbk-ph-chip-live: #78BF47;   /* сроки на фото: 2023/web/css/similar_lots.css .sim_date, .green .dot */
    --tbk-note-bg: #FFF5E5;   --tbk-note-ic: #FF9B3F;   /* заметка к лоту — 2023/web/css/lot.css .lot_note */
    --tbk-insp-bg: #F8FBEF;   --tbk-insp-text: #4D5A69; /* информация от организатора — прототип lot-card (_archive/prototype-2026-10-09/lot.css .inspection_text) */
    /* палитра меток лота — pages/head_modals.php #mark_color_picker */
    --tbk-mark-pink: #E83E8C; --tbk-mark-yellow: #FEB744; --tbk-mark-red: #D9534F; --tbk-mark-gray: #8897AA; --tbk-mark-dark: #484848;
    --tbk-mark-green: #02BC77; --tbk-mark-cyan: #28C3D7; --tbk-mark-blue: #1E70CD; --tbk-mark-violet: #6610F2;
    --tbk-tip-dark: #000000;  /* подсказки кнопок AI-поиска: .ai_premium_tip, .save_search_tip (es_search.css) */
    --tbk-scroll: #CFD4DD;    /* бегунок тонкого скроллбара: .es-cat-dd-menu (es_search.css) */
    /* тост — тёмно-серый (#2F3237) с прозрачностью */
    --tbk-toast-bg: rgba(47, 50, 55, .88);
    --tbk-hl: #FFFF00;   /* подсветка совпадения с запросом — span.highlight (css/style.css:4889) */
    --tbk-counter: #FF3347;   /* счётчик на колокольчике, 2023/web/css/head.css .icon .counter */
    --tbk-bonus: #FF9E08;     --tbk-bonus-bg: #FFF8E1;  /* бонусы и скидка в карточке цены: .price_block .bonus, .tp_chip */
    /* апгрейд тарифа — .tooltip__premium-overlay, .marketOffers__premium-overlay (css/realEstateAnalyticsNew.css) */
    --tbk-upgrade: linear-gradient(90deg, #589FFF 0%, #AD00FF 100%);
    --tbk-sh-upgrade: 0 0 5px 0 rgba(0, 0, 0, .02), 0 2px 10px 0 rgba(0, 0, 0, .06), 0 0 1px 0 rgba(0, 0, 0, .3);
    /* золото — лендинг /lp/awards (lead/awards/style.css: --color-buff, фон #141516; блики — img/a1.png, img/footer.png) */
    --tbk-gold: #F2CF7F;      --tbk-gold-ink: #141516;  --tbk-gold-title: #E9E9E9;  --tbk-gold-txt: rgba(233, 233, 233, .72);
    --tbk-gold-btn: linear-gradient(180deg, #F7DA94 0%, #E9BC62 100%);
    --tbk-gold-line: rgba(242, 207, 127, .22);
    --tbk-sh-gold: 0 0 0 3px rgba(242, 207, 127, .22), 0 4px 16px rgba(242, 207, 127, .28);
    --tbk-gold-bg: radial-gradient(70% 160% at 100% 110%, rgba(142, 125, 82, .65) 0%, rgba(142, 125, 82, 0) 60%),   /* золотой блик справа снизу */
                   radial-gradient(40% 150% at 34% 125%, rgba(199, 122, 46, .42) 0%, rgba(199, 122, 46, 0) 70%),    /* оранжевый снизу */
                   radial-gradient(35% 130% at 6% -25%, rgba(129, 106, 79, .55) 0%, rgba(129, 106, 79, 0) 70%),     /* коричневый сверху слева */
                   #141516;
    --tbk-lock-bg: rgba(31, 31, 31, .5);
    --tbk-overlay: rgba(0, 0, 0, .2);   /* затемнение под окном и боковой панелью — .modal_container (2023/web/css/modal.css) */
    /* скругления: кнопки — 4px, как боевые .button (2023/web/css/main.css) и кнопки /about */
    --tbk-r-xs: 4px;  --tbk-r-sm: 6px;  --tbk-r: 8px;  --tbk-r-md: 10px;  --tbk-r-lg: 12px;  --tbk-r-xl: 14px;  --tbk-r-pill: 99px;
    --tbk-r-btn: 4px;
    /* тени */
    --tbk-sh-card: 0 0 34px 0 #F6F6FE;
    --tbk-sh-hover: 0 2px 8px 1px rgba(45, 60, 100, .08);
    --tbk-sh-pager: 0 2px 4px rgba(23, 19, 33, .06);       /* номера страниц — не плоские на светлом фоне (20.10.2026) */
    --tbk-sh-sel: 0 6px 20px rgba(31, 41, 55, .14);
    --tbk-sh-seg: 0 1px 4px rgba(45, 60, 100, .14);        /* выбранный сегмент, вкладка --pill */
    --tbk-sh-pop: 0 2px 8px rgba(0, 0, 0, .1);
    --tbk-sh-dd: 0 8px 16px rgba(0, 0, 0, .1);            /* .listselect-content */
    --tbk-sh-modal: 0 12px 40px rgba(15, 23, 42, .25);
    --tbk-sh-soft: 0 4px 12px rgba(31, 41, 55, .07);      /* плашки hero /about */
    --tbk-sh-lift: 0 4px 14px rgba(31, 41, 55, .10);      /* карточки /about при наведении */
    --tbk-sh-price: 0 2px 6px rgba(0, 0, 0, .1);          /* .price_block /tarifi */
    --tbk-sh-tip: 0 5px 34px -12px rgba(31, 31, 31, .32); /* подсказка, как .tooltiptb */
    --tbk-sh-sg: 0 8px 24px rgba(0, 0, 0, .08);           /* .autocomplete */
    /* секции торгов (getBidTypes() в script/analitika/func.php) */
    --tbk-sec-bankrupt: #FF9E08;  --tbk-sec-torgigov: #2DBF47;  --tbk-sec-zalog: #44C5E1;  --tbk-sec-commerce: #AC36F5;
    /* карточка лота tbk-lot (20.10.2026) — как стенд lot-card (2023/lot-card/lot.css): статус, тени, столбец действий */
    /* итоги в карточке лота — блок результата лота (2023/view/lot/result.twig, 2023/web/css/lot.css .analysis, main.css .bg-red / .bg-green) */
    --tbk-sep: #EDEAE9;       --tbk-bg-red: #FF5263;    --tbk-bg-green: #87D055;
    --tbk-st-on: #87D055;     --tbk-st-off: #C50724;    --tbk-st-wait: #F2BB00;   --tbk-st-done: #A0A7B4;
    --tbk-act: #FFB600;       --tbk-act-bg: rgba(255, 248, 239, .7);              /* наведённое и включённое действие — как .lot_action_button.active (--color-orange, 2023/web/css/main.css:10), с 23.10.2026; было #FF8A00 */
    --tbk-sh-lot: 0 1px 4px rgba(49, 57, 72, .06), 0 8px 22px rgba(49, 57, 72, .08);
    --tbk-sh-lot-hover: 0 2px 8px rgba(49, 57, 72, .08), 0 14px 34px rgba(49, 57, 72, .12);
    /* шаблоны блоков лендинга (21.10.2026): фоны секций /about — «Реестр ПО» .about_soft, приложение .about_appA; макет экрана .about_mk_frame */
    --tbk-lp-blue: #EEF4FF;   --tbk-lp-gray: #ECF0F5;
    --tbk-sh-shot: 0 18px 44px rgba(31, 41, 55, .10);
    --tbk-sh-app: drop-shadow(0 20px 40px rgba(0, 0, 0, .15));   /* filter картинки телефона .about_app_phone */
}

/* ---------- тонкие скроллбары везде (20.10.2026): списки, окна, страница — как .es-cat-dd-menu AI-поиска (2023/web/css/es_search.css) ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--tbk-scroll) transparent; }
@supports not (scrollbar-width: thin) {   /* Safari: свои псевдоэлементы */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-thumb { background: var(--tbk-scroll); border-radius: 3px; }
    ::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- база внутри компонентов ---------- */
/* шрифт — селектором класса, не :where(): боевой css/style.css (есть в каждом frame.php) задаёт 'Exo 2' тегам p и ul,
   а input/select/textarea — с !important; ul ещё 16px, letter-spacing .03em и отступ слева, ul li — padding 4px 0 */
[class^="tbk-"], [class*=" tbk-"] { font-family: var(--font-family); }
.tbk-input, .tbk-textarea, .tbk-search input, .tbk-radio input, .tbk-check input, .tbk-pop__search, .tbk-pop__price input, .tbk-range input { font-family: var(--font-family) !important; }
:where([class^="tbk-"], [class*=" tbk-"]) { box-sizing: border-box; }
ul:where([class^="tbk-"], [class*=" tbk-"]), ol:where([class^="tbk-"], [class*=" tbk-"]) { margin: 0; padding: 0; list-style: none; letter-spacing: normal; font-size: 14px; line-height: 20px; }
ul:where([class^="tbk-"], [class*=" tbk-"]) > li { padding: 0; }
:where(button[class^="tbk-"], button[class*=" tbk-"]) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(a[class^="tbk-"], a[class*=" tbk-"]) { color: inherit; text-decoration: none; }
.tbk-svg { flex: none; display: block; }

/* =================================== Текст =================================== */
.tbk-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--tbk-muted); }
.tbk-crumbs a:hover { color: var(--tbk-blue); }
.tbk-h1 { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--tbk-text); }
.tbk-h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--tbk-text); }
.tbk-h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--tbk-text); }
.tbk-h4 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--tbk-text); }
.tbk-text { font-size: 14px; line-height: 1.45; color: var(--tbk-text-2); }
.tbk-meta { font-size: 13px; color: var(--tbk-muted); }
.tbk-small { font-size: 12px; color: var(--tbk-muted); }
.tbk-muted { color: var(--tbk-muted); }
.tbk-link { color: var(--tbk-blue); cursor: pointer; }
.tbk-link:hover { text-decoration: underline; }
/* ссылка-действие пунктиром («Завершить сеанс» — .session-kick, css/settings.css) */
.tbk-link--dashed { border-bottom: 1px dashed currentColor; }
.tbk-link--dashed:hover { text-decoration: none; }
.tbk-link--danger { color: var(--tbk-red-dark); }
.tbk-link--danger:hover { color: #A01326; }                                                               /* .session-kick:hover */
.tbk-link--sm { font-size: 12px; }
.tbk-link--icon { display: inline-flex; align-items: center; gap: 5px; }                                  /* .save_modal_filters_link (es_search.css) */
.tbk-link--muted { color: var(--tbk-muted); }
.tbk-link--muted:hover { color: var(--tbk-text); text-decoration: none; }
.tbk-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbk-up { color: var(--tbk-green); }
.tbk-down { color: var(--tbk-red); }
.tbk-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* клавиша в подсказке: Enter, Esc, Ctrl + K (по heroui.com kbd) */
.tbk-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--tbk-border-btn); border-bottom-width: 2px;
           border-radius: var(--tbk-r-xs); background: var(--tbk-surface); font-family: var(--font-family); font-size: 12px; font-weight: 500; line-height: 1; color: var(--tbk-gray); white-space: nowrap; vertical-align: middle; }
@media (max-width: 600px) { .tbk-h1 { font-size: 26px; } .tbk-h2 { font-size: 22px; } }

/* =================================== Раскладка =================================== */
.tbk-page { display: flex; flex-direction: column; gap: 20px; color: var(--tbk-text); font-size: 14px; line-height: 1.45; }
.tbk-stack { display: flex; flex-direction: column; gap: 12px; }
.tbk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tbk-row--between { justify-content: space-between; }
.tbk-grid { display: grid; gap: 12px; grid-template-columns: repeat(var(--tbk-cols, 3), minmax(0, 1fr)); }
.tbk-grid--2 { --tbk-cols: 2; }  .tbk-grid--3 { --tbk-cols: 3; }  .tbk-grid--4 { --tbk-cols: 4; }  .tbk-grid--5 { --tbk-cols: 5; }
@media (max-width: 900px) { .tbk-grid--4, .tbk-grid--5 { --tbk-cols: 2; } .tbk-grid--3 { --tbk-cols: 2; } }
@media (max-width: 600px) { .tbk-grid { --tbk-cols: 1; } .tbk-grid--keep2 { --tbk-cols: 2; } }
/* ЛК: меню слева + содержимое (pages/settings.php) */
.tbk-lk { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .tbk-lk { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* =================================== Карточка =================================== */
.tbk-card { background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-md); box-shadow: var(--tbk-sh-card); padding: 18px 20px; min-width: 0; }
.tbk-card--flat { box-shadow: none; }
.tbk-card--muted { background: var(--tbk-bg); border-color: transparent; box-shadow: none; }                 /* «Без сервиса» (/about .about_wc_col.is-before) */
.tbk-card--tight { padding: 14px 16px; }
.tbk-card--link { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.tbk-card--link:hover, .tbk-card.is-selected { border-color: var(--tbk-sel); box-shadow: var(--tbk-sh-sel); }
.tbk-card__head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.tbk-card__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--tbk-text); }
.tbk-card__sub { margin: 2px 0 0; font-size: 13px; color: var(--tbk-muted); }
.tbk-card__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tbk-line); }
.tbk-card__body--flush { margin: 0 -20px -18px; border-top: 1px solid var(--tbk-line-2); }
@media (max-width: 600px) { .tbk-card { padding: 16px 14px; } .tbk-card__body--flush { margin: 0 -14px -16px; } }

/* =================================== Меню ЛК (css/settings.css #sett_menu) =================================== */
.tbk-menu { display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r); }
.tbk-menu__item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--tbk-r-sm); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--tbk-navy); cursor: pointer; }
.tbk-menu__item:hover { background: var(--tbk-hover); }
.tbk-menu__item.active { background: var(--tbk-active); }
.tbk-menu__item > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbk-menu__item .tbk-svg { color: var(--tbk-muted); }
.tbk-menu__item.active .tbk-svg { color: var(--tbk-navy); }
.tbk-menu__sub { padding-left: 30px; font-weight: 400; }
.tbk-menu__num { flex: none; margin-right: 10px; white-space: nowrap; }   /* число у пункта — как #sett_menu .menu_label (css/settings.css): шрифт пункта, без подложки */
.tbk-menu__head { display: flex; justify-content: space-between; padding: 10px 10px 4px; font-size: 12px; color: var(--tbk-muted); }
.tbk-menu__sep { height: 1px; margin: 4px 6px; background: var(--tbk-line); }
.tbk-count { font-size: 12px; font-weight: 600; color: var(--tbk-blue); background: rgba(21, 108, 225, .1); border-radius: var(--tbk-r-pill); padding: 1px 8px; white-space: nowrap; }
.tbk-count--muted { color: var(--tbk-muted); background: none; font-weight: 400; padding: 0; }

/* =================================== Кнопки =================================== */
/* размеры и вид — lk-bidders .ub_btn; скругление 4px — как боевые .button (main.css), кнопки /about и lk-profile */
.tbk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--tbk-r-btn);
           font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .25s ease; }
/* нажатие — как кнопки heroui.com (v3 button.css): сжатие .97, у маленьких .98, у --lg .96; transform 250ms ease */
.tbk-btn:active { transform: scale(.97); }
.tbk-btn--sm:active, .tbk-btn--xs:active, .tbk-btn--save:active { transform: scale(.98); }
.tbk-btn--lg:active { transform: scale(.96); }
.tbk-btn--link:active, .tbk-btns > .tbk-btn:active { transform: none; }                                    /* в группе не сжимается — как toggle-button-group heroui.com */
@media (prefers-reduced-motion: reduce) { .tbk-btn { transition: background-color .15s, border-color .15s, box-shadow .15s; } .tbk-btn:active { transform: none; } }
.tbk-btn--primary { background: var(--tbk-lime); color: var(--tbk-text); }
.tbk-btn--primary:hover { background: var(--tbk-lime-hover); box-shadow: 0 4px 12px rgba(190, 214, 0, .35); }
.tbk-btn--secondary { background: var(--tbk-surface); border-color: var(--tbk-border-btn); color: var(--tbk-text); }
.tbk-btn--secondary:hover { background: var(--tbk-hover); border-color: #C9D0DC; }
.tbk-btn--ghost { color: var(--tbk-gray); }
.tbk-btn--ghost:hover { background: var(--tbk-plate); color: var(--tbk-text); }
.tbk-btn--dark { background: var(--tbk-navy); color: #fff; }
.tbk-btn--gray { background: var(--tbk-plate); color: var(--tbk-text); }                                   /* «Отмена» в окне (error-tickets), .button-gray */
.tbk-btn--gray:hover { background: var(--tbk-border-btn); }
.tbk-btn--blue { background: var(--tbk-blue); color: #fff; }                                              /* «Запись в реестре» (/about .about_soft_btn) */
.tbk-btn--blue:hover { opacity: .9; }
.tbk-btn--gold { background: var(--tbk-gold-btn); color: var(--tbk-gold-ink); }                           /* на тёмном золотом фоне (tbk-cta--gold), как кнопки /lp/awards */
.tbk-btn--gold:hover { box-shadow: var(--tbk-sh-gold); }
/* загрузка (по heroui.com loading): крутилка tbk-spinner--sm вместо значка, кнопка не нажимается; kit.js [data-tbk-loading].
   Крутилка синяя, в залитых кнопках (салатовая, тёмная, синяя) — цветом текста */
.tbk-btn.is-loading { pointer-events: none; }
.tbk-btn--primary.is-loading > .tbk-spinner, .tbk-btn--dark.is-loading > .tbk-spinner, .tbk-btn--blue.is-loading > .tbk-spinner { color: inherit; }
.tbk-btn--link { height: auto; padding: 0; border: 0; color: var(--tbk-blue); font-weight: 500; }          /* «Подтвердить» рядом с полем (lk-profile) */
.tbk-btn--link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* с числом в кружке (tbk-badge) или серым числом (tbk-btn__n) — подчёркивается только подпись в <span>, число без черты (20.10.2026) */
.tbk-btn__n { color: var(--tbk-muted); font-weight: 400; }
.tbk-btn--link:has(> .tbk-badge, > .tbk-btn__n):hover { text-decoration: none; }
.tbk-btn--link:has(> .tbk-badge, > .tbk-btn__n):hover > span:not(.tbk-badge, .tbk-btn__n) { text-decoration: underline; text-underline-offset: 3px; }
.tbk-btn--link.tbk-btn--muted { color: var(--tbk-muted); }                                            /* светло-серая ссылка: «Сбросить всё», «Все шаблоны» (20.10.2026, #2427) */
.tbk-btn--link.tbk-btn--muted:hover { color: var(--tbk-text); }
.tbk-btn--sm { height: 34px; padding: 0 14px; gap: 6px; font-size: 13px; }
.tbk-btn--xs { height: 32px; padding: 0 14px; gap: 6px; font-size: 13px; }                                 /* кнопки вкладки ЛК (lk-profile) */
.tbk-btn--lg { height: 44px; padding: 0 24px; }                                                             /* окно «Сообщить об ошибке» */
.tbk-btn--link:is(.tbk-btn--sm, .tbk-btn--xs, .tbk-btn--lg) { padding: 0; }   /* ссылка любого размера — без боковых отступов, по краю текста (21.10.2026; размер перебивал padding: 0 у --link) */
.tbk-btn--pill { border-radius: var(--tbk-r-pill); }                                                       /* «Показать ещё» (.show_more_button), whats-new */
/* «Сохранить поиск» — как .save_search_btn главной (2023/web/css/es_search.css:184): 28 px, 13/400, значок серый, наведение — рамка темнее и тень, без заливки.
   Вместе с --secondary; значок ic.s('search-bookmark', 13). С 20.10.2026 (стенд direct-sales) */
.tbk-btn--save { height: 28px; padding: 0 10px; gap: 6px; font-size: 13px; font-weight: 400; }
.tbk-btn--save:hover { background: var(--tbk-surface); border-color: var(--tbk-border-hover); box-shadow: var(--tbk-sh-hover); }
.tbk-btn--save > .tbk-svg { color: var(--tbk-dd-muted); }
/* кнопка подменю — как .sub_menu_button «Поиск», «Удалить завершенные» на /monitoring (css/style.css:8856), стенд monitoring-new В2: серо-синяя плашка 28 px, 12/400, без рамки;
   наведение — фон светлее и тень (21.10.2026, на бою — тёмно-синяя заливка, вопреки style.md). Число после подписи — <b>: «Фильтры · 2». Выпадающий список того же вида — tbk-dd--sub */
.tbk-btn--sub { height: 28px; padding: 0 12px 0 10px; gap: 5px; border: 0; background: var(--tbk-sub-bg); font-size: 12px; font-weight: 400; color: var(--tbk-text); }
.tbk-btn--sub:hover { background: var(--tbk-sub-hover); box-shadow: var(--tbk-sh-hover); }
.tbk-btn--sub > b { font-weight: 500; }
.tbk-btn--sub > b:not(:empty)::before { content: '· '; }
.tbk-btn--sub > .icon-down-open { font-size: 9px; }
.tbk-btn--icon { width: 34px; height: 34px; padding: 0; color: var(--tbk-gray); }
.tbk-btn--sub.tbk-btn--icon { width: 28px; height: 28px; color: var(--tbk-text); }
.tbk-btn--block { width: 100%; }
.tbk-btn[disabled], .tbk-btn.is-disabled { opacity: .45; pointer-events: none; }
/* кнопка-переключатель (по heroui.com toggle-button): нажата — aria-pressed="true", салатовая заливка, как «Вы подписаны» (решение 19.10.2026, исключение из style.md); kit.js [data-tbk-toggle] */
.tbk-btn[aria-pressed="true"] { background: var(--tbk-lime); border-color: var(--tbk-lime); color: var(--tbk-text); }
.tbk-btn[aria-pressed="true"]:hover { background: var(--tbk-lime-hover); border-color: var(--tbk-lime-hover); color: var(--tbk-text); }
/* на салатовой кнопке только значок — белый (20.10.2026); так же замок «Нет доступа» и кнопка видео */
.tbk-btn--primary.tbk-btn--icon, .tbk-btn--primary.tbk-btn--icon:hover, .tbk-btn--icon[aria-pressed="true"], .tbk-btn--icon[aria-pressed="true"]:hover { color: #fff; }
/* стрелка раздельной кнопки — тёмная, как подпись основной кнопки рядом (21.10.2026) */
.tbk-btns > .tbk-btn--primary.tbk-btn--icon, .tbk-btns > .tbk-btn--primary.tbk-btn--icon:hover { color: var(--tbk-text); }
.tbk-if-on, .tbk-if-off { display: inline-flex; font-style: normal; }
[aria-pressed="true"] > .tbk-if-off, [aria-pressed="false"] > .tbk-if-on { display: none; }                 /* разные значки: нажата / не нажата */
/* группа кнопок — вид боевой .btn-group «Радиус» (view/realEstateNew/mainAnalistic.twig, css/realEstateAnalyticsNew.css, стенд realty-analytics):
   белые встык, рамка и разделители --tbk-grp-line, 13/500, наведение --tbk-grp-hover, скруглены только края. Размеры — как small / medium у GitHub Primer:
   28 (--sm) и 32 px, выше 34 px не бывает. Выбранная (.active) — #F1F5F9 --tbk-btns-sel, как на бою (20.10.2026); нажатая (aria-pressed) — салатовая, как отдельная; в --check — зелёная галочка без заливки.
   Варианты — по heroui.com button-group. Больше 5 кнопок не переносится — тогда tbk-seg */
.tbk-btns { display: inline-flex; max-width: 100%; vertical-align: middle; }
.tbk-btns > .tbk-btn { height: 32px; padding: 0 14px; gap: 6px; border-radius: 0; font-size: 13px; font-weight: 500; }
.tbk-btns > .tbk-btn--secondary { border-color: var(--tbk-grp-line); }
.tbk-btns > .tbk-btn--secondary:hover { background: var(--tbk-grp-hover); border-color: var(--tbk-grp-line); }
.tbk-btns > .tbk-btn:first-child { border-radius: var(--tbk-r-btn) 0 0 var(--tbk-r-btn); }
.tbk-btns > .tbk-btn:last-child { border-radius: 0 var(--tbk-r-btn) var(--tbk-r-btn) 0; }
.tbk-btns > .tbk-btn:only-child { border-radius: var(--tbk-r-btn); }
.tbk-btns > .tbk-btn + .tbk-btn { margin-left: -1px; }                                                     /* общая рамка у --secondary */
.tbk-btns > .tbk-btn:hover, .tbk-btns > .tbk-btn:focus-visible { position: relative; z-index: 1; }
.tbk-btns > .tbk-btn[aria-pressed="true"] { position: relative; z-index: 2; background: var(--tbk-lime); border-color: var(--tbk-lime); }
.tbk-btns > .tbk-btn[aria-pressed="true"]:hover { background: var(--tbk-lime-hover); border-color: var(--tbk-lime-hover); }
/* --check: тоглы «несколько сразу» — нажатая без заливки, зелёная галочка перед названием (решение 19.10.2026) */
.tbk-btns--check > .tbk-btn[aria-pressed="true"] { background: var(--tbk-surface); border-color: var(--tbk-grp-line); }
.tbk-btns--check > .tbk-btn[aria-pressed="true"]:hover { background: var(--tbk-grp-hover); border-color: var(--tbk-grp-line); }
.tbk-btns--check > .tbk-btn[aria-pressed="true"]::before { content: ""; flex: none; width: 9px; height: 5px; margin: 0 1px 3px; border-left: 2px solid var(--tbk-green); border-bottom: 2px solid var(--tbk-green); transform: rotate(-45deg); }
.tbk-btns > .tbk-btn--primary:hover { box-shadow: none; }
/* разделитель у залитых */
.tbk-btns > .tbk-btn--gray + .tbk-btn--gray { margin-left: 0; box-shadow: inset 1px 0 0 var(--tbk-border-btn); }
.tbk-btns > .tbk-btn--dark + .tbk-btn--dark { margin-left: 0; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2); }
.tbk-btns > .tbk-btn--primary + .tbk-btn--primary, .tbk-btns > .tbk-btn--primary + .tbk-btn--primary:hover { margin-left: 0; box-shadow: inset 1px 0 0 rgba(31, 31, 31, .15); }
.tbk-btns--flat > .tbk-btn + .tbk-btn, .tbk-btns--flat > .tbk-btn + .tbk-btn:hover { box-shadow: none; }   /* без разделителя */
.tbk-btns > .tbk-btn.active, .tbk-btns > .tbk-btn.active:hover { position: relative; z-index: 2; background: var(--tbk-btns-sel); border-color: var(--tbk-grp-line); color: var(--tbk-text); box-shadow: none; }   /* у выбранной на бою наведения нет */
.tbk-btns > .tbk-btn--icon { width: 32px; padding: 0; }
.tbk-btns > .open .tbk-svg { transform: rotate(180deg); }                                                   /* стрелка раздельной кнопки при открытом списке */
.tbk-btns--sm > .tbk-btn { height: 28px; padding: 0 10px; gap: 4px; font-size: 12px; }
.tbk-btns--sm > .tbk-btn--icon { width: 28px; padding: 0; }
.tbk-btns--md > .tbk-btn { height: 34px; }                                                                   /* в строку с tbk-btn--sm («Удалить» + значок настройки, monitoring-new, 21.10.2026) */
.tbk-btns--md > .tbk-btn--icon { width: 34px; padding: 0; }
/* --sub — плашки подменю tbk-btn--sub встык (вид карточек и истории, monitoring-new, 31.10.2026): 28 px, 12/400, серо-синие, разделитель — той же заливкой;
   наведение — светлее, без тени; выбранная (.active или aria-pressed) — белая с тенью --tbk-sh-seg, как выбранный сегмент.
   Подсказка — tbk-tip tbk-tip--any на самой кнопке (обёртка ломает > .tbk-btn), поэтому цвет и курсор заданы здесь */
.tbk-btns--sub > .tbk-btn { height: 28px; padding: 0 12px 0 10px; gap: 5px; font-size: 12px; font-weight: 400; color: var(--tbk-text); cursor: pointer; }
.tbk-btns--sub > .tbk-btn--icon { width: 28px; padding: 0; }
.tbk-btns--sub > .tbk-btn + .tbk-btn { margin-left: 0; box-shadow: inset 1px 0 0 var(--tbk-sub-bg); }
.tbk-btns--sub > .tbk-btn:hover { background: var(--tbk-sub-hover); color: var(--tbk-text); box-shadow: none; }
.tbk-btns--sub > .tbk-btn + .tbk-btn:hover { box-shadow: inset 1px 0 0 var(--tbk-sub-bg); }
.tbk-btns--sub > .tbk-btn.active, .tbk-btns--sub > .tbk-btn.active:hover, .tbk-btns--sub > .tbk-btn[aria-pressed="true"], .tbk-btns--sub > .tbk-btn[aria-pressed="true"]:hover { background: var(--tbk-surface); color: var(--tbk-text); box-shadow: var(--tbk-sh-seg); }
.tbk-btns--sub > .tbk-btn > .tbk-tip__text { white-space: normal; text-align: left; font-weight: 400; }
/* открытый список у плашки со значком, подписью и стрелкой («Удалить ▾»): поворачивается только стрелка — последний значок, не все .tbk-svg, как у раздельной кнопки */
.tbk-btns--sub > .open .tbk-svg { transform: none; }
.tbk-btns--sub > .open > .tbk-svg:last-child:not(:first-child) { transform: rotate(180deg); }
.tbk-btns--block { display: flex; width: 100%; }
.tbk-btns--block > .tbk-btn { flex: 1 1 0; min-width: 0; }
.tbk-btns--col { flex-direction: column; }
.tbk-btns--col > .tbk-btn { justify-content: flex-start; }
.tbk-btns--col > .tbk-btn:first-child { border-radius: var(--tbk-r-btn) var(--tbk-r-btn) 0 0; }
.tbk-btns--col > .tbk-btn:last-child { border-radius: 0 0 var(--tbk-r-btn) var(--tbk-r-btn); }
.tbk-btns--col > .tbk-btn + .tbk-btn { margin-left: 0; margin-top: -1px; }
.tbk-btns--col > .tbk-btn--gray + .tbk-btn--gray { margin-top: 0; box-shadow: inset 0 1px 0 var(--tbk-border-btn); }
.tbk-btns--col > .tbk-btn--dark + .tbk-btn--dark { margin-top: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.tbk-btns.is-disabled { opacity: .45; pointer-events: none; }
/* --filter — вид боевого .pill_group «Состояние / Режим» расширенного поиска на главной (2023/view/home_es.twig, 2023/web/css/es_search.css):
   24 px, 12.5/500, рамка --tbk-border, наведение бледно-салатовое; выбранная (.active — одна, aria-pressed — несколько) — салатовая рамка, 600, галочка done_green.svg.
   Салатовые рамка и наведение — как на бою, исключение из style.md (20.10.2026) */
.tbk-btns--filter > .tbk-btn { height: 24px; padding: 0 12px; gap: 5px; border-color: var(--tbk-border); font-size: 12.5px; font-weight: 500; color: var(--tbk-fl-text); transition: background-color .12s; }
.tbk-btns--filter > .tbk-btn:hover { background: var(--tbk-fl-hover); border-color: var(--tbk-border); }
.tbk-btns--filter > .tbk-btn.active, .tbk-btns--filter > .tbk-btn[aria-pressed="true"] { background: var(--tbk-surface); border-color: var(--tbk-lime); color: var(--tbk-fl-text); font-weight: 600; }
.tbk-btns--filter > .tbk-btn.active:hover, .tbk-btns--filter > .tbk-btn[aria-pressed="true"]:hover { background: var(--tbk-fl-hover); border-color: var(--tbk-lime); }
.tbk-btns--filter > .tbk-btn.active::before, .tbk-btns--filter > .tbk-btn[aria-pressed="true"]::before { content: ""; flex: none; width: 10px; height: 8px; background: url(/img/icons/done_green.svg) center / contain no-repeat; }
@media (max-width: 768px) { .tbk-btns--filter { flex-wrap: wrap; } }
/* ≤440 px — по 2 в строку, как на бою (Режим 4 → 2×2) */
@media (max-width: 440px) {
    .tbk-btns--filter { display: flex; width: 100%; }
    .tbk-btns--filter > .tbk-btn, .tbk-btns--filter > .tbk-btn + .tbk-btn { flex: 0 0 50%; box-sizing: border-box; margin-left: 0; }
    .tbk-btns--filter > .tbk-btn:nth-child(even) { border-left: 0; }
    .tbk-btns--filter > .tbk-btn:nth-child(n+3) { margin-top: -1px; }
}
/* --filter --shade — тот же вид без салатового, по style.md: наведение — тенью, выбранная — рамка --tbk-sel + тень --tbk-sh-seg, 600, зелёная галочка как в --check */
.tbk-btns--shade > .tbk-btn:hover { background: var(--tbk-surface); box-shadow: var(--tbk-sh-hover); }
.tbk-btns--shade > .tbk-btn.active, .tbk-btns--shade > .tbk-btn[aria-pressed="true"],
.tbk-btns--shade > .tbk-btn.active:hover, .tbk-btns--shade > .tbk-btn[aria-pressed="true"]:hover { background: var(--tbk-surface); border-color: var(--tbk-sel); box-shadow: var(--tbk-sh-seg); }
.tbk-btns--shade > .tbk-btn.active::before, .tbk-btns--shade > .tbk-btn[aria-pressed="true"]::before { width: 9px; height: 5px; margin: 0 1px 3px; background: none;
    border-left: 2px solid var(--tbk-green); border-bottom: 2px solid var(--tbk-green); transform: rotate(-45deg); }
/* крестик закрытия (по heroui.com close-button): серый, наведение — подложка, как .tbk-noti__close; --round — как .close боевого окна (modal.css) */
.tbk-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--tbk-r);
         background: none; color: var(--tbk-muted); cursor: pointer; transition: background-color .1s, color .1s; }
.tbk-x:hover { background: var(--tbk-plate); color: var(--tbk-text); }
.tbk-x--sm { width: 24px; height: 24px; border-radius: var(--tbk-r-xs); }
.tbk-x--round { border-radius: 50%; background: rgba(46, 60, 84, .32); color: #fff; }
.tbk-x--round:hover { background: rgba(46, 60, 84, .6); color: #fff; }
/* App Store / Google Play (/about .about_store): картинки — боевые /img/icons/apple_logo.svg, google_play_logo.svg */
.tbk-store { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--tbk-surface); border: 1px solid var(--tbk-border-btn); border-radius: var(--tbk-r);
             font-size: 14px; color: var(--tbk-text-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: box-shadow .15s; }
.tbk-store:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.tbk-store img { display: block; height: 16px; }
/* вход через соцсети — .social_links окна входа (2023/view/modal/login.twig, 2023/web/css/modal.css): круглые картинки 40 px /img/contact/{vk,tg,max}.svg, наведение — прозрачность */
.tbk-social { display: flex; justify-content: center; gap: 8px; }
.tbk-social > * { display: block; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .15s, transform .25s ease; }
.tbk-social > *:hover { opacity: .85; }
.tbk-social > *:active { transform: scale(.96); }
.tbk-social img { display: block; width: 40px; height: 40px; }
.tbk-btn > img { flex: none; display: block; width: 20px; height: 20px; }                                  /* логотип в кнопке «Войти через …» */
.tbk-btn > b:not([class]) { font-weight: inherit; font-variant-numeric: tabular-nums; }                     /* число у лайка [data-tbk-n] */

/* =================================== Поля =================================== */
.tbk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tbk-label { font-size: 13px; color: var(--tbk-gray); }
.tbk-input { width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--tbk-border); border-radius: var(--tbk-r-xs); background: var(--tbk-surface);
             font: inherit; font-size: 14px; color: var(--tbk-text); outline: none; transition: border-color .15s; }
.tbk-input:hover { border-color: #C9D4E4; }
.tbk-input:focus { border-color: var(--tbk-blue); }
.tbk-input.is-error { border-color: var(--tbk-red); }
.tbk-hint { font-size: 12px; color: var(--tbk-muted); }
.tbk-hint--error { color: var(--tbk-red); }
.tbk-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--tbk-border); border-radius: var(--tbk-r-xs); background: var(--tbk-surface); color: var(--tbk-muted); }
.tbk-search:focus-within { border-color: var(--tbk-blue); }
.tbk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--tbk-text); }
.tbk-check { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--tbk-text-2); cursor: pointer; }
/* чекбокс — системный 13 px с синей заливкой браузера, как на стенде lot-card; accent-color не задаём */
.tbk-check input { width: 13px; height: 13px; margin: 2px 0 0; flex: none; }
.tbk-check > span > small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--tbk-muted); }   /* пояснение под подписью */
/* группа чекбоксов (по heroui.com checkbox-group): подпись tbk-label, пояснение, пункты столбиком / --row в строку / --card плитками;
   «Выбрать все» — [data-tbk-checkall], у части — неопределённое состояние (kit.js); ошибка — .is-error и tbk-hint--error */
.tbk-checkgroup { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.tbk-checkgroup > .tbk-label { margin: 0; }
.tbk-checkgroup > .tbk-label + .tbk-hint { margin: -8px 0 0; }
.tbk-checkgroup > .tbk-hint--error { display: none; margin: 0; }
.tbk-checkgroup.is-error > .tbk-hint--error { display: block; }
.tbk-checkgroup.is-error .tbk-check input:not(:checked):not(:indeterminate) { appearance: none; -webkit-appearance: none; border: 1px solid var(--tbk-red); border-radius: 2px; background: var(--tbk-surface); }   /* красная рамка самого квадрата */
.tbk-checkgroup__all { align-self: stretch; padding-bottom: 10px; border-bottom: 1px solid var(--tbk-line); }
.tbk-checkgroup__all ~ .tbk-check { margin-left: 21px; }                                                    /* пункты под «Выбрать все» — с отступом */
.tbk-checkgroup--row { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.tbk-checkgroup--row > .tbk-label, .tbk-checkgroup--row > .tbk-hint { flex-basis: 100%; }
.tbk-checkgroup--row > .tbk-label + .tbk-hint { margin-top: -6px; }
.tbk-checkgroup--card { align-items: stretch; gap: 8px; }
.tbk-checkgroup--card > .tbk-check { padding: 12px 14px; border: 1px solid var(--tbk-border-btn); border-radius: var(--tbk-r); background: var(--tbk-surface); transition: border-color .15s, box-shadow .15s; }
.tbk-checkgroup--card > .tbk-check:hover { box-shadow: var(--tbk-sh-hover); }
.tbk-checkgroup--card > .tbk-check:has(input:checked) { border-color: var(--tbk-sel); box-shadow: var(--tbk-sh-sel); }   /* выбранная плитка — рамка и тень (style.md) */
.tbk-checkgroup.is-disabled { opacity: .45; pointer-events: none; }
.tbk-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tbk-text-2); cursor: pointer; }
.tbk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tbk-switch i { position: relative; flex: none; width: 30px; height: 17px; border-radius: 9px; background: #D3D6DC; transition: background .15s; }
.tbk-switch i::before { content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tbk-switch input:checked + i { background: var(--tbk-blue); }
.tbk-switch input:checked + i::before { transform: translateX(13px); }
.tbk-switch--sm i { width: 24px; height: 14px; border-radius: 7px; }
.tbk-switch--sm i::before { width: 10px; height: 10px; }
.tbk-switch--sm input:checked + i::before { transform: translateX(10px); }
.tbk-input:disabled { background: var(--tbk-hover); color: var(--tbk-muted); }
/* многострочное (окно «Сообщить об ошибке», error-tickets): тянется вниз до 320px */
.tbk-textarea { display: block; width: 100%; min-height: 112px; max-height: 320px; padding: 12px 14px; border: 1px solid var(--tbk-border); border-radius: var(--tbk-r-xs);
                background: var(--tbk-surface); font: inherit; font-size: 14px; line-height: 20px; color: var(--tbk-text); outline: none; resize: vertical; overflow-y: auto; transition: border-color .15s; }
.tbk-textarea::placeholder, .tbk-input::placeholder { color: var(--tbk-muted); }
.tbk-textarea:hover { border-color: #C9D4E4; }
.tbk-textarea:focus { border-color: var(--tbk-blue); }
.tbk-textarea.is-error { border-color: var(--tbk-red); }
/* значок внутри поля справа (галочка «подтверждён», lk-profile) */
.tbk-affix { position: relative; display: block; min-width: 0; }
.tbk-affix > .tbk-input { padding-right: 36px; }
.tbk-affix__end { position: absolute; top: 50%; right: 10px; display: flex; transform: translateY(-50%); }
/* форма «подпись слева — поле справа» (ЛК «Мой профиль», lk-profile) */
.tbk-form { display: flex; flex-direction: column; gap: 14px; }
.tbk-form__row { display: flex; align-items: flex-start; gap: 16px; }
.tbk-form__label { flex: none; width: 150px; padding-top: 9px; font-size: 14px; line-height: 18px; color: var(--tbk-value); }
.tbk-form__control { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tbk-form__control > .tbk-input, .tbk-form__control > .tbk-affix { max-width: 320px; }
.tbk-form__inline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.tbk-form__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
@media (max-width: 576px) {
    .tbk-form__row { flex-direction: column; gap: 6px; }
    .tbk-form__label { width: auto; padding-top: 0; font-size: 13px; }
    .tbk-form__control { width: 100%; }
    .tbk-form__control > .tbk-input, .tbk-form__control > .tbk-affix { max-width: none; }
    .tbk-form__actions .tbk-btn { width: 100%; }
}
/* радио (окно «Откуда узнали», css/howFound.css .hf_radio); группа — по heroui.com radio-group: подпись tbk-label, пояснение tbk-hint,
   у пункта — <span>текст<small>пояснение</small></span>; --row в строку, --card плитками; ошибка — .is-error и tbk-hint--error; .is-disabled */
.tbk-radios { display: flex; flex-direction: column; min-width: 0; }
.tbk-radios > .tbk-label { margin: 0 0 6px; }
.tbk-radios > .tbk-label + .tbk-hint { margin: -4px 0 6px; }
.tbk-radios > .tbk-hint--error { display: none; margin: 6px 0 0; }
.tbk-radios.is-error > .tbk-hint--error { display: block; }
.tbk-radios.is-error .tbk-radio input { border-color: var(--tbk-red); }
.tbk-radios--row { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
.tbk-radios--row > .tbk-label, .tbk-radios--row > .tbk-hint { flex-basis: 100%; margin-bottom: 0; }
.tbk-radios--card { gap: 8px; }
.tbk-radios--card > .tbk-label { margin-bottom: 0; }
.tbk-radios--card > .tbk-label + .tbk-hint { margin: -6px 0 0; }
.tbk-radios--card > .tbk-radio { padding: 12px 14px; border: 1px solid var(--tbk-border-btn); border-radius: var(--tbk-r); background: var(--tbk-surface); transition: border-color .15s, box-shadow .15s; }
.tbk-radios--card > .tbk-radio:hover { background: var(--tbk-surface); box-shadow: var(--tbk-sh-hover); }
.tbk-radios--card > .tbk-radio:has(input:checked) { border-color: var(--tbk-sel); box-shadow: var(--tbk-sh-sel); }   /* выбранная плитка — рамка и тень (style.md) */
.tbk-radios--card.tbk-radios--row > .tbk-radio { flex: 1 1 150px; }
.tbk-radios.is-disabled, .tbk-radio:has(input:disabled) { opacity: .45; pointer-events: none; }
.tbk-radio { display: flex; align-items: flex-start; gap: 10px; padding: 4px; border-radius: var(--tbk-r-xs); font-size: 14px; line-height: 20px; color: var(--tbk-text-2); cursor: pointer; user-select: none; }
.tbk-radio > span > small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--tbk-muted); }   /* пояснение под подписью */
.tbk-radio:hover { background: var(--tbk-hover); }
.tbk-radio input { position: relative; flex: none; appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 2px 0 0; border: 1px solid #C9CFDA; border-radius: 50%;
                   background: #FCFCFC; cursor: pointer; transition: border-color .15s; }
.tbk-radio:hover input, .tbk-radio input:checked { border-color: var(--tbk-blue); }
.tbk-radio input:checked { background: var(--tbk-surface); }
.tbk-radio input:checked::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--tbk-blue); transform: translate(-50%, -50%); }
.tbk-radio input:focus-visible { outline: 2px solid color-mix(in srgb, var(--tbk-blue) 25%, transparent); outline-offset: 2px; }   /* фокус с клавиатуры, как heroui */
.tbk-radio--muted { color: var(--tbk-muted); }
/* загрузка файлов (error-tickets .et_drop / .et_thumb) */
.tbk-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 1px dashed var(--tbk-border-dash); border-radius: var(--tbk-r-xs);
            text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.tbk-drop:hover, .tbk-drop.is-drag { border-color: var(--tbk-navy); background: var(--tbk-hover); }
.tbk-drop.is-error { border-color: var(--tbk-red); }
.tbk-drop input { display: none; }
.tbk-drop__main { font-size: 14px; font-weight: 600; color: var(--tbk-text); }
.tbk-drop__main .tbk-link { font-weight: 600; }
.tbk-drop__hint { font-size: 12px; line-height: 16px; color: var(--tbk-muted); }
.tbk-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.tbk-thumb { position: relative; width: 64px; height: 64px; }
.tbk-thumb img, .tbk-thumb > i { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--tbk-border-btn); border-radius: var(--tbk-r-sm); background: var(--tbk-plate); }
.tbk-thumb__del { position: absolute; top: -6px; right: -6px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
                  background: var(--tbk-text); color: #fff; cursor: pointer; }
/* разделитель «или по номеру телефона» (окно пробного, trial-max .tm_or) */
.tbk-or { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; color: var(--tbk-muted); }
.tbk-or::before, .tbk-or::after { content: ''; flex: 1; height: 1px; background: var(--tbk-border-btn); }
/* подсказка у подписи: (i) и текст по наведению/фокусу, вид как .tooltiptb (css/tooltips.css), lk-profile .pf_tip */
.tbk-tip { position: relative; display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--tbk-muted); cursor: help; outline: none; }
.tbk-tip:hover, .tbk-tip:focus { color: var(--tbk-value); }
/* текст ставит kit.js: над значком (нет места — под ним), по горизонтали — в пределах экрана; fixed — чтобы не обрезал overflow предков */
.tbk-tip__text { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: max-content; max-width: min(220px, calc(100vw - 16px)); padding: 10px 12px;
                 border: 1px solid var(--tbk-plate); border-radius: var(--tbk-r); background: var(--tbk-surface); box-shadow: var(--tbk-sh-tip);
                 font-size: 13px; font-weight: 400; line-height: 18px; color: var(--tbk-text-2); white-space: normal; text-align: left; }
.tbk-tip.is-open .tbk-tip__text { display: block; }
/* с заголовком — как подсказки аналитики недвижимости (css/realEstateAnalyticsNew.css .tooltip__title / .tooltip__text): заголовок 13/500, текст серым */
.tbk-tip__text:has(> .tbk-tip__title) { max-width: min(250px, calc(100vw - 16px)); padding: 12px; color: var(--tbk-gray); }
.tbk-tip__title { display: block; margin-bottom: 8px; font-weight: 500; color: var(--tbk-text-2); }
/* подсказка у любого элемента (кнопка, число, текст) — как [data-tooltip] (js/Tooltips.js): обёртка без отступа и смены цвета */
.tbk-tip--any { margin-left: 0; vertical-align: baseline; color: inherit; cursor: default; }
.tbk-tip--any:hover, .tbk-tip--any:focus { color: inherit; }
/* .tbk-tip--start — текст от левого края элемента, а не по центру (длинная таблетка, строка); правил нет, место ставит kit.js */
/* короткая тёмная — как подсказки кнопок AI-поиска (.ai_premium_tip, .save_search_tip в 2023/web/css/es_search.css) */
.tbk-tip__text--dark { max-width: min(250px, calc(100vw - 16px)); padding: 5px 8px; border: 0; border-radius: 5px; background: var(--tbk-tip-dark); box-shadow: none; font-size: 12px; line-height: 16px; color: #fff; }
/* период «с — по» (поля дат поиска главной: 2023/view/search/form.twig st, sz, ez, et) и одна дата: рамка 32 px со значком, поля дд.мм.гггг, календарь набора — kit.js [data-tbk-cal] */
/* по heroui.com date-range-picker (20.10.2026): значок календаря справа — кнопка .tbk-period__btn (открыть / закрыть); курсор — указатель, в поле, где вводят, — текстовый;
   пояснение — tbk-hint после рамки, ошибка — .is-error (красная рамка, tbk-hint--error после рамки виден); .is-disabled. Значок слева (svg первым) — прежний вид, работает */
.tbk-period { display: inline-flex; align-items: center; gap: 2px; width: 300px; max-width: 100%; height: 32px; padding: 0 3px 0 10px; border: 1px solid var(--tbk-border); border-radius: var(--tbk-r-xs);
              background: var(--tbk-surface); color: var(--tbk-muted); cursor: pointer; transition: border-color .15s; }
.tbk-period:hover { border-color: var(--tbk-border-hover); }
.tbk-period:focus-within, .tbk-period.open { border-color: var(--tbk-blue); }
.tbk-period > .tbk-svg { margin-right: 4px; }
.tbk-period > i { flex: none; font-style: normal; color: var(--tbk-muted); }
.tbk-period input { flex: 1 1 0; min-width: 0; height: 24px; padding: 0 6px; border: 0; border-radius: var(--tbk-r-xs); outline: 0; background: transparent; cursor: pointer;
                    font-family: var(--font-family) !important; font-size: 14px; color: var(--tbk-text); font-variant-numeric: tabular-nums; transition: background-color .15s; }
.tbk-period input:focus { cursor: text; }
.tbk-period input::placeholder { color: var(--tbk-muted); }
.tbk-period input.is-active { background: var(--tbk-plate); }   /* поле, которое выбирается, — серым (20.10.2026, было бледно-голубое --tbk-sel-bg) */
.tbk-period__btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin-left: 2px; padding: 0; border: 0; border-radius: var(--tbk-r-xs);
                   background: none; color: var(--tbk-muted); cursor: pointer; transition: background-color .15s, color .15s; }
.tbk-period__btn:hover, .tbk-period.open .tbk-period__btn { background: var(--tbk-plate); color: var(--tbk-text); }
.tbk-period__btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--tbk-blue) 25%, transparent); outline-offset: 0; }
.tbk-period--one { width: 160px; }
.tbk-period.is-error, .tbk-period.is-error:hover { border-color: var(--tbk-red); }
.tbk-period ~ .tbk-hint--error { display: none; }
.tbk-period.is-error ~ .tbk-hint--error { display: block; }
.tbk-period.is-error:has(~ .tbk-hint--error) ~ .tbk-hint:not(.tbk-hint--error) { display: none; }   /* пояснение уступает место тексту ошибки, если он есть */
.tbk-period.is-disabled { opacity: .45; pointer-events: none; }
@keyframes tbk-pop-in { from { opacity: 0; transform: scale(.95); } }
/* календарь: список месяца под полем, вид и размер — как heroui.com calendar / range-calendar (19.10.2026): 252 px сетка + отступ 12,
   месяц слева 14/600, стрелки 24 px справа, дни 32 px 13/500; крайние дни — салатовый круг (19.10.2026), между — полоса --tbk-grp-sel со скруглёнными краями
   по неделям, сегодня — бледно-синий круг с синим числом; дни чужого месяца — бледнее */
.tbk-cal { position: absolute; z-index: 1000; display: none; width: 276px; max-width: calc(100vw - 32px); padding: 12px; border-radius: var(--tbk-r-md); background: var(--tbk-surface); box-shadow: var(--tbk-sh-dd);
           font-family: var(--font-family); font-size: 13px; color: var(--tbk-text); user-select: none; }
.tbk-cal.open { display: block; transform-origin: top left; animation: tbk-pop-in .15s ease-out; }   /* появляется, как heroui popover */
.tbk-cal.open.is-up { transform-origin: bottom left; }
@media (prefers-reduced-motion: reduce) { .tbk-cal.open { animation: none; } }
.tbk-cal__head { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; padding: 0 2px; }
.tbk-cal__title { order: -1; flex: 1; font-size: 14px; font-weight: 600; }
.tbk-cal__nav { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--tbk-gray); cursor: pointer; transition: background-color .1s, transform .25s ease; }
.tbk-cal__nav:hover { background: var(--tbk-plate); color: var(--tbk-text); }
.tbk-cal__nav:active { transform: scale(.95); }
.tbk-cal__nav > svg { width: 14px; height: 14px; }
.tbk-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.tbk-cal__wd { padding-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--tbk-muted); text-align: center; }
.tbk-cal__d { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; padding: 0; font-size: 13px; font-weight: 500; color: var(--tbk-text-2); font-variant-numeric: tabular-nums; cursor: pointer; }
.tbk-cal__d > span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; transition: background-color .1s, transform .2s ease; }
.tbk-cal__d:hover > span { background: var(--tbk-plate); }
.tbk-cal__d:active > span { transform: scale(.9); }
.tbk-cal__d.is-out { color: var(--tbk-muted); opacity: .5; }
.tbk-cal__d.is-today > span { background: var(--tbk-grp-sel); color: var(--tbk-grp-sel-text); }
.tbk-cal__d.is-today:hover > span { background: var(--tbk-grp-sel-hover); }
.tbk-cal__d.is-range { background: var(--tbk-grp-sel); }
.tbk-cal__d.is-range:nth-child(7n + 1) { border-radius: 8px 0 0 8px; }                                 /* понедельник — край полосы недели */
.tbk-cal__d.is-range:nth-child(7n) { border-radius: 0 8px 8px 0; }                                     /* воскресенье */
.tbk-cal__d.is-range:hover > span { background: var(--tbk-grp-sel-hover); }
.tbk-cal__d.is-start.has-range { background: linear-gradient(90deg, transparent 50%, var(--tbk-grp-sel) 50%); }
.tbk-cal__d.is-end.has-range { background: linear-gradient(90deg, var(--tbk-grp-sel) 50%, transparent 50%); }
.tbk-cal__d.is-start.has-range:nth-child(7n), .tbk-cal__d.is-end.has-range:nth-child(7n+1) { background: none; }   /* начало в воскресенье / конец в понедельник — полоса не выходит за неделю */
.tbk-cal__d.is-start > span, .tbk-cal__d.is-end > span { background: var(--tbk-lime); color: var(--tbk-text); font-weight: 600; }
.tbk-cal__d.is-off { color: var(--tbk-ico); cursor: default; }
.tbk-cal__d.is-off:hover > span { background: none; }
.tbk-cal__d.is-off:active > span { transform: none; }
.tbk-cal__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 8px 2px 0; border-top: 1px solid var(--tbk-dd-sep); font-size: 12px; }
.tbk-cal__foot > button { color: var(--tbk-blue); cursor: pointer; }
.tbk-cal__foot > button:last-child { color: var(--tbk-muted); }
.tbk-cal__foot > button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* автодополнение: список под полем, как .autocomplete (2023/view/es/_autocomplete.twig, 2023/web/css/es_search.css); поведение — kit.js */
.tbk-suggest { position: relative; }
.tbk-suggest__list { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1000; max-height: 420px; overflow-y: auto;
                     border: 1px solid var(--tbk-sg-line); border-radius: var(--tbk-r); background: var(--tbk-surface); box-shadow: var(--tbk-sh-sg); }
.tbk-suggest.is-open .tbk-suggest__list { display: block; }
.tbk-suggest__item { padding: 4px 12px; font-size: 14px; line-height: 1.35; color: var(--tbk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tbk-suggest__item:hover, .tbk-suggest__item.is-active { background: var(--tbk-sg-hover); }
/* поле с единицей в рамке справа — как .reModal__field + .reModal__suf (калькулятор аренды: view/realEstateNew/realEstateInput.twig, css/realEstateAnalyticsNew.css) */
.tbk-unit { display: flex; align-items: center; width: 100%; height: 32px; overflow: hidden; border: 1px solid var(--tbk-border); border-radius: var(--tbk-r-xs); background: var(--tbk-surface); transition: border-color .15s; }
.tbk-unit:hover { border-color: var(--tbk-border-hover); }
.tbk-unit:focus-within { border-color: var(--tbk-blue); }
.tbk-unit > input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; outline: 0; background: transparent; font-family: var(--font-family) !important; font-size: 14px; color: var(--tbk-text); }
.tbk-unit > span { flex: none; padding: 0 14px; border-left: 1px solid var(--tbk-line); font-size: 14px; line-height: 20px; color: var(--tbk-muted); white-space: nowrap; }
.tbk-form__control > .tbk-unit { max-width: 320px; }
/* приставка слева («+7», «https://»), значок слева, кнопка справа — по heroui.com input-group */
.tbk-unit > span:first-child { border-left: 0; border-right: 1px solid var(--tbk-line); }
.tbk-unit > .tbk-svg { flex: none; margin-left: 12px; color: var(--tbk-muted); }
.tbk-unit > .tbk-svg + input { padding-left: 8px; }
.tbk-unit > .tbk-btn { flex: none; height: 100%; border-width: 0 0 0 1px; border-radius: 0; }
.tbk-unit > .tbk-btn--secondary { border-left-color: var(--tbk-border); }
/* число с кнопками «− +» (по heroui.com number-field): рамка как tbk-unit; шаг, min, max — у input; kit.js */
.tbk-stepper { display: inline-flex; align-items: stretch; height: 32px; overflow: hidden; border: 1px solid var(--tbk-border); border-radius: var(--tbk-r-xs); background: var(--tbk-surface); transition: border-color .15s; }
.tbk-stepper:hover { border-color: var(--tbk-border-hover); }
.tbk-stepper:focus-within { border-color: var(--tbk-blue); }
.tbk-stepper > input { width: 64px; min-width: 0; padding: 0 4px; border: 0; outline: 0; background: transparent; text-align: center;
                       font-family: var(--font-family) !important; font-size: 14px; color: var(--tbk-text); font-variant-numeric: tabular-nums; }
.tbk-stepper > button { position: relative; flex: none; width: 34px; padding: 0; border: 0; background: none; color: var(--tbk-gray); cursor: pointer; transition: background-color .1s; }
.tbk-stepper > button:first-child { border-right: 1px solid var(--tbk-line); }
.tbk-stepper > button:last-child { border-left: 1px solid var(--tbk-line); }
.tbk-stepper > button:hover { background: var(--tbk-hover); color: var(--tbk-text); }
.tbk-stepper > button:disabled { background: none; color: var(--tbk-ico); cursor: default; }
.tbk-stepper > button::before, .tbk-stepper > button:last-child::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor; }
.tbk-stepper > button:last-child::after { transform: rotate(90deg); }
.tbk-stepper--sm { height: 30px; }
.tbk-stepper--sm > button { width: 28px; }
.tbk-stepper--sm > input { width: 44px; font-size: 13px; }
/* код по ячейкам (по heroui.com input-otp): ячейка на цифру; переход, вставка, Backspace — kit.js [data-tbk-otp]. На сайте код — одним полем (tbk-code) */
.tbk-otp { display: inline-flex; gap: 8px; }
.tbk-otp > input { width: 44px; height: 52px; padding: 0; border: 1px solid var(--tbk-border); border-radius: var(--tbk-r-sm); outline: 0; background: var(--tbk-surface); text-align: center;
                   font-family: var(--font-family) !important; font-size: 22px; font-weight: 600; color: var(--tbk-text); caret-color: var(--tbk-blue); transition: border-color .15s, box-shadow .15s; }
.tbk-otp > input:hover { border-color: var(--tbk-border-hover); }
.tbk-otp > input:focus { border-color: var(--tbk-blue); box-shadow: 0 0 0 3px rgba(21, 108, 225, .12); }
.tbk-otp.is-error > input { border-color: var(--tbk-red); }
.tbk-otp > i { align-self: center; width: 10px; height: 2px; background: var(--tbk-border); }            /* разделитель «123–456» */
@media (max-width: 400px) { .tbk-otp { gap: 6px; } .tbk-otp > input { width: 40px; height: 48px; font-size: 20px; } }
/* код из СМС: одно поле, цифры по центру моноширинные — как поле кода окна пробного (2023/view/home/tryForFree.twig, стенд trial-max .tm_code); только цифры — kit.js */
.tbk-code { width: 132px; max-width: 100%; text-align: center; font-size: 20px; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
/* «Отправить код повторно через (01:30)» — как #send-code-button (js/trialActivation.js): [data-tbk-timer="90"], по окончании — ссылка */
.tbk-resend { font-size: 14px; color: var(--tbk-muted); font-variant-numeric: tabular-nums; text-align: left; }
.tbk-resend:not([disabled]) { color: var(--tbk-blue); cursor: pointer; }
.tbk-resend:not([disabled]):hover { text-decoration: underline; text-underline-offset: 3px; }

/* =================================== Выпадающий список ===================================
   вид — боевой .listselect (css/realEstateAnalyticsNew.css), как на стендах market-analytics и realty-analytics;
   регионы, категория должника, цена — по окнам поиска главной (2023/view/modal/selectRegion.twig, selectDebCat.twig, search/form.twig .price_input; 2023/web/css/search.css) */
.tbk-dd { position: relative; display: inline-flex; align-items: center; max-width: 300px; padding: 6px 31px 6px 12px; border: 1px solid var(--tbk-dd-line); border-radius: var(--tbk-r-sm);
          background: var(--tbk-surface); font-size: 14px; line-height: 17px; color: var(--tbk-text); text-align: left; cursor: pointer; }
.tbk-dd > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbk-dd::after { content: ''; position: absolute; right: 13px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.6px solid var(--tbk-dd-arrow); border-bottom: 1.6px solid var(--tbk-dd-arrow);
                 transform: rotate(45deg); transition: transform .15s, margin .15s; }
.tbk-dd.open::after { transform: rotate(-135deg); margin-top: -1px; }
.tbk-dd--block { width: 100%; max-width: none; }
/* как кнопка подменю tbk-btn--sub (21.10.2026): серо-синяя плашка 28 px, 12 px, без рамки, наведение — светлее и тень */
.tbk-dd--sub { height: 28px; padding: 0 26px 0 10px; border: 0; border-radius: var(--tbk-r-btn); background: var(--tbk-sub-bg); font-size: 12px; transition: background-color .15s, box-shadow .15s; }
.tbk-dd--sub:hover, .tbk-dd--sub.open { background: var(--tbk-sub-hover); box-shadow: var(--tbk-sh-hover); }
.tbk-dd--sub::after { right: 11px; border-color: var(--tbk-text); }
.tbk-dd > i { margin-right: 4px; color: var(--tbk-muted); }   /* значок перед подписью: icon-sort-alt-down, как сортировка на стенде lot-card */
/* сортировка синим текстом — как «Выводить сперва» на главной (2023/view/search/count_and_sort.twig, 2023/web/css/search.css .search_sort_col) */
.tbk-sort { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tbk-text); }
.tbk-sort__btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--tbk-blue); cursor: pointer; user-select: none; }
.tbk-sort__btn > i { font-size: 10px; }
.tbk-pop { position: absolute; z-index: 30; display: none; flex-direction: column; min-width: 240px; width: max-content; max-width: calc(100vw - 32px); padding: 0; overflow: hidden;
           background: var(--tbk-surface); border-radius: var(--tbk-r); box-shadow: var(--tbk-sh-dd); font-size: 14px; color: var(--tbk-dd-text); }
.tbk-pop.open { display: flex; }
/* --match — ширина как у кнопки (ставит kit.js), текст пунктов — с тем же отступом, что подпись кнопки */
.tbk-pop--match { min-width: 0; }
.tbk-pop--match > .tbk-opt { padding-left: 13px; padding-right: 12px; }   /* 12 + рамка кнопки 1 px */
/* карточка по нажатию (по heroui.com popover): заголовок, текст, ссылки и кнопки — открывается как список, data-tbk-pop; [data-tbk-close] внутри закрывает */
.tbk-pop--card { width: 320px; gap: 8px; padding: 16px; font-size: 14px; line-height: 1.45; color: var(--tbk-text-2); }
.tbk-pop__title { margin: 0; padding-right: 28px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--tbk-text); }
.tbk-pop--card > .tbk-x { position: absolute; top: 10px; right: 10px; }
.tbk-pop__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tbk-pop__head { padding: 8px 16px 4px; font-size: 12px; color: var(--tbk-dd-muted); }
.tbk-pop__head:not(:first-child) { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--tbk-dd-sep); }
.tbk-pop__sep { height: 1px; margin: 4px 0; background: var(--tbk-dd-sep); }
.tbk-pop__list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.tbk-pop__search { display: block; width: calc(100% - 32px); margin: 10px 16px 6px; padding: 6px 12px; border: 1px solid var(--tbk-border); border-radius: var(--tbk-r-xs); background: var(--tbk-surface);
                   font-size: 13px; color: var(--tbk-text); outline: none; }
.tbk-pop__search:focus { border-color: var(--tbk-blue); }
.tbk-pop__empty { display: none; padding: 7px 16px; color: var(--tbk-dd-muted); }
.tbk-pop__empty.is-on { display: block; }
/* «Выбрать все / Снять все» — над списком и в каждой группе */
.tbk-pop__all { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 16px; font-size: 13px; color: var(--tbk-dd-all); }
.tbk-pop__all > span { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.tbk-pop__all > span > i::before { margin-left: 0; margin-right: 0; }   /* без отступов fontello — значок по левому краю, как поле поиска и галочки (20.10.2026) */
.tbk-pop__all > span:hover { color: var(--tbk-text); }
/* цена «от — до ₽» в окне (.price_input_modal) */
.tbk-pop__price { display: flex; align-items: center; gap: 10px; padding: 14px; color: var(--tbk-text); }
.tbk-pop__price input { width: 90px; min-width: 0; flex: 1; padding: 6px 12px; border: 1px solid var(--tbk-border); border-radius: var(--tbk-r-xs); background: var(--tbk-surface); font-size: 13px; color: var(--tbk-text); outline: none; }
.tbk-pop__price input:focus { border-color: var(--tbk-blue); }
/* --full — на телефоне (≤600) на весь экран: первый заголовок (tbk-pop__head, у меток tbk-lmark-pop__title) — 16/600 с чертой, справа крестик .tbk-pop__x (закрывает — kit.js);
   шире — обычный список, крестика нет. left / top от kit.js перебиты; --tbk-pop-top, --tbk-pop-h — для превью в iframe во всю высоту страницы (ставит стенд, lot-card/variants/lc.js) */
.tbk-pop__x { display: none; }
@media (max-width: 600px) {
    .tbk-pop.tbk-pop--full { position: fixed; top: var(--tbk-pop-top, 0px) !important; left: 0 !important; z-index: 1000; width: 100%; min-width: 0; max-width: none; height: var(--tbk-pop-h, 100%);
                             border-radius: 0; box-shadow: none; overscroll-behavior: contain; }
    .tbk-pop.tbk-pop--full > .tbk-pop__list { flex: 1; max-height: none; }
    .tbk-pop--full > .tbk-pop__head:first-child, .tbk-pop--full > .tbk-lmark-pop__title { margin: 0 0 4px; padding: 15px 56px 15px 16px; border-bottom: 1px solid var(--tbk-line);
                                                                                          font-size: 16px; font-weight: 600; color: var(--tbk-text); }
    .tbk-pop--full.tbk-lmark-pop > .tbk-lmark-pop__title { margin: -6px -6px 6px; }   /* у меток поле окна 6 px — черта во всю ширину */
    .tbk-pop--full > .tbk-pop__x { display: inline-flex; position: absolute; top: 9px; right: 8px; }
}
/* пункт: .listselect-item / .listselect-checkbox__item */
.tbk-opt { display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 14px; color: var(--tbk-dd-text); text-align: left; cursor: pointer; user-select: none; }
.tbk-opt:has(input) { padding-top: 6px; padding-bottom: 6px; }
.tbk-opt:hover, .tbk-opt.sel { background: var(--tbk-dd-hover); }
.tbk-opt input { width: 13px; height: 13px; margin: 0; flex: none; cursor: pointer; }
.tbk-opt > span { flex: 1; min-width: 0; }
.tbk-opt i { font-style: normal; font-size: 13px; color: var(--tbk-dd-muted); white-space: nowrap; }
/* пункт с пояснением и галочкой выбранного — список режимов раздельной кнопки (как «Merge pull request» на GitHub) */
.tbk-opt:has(small) { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
.tbk-opt > span > small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--tbk-dd-muted); white-space: normal; }
.tbk-opt > .tbk-opt__on { visibility: hidden; margin-top: 1px; color: var(--tbk-text); }
.tbk-opt.sel > .tbk-opt__on { visibility: visible; }
/* список выбора на странице (по heroui.com list-box): пункты со значком, названием и пояснением, разделы с заголовком; выбранный — галочка справа;
   выбор одного / нескольких — kit.js [data-tbk-listbox="one|many"], у пункта aria-selected */
.tbk-listbox { display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid var(--tbk-border-btn); border-radius: var(--tbk-r-md); background: var(--tbk-surface); }
.tbk-listbox--bare { padding: 0; border: 0; background: none; }
.tbk-listbox__head { padding: 8px 8px 2px; font-size: 12px; color: var(--tbk-muted); }
.tbk-listbox__sep { height: 1px; margin: 4px 3%; background: var(--tbk-line); }
.tbk-lb { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 32px 6px 8px; border-radius: var(--tbk-r-sm);
          font-size: 14px; color: var(--tbk-text); text-align: left; cursor: pointer; transition: background-color .1s, transform .25s ease; }
.tbk-lb:hover { background: var(--tbk-plate); }
.tbk-lb:active { transform: scale(.98); }
.tbk-lb > .tbk-svg { color: var(--tbk-gray); }
.tbk-lb > span { flex: 1; min-width: 0; }
.tbk-lb small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--tbk-muted); }
/* галочка — как у .tbk-checks--sm (маска 14 px): не выбран — светло-серая, выбран — --tbk-check */
.tbk-lb::after { content: ''; position: absolute; top: 50%; right: 11px; width: 14px; height: 14px; background: var(--tbk-sel);
                 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.4 3.4 7-7.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
                         mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.4 3.4 7-7.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
                 transform: translateY(-50%); transition: background-color .15s; }
.tbk-lb[aria-selected="true"]::after { background: var(--tbk-check); }
.tbk-lb[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* раскрывающаяся группа (федеральный округ, «Юридические лица»): стрелка, название, сколько выбрано */
.tbk-grp__name { display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--tbk-text); cursor: pointer; user-select: none; }
.tbk-grp__name::before { content: ''; flex: none; width: 5px; height: 5px; margin: -3px 1px 0; border-right: 1.6px solid var(--tbk-dd-arrow); border-bottom: 1.6px solid var(--tbk-dd-arrow);
                         transform: rotate(45deg); transition: transform .15s, margin .15s; }
.tbk-grp.open > .tbk-grp__name::before { transform: rotate(-135deg); margin-top: 3px; }
.tbk-grp__name:hover, .tbk-grp.open > .tbk-grp__name { background: var(--tbk-dd-hover); }
.tbk-grp__name > span { flex: 1; min-width: 0; }
.tbk-grp__cnt { font-style: normal; font-weight: 400; font-size: 13px; color: var(--tbk-dd-muted); }
.tbk-grp__body { display: none; padding: 2px 0 4px; }
.tbk-grp.open > .tbk-grp__body { display: block; }
.tbk-grp__body .tbk-opt, .tbk-grp__body .tbk-pop__all { padding-left: 33px; }
/* пункты в группе — плотнее, как регионы в окне на главной (2023/web/css/search.css .selectGroupContent: 13 px, строки через 6 px, галочка — 7 px до названия; 20.10.2026) */
.tbk-grp__body .tbk-opt { gap: 7px; padding-top: 3px; padding-bottom: 3px; font-size: 13px; }
.tbk-grp__body .tbk-pop__all { padding-top: 4px; padding-bottom: 4px; }
/* группа с галочкой всех (--check; слежение «Статус торгов», стенд lot-card, 25.10.2026): слева галочка — все пункты сразу (выбрана часть — неопределённое состояние),
   серым — сколько пунктов, справа «N из M» (только когда выбрана часть) и стрелка — раскрыть; наведение — вся строка, у стрелки — своя квадратная подсветка */
.tbk-grp__head { display: flex; align-items: center; }
.tbk-grp__head:hover, .tbk-grp--check.open > .tbk-grp__head { background: var(--tbk-dd-hover); }
.tbk-grp__head > .tbk-opt { flex: 1; min-width: 0; padding-right: 6px; background: none; }
.tbk-grp__total { margin-left: 2px; }
.tbk-grp__exp { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 10px; padding: 0; border: 0; border-radius: var(--tbk-r-xs); background: none; cursor: pointer; }
.tbk-grp__exp:hover { background: var(--tbk-dd-press); }
.tbk-grp__exp::before { content: ''; width: 5px; height: 5px; margin-top: -3px; border-right: 1.6px solid var(--tbk-dd-arrow); border-bottom: 1.6px solid var(--tbk-dd-arrow); transform: rotate(45deg); transition: transform .15s, margin .15s; }
.tbk-grp--check.open .tbk-grp__exp::before { transform: rotate(-135deg); margin-top: 3px; }
.tbk-grp__exp:hover::before { border-color: var(--tbk-dd-text); }
.tbk-opt.is-hidden, .tbk-grp.is-hidden { display: none; }
/* меню действий «⋯»: кнопка — как .v_dots у папки избранного (2023/web/css/favorite.css); список — обычный tbk-pop с пунктами tbk-opt, значок пункта — fontello */
.tbk-dots { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 12px; height: 24px; font-size: 12px; color: var(--tbk-ico); cursor: pointer; }
.tbk-dots:hover, .tbk-dots.open { color: var(--tbk-navy); }
.tbk-opt > i[class^="icon-"] { flex: none; width: 16px; font-size: 14px; text-align: center; }
.tbk-opt > .tbk-svg { color: var(--tbk-dd-muted); transition: color .1s; }   /* значок набора в пункте меню: серый, при наведении — цветом текста */
.tbk-opt:hover > .tbk-svg { color: var(--tbk-dd-text); }
/* поля «от — до» в строке фильтров: .range-inputs (css/realEstateAnalyticsNew.css) */
.tbk-range { display: inline-grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); width: 296px; max-width: 100%; height: 31px; border: 1px solid var(--tbk-dd-line); border-radius: var(--tbk-r-sm);
             background: var(--tbk-surface); overflow: hidden; }
.tbk-range > i { background: var(--tbk-dd-line); }
.tbk-range input { min-width: 0; padding: 4px 10px; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--tbk-text); }
/* ползунок (по heroui.com slider): системный range в цветах набора; два range — «от — до»; заливку, связь с полями и <output> ставит kit.js [data-tbk-slider] */
.tbk-slider { --a: 0; --b: 0; position: relative; display: block; width: 100%; height: 20px; }
.tbk-slider::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 2px;
    background: linear-gradient(to right, var(--tbk-plate) calc(9px + (100% - 18px) * var(--a)), var(--tbk-blue) 0, var(--tbk-blue) calc(9px + (100% - 18px) * var(--b)), var(--tbk-plate) 0); }
.tbk-slider > input { position: absolute; left: 0; top: 0; width: 100%; height: 20px; margin: 0; background: none; outline: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
.tbk-slider > input::-webkit-slider-runnable-track { height: 20px; background: none; }
.tbk-slider > input::-moz-range-track { height: 20px; background: none; }
.tbk-slider > input::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--tbk-sel); border-radius: 50%; background: var(--tbk-surface); box-shadow: var(--tbk-sh-hover);
                                            cursor: grab; pointer-events: auto; -webkit-appearance: none; appearance: none; transition: box-shadow .15s; }
.tbk-slider > input::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border: 1px solid var(--tbk-sel); border-radius: 50%; background: var(--tbk-surface); box-shadow: var(--tbk-sh-hover); cursor: grab; pointer-events: auto; }
.tbk-slider > input:hover::-webkit-slider-thumb, .tbk-slider > input:focus-visible::-webkit-slider-thumb { box-shadow: var(--tbk-sh-sel); }
.tbk-slider > input:focus-visible::-webkit-slider-thumb { border-color: var(--tbk-blue); }
.tbk-slider > input:focus-visible::-moz-range-thumb { border-color: var(--tbk-blue); }
.tbk-slider > input:disabled::-webkit-slider-thumb { cursor: default; box-shadow: none; }
.tbk-slider:has(input:disabled) { opacity: .45; }
.tbk-slider__marks { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--tbk-muted); font-variant-numeric: tabular-nums; }
.tbk-slider-box { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; }
.tbk-slider-box > .tbk-row { justify-content: space-between; flex-wrap: nowrap; }
.tbk-slider-box output { font-size: 14px; font-weight: 500; color: var(--tbk-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbk-slider-box > .tbk-range { width: 100%; }

/* =================================== Переключатель (.ma_seg) =================================== */
.tbk-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--tbk-r-sm); background: var(--tbk-plate); }
.tbk-seg > button, .tbk-seg > a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--tbk-r-xs); font-size: 13px; color: var(--tbk-text-2); cursor: pointer; transition: background .15s, color .15s; }
.tbk-seg > button:hover, .tbk-seg > a:hover { color: var(--tbk-text); }
.tbk-seg > .active { background: var(--tbk-surface); color: var(--tbk-text); font-weight: 500; box-shadow: var(--tbk-sh-seg); }

/* =================================== Вкладки =================================== */
/* кнопками: белые; выбранная — рамка --tbk-sel + тень --tbk-sh-sel, 600 (21.10.2026, было — заливка #2E3C54); бейдж во вкладке — мягкий красный */
.tbk-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tbk-tab { display: inline-flex; align-items: baseline; gap: 6px; min-height: 32px; padding: 6px 12px; border: 1px solid var(--tbk-border-btn); border-radius: var(--tbk-r-xs); background: var(--tbk-surface);
           font-size: 14px; color: var(--tbk-text-2); cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.tbk-tab small { font-size: 12px; color: var(--tbk-muted); }
.tbk-tab:hover { border-color: var(--tbk-sel); box-shadow: var(--tbk-sh-hover); color: var(--tbk-text); }
.tbk-tab.active { border-color: var(--tbk-sel); box-shadow: var(--tbk-sh-sel); color: var(--tbk-text); font-weight: 600; }
.tbk-tab .tbk-badge { align-self: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.tbk-tabs > .tbk-tab[hidden], .tbk-tabs-fold[hidden] { display: none; }
/* действие во вкладке справа за чертой на всю высоту, как связанная кнопка («Изменить фильтр» — карандаш): .tbk-tab__act[role=button][data-tbk-tab-act];
   нажатие не выбирает вкладку, событие tbk:change {group: id вкладок, value: data-tbk-tab-act, tab: data-value вкладки} (kit.js, 21.10.2026) */
.tbk-tab__act { display: inline-flex; align-items: center; align-self: stretch; margin: -6px -12px -6px 2px; padding: 0 9px; border-left: 1px solid var(--tbk-border-btn);
                border-radius: 0 var(--tbk-r-xs) var(--tbk-r-xs) 0; color: var(--tbk-muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tbk-tab:hover > .tbk-tab__act, .tbk-tab.active > .tbk-tab__act { border-left-color: var(--tbk-sel); }
.tbk-tab__act:hover { background: var(--tbk-hover); color: var(--tbk-text); }
/* свернуть в N строк: .tbk-tabs[data-tbk-rows] + кнопка .tbk-tabs-fold[data-tbk-fold] — «Показать все … (N)» / «Свернуть», по левому краю (kit.js, 21.10.2026) */
.tbk-tabs-fold { align-self: flex-start; margin-top: 8px; }
.tbk-tabs-fold > .tbk-svg { transition: transform .15s; }
.tbk-tabs-fold[aria-expanded="true"] > .tbk-svg { transform: rotate(180deg); }
/* линией (разделы страницы) */
.tbk-tabs--line { gap: 24px; border-bottom: 1px solid var(--tbk-line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tbk-tabs--line::-webkit-scrollbar { display: none; }
.tbk-tabs--line .tbk-tab { flex: none; min-height: 0; padding: 8px 0 10px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; }
.tbk-tabs--line .tbk-tab.active { background: none; color: var(--tbk-text); border-bottom-color: var(--tbk-blue); font-weight: 600; }
.tbk-tabs--line .tbk-tab.active small { color: var(--tbk-muted); }
/* по heroui.com tabs: --pill — серая подложка, выбранная белая с тенью; --full — на всю ширину поровну; --sep — черта между вкладками;
   --vertical — столбиком (у --line черта слева); .tbk-tabs-scroll — стрелки и затухание краёв; панели — .tbk-tabset + .tbk-tabpanel (aria-controls).
   Плашка / черта выбранной переезжает: kit.js ставит .tbk-tabs__ind и .is-slide, без JS — фон и черта у самой .active */
.tbk-tab:disabled, .tbk-tab[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.tbk-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--tbk-blue) 25%, transparent); outline-offset: 1px; }
.tbk-tabs--pill { position: relative; isolation: isolate; display: inline-flex; flex-wrap: nowrap; gap: 0; max-width: 100%; padding: 4px; border-radius: var(--tbk-r-pill); background: var(--tbk-plate);
                  overflow-x: auto; scrollbar-width: none; vertical-align: top; }
.tbk-tabs--pill::-webkit-scrollbar { display: none; }
.tbk-tabs--pill .tbk-tab { position: relative; z-index: 1; flex: none; align-items: center; justify-content: center; min-height: 32px; padding: 0 16px; border: 0; border-radius: var(--tbk-r-pill);
                           background: none; font-weight: 500; color: var(--tbk-gray); white-space: nowrap; transition: color .15s, background-color .15s, box-shadow .15s; }
.tbk-tabs--pill .tbk-tab:hover { box-shadow: none; color: var(--tbk-text); }
.tbk-tabs--pill .tbk-tab.active { background: var(--tbk-surface); color: var(--tbk-text); box-shadow: var(--tbk-sh-seg); }
.tbk-tabs--pill .tbk-tab.active small { color: var(--tbk-muted); }
.tbk-tabs--full { display: flex; }
.tbk-tabs--full > .tbk-tab { flex: 1 0 auto; }
.tbk-tabs--sep .tbk-tab + .tbk-tab::before { content: ''; position: absolute; left: 0; top: 25%; width: 1px; height: 50%; background: var(--tbk-sel); transition: opacity .15s; }
.tbk-tabs--sep .tbk-tab.active::before, .tbk-tabs--sep .tbk-tab.active + .tbk-tab::before { opacity: 0; }   /* у выбранной и следующей — без черты */
.tbk-tabs--vertical { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.tbk-tabs--vertical .tbk-tab { justify-content: flex-start; }
.tbk-tabs--pill.tbk-tabs--vertical { display: flex; gap: 4px; border-radius: calc(var(--tbk-r-md) * 2); overflow: visible; }
.tbk-tabs--line.tbk-tabs--vertical { gap: 0; border-bottom: 0; border-left: 1px solid var(--tbk-line); overflow: visible; }
.tbk-tabs--line.tbk-tabs--vertical .tbk-tab { padding: 7px 16px 7px 14px; margin: 0 0 0 -1px; border-bottom: 0; border-left: 2px solid transparent; }
.tbk-tabs--line.tbk-tabs--vertical .tbk-tab.active { border-left-color: var(--tbk-blue); }
/* переезжающая плашка / черта */
.tbk-tabs--line { position: relative; isolation: isolate; }
.tbk-tabs__ind { position: absolute; left: 0; top: 0; z-index: 0; width: var(--w, 0); height: var(--h, 0); transform: translate(var(--x, 0), var(--y, 0)); pointer-events: none; }
.tbk-tabs.is-ready > .tbk-tabs__ind { transition: transform .25s cubic-bezier(.22, 1, .36, 1), width .25s cubic-bezier(.22, 1, .36, 1), height .25s cubic-bezier(.22, 1, .36, 1); }
.tbk-tabs--pill > .tbk-tabs__ind { border-radius: var(--tbk-r-pill); background: var(--tbk-surface); box-shadow: var(--tbk-sh-seg); }
.tbk-tabs--pill.is-slide .tbk-tab.active { background: none; box-shadow: none; }
.tbk-tabs--line > .tbk-tabs__ind { top: auto; bottom: 0; height: 2px; transform: translateX(var(--x, 0)); background: var(--tbk-blue); }
.tbk-tabs--line.tbk-tabs--vertical > .tbk-tabs__ind { top: 0; bottom: auto; left: -1px; width: 2px; height: var(--h, 0); transform: translateY(var(--y, 0)); }
.tbk-tabs--line.is-slide .tbk-tab.active { border-bottom-color: transparent; border-left-color: transparent; }
/* размер --sm (21.10.2026, период ленты «История» monitoring-new): кнопками — 28 px, отступы 4 / 10; --pill — вкладки 26 px в подложке 3 px (всего 32); --line — отступы 6 / 8; шрифт 13 px */
.tbk-tabs--sm > .tbk-tab { min-height: 28px; padding: 4px 10px; font-size: 13px; }
.tbk-tabs--sm > .tbk-tab > .tbk-tab__act { margin: -4px -10px -4px 2px; padding: 0 7px; }
.tbk-tabs--pill.tbk-tabs--sm { padding: 3px; }
.tbk-tabs--pill.tbk-tabs--sm > .tbk-tab { min-height: 26px; padding: 0 12px; }
.tbk-tabs--line.tbk-tabs--sm { gap: 20px; }
.tbk-tabs--line.tbk-tabs--sm > .tbk-tab { min-height: 0; padding: 6px 0 8px; }
@media (prefers-reduced-motion: reduce) { .tbk-tabs.is-ready > .tbk-tabs__ind { transition: none; } }
/* не помещаются — прокрутка вбок, стрелки и затухание краёв (kit.js ставит кнопки и .can-prev / .can-next) */
.tbk-tabs-scroll { position: relative; display: flex; max-width: 100%; min-width: 0; }
.tbk-tabs-scroll > .tbk-tabs { flex: 0 1 auto; min-width: 0; }
.tbk-tabs-scroll > .tbk-tabs--line, .tbk-tabs-scroll > .tbk-tabs--full { flex: 1 1 auto; }
.tbk-tabs-scroll.can-prev > .tbk-tabs { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px); mask-image: linear-gradient(to right, transparent 0, #000 40px); }
.tbk-tabs-scroll.can-next > .tbk-tabs { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 40px); mask-image: linear-gradient(to left, transparent 0, #000 40px); }
.tbk-tabs-scroll.can-prev.can-next > .tbk-tabs { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent); }
.tbk-tabs-scroll__btn { position: absolute; top: 50%; z-index: 2; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
                        background: none; color: var(--tbk-text); transform: translateY(-50%); cursor: pointer; transition: opacity .15s; }
.tbk-tabs-scroll__btn:hover { opacity: .7; }
.tbk-tabs-scroll__btn--prev { left: 2px; }
.tbk-tabs-scroll__btn--next { right: 2px; }
.tbk-tabs-scroll.can-prev > .tbk-tabs-scroll__btn--prev, .tbk-tabs-scroll.can-next > .tbk-tabs-scroll__btn--next { display: inline-flex; }
/* вкладки с панелями: панель — .tbk-tabpanel с id из aria-controls вкладки; --vertical — вкладки слева */
.tbk-tabset { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.tbk-tabset > .tbk-tabs--line, .tbk-tabset > .tbk-tabs--full, .tbk-tabset > .tbk-tabs-scroll, .tbk-tabset > .tbk-tabpanel { align-self: stretch; }
.tbk-tabset--vertical { flex-direction: row; }
.tbk-tabset--vertical > .tbk-tabs { flex: none; }
.tbk-tabset--vertical > .tbk-tabpanel { flex: 1; align-self: auto; }
.tbk-tabpanel { min-width: 0; font-size: 14px; line-height: 20px; color: var(--tbk-text-2); }
.tbk-tabpanel[hidden] { display: none; }

/* =================================== Пагинация ===================================
   размеры и разметка — как .paginator (2023/view/paginator.twig, 2023/web/css/main.css); активная — тёмно-синяя заливка, наведение — тенью:
   по style.md салатовый не для выделения и ховера (боевая салатовая — «Боевые элементы») */
.tbk-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.tbk-pager__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.tbk-pager__pages a { display: block; box-sizing: border-box; min-width: 32px; padding: 6px 11px; text-align: center; border: 1px solid var(--tbk-border-btn); border-radius: var(--tbk-r); background: var(--tbk-surface); box-shadow: var(--tbk-sh-pager);
                      font-size: 14px; line-height: 18px; color: var(--tbk-muted); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.tbk-pager__pages a:hover { border-color: var(--tbk-lime); background: var(--tbk-lime); color: var(--tbk-text); }   /* как .paginator li a:hover (2023/web/css/main.css) */
.tbk-pager__pages .active a { border-color: var(--tbk-lime); background: var(--tbk-lime); box-shadow: 0 4px 9px rgba(23, 19, 33, .07); color: var(--tbk-text); font-weight: 500; }
.tbk-pager__gap { padding: 0 2px; color: var(--tbk-muted); }
.tbk-pager__count { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tbk-gray); }
.tbk-pager__count > .tbk-dd { min-width: 68px; }   /* «100» помещается — ширина не скачет при смене значения */
.tbk-pager--lots { padding-right: 38px; }   /* под списком tbk-lot — «Выводить по» по правому краю карточки, а не колонки действий (как на главной) (20.10.2026, #2427) */
@media (max-width: 768px) { .tbk-pager__count > span { display: none; } .tbk-pager--lots { padding-right: 0; } }
@media (max-width: 600px) { .tbk-pager__pages { gap: 4px; } .tbk-pager__pages a { min-width: 30px; padding: 5px 6px; } }   /* квадраты 30 × 30; 9 номеров — в одну строку на 360 */

/* =================================== Чипы (whats-new) и плашки статусов (lk-bidders) =================================== */
.tbk-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--tbk-border-btn); border-radius: var(--tbk-r-pill); background: var(--tbk-surface);
            font-size: 14px; color: var(--tbk-text-2); white-space: nowrap; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tbk-chip:hover { border-color: #C9D0DC; box-shadow: var(--tbk-sh-hover); }
.tbk-chip i { font-style: normal; color: var(--tbk-muted); }
.tbk-chip--sm { height: 28px; padding: 0 10px; font-size: 13px; }
/* варианты (по heroui.com chip): --gray — серая подложка без рамки, --ghost — без фона, --soft — бледная заливка цветом (--blue по умолчанию,
   --green / --orange / --red / --violet), цветной текст; --xs — 24 px; значок слева — tbk-svg, крестик справа — tbk-chip__x */
.tbk-chip--gray { background: var(--tbk-plate); border-color: transparent; }
.tbk-chip--gray:hover { background: var(--tbk-border-btn); border-color: transparent; box-shadow: none; }
.tbk-chip--ghost { background: none; border-color: transparent; }
.tbk-chip--ghost:hover { background: var(--tbk-plate); border-color: transparent; box-shadow: none; }
.tbk-chip--soft { --c: var(--tbk-blue); background: color-mix(in srgb, var(--c) 12%, #fff); border-color: transparent; color: var(--c); }
.tbk-chip--soft:hover { background: color-mix(in srgb, var(--c) 18%, #fff); border-color: transparent; box-shadow: none; }
.tbk-chip--soft i { color: inherit; opacity: .7; }
.tbk-chip--green { --c: var(--tbk-green); }   .tbk-chip--orange { --c: var(--tbk-orange); }   .tbk-chip--red { --c: var(--tbk-red); }   .tbk-chip--violet { --c: var(--tbk-violet); }
.tbk-chip--xs { height: 24px; padding: 0 8px; gap: 4px; font-size: 12px; }
.tbk-chip > .tbk-svg { margin-left: -2px; }
.tbk-chip__x { display: inline-flex; align-items: center; justify-content: center; margin-right: -6px; padding: 2px; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .55; cursor: pointer; }
.tbk-chip__x:hover { opacity: 1; background: rgba(31, 31, 31, .08); }
.tbk-chip.active, .tbk-chip.active:hover { background: var(--tbk-surface); border-color: var(--tbk-sel); color: var(--tbk-text); box-shadow: var(--tbk-sh-sel); }   /* выбранный — белый с рамкой и тенью (style.md, 20.10.2026), поверх вариантов */
/* выбранные фильтры под строкой поиска (2023/view/search/param_tabs.twig, .underSearchRow.filled_buttons в 2023/web/css/search.css): нажатие — сброс фильтра */
.tbk-params { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.tbk-param { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 13px; border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-sm); background: var(--tbk-surface);
             box-shadow: var(--tbk-sh-card); font-size: 14px; line-height: 20px; color: var(--tbk-text); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tbk-param:hover { border-color: var(--tbk-sel); box-shadow: var(--tbk-sh-hover); }
.tbk-param__k { flex: none; font-size: 13px; color: var(--tbk-muted); }
.tbk-param__v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbk-param > i { flex: none; font-size: 10px; color: var(--tbk-close); }
.tbk-param:hover > i { color: var(--tbk-blue); }
.tbk-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tbk-muted); }

.tbk-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--tbk-r-pill); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap;
            background: var(--tbk-plate); color: var(--tbk-gray); }
.tbk-pill--ok { background: rgba(54, 146, 54, .12); color: var(--tbk-green); }
.tbk-pill--info { background: rgba(21, 108, 225, .1); color: var(--tbk-blue); }
.tbk-pill--wait { background: rgba(116, 86, 168, .1); color: var(--tbk-violet); }
.tbk-pill--error { background: rgba(235, 69, 99, .12); color: var(--tbk-red); }
.tbk-pill--warn { background: rgba(255, 140, 0, .12); color: var(--tbk-orange); }
.tbk-pill--dark { background: var(--tbk-navy); color: #fff; }
.tbk-pill--sale { background: var(--tbk-red); color: #fff; border-radius: var(--tbk-r-xs); padding: 2px 6px; }
/* процент, скидка «−12%» / «+8%» — форма .price_percent (2023/web/css/lot.css:260): скругление 4, 12/600, строка 19; прозрачный фон цвета цифр, как .lot-card-was__pct (21.10.2026) */
.tbk-pill--pct-red, .tbk-pill--pct-green { padding: 0 5px; border-radius: var(--tbk-r-xs); line-height: 19px; }
.tbk-pill--pct-red { background: color-mix(in srgb, var(--tbk-red) 18%, transparent); color: var(--tbk-red); }
.tbk-pill--pct-green { background: color-mix(in srgb, var(--tbk-green) 18%, transparent); color: var(--tbk-green); }
.tbk-pill--sm { padding: 1px 8px; font-size: 11px; line-height: 13px; }                                    /* «Это устройство», «Завершён» (lk-profile) */
/* метка раздела над заголовком: ПОИСК, КАРТА (whats-new .wn_tag) */
.tbk-tag { display: inline-block; padding: 3px 8px; border-radius: var(--tbk-r-xs); background: var(--tbk-plate); color: var(--tbk-value);
           font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tbk-tag--blue   { background: color-mix(in srgb, var(--tbk-blue) 12%, #fff);   color: var(--tbk-blue); }
.tbk-tag--green  { background: color-mix(in srgb, var(--tbk-green) 12%, #fff);  color: var(--tbk-green); }
.tbk-tag--orange { background: color-mix(in srgb, var(--tbk-orange) 12%, #fff); color: var(--tbk-orange); }
.tbk-tag--violet { background: color-mix(in srgb, var(--tbk-violet) 12%, #fff); color: var(--tbk-violet); }
.tbk-tag--red    { background: color-mix(in srgb, var(--tbk-red) 12%, #fff);    color: var(--tbk-red); }
/* «живой» счётчик: пульсирующая точка (/about .about_wincount_pill) */
.tbk-live { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--tbk-text-2); }
.tbk-live__dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--tbk-green); }
.tbk-live__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--tbk-green); animation: tbkPulse 1.8s ease-out infinite; }
.tbk-live b { font-weight: 500; color: var(--tbk-text); white-space: nowrap; }
@keyframes tbkPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tbk-live__dot::after { animation: none; } }

/* =================================== Бейдж с числом ===================================
   число в углу значка, аватара, кнопки — как .counter колокольчика (2023/web/css/head.css: #FF3347, 18 px, белый 600); в кнопке — как #map .counter (css/map2.css);
   варианты — по heroui.com badge. Обёртка .tbk-badged — у чего бейдж; без обёртки бейдж стоит в строке. Пустой (кроме точки) скрыт */
.tbk-badged { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
/* цифры Lab Grotesque 600 при line-height 1 — на .0275em выше середины (замер 21.10.2026: цифры .005–.74em над базовой линией, ascent .94, descent .26): отступ сверху .055em опускает их в центр круга при любом размере (было 2 / 2 / 1 px по размерам — на 11 px ниже центра на 0,4 px, на 9 и 12 px выше) */
.tbk-badge { --c: var(--tbk-counter); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: none; min-width: 18px; height: 18px; padding: .055em 5px 0;
             border-radius: var(--tbk-r-pill); background: var(--c); color: #fff; font-size: 11px; font-weight: 600; font-style: normal; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbk-badge:empty:not(.tbk-badge--dot) { display: none; }
.tbk-badged > .tbk-badge { position: absolute; z-index: 1; top: var(--y, 0); right: var(--x, 0); transform: translate(50%, -50%); box-shadow: 0 0 0 2px var(--tbk-surface); }
.tbk-badged > .tbk-badge--tl { right: auto; left: var(--x, 0); transform: translate(-50%, -50%); }
.tbk-badged > .tbk-badge--br { top: auto; bottom: var(--y, 0); transform: translate(50%, 50%); }
.tbk-badged > .tbk-badge--bl { top: auto; right: auto; bottom: var(--y, 0); left: var(--x, 0); transform: translate(-50%, 50%); }
.tbk-badged--round > .tbk-badge { --x: 14.6%; --y: 14.6%; }                                               /* у круга (аватар) — на окружности */
.tbk-badged--in > .tbk-badge { --x: 6px; --y: 6px; }                                                      /* внутрь угла: значок в кнопке 32 px, как колокольчик */
.tbk-badge--soft.tbk-badge--blue { --c: var(--tbk-blue); }   /* синий — только мягкий: залитого синего нет (19.10.2026) */
.tbk-badge--navy { --c: var(--tbk-navy); }    .tbk-badge--green { --c: var(--tbk-green-2); }
.tbk-badge--orange { --c: var(--tbk-bonus); } .tbk-badge--gray { --c: var(--tbk-muted); }
.tbk-badge--soft { background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.tbk-badge--soft.tbk-badge--gray { background: var(--tbk-plate); color: var(--tbk-gray); }
.tbk-badge--white, .tbk-btn--dark .tbk-badge, .tbk-btn[aria-pressed="true"] .tbk-badge, .tbk-btns > .tbk-btn.active .tbk-badge { background: var(--tbk-surface); color: var(--tbk-text-2); }   /* на тёмной, нажатой и выбранной в группе — как #map .counter у активной */
.tbk-badge--sm { min-width: 14px; height: 14px; padding: .055em 4px 0; font-size: 9px; }
.tbk-badge--lg { min-width: 22px; height: 22px; padding: .055em 7px 0; font-size: 12px; }
.tbk-badge--dot { min-width: 0; width: 10px; height: 10px; padding: 0; }
.tbk-badge--dot.tbk-badge--sm { width: 8px; height: 8px; }
.tbk-badge--dot.tbk-badge--lg { width: 12px; height: 12px; }

/* =================================== Плитки с числом (.ma_tile) =================================== */
.tbk-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 96px; padding: 14px 16px; text-align: left;
            background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-md); box-shadow: var(--tbk-sh-card); color: var(--tbk-text); }
:where(button, a).tbk-tile { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
:where(button, a).tbk-tile:hover, .tbk-tile.active { border-color: var(--tbk-sel); box-shadow: var(--tbk-sh-sel); }
.tbk-tile.active .tbk-tile__name { color: var(--tbk-text); font-weight: 600; }
.tbk-tile__name { font-size: 13px; line-height: 1.3; color: var(--tbk-gray); }
.tbk-tile__val { margin-top: 8px; font-size: 24px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.tbk-tile__sub { font-size: 12px; color: var(--tbk-muted); }
.tbk-bar { display: block; width: 100%; height: 4px; margin: 8px 0 4px; border-radius: 50px; background: var(--tbk-plate); overflow: hidden; }
.tbk-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--tbk-blue); }
/* индикатор выполнения (по heroui.com progress-bar): подпись и значение над полосой, заполненность — --v (0–100) в style; без aria-valuenow — бегущая полоса 40 %;
   цвет --c: синий, --green / --orange / --red / --check; полоса 8 px, --sm 4, --lg 12. Прежний вид «Прогресс 3/12» анкеты (pages/questionnaire.php) заменён 19.10.2026 */
.tbk-progress { --v: 0; --c: var(--tbk-blue); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; width: 100%; font-size: 13px; color: var(--tbk-text-2); }
.tbk-progress__label { font-weight: 500; }
.tbk-progress__value { font-weight: 500; color: var(--tbk-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbk-progress__track { position: relative; grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 4px; background: var(--tbk-plate); }
.tbk-progress__track::before { content: ''; position: absolute; top: 0; left: 0; width: calc(var(--v) * 1%); height: 100%; border-radius: inherit; background: var(--c); transition: width .3s ease-out; }
.tbk-progress:not([aria-valuenow]) .tbk-progress__track::before { width: 40%; animation: tbk-progress-run 1.5s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes tbk-progress-run { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .tbk-progress__track::before { transition: none; } .tbk-progress:not([aria-valuenow]) .tbk-progress__track::before { animation: none; } }
.tbk-progress--sm .tbk-progress__track { height: 4px; border-radius: 2px; }
.tbk-progress--lg .tbk-progress__track { height: 12px; border-radius: 6px; }
/* шкала (по heroui.com meter): подпись и значение над полосой; заполненность — --v (0–100) в style; цвет --c: синий, --green / --orange / --red / --check;
   полоса 8 px, --sm 4, --lg 12 */
.tbk-meter { --v: 0; --c: var(--tbk-blue); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; width: 100%; font-size: 13px; color: var(--tbk-text-2); }
.tbk-meter__label { font-weight: 500; }
.tbk-meter__value { font-weight: 500; color: var(--tbk-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbk-meter__track { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 4px; background: var(--tbk-plate); }
.tbk-meter__track::before { content: ''; display: block; width: calc(var(--v) * 1%); height: 100%; border-radius: inherit; background: var(--c); transition: width .3s ease-out; }
.tbk-meter--sm .tbk-meter__track { height: 4px; border-radius: 2px; }
.tbk-meter--lg .tbk-meter__track { height: 12px; border-radius: 6px; }
.tbk-meter--green, .tbk-ring--green, .tbk-progress--green { --c: var(--tbk-green-2); }   .tbk-meter--orange, .tbk-ring--orange, .tbk-progress--orange { --c: var(--tbk-bonus); }
.tbk-meter--red, .tbk-ring--red, .tbk-progress--red { --c: var(--tbk-red); }           .tbk-meter--check, .tbk-ring--check, .tbk-progress--check { --c: var(--tbk-check); }
/* круговой прогресс (по heroui.com progress-circle): SVG-кольцо со скруглёнными концами (kit.js ставит svg сам), --v — 0–100, цвет — как у tbk-meter;
   28 px, --sm 20, --lg 36; подпись — <span> рядом; без aria-valuenow — крутится (неизвестно сколько) */
.tbk-ring { --v: 0; --c: var(--tbk-blue); display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tbk-text-2); vertical-align: middle; }
.tbk-ring > svg { flex: none; width: 28px; height: 28px; transform: rotate(-90deg); fill: none; stroke-width: 4; stroke-linecap: round; }
.tbk-ring > svg > circle:first-child { stroke: var(--tbk-border-btn); }
.tbk-ring > svg > circle + circle { stroke: var(--c); stroke-dasharray: var(--v) 100; transition: stroke-dasharray .3s ease-out; }
.tbk-ring--sm > svg { width: 20px; height: 20px; }
.tbk-ring--lg > svg { width: 36px; height: 36px; }
.tbk-ring:not([aria-valuenow]) { --v: 25; }
.tbk-ring:not([aria-valuenow]) > svg { animation: tbk-ring-spin 1s linear infinite; }
@keyframes tbk-ring-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) { .tbk-ring > svg { animation: none !important; } }
.tbk-scroll-x { display: flex; flex-wrap: wrap; gap: 10px; }
.tbk-scroll-x::-webkit-scrollbar { display: none; }
.tbk-scroll-x > * { flex: none; }
@media (max-width: 600px) { .tbk-scroll-x { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } }

/* =================================== Пары «подпись — значение» =================================== */
/* строка: подпись слева, значение справа (.ma_kv) */
.tbk-kv { display: grid; grid-template-columns: minmax(0, 1fr); }
.tbk-kv > * { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--tbk-line-2); font-size: 14px; color: var(--tbk-gray); }
.tbk-kv > *:last-child { border-bottom: 0; }
.tbk-kv b { flex: none; font-weight: 600; color: var(--tbk-text); white-space: nowrap; }
.tbk-kv span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* поля: подпись над значением, в строку (lk-bidders .ub_fields) */
.tbk-fields { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; }
.tbk-fields > div { min-width: 0; }
.tbk-fields dt { margin: 0 0 2px; font-size: 12px; color: var(--tbk-muted); }
.tbk-fields dd { margin: 0; font-size: 14px; color: var(--tbk-value); }
.tbk-fields--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
@media (max-width: 600px) { .tbk-fields--grid { grid-template-columns: minmax(0, 1fr); } }

/* =================================== Таблица / список строк (agents) =================================== */
.tbk-table { background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-md); box-shadow: var(--tbk-sh-card); overflow: hidden; }
.tbk-table__head, .tbk-table__row { display: grid; grid-template-columns: var(--tbk-cols-tpl, minmax(0, 1fr) auto); align-items: center; gap: 16px; padding: 14px 20px; }
.tbk-table__head { padding-top: 12px; padding-bottom: 12px; font-size: 13px; color: var(--tbk-muted); border-bottom: 1px solid var(--tbk-line-2); }
.tbk-table__row { border-top: 1px solid var(--tbk-line-2); font-size: 14px; color: var(--tbk-text-2); }
.tbk-table__head + .tbk-table__row, .tbk-table > .tbk-table__row:first-child { border-top: 0; }
:where(a, button).tbk-table__row, .tbk-table__row--link { cursor: pointer; text-align: left; width: 100%; }
:where(a, button).tbk-table__row:hover, .tbk-table__row--link:hover { background: var(--tbk-hover); }
.tbk-table__row.is-selected { background: var(--tbk-sel-bg); }
.tbk-right { text-align: right; justify-self: end; }
/* выбор строк: «Выбрать все», «N выбрано», кнопки неактивны без выбора — как панель кабинета брокера (view/cabinet/portfolio.twig, js/cabinet.js checkSelectLots);
   поведение — kit.js: обёртка [data-tbk-bulk], отметка «все» [data-tbk-rows-all], строки [data-tbk-row], кнопки [data-tbk-bulk-act] */
.tbk-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.tbk-bulk__cnt { font-size: 13px; color: var(--tbk-muted); }
.tbk-bulk__cnt:empty { display: none; }
.tbk-table__head > input[type=checkbox], .tbk-table__row > input[type=checkbox] { width: 13px; height: 13px; margin: 0; cursor: pointer; }
/* сортировка по колонке: две стрелки, выбранная темнее — как .sortable рейтинга победителей (view/analitika/winner_table/table.twig, css/analitika.css), стенд agents;
   kit.js: .is-asc / .is-desc, у таблицы с data-tbk-sort — сортирует строки по data-value ячейки (нет — по тексту) */
.tbk-th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; cursor: pointer; user-select: none; }
.tbk-th-sort:hover { color: var(--tbk-text-2); }
.tbk-th-sort svg path { fill: var(--tbk-ico); }
.tbk-th-sort.is-asc svg path:first-child, .tbk-th-sort.is-desc svg path:last-child { fill: var(--tbk-dd-muted); }
@media (max-width: 600px) { .tbk-table__head, .tbk-table__row { padding-left: 14px; padding-right: 14px; } }

/* =================================== Состояния, уведомления =================================== */
.tbk-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 24px; text-align: center; }
.tbk-empty > p { max-width: 460px; margin: 0; }
.tbk-empty__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--tbk-plate); color: var(--tbk-muted); display: flex; align-items: center; justify-content: center; }
.tbk-empty__title { font-size: 20px; font-weight: 600; color: var(--tbk-text); }
.tbk-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--tbk-r); font-size: 14px; line-height: 1.45; color: var(--tbk-text-2); background: rgba(21, 108, 225, .06); }
.tbk-note--warn { background: #FFF8E1; border: 1px solid #F5E3A3; }
.tbk-note--error { background: rgba(235, 69, 99, .1); }
.tbk-note--ok { background: rgba(54, 146, 54, .1); }
.tbk-note--quote { background: var(--tbk-plate); border-left: 3px solid var(--tbk-navy); font-size: 13px; line-height: 20px; color: var(--tbk-text); }   /* error-tickets .et_callout */
/* белый вариант — по heroui.com alert (21.10.2026): белая карточка с тенью, значок и заголовок цветом статуса, текст серым, кнопки справа (не помещаются — под текстом);
   с --error / --warn / --ok / без статуса (синий значок). Разметка: значок, tbk-note__text (tbk-note__title + p), tbk-note__btns; текст и кнопки — в tbk-note__main */
.tbk-note--card { gap: 12px; padding: 12px 16px; border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-lg); background: var(--tbk-surface); box-shadow: var(--tbk-sh-hover);
                  line-height: 20px; color: var(--tbk-gray); }
.tbk-note--card > .tbk-svg { flex: none; margin-top: 2px; color: var(--tbk-blue); }
.tbk-note--card.tbk-note--error > .tbk-svg, .tbk-note--card.tbk-note--error .tbk-note__title { color: var(--tbk-red); }
.tbk-note--card.tbk-note--warn > .tbk-svg, .tbk-note--card.tbk-note--warn .tbk-note__title { color: var(--tbk-orange); }
.tbk-note--card.tbk-note--ok > .tbk-svg, .tbk-note--card.tbk-note--ok .tbk-note__title { color: var(--tbk-green); }
.tbk-note__main { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-width: 0; }
.tbk-note__text { flex: 1 1 240px; min-width: 0; }
.tbk-note__text p { margin: 0; }
.tbk-note__text p + p { margin-top: 2px; }
.tbk-note__text .tbk-note__title { font-weight: 600; color: var(--tbk-text); }
.tbk-note__btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* предложение в карточке: значок + текст + кнопка (lk-profile .pf_offer) */
.tbk-promo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--tbk-ok-line); border-radius: var(--tbk-r); background: var(--tbk-surface); }
.tbk-promo__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 14px; color: var(--tbk-text); }
.tbk-promo__text b { font-weight: 600; }
.tbk-promo__text span { font-size: 13px; line-height: 18px; color: var(--tbk-value); }
/* на ≤576 кнопка — строкой ниже под текстом (значок 36 + отступ 12) */
@media (max-width: 576px) { .tbk-promo { flex-wrap: wrap; } .tbk-promo__text { flex-basis: calc(100% - 48px); } .tbk-promo > .tbk-btn { margin-left: 48px; } }
/* строка-приглашение: что даёт функция тарифа выше — значок и текст 13 px, справа ссылка «что даёт тариф выше» (tbk-link--sm --icon + lock); не влезла — ссылка строкой ниже.
   Строка 30 px; в карточке лота (tbk-lot__row) — без своих полей, как строка задач. На ≤600 текст переносится, ссылка — под ним слева */
.tbk-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.tbk-lot__row.tbk-invite { gap: 0 16px; padding: 0; }
.tbk-invite__text { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; line-height: 30px; color: var(--tbk-text); }
.tbk-invite__text > .tbk-svg { flex: none; color: var(--tbk-muted); }
.tbk-invite > .tbk-link { margin-left: auto; line-height: 30px; white-space: nowrap; }
@media (max-width: 600px) {
    .tbk-invite__text { align-items: flex-start; padding-top: 6px; line-height: 18px; }
    .tbk-invite__text > .tbk-svg { margin-top: 2px; }
    .tbk-invite > .tbk-link { margin-left: 0; white-space: normal; }
}
.tbk-toast { display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px; border-radius: var(--tbk-r-pill); background: var(--tbk-toast-bg); color: #fff; font-size: 14px; box-shadow: var(--tbk-sh-sel); }
.tbk-toast .tbk-link { color: #C5CBD6; }
.tbk-toast--bottom { position: fixed; left: 50%; bottom: 24px; z-index: 1100; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); }   /* тост — внизу экрана по центру, в т.ч. с «Отменить» (20.10.2026) */
.tbk-toast--bottom[hidden] { display: none; }

/* загрузка: спиннер и строка состояния — как AI-поиск (2023/web/js/es_search_loader.js, 2023/web/css/es_search.css .es-search-status), маленький — .max_spin (modal.css);
   заглушка — пульсом, как #max_qr_skeleton (2023/web/css/modal.css). [data-tbk-steps="фраза|фраза"] — смена фраз раз в 1,5 с, на последней останавливается (kit.js) */
/* спиннер — по heroui.com spinner (20.10.2026): синяя дуга с затухающим хвостом, без серой дорожки; --sm 16 / 24 / --lg 32 / --xl 40 px;
   --current — цветом текста. На сайте у AI-поиска — серое кольцо с красным верхом (es_search.css), не берём */
.tbk-spinner { --sz: 24px; --th: 3px; position: relative; display: inline-block; flex: none; width: var(--sz); height: var(--sz); border-radius: 50%; color: var(--tbk-blue);
               background: conic-gradient(transparent 0 20%, currentColor);
               -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--th) - .5px), #000 calc(100% - var(--th)));
               mask: radial-gradient(farthest-side, transparent calc(100% - var(--th) - .5px), #000 calc(100% - var(--th)));
               animation: tbk-spin .7s linear infinite; }
.tbk-spinner::before { content: ''; position: absolute; top: 0; left: 50%; width: var(--th); height: var(--th); border-radius: 50%; background: currentColor; transform: translateX(-50%); }   /* скруглённая голова дуги */
.tbk-spinner--sm { --sz: 16px; --th: 2px; }
.tbk-spinner--lg { --sz: 32px; --th: 3px; }
.tbk-spinner--xl { --sz: 40px; --th: 4px; }
.tbk-spinner--current { color: inherit; }
.tbk-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 32px; text-align: center; }
.tbk-loading__text { min-height: 1.4em; font-size: 16px; line-height: 1.35; color: var(--tbk-text); transition: opacity .25s; }
.tbk-loading__text.is-fading { opacity: 0; }
.tbk-skel { display: block; height: 13px; border-radius: var(--tbk-r-xs); background: var(--tbk-skel); animation: tbk-pulse 1.4s ease-in-out infinite; }
.tbk-skel--box { height: auto; border-radius: var(--tbk-r); }
@keyframes tbk-spin { to { transform: rotate(360deg); } }
@keyframes tbk-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tbk-spinner { animation-duration: 1.6s; } }
/* нет доступа — по heroui.com alert (19.10.2026): белая карточка с тенью, замок в салатовом круге 32 px, заголовок 14/600, текст серым, кнопки 32 px справа;
   не помещаются — переносятся под текст. Тексты — как .lots-gate на карте (view/map2/lots_gate.twig) */
.tbk-gate { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-lg); background: var(--tbk-surface);
            box-shadow: var(--tbk-sh-hover); font-size: 13px; line-height: 18px; color: var(--tbk-gray); }
.tbk-gate__ico { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tbk-lime); color: #fff; }
.tbk-gate__main { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; }
.tbk-gate__text { flex: 1 1 240px; min-width: 0; }
.tbk-gate__text p { margin: 0; font-size: 13px; line-height: 18px; }
.tbk-gate__text p + p { margin-top: 2px; }
.tbk-gate__text .tbk-gate__title { padding-top: 7px; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--tbk-text); }
.tbk-gate__text:not(:has(.tbk-gate__title)) { padding-top: 7px; }
.tbk-gate__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tbk-btn--stroke { background: var(--tbk-surface); border-color: var(--tbk-lime); color: var(--tbk-text); }   /* «Сравнить тарифы», «Войти» (.lots-gate__btn.stroke) */
.tbk-btn--stroke:hover { box-shadow: none; filter: brightness(.97); }

/* =================================== Уведомления (шторка под колокольчиком) ===================================
   как в шапке: view/block/head_new.twig #showUserNotices, #notice_block; 2023/web/css/head.css (.icon .counter, .headNew_modal, #notice_block.updatedDesign);
   разделители, крестик, «Удалить все», 400 px и 50vh — css/style.css #notice_block; тексты пунктов — user_notice.html (script/ajax.php get_user_notices) */
.tbk-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--tbk-r);
            background: none; color: var(--tbk-dd-muted); cursor: pointer; transition: background-color .1s; }
.tbk-bell:hover, .tbk-bell.open { background: var(--tbk-plate); }
.tbk-bell__cnt { position: absolute; right: 0; top: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--tbk-r-pill); background: var(--tbk-counter);
                 font-size: 11px; font-weight: 600; font-style: normal; line-height: 18px; text-align: center; color: var(--tbk-surface); }
.tbk-bell__cnt:empty { display: none; }
.tbk-notices { width: 400px; max-width: calc(100vw - 32px); max-height: 50vh; overflow-y: auto; padding: 4px 16px; background: var(--tbk-surface); border-radius: var(--tbk-r);
               box-shadow: var(--tbk-sh-tip); font-size: 14px; line-height: 1.4; color: var(--tbk-text); }
.tbk-notices:not(.tbk-pop) { max-width: 100%; }   /* вставлена в страницу — не шире родителя */
.tbk-notices__clear { display: inline-block; align-self: flex-start; margin: 8px 0; }
.tbk-notices__empty { display: none; padding: 12px 0; color: var(--tbk-muted); }
.tbk-notices__empty.is-on { display: block; }
.tbk-noti { position: relative; padding: 12px 24px 12px 0; border-top: 1px solid var(--tbk-line); }
.tbk-noti p { margin: 0; }
.tbk-noti a { color: var(--tbk-blue); text-decoration: none; }
.tbk-noti a:hover { text-decoration: underline; }
.tbk-noti b { font-weight: 500; }
.tbk-noti img { display: block; max-width: 100%; margin: 8px 0; border-radius: var(--tbk-r-xs); }
.tbk-noti__title { font-size: 16px; font-weight: 700; }
.tbk-noti__gray { font-size: 13px; color: var(--tbk-gray); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tbk-noti__date { margin-top: 4px; font-size: 13px; color: var(--tbk-dd-muted); }
.tbk-noti__acts { display: flex; gap: 16px; margin-top: 6px; }
.tbk-noti__close { position: absolute; right: 0; top: 13px; display: flex; padding: 0; border: 0; background: none; color: var(--tbk-muted); opacity: .6; cursor: pointer; }
.tbk-noti__close:hover { opacity: 1; }

/* =================================== Апгрейд тарифа (аналитика недвижимости и авто) ===================================
   подсказка — боевая: view/tooltips/updPremium.twig + js/Tooltips.js, вид — .tooltiptb .updatePremium (css/tooltips.css, есть в style.php);
   кнопка и шторка — как .tooltip__premium-overlay, .marketOffers__premium-overlay (css/realEstateAnalyticsNew.css, css/autoAnalitics.css) */
.tbk-upgrade { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; border-radius: var(--tbk-r-xs); background: var(--tbk-upgrade);
               box-shadow: var(--tbk-sh-upgrade); font-size: 13px; font-weight: 500; line-height: normal; color: #fff; white-space: nowrap; text-decoration: none; cursor: pointer; }
.tbk-upgrade:hover { color: #fff; text-decoration: none; }
.tbk-upgrade img { display: block; flex: none; }
.tbk-locked { position: relative; }
.tbk-locked__blur { filter: blur(2px); pointer-events: none; user-select: none; }
.tbk-locked > .tbk-upgrade { position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); }
.tbk-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--tbk-r-xs); }
.tbk-lock > span { padding: 6px 8px; border-radius: var(--tbk-r); background: var(--tbk-lock-bg); color: #fff; text-align: center; font-size: 12px; font-weight: 500; line-height: 13px; }

/* =================================== Окно: каркас — боевой modal.css (.modal_container > .modal.tb_modal) =================================== */
/* селекторы с .modal_container — сильнее боевого .modal_container .modal (width: auto, padding: 32px, text-align: center).
   Размеры — как heroui.com modal / alert-dialog (19.10.2026): отступ 24, заголовок 18/600 (в подтверждении 16), текст 14, до кнопок 20 px;
   кнопки 34 px по левому краю, основная первой («Сохранить», затем «Выйти»); на ≤600 — столбиком во всю ширину, 40 px */
.tbk-modal, .modal_container .tbk-modal { width: 440px; max-width: calc(100vw - 32px); padding: 24px; text-align: left; flex-direction: column; gap: 8px; }
.modal_container .tbk-modal.visible { display: flex; }
.tbk-modal__title { margin: 0; padding-right: 24px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--tbk-text); }
.tbk-modal__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--tbk-gray); }
.tbk-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tbk-modal__actions > .tbk-btn { height: 34px; padding: 0 16px; gap: 6px; font-size: 13px; }
@media (max-width: 600px) {
    .tbk-modal, .modal_container .tbk-modal { padding: 24px 20px; }
    .tbk-modal__actions { flex-direction: column; }
    .tbk-modal__actions > .tbk-btn { height: 40px; font-size: 14px; }
    /* боевой modal.css на ≤600: окно на весь экран (width / height 100% !important), содержимое по центру; у tbk-modal — во всю ширину */
    .modal_container .tbk-modal { align-items: stretch; }
}
/* открыть / закрыть — kit.js: [data-tbk-open="id"], [data-tbk-close], .close, Esc, клик по затемнению (кроме data-tbk-static) */
.modal_container.visible > .tbk-modal.visible { animation: tbk-modal-in .16s ease-out; }
.tbk-modal:focus, .tbk-drawer__panel:focus { outline: 0; }                                                 /* фокус ставит kit.js при открытии */
@keyframes tbk-modal-in { from { opacity: 0; transform: scale(.97); } }
/* окно-подтверждение (по heroui.com alert-dialog): значок статуса — tbk-ico --round 36 px, значок 18; заголовок 16;
   кнопки — основная + «Отмена» (--gray), красной заливки нет (README, «Решения» 19.10.2026) */
.tbk-modal--alert .tbk-modal__title { font-size: 16px; }
.tbk-modal__ico { margin-bottom: 4px; }
.tbk-modal > .tbk-x { position: absolute; top: 12px; right: 12px; }
.tbk-modal--sm, .modal_container .tbk-modal--sm { width: 380px; }
.tbk-modal--lg, .modal_container .tbk-modal--lg { width: 640px; }
/* положение: сверху; снизу на телефоне (шторка); размытый фон */
.modal_container.tbk-overlay--top { align-items: flex-start; padding-top: 10vh; }
.modal_container.tbk-overlay--blur { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (max-width: 600px) {
    /* подтверждение и шторка — не на весь экран: !important — чтобы перебить боевой */
    .modal_container .tbk-modal--alert { width: calc(100% - 32px) !important; height: auto !important; border-radius: var(--tbk-r); }
    .modal_container.tbk-overlay--sheet { align-items: flex-end; }
    .modal_container.tbk-overlay--sheet > .tbk-modal { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 90vh; overflow-y: auto; border-radius: var(--tbk-r-lg) var(--tbk-r-lg) 0 0; }
    .modal_container.tbk-overlay--sheet.visible > .tbk-modal.visible { animation: tbk-sheet-in .2s ease-out; }
}
@keyframes tbk-sheet-in { from { transform: translateY(100%); } }

/* =================================== Боковая панель (по heroui.com drawer) ===================================
   затемнение — как .modal_container; панель справа, --left — слева, --bottom — снизу; .visible — открыта (kit.js [data-tbk-open]) */
.tbk-drawer { position: fixed; inset: 0; z-index: 10; display: flex; justify-content: flex-end; background: var(--tbk-overlay); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
.tbk-drawer.visible { visibility: visible; opacity: 1; }
.tbk-drawer__panel { display: flex; flex-direction: column; width: 420px; max-width: calc(100vw - 32px); height: 100%; background: var(--tbk-surface); box-shadow: var(--tbk-sh-modal);
                     transform: translateX(100%); transition: transform .25s ease; }
.tbk-drawer.visible > .tbk-drawer__panel { transform: none; }
.tbk-drawer--left { justify-content: flex-start; }
.tbk-drawer--left > .tbk-drawer__panel { transform: translateX(-100%); }
.tbk-drawer--bottom { align-items: flex-end; }
.tbk-drawer--bottom > .tbk-drawer__panel { width: 100%; max-width: none; height: auto; max-height: 85vh; border-radius: var(--tbk-r-lg) var(--tbk-r-lg) 0 0; transform: translateY(100%); }
.tbk-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--tbk-line); }
.tbk-drawer__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--tbk-text); }
.tbk-drawer__body { flex: 1; overflow-y: auto; padding: 20px 24px; font-size: 14px; line-height: 1.5; color: var(--tbk-text-2); }
.tbk-drawer__foot { display: flex; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--tbk-line); }
.tbk-drawer__foot > * { flex: 1; }
@media (max-width: 600px) { .tbk-drawer__head { padding-left: 16px; } .tbk-drawer__body, .tbk-drawer__foot { padding-left: 16px; padding-right: 16px; } }
@media (prefers-reduced-motion: reduce) { .tbk-drawer, .tbk-drawer__panel { transition: none; } .modal_container.visible > .tbk-modal.visible { animation: none; } }

/* =================================== Значок в плашке =================================== */
/* серый — сеансы lk-profile .pf_session_ico; цветной фон 10% — market-analytics .ma_aic, lk-profile .pf_offer_ico; салатовый круг — /about */
.tbk-ico { --c: var(--tbk-value); display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--tbk-r);
           background: var(--tbk-line); color: var(--c); }
.tbk-ico--blue { --c: var(--tbk-blue); }      .tbk-ico--green { --c: var(--tbk-green-2); }   .tbk-ico--orange { --c: var(--tbk-sec-bankrupt); }
.tbk-ico--violet { --c: var(--tbk-violet); }  .tbk-ico--red { --c: var(--tbk-red); }         .tbk-ico--navy { --c: var(--tbk-navy); }
.tbk-ico--blue, .tbk-ico--green, .tbk-ico--orange, .tbk-ico--violet, .tbk-ico--red, .tbk-ico--navy { background: color-mix(in srgb, var(--c) 10%, #fff); }
.tbk-ico--lime { background: var(--tbk-lime); color: #fff; }
.tbk-ico--sm { width: 22px; height: 22px; border-radius: 7px; }
.tbk-ico--md { width: 32px; height: 32px; border-radius: var(--tbk-r-md); }
.tbk-ico--lg { width: 48px; height: 48px; border-radius: var(--tbk-r-lg); }
.tbk-ico--round { border-radius: 50%; }

/* =================================== Списки с отметками =================================== */
/* галочка — /about (тарифы «лестницей»), «Выберите тариф» lk-profile; круг — /about «Почему выбирают», окно «Пробный период закончился» */
.tbk-checks { display: grid; gap: 8px; }
.tbk-checks > li { position: relative; padding-left: 26px; font-size: 14px; line-height: 20px; color: var(--tbk-text-2); }
.tbk-checks > li::before { content: ''; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; background: var(--tbk-check);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.4 3.4 7-7.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.4 3.4 7-7.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.tbk-checks--green > li::before { background: var(--tbk-green); }
.tbk-checks--plus > li::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tbk-checks--circle, .tbk-checks--cross { gap: 10px; }
.tbk-checks--circle > li, .tbk-checks--cross > li { padding-left: 30px; }
.tbk-checks--circle > li::before, .tbk-checks--cross > li::before { top: 0; width: 18px; height: 18px; border-radius: 50%; -webkit-mask: none; mask: none; }
.tbk-checks--circle > li::before {
    background: var(--tbk-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.4 2.4 5.2-5.4' fill='none' stroke='%231f1f1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.tbk-checks--cross > li { color: var(--tbk-muted); }
.tbk-checks--cross > li::before {
    background: #E7EAEF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' stroke='%239497a3' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.tbk-checks--sm { gap: 4px; }
.tbk-checks--sm > li { padding-left: 20px; font-size: 13px; line-height: 18px; color: var(--tbk-value); }
.tbk-checks--sm > li::before { width: 14px; height: 14px; top: 2px; -webkit-mask-size: 14px; mask-size: 14px; }

/* =================================== Строки со значком =================================== */
/* сеансы и соцсети в ЛК «Мой профиль» (lk-profile .pf_session, .pf_social_row), «Участники торгов» (market-analytics .ma_arow) */
.tbk-items { display: flex; flex-direction: column; }
.tbk-item { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 40px; padding: 10px 0; border-top: 1px solid var(--tbk-line); }
.tbk-item:first-child { border-top: 0; padding-top: 0; }
.tbk-item__body { flex: 1 1 200px; min-width: 0; }
.tbk-item__title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; font-weight: 600; color: var(--tbk-text); }
.tbk-item__meta { font-size: 13px; line-height: 18px; color: var(--tbk-muted); }
.tbk-item__end { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tbk-item--plain .tbk-item__title { font-weight: 400; }
.tbk-item.is-off .tbk-item__title { color: var(--tbk-muted); }

/* =================================== Плашки и карточки /about =================================== */
/* показатель со значком (hero /about .about_hcS5 .c) */
.tbk-stat { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; background: var(--tbk-surface); border: 1px solid var(--tbk-line);
            border-radius: var(--tbk-r-md); box-shadow: var(--tbk-sh-soft); text-align: left; }
.tbk-stat__ic { display: flex; flex: none; color: var(--tbk-lime); }
.tbk-stat__val { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--tbk-text); }
.tbk-stat__lbl { display: block; font-size: 12px; line-height: 1.35; color: var(--tbk-gray); }
@media (max-width: 560px) { .tbk-stat { padding: 10px; gap: 10px; } }
/* карточка со значком на верхней кромке («Всё под контролем», .about_control_card) — родителю нужен отступ сверху 20px */
.tbk-feature { position: relative; display: flex; flex-direction: column; align-items: center; padding: 36px 16px 24px; text-align: center;
               background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r); box-shadow: var(--tbk-sh-hover); transition: box-shadow .15s; }
.tbk-feature:hover { box-shadow: var(--tbk-sh-lift); }
.tbk-feature__badge { position: absolute; top: 0; left: 50%; display: flex; padding: 12px; border-radius: 50%; background: var(--tbk-lime); color: #fff; transform: translate(-50%, -50%); }
.tbk-feature__title { margin: 8px 0; font-size: 14px; font-weight: 600; color: var(--tbk-text); }
.tbk-feature__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tbk-gray); }

/* =================================== Аватар =================================== */
/* фото или инициалы в круге (agents .ag_c_avatar, рейтинг победителей) */
.tbk-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; overflow: hidden; border-radius: 50%;
              background: var(--tbk-plate) center / cover no-repeat; color: var(--tbk-muted); font-size: 12px; font-weight: 700; }
.tbk-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbk-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.tbk-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
/* группа внахлёст — как блок поддержки /about_profi (view/about_profi/main.twig .img, css/about-profi.css): белая обводка 2 px, наложение 1/9 ширины, первый сверху */
.tbk-avatars { display: inline-flex; }
.tbk-avatars > .tbk-avatar { position: relative; border: 2px solid var(--tbk-surface); }
.tbk-avatars > .tbk-avatar + .tbk-avatar { margin-left: -4px; }
.tbk-avatars > .tbk-avatar--sm + .tbk-avatar--sm { margin-left: -3px; }
.tbk-avatars > .tbk-avatar--lg + .tbk-avatar--lg { margin-left: -6px; }
.tbk-avatars > :nth-child(1) { z-index: 5; } .tbk-avatars > :nth-child(2) { z-index: 4; } .tbk-avatars > :nth-child(3) { z-index: 3; } .tbk-avatars > :nth-child(4) { z-index: 2; }

/* =================================== Раскрывающиеся блоки (<details>) =================================== */
/* карточками — FAQ /about (.about_faqv) */
.tbk-acc { display: flex; flex-direction: column; gap: 12px; }
.tbk-acc__item { background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r); transition: box-shadow .15s; }
.tbk-acc__item[open] { box-shadow: var(--tbk-sh-hover); }
.tbk-acc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; user-select: none;
                 font-size: 14px; font-weight: 500; color: var(--tbk-text-2); }
.tbk-acc__head::-webkit-details-marker { display: none; }
.tbk-acc__head > .tbk-svg, .tbk-acc__arrow .tbk-svg { color: var(--tbk-muted); transition: transform .2s; }
.tbk-acc__item[open] > .tbk-acc__head > .tbk-svg, .tbk-acc__item[open] > .tbk-acc__head .tbk-acc__arrow .tbk-svg { transform: rotate(180deg); }
.tbk-acc__body { padding: 0 16px 16px; font-size: 14px; line-height: 1.5; color: var(--tbk-gray); }
/* строками в одной карточке, стрелка в кружке слева — расширенный поиск (2023/web/css/search.css .search_group) */
.tbk-acc--list { gap: 0; overflow: hidden; background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-md); }
.tbk-acc--list .tbk-acc__item { border: 0; border-top: 1px solid var(--tbk-line); border-radius: 0; box-shadow: none; }
.tbk-acc--list .tbk-acc__item:first-child { border-top: 0; }
.tbk-acc--list .tbk-acc__head { justify-content: flex-start; gap: 10px; padding: 15px; font-size: 16px; font-weight: 600; color: var(--tbk-text); }
.tbk-acc--list .tbk-acc__head:hover, .tbk-acc--list .tbk-acc__item[open] > .tbk-acc__head { background: var(--tbk-hover); color: var(--tbk-blue); }
.tbk-acc__arrow { display: flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--tbk-plate); }
.tbk-acc__arrow .tbk-svg { color: var(--tbk-text); }
.tbk-acc--list .tbk-acc__body { padding: 20px 47px 24px; color: var(--tbk-text-2); }
@media (max-width: 600px) { .tbk-acc--list .tbk-acc__body { padding: 16px 15px 20px; } }
/* варианты — по heroui.com accordion. Раскрыт только один — у <details> общий name="…" (средствами браузера) */
.tbk-acc__head:hover > .tbk-svg, .tbk-acc__head:hover .tbk-acc__pm { color: var(--tbk-text); }
/* строками без карточки (--lines — линия между пунктами, --bare — без линий) */
.tbk-acc--lines, .tbk-acc--bare { gap: 0; }
.tbk-acc--lines > .tbk-acc__item, .tbk-acc--bare > .tbk-acc__item { border: 0; border-radius: 0; background: none; }
.tbk-acc--lines > .tbk-acc__item[open], .tbk-acc--bare > .tbk-acc__item[open] { box-shadow: none; }
.tbk-acc--lines > .tbk-acc__item + .tbk-acc__item { border-top: 1px solid var(--tbk-border-btn); }
.tbk-acc--lines .tbk-acc__head { padding: 16px 0; }
.tbk-acc--bare .tbk-acc__head { padding: 10px 0; }
.tbk-acc--lines .tbk-acc__body, .tbk-acc--bare .tbk-acc__body { padding: 0 0 16px; }
/* заголовком с шевроном (21.10.2026, стенд monitoring-new «Последние сообщения по должникам»): заголовок как tbk-h4, шеврон сразу за ним, без карточки и линий */
.tbk-acc--title { gap: 0; }
.tbk-acc--title > .tbk-acc__item { border: 0; border-radius: 0; background: none; }
.tbk-acc--title > .tbk-acc__item[open] { box-shadow: none; }
.tbk-acc--title .tbk-acc__head { display: inline-flex; justify-content: flex-start; gap: 6px; padding: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--tbk-text); }
.tbk-acc--title .tbk-acc__head small { font-weight: 400; }
.tbk-acc--title .tbk-acc__body { padding: 12px 0 0; }
/* заголовок со значком и подписью: значок — tbk-ico, текст — __title с __sub */
.tbk-acc__title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tbk-acc__sub { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--tbk-muted); }
.tbk-acc__head > .tbk-ico + .tbk-acc__title { margin-left: 2px; }
/* плюс → минус */
.tbk-acc__pm { position: relative; flex: none; width: 14px; height: 14px; color: var(--tbk-muted); }
.tbk-acc__pm::before, .tbk-acc__pm::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .2s; }
.tbk-acc__pm::after { transform: rotate(90deg); }
.tbk-acc__item[open] > .tbk-acc__head .tbk-acc__pm::after { transform: rotate(180deg); }
/* каретка слева: › → ⌄ */
.tbk-acc--caret .tbk-acc__head { justify-content: flex-start; gap: 10px; }
.tbk-acc--caret .tbk-acc__item[open] > .tbk-acc__head > .tbk-svg { transform: rotate(90deg); }
.tbk-acc--caret .tbk-acc__body { padding-left: 40px; }
.tbk-acc--caret.tbk-acc--lines .tbk-acc__body, .tbk-acc--caret.tbk-acc--bare .tbk-acc__body { padding-left: 24px; }
/* недоступный пункт: у summary tabindex="-1" */
.tbk-acc__item.is-disabled > .tbk-acc__head { opacity: .45; cursor: default; pointer-events: none; }
/* плавное раскрытие — где браузер умеет анимировать высоту до auto */
@supports (interpolate-size: allow-keywords) {
    .tbk-acc { interpolate-size: allow-keywords; }
    .tbk-acc__item::details-content { block-size: 0; overflow: hidden; transition: block-size .2s ease, content-visibility .2s allow-discrete; }
    .tbk-acc__item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) { .tbk-acc__item::details-content { transition: none; } }
/* FAQ: слева заголовок и кнопка поддержки, справа вопросы; на ≤768 — столбиком */
.tbk-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 48px; align-items: start; }
.tbk-faq__side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
@media (max-width: 768px) { .tbk-faq { grid-template-columns: minmax(0, 1fr); } }

/* =================================== Шаги =================================== */
/* «Как это работает» (no-ecp-2026 lk-new .how_steps); число шагов — --tbk-steps на контейнере */
.tbk-steps { --tbk-steps: 5; position: relative; display: grid; grid-template-columns: repeat(var(--tbk-steps), minmax(0, 1fr)); gap: 8px; }
.tbk-steps::before { content: ''; position: absolute; top: 31px; left: calc(50% / var(--tbk-steps)); right: calc(50% / var(--tbk-steps)); height: 2px; background: var(--tbk-border-btn); }
.tbk-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 4px; text-align: center; }
.tbk-step__ic { display: flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; border-radius: var(--tbk-r-xl);
                background: var(--tbk-surface); border: 1px solid var(--tbk-border-btn); color: var(--tbk-navy); font-size: 20px; font-weight: 700; }
.tbk-step__text { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--tbk-navy); }
.tbk-step__text small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--tbk-muted); }
/* варианты (19.10.2026): --sm — плитки 44 px; --num — номера в кружках 32 px, между ними отрезки линии; --inline — в строку, кружки 24 px; --v — столбиком.
   Состояния: .is-done — синий кружок с галочкой и синий отрезок после него; .is-current — синяя обводка с бледным ореолом; шаги после текущего — серые */
.tbk-steps--sm::before { top: 21px; }
.tbk-steps--sm > .tbk-step { gap: 8px; }
.tbk-steps--sm .tbk-step__ic { width: 44px; height: 44px; border-radius: var(--tbk-r-md); }
.tbk-step__n { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
               background: var(--tbk-blue-soft); color: var(--tbk-blue); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .2s, box-shadow .2s; }
.tbk-step.is-done > .tbk-step__n { background: var(--tbk-blue); color: transparent; }
.tbk-step.is-done > .tbk-step__n::before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 5px; border-left: 2px solid var(--tbk-surface); border-bottom: 2px solid var(--tbk-surface);
                                           transform: translate(-50%, -70%) rotate(-45deg); }
.tbk-step.is-current > .tbk-step__n { background: var(--tbk-surface); box-shadow: inset 0 0 0 2px var(--tbk-blue), 0 0 0 4px var(--tbk-blue-soft); }
.tbk-step.is-current ~ .tbk-step > .tbk-step__n { background: var(--tbk-surface); box-shadow: inset 0 0 0 1px var(--tbk-border-btn); color: var(--tbk-muted); }
.tbk-step.is-current ~ .tbk-step .tbk-step__text { color: var(--tbk-muted); }
.tbk-steps--num::before { display: none; }
.tbk-steps--num > .tbk-step { gap: 10px; }
.tbk-steps--num > .tbk-step:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: calc(50% + 24px); width: calc(100% - 40px); height: 2px; border-radius: 1px; background: var(--tbk-border-btn); }
.tbk-steps--num > .tbk-step.is-done::after, .tbk-steps--inline > .tbk-step.is-done::after, .tbk-steps--v > .tbk-step.is-done::after { background: var(--tbk-blue); }
.tbk-steps--inline { display: flex; align-items: center; gap: 12px; }
.tbk-steps--inline::before { display: none; }
.tbk-steps--inline > .tbk-step { flex-direction: row; gap: 8px; padding: 0; text-align: left; }
.tbk-steps--inline > .tbk-step:not(:last-child) { flex: 1; min-width: 0; }
.tbk-steps--inline > .tbk-step:not(:last-child)::after { content: ''; flex: 1; min-width: 16px; height: 2px; margin-left: 4px; border-radius: 1px; background: var(--tbk-border-btn); }
.tbk-steps--inline .tbk-step__n { width: 24px; height: 24px; font-size: 12px; }
.tbk-steps--inline .tbk-step.is-done > .tbk-step__n::before { width: 8px; height: 4px; }
.tbk-steps--inline .tbk-step.is-current > .tbk-step__n { box-shadow: inset 0 0 0 2px var(--tbk-blue), 0 0 0 3px var(--tbk-blue-soft); }
.tbk-steps--inline .tbk-step__text { white-space: nowrap; }
.tbk-steps--v { display: flex; flex-direction: column; gap: 0; }
.tbk-steps--v::before { display: none; }
.tbk-steps--v > .tbk-step { flex-direction: row; align-items: flex-start; gap: 12px; padding: 0 0 20px; text-align: left; }
.tbk-steps--v > .tbk-step:last-child { padding-bottom: 0; }
.tbk-steps--v > .tbk-step:not(:last-child)::after { content: ''; position: absolute; top: 38px; bottom: 6px; left: 15px; width: 2px; border-radius: 1px; background: var(--tbk-border-btn); }
.tbk-steps--v .tbk-step__text { padding-top: 7px; }
@media (max-width: 600px) {
    .tbk-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tbk-steps::before { display: none; }
    .tbk-step { flex-direction: row; gap: 14px; padding: 0; text-align: left; }
    /* номера в кружках — столбиком, как --v; в строку — подпись только у текущего шага */
    .tbk-steps--num { gap: 0; }
    .tbk-steps--num > .tbk-step { align-items: flex-start; gap: 12px; padding-bottom: 20px; }
    .tbk-steps--num > .tbk-step:last-child { padding-bottom: 0; }
    .tbk-steps--num > .tbk-step:not(:last-child)::after { top: 38px; bottom: 6px; left: 15px; width: 2px; height: auto; }
    .tbk-steps--num .tbk-step__text { padding-top: 7px; }
    .tbk-steps--inline > .tbk-step:not(.is-current) > .tbk-step__text { display: none; }
    .tbk-steps--inline > .tbk-step.is-current { flex: 1 0 auto; }   /* подпись текущего не наезжает на следующий кружок */
}

/* =================================== Лента событий =================================== */
/* история обращения (error-tickets .et_timeline, .et_reply) */
.tbk-timeline { margin-left: 5px; border-left: 2px solid var(--tbk-border-btn); }
.tbk-timeline > li { position: relative; padding: 0 0 18px 20px; }
.tbk-timeline > li:last-child { padding-bottom: 0; }
.tbk-timeline > li::before { content: ''; position: absolute; top: 3px; left: -7px; width: 12px; height: 12px; border: 2px solid var(--tbk-surface); border-radius: 50%; background: var(--tbk-border-dash); }
.tbk-timeline > li.is-accent::before { background: var(--tbk-check); }
.tbk-timeline__date { display: block; font-size: 12px; line-height: 16px; color: var(--tbk-muted); }
.tbk-timeline__text { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--tbk-text); }
.tbk-reply { max-width: 640px; margin-top: 6px; padding: 12px 14px; background: var(--tbk-surface); border: 1px solid var(--tbk-border-btn); border-radius: var(--tbk-r); }
.tbk-reply__head { margin: 0 0 4px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--tbk-value); }
.tbk-reply__text { margin: 0; font-size: 14px; line-height: 21px; color: var(--tbk-text); overflow-wrap: anywhere; }

/* =================================== Карточка цены =================================== */
/* срок тарифа (/tarifi .price_block, tarifi-promo), «Хит» — /about .about_tl_hit */
.tbk-prices { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px; }
.tbk-prices > .tbk-price { flex: 0 1 280px; }
.tbk-price { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 20px 20px; background: var(--tbk-surface); border-radius: var(--tbk-r-sm);
             box-shadow: var(--tbk-sh-price); text-align: center; }
.tbk-price__term { padding-bottom: 9px; border-bottom: 1px solid var(--tbk-border); font-size: 18px; font-weight: 500; color: var(--tbk-navy); }
.tbk-price__val { margin: 10px 0 0; font-size: 32px; font-weight: 500; line-height: 1.2; color: var(--tbk-text); white-space: nowrap; }
.tbk-price__old { margin: 3px 0 0; font-size: 16px; font-weight: 300; color: var(--tbk-muted); text-decoration: line-through; }
.tbk-price__note { margin: 10px 0 0; }
.tbk-price > .tbk-btn { margin-top: auto; }                              /* кнопка — внизу карточки, карточки в ряд одной высоты */
.tbk-price > :nth-last-child(2):not(.tbk-price__sale, .tbk-price__hit) { margin-bottom: 16px; }
.tbk-price .tbk-checks { text-align: left; }
.tbk-price__sale { position: absolute; top: 0; right: 0; min-width: 47px; height: 22px; padding: 0 6px; border-radius: 0 var(--tbk-r-sm) 0 var(--tbk-r-sm);
                   background: var(--tbk-sale); color: #fff; font-size: 14px; line-height: 22px; }
.tbk-price.is-hit { box-shadow: var(--tbk-sh-lift); }
.tbk-price__hit { position: absolute; top: -11px; right: 18px; padding: 3px 12px; border-radius: var(--tbk-r-pill); background: var(--tbk-lime); color: var(--tbk-text);
                  font-size: 12px; font-weight: 700; }
/* варианты /tarifi и /promo: view/tariff/tariffPriceRow_new.twig, _cashback, _upgrade, tariff-features.twig, view/promo/UPGRADE.twig;
   css/style.css .t2_prices.cashback_prices, css/tariff.css, css/promo-upgrade.css */
.tbk-prices__title { margin: 40px 0; font-size: 26px; font-weight: 300; text-align: center; color: var(--tbk-navy); }   /* #tarif_page.cashback_page p.h2 */
.tbk-prices__title:first-child { margin-top: 0; }
/* ряд срока тарифа: в строку, сколько влезает (на /tarifi — 4 по 25%) */
.tbk-prices--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (max-width: 400px) { .tbk-prices__title { font-size: 22px; margin: 28px 0 20px; } }
.tbk-price__old--none { text-decoration: none; }                       /* «Без скидки» */
.tbk-price__chip { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0; padding: 5px 12px; border-radius: var(--tbk-r-sm);
                   background: var(--tbk-bonus-bg); color: var(--tbk-bonus); font-size: 14px; font-weight: 600; line-height: normal; white-space: nowrap; }
.tbk-price__chip > img { width: 16px; }
.tbk-price__chip.tbk-tip, .tbk-price__chip.tbk-tip:hover, .tbk-price__chip.tbk-tip:focus { margin: 10px auto 0; vertical-align: baseline; color: var(--tbk-bonus); }
.tbk-price__chip--sm { gap: 5px; font-size: 13px; }                    /* скидка по промокоду, .tp_chip */
/* карточка возможностей вместо «1 месяц» у Профи и Премиума */
.tbk-price--features { padding: 14px 16px; text-align: left; font-size: 14px; color: var(--tbk-text-2); cursor: default; }
.tbk-price--features .tbk-price__term { font-size: 13.5px; letter-spacing: .14px; padding-bottom: 14px; color: var(--tbk-text-2); }
.tbk-price__list { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; flex-grow: 1; margin: 12px 0; }
.tbk-price__list > li { display: flex; align-items: center; gap: 8px; }
.tbk-price__list > li::before { content: url("/img/icons/checkmark-filled.svg"); width: 16px; height: 16px; flex: none; line-height: 0; }
.tbk-price--features > .tbk-link { align-self: flex-start; font-size: 13px; }
/* подсказка у плашки: «Бонусы за оплату тарифа» (.bonus-popover), «Из чего скидка» (.tp_tip) */
.tbk-tip__text--wide { max-width: min(300px, calc(100vw - 16px)); padding: 16px 18px; border: 0; border-radius: var(--tbk-r-md); font-size: 14px; line-height: 21px; color: var(--tbk-text); }
.tbk-tip__h { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 500; line-height: 22px; }
.tbk-tip__big { display: block; font-size: 16px; font-weight: 700; line-height: 24px; color: var(--tbk-bonus); }
.tbk-tip__f { display: block; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--tbk-muted); }
.tbk-tip__f a { color: inherit; }
.tbk-tip__f a:hover { color: var(--tbk-navy); }
.tbk-receipt__row { display: flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 19px; }
.tbk-receipt__row + .tbk-receipt__row { margin-top: 3px; }
.tbk-receipt__row > i { flex: 1 1 12px; border-bottom: 1px dotted var(--tbk-border-dash); transform: translateY(-3px); }
.tbk-receipt__row > b { flex: none; font-weight: 500; white-space: nowrap; }
/* продление по ссылке из SMS: одна карточка строками (stp.php .stp_card) */
.tbk-price--rows { width: 100%; max-width: 420px; padding: 24px 32px 28px; text-align: left; }
.tbk-price--rows .tbk-price__sale { height: 24px; line-height: 24px; padding: 0 10px; font-weight: 500; }
.tbk-price__head { margin: 0 0 12px; font-size: 22px; font-weight: 500; color: var(--tbk-navy); }
.tbk-price__rows { margin: 0; }
.tbk-price__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tbk-line-2); font-size: 16px; }
.tbk-price__rows dt { color: var(--tbk-muted); }
.tbk-price__rows dd { margin: 0; color: var(--tbk-navy); text-align: right; }
.tbk-price__rows > .is-total { padding-top: 16px; border-bottom: 0; }
.tbk-price__rows > .is-total dt { font-weight: 500; color: var(--tbk-navy); }
.tbk-price__rows > .is-total dd { font-size: 26px; font-weight: 500; color: var(--tbk-text); }
.tbk-price__rows s { margin-right: 10px; font-size: 16px; font-weight: 300; color: var(--tbk-muted); }
.tbk-price.tbk-price--rows > :nth-last-child(2) { margin-bottom: 0; }
.tbk-price__acts { display: grid; gap: 12px; margin-top: 12px; }
.tbk-price__acts > .tbk-btn { height: 48px; font-size: 16px; }
@media (max-width: 400px) { .tbk-price--rows { padding: 20px 20px 24px; } }

/* =================================== Фото лота =================================== */
/* превью 175×135 (2023/web/css/lot.css .lot_photo); по тарифу — размытие и тёмная плашка, как .photo_locked + .photo_badge (2023/view/lot/lot.twig) */
.tbk-photo { position: relative; display: block; flex: none; width: 175px; max-width: 100%; height: 135px; overflow: hidden; border-radius: var(--tbk-r-xs); background: var(--tbk-photo-bg); }
.tbk-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbk-photo.is-locked > img, .tbk-photo.is-locked > .tbk-slides { filter: blur(5px) saturate(.7); transform: scale(1.04); pointer-events: none; }
.tbk-photo.is-locked::after { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--tbk-photo-shade); pointer-events: none; }
.tbk-photo__badge { position: absolute; top: 50%; left: 50%; z-index: 4; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); padding: 6px 10px;
                    border-radius: var(--tbk-r-pill); background: var(--tbk-badge-bg); font-size: 12px; font-weight: 600; line-height: 14px; color: #fff; white-space: nowrap;
                    transform: translate(-50%, -50%); pointer-events: none; }
.tbk-photo__badge > span { overflow: hidden; text-overflow: ellipsis; }
.tbk-photo__badge--more { top: auto; bottom: 8px; transform: translateX(-50%); }
/* листание по наведению: фото по зонам, полоски снизу — как .slider (2023/web/css/slider.css), без JS; на весь экран на сайте — fancybox 3.5.7 (pages/item.php) */
.tbk-slides { position: absolute; inset: 0; display: flex; }
.tbk-slide { display: flex; align-items: flex-end; flex: 1; height: 100%; }
.tbk-slide > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.tbk-slides:not(:hover) > .tbk-slide:first-child > img, .tbk-slide:hover > img { z-index: 1; opacity: 1; }
.tbk-slide::after { content: ''; position: relative; z-index: 2; flex: 1; height: 2px; margin: 0 1px 5px; background: rgba(255, 255, 255, .6); transition: background-color .2s, opacity .2s; }
.tbk-slide:first-child::after { margin-left: 3px; }
.tbk-slide:last-child::after { margin-right: 3px; }
.tbk-slide:hover::after { background: var(--tbk-blue); }
.tbk-slides:not(:hover) > .tbk-slide::after { opacity: 0; }
/* плашка у своего фото (фото только для «Профи» — 2023/view/lot/lot.twig:25): видна, когда это фото на экране */
.tbk-slide > .tbk-photo__badge { opacity: 0; }
.tbk-slides:not(:hover) > .tbk-slide:first-child > .tbk-photo__badge, .tbk-slide:hover > .tbk-photo__badge { opacity: 1; }
/* сроки на фото (29.10.2026, #6487) — как блок «Похожие лоты» на /item (2023/web/css/similar_lots.css .sim_date, ветка test): тёмные чипы слева сверху,
   по одному в строку, сверху самый срочный; длинный текст — многоточием. Слой пропускает клик к фото, чип ловит наведение.
   Подсказка — чип + tbk-tip tbk-tip--any, текст tbk-tip__text--dark; на телефоне (hover: none) подсказки нет — касание ведёт на лот */
.tbk-photo__chips { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.tbk-photo__chip { display: inline-flex; align-items: center; max-width: 100%; box-sizing: border-box; height: 22px; padding: 0 8px; overflow: hidden; border-radius: var(--tbk-r);
                   background: var(--tbk-ph-chip-bg); font-size: 12px; font-weight: 500; line-height: 22px; white-space: nowrap; pointer-events: auto; }
.tbk-photo__chip, .tbk-photo__chip.tbk-tip--any, .tbk-photo__chip.tbk-tip--any:hover { color: #fff; cursor: inherit; }   /* tbk-tip--any ставит color: inherit */
.tbk-photo__chip > * { flex: none; }
.tbk-photo__chip > img { margin-right: 5px; }
.tbk-photo__chip > i { margin: 0 4px 0 -3px; }   /* значок fontello: icon-calendar_1 — приём заявок, icon-calendar_2 — торги */
.tbk-photo__chip-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tbk-photo__chip--live::before { content: ''; flex: none; width: 8px; height: 8px; margin: 0 7px 0 -1px; border-radius: 50%; background: var(--tbk-ph-chip-live); }   /* «Идут торги» */
.tbk-photo__chip-step { font-size: 11px; font-weight: 600; }   /* этап «3/11», за ним черта */
.tbk-photo__chip-step::after { content: ''; display: inline-block; width: 1px; height: 16px; margin: 0 6px; vertical-align: middle; background: rgba(255, 255, 255, .35); }
@media (hover: none) { .tbk-photo__chip.is-open > .tbk-tip__text { display: none; } }

/* =================================== Скриншот и видео =================================== */
/* «окно браузера» под скриншот (whats-new .wn_shot) */
.tbk-shot { display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tbk-surface); border: 1px solid #E1E5EE; border-radius: var(--tbk-r-lg);
            box-shadow: 0 2px 10px rgba(49, 57, 72, .08); }
.tbk-shot__bar { display: flex; align-items: center; gap: 5px; flex: none; height: 22px; padding: 0 10px; background: #F1F4F9; }
.tbk-shot__bar i { width: 7px; height: 7px; border-radius: 50%; background: #CDD3DE; }
.tbk-shot__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; padding: 16px; text-align: center;
                  font-size: 13px; color: var(--tbk-muted); }
.tbk-shot__body img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tbk-shot__body:has(> img) { padding: 0; }
/* обложка видео с кнопкой (/about .about_video, whats-new .wn_video_frame) */
.tbk-video { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 16 / 9; overflow: hidden;
             border-radius: var(--tbk-r); background: var(--tbk-active) center / cover no-repeat; color: #fff; cursor: pointer; }
.tbk-video__play { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--tbk-lime); color: #fff;
                   box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: transform .15s; }
.tbk-video:hover .tbk-video__play { transform: scale(1.06); }
.tbk-video__cap { padding: 6px 16px; border-radius: var(--tbk-r-pill); background: rgba(20, 28, 42, .78); font-size: 15px; font-weight: 600; }
@media (max-width: 560px) { .tbk-video__play { width: 56px; height: 56px; } .tbk-video__cap { padding: 5px 12px; font-size: 13px; } }

/* =================================== Мини-графики (market-analytics, agents) =================================== */
/* полосы «подпись — число — полоса» (.ma_bar, как .widget-annotation-bars) */
.tbk-bars { display: grid; gap: 12px; }
.tbk-bars > div { display: grid; gap: 6px; min-width: 0; }
.tbk-bars__title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.tbk-bars__title span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tbk-gray); }
.tbk-bars__title b { font-weight: 600; color: var(--tbk-text); white-space: nowrap; }
.tbk-bars .tbk-bar { margin: 0; }
/* полоса долей 100% (.ma_stack100): ширины — style="width: N%" у <i> (не путать с .tbk-stack — стопка) */
.tbk-share { display: flex; gap: 2px; height: 4px; overflow: hidden; border-radius: var(--tbk-r-pill); }
.tbk-share > i { display: block; height: 100%; min-width: 3px; }
/* легенда строками: точка, название, число, доля (.ma_legrows) */
.tbk-legend { display: grid; gap: 2px; font-size: 13px; }
.tbk-legend > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--tbk-line); }
.tbk-legend > div:last-child { border-bottom: 0; }
.tbk-legend span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tbk-gray); }
.tbk-legend b { font-weight: 600; color: var(--tbk-text); text-align: right; font-variant-numeric: tabular-nums; }
.tbk-legend em { font-style: normal; color: var(--tbk-muted); text-align: right; font-variant-numeric: tabular-nums; }
/* кольцо долей (.ma_donut): доли — style="--tbk-donut: conic-gradient(цвет 0 57%, цвет 57% 84%, …)" */
.tbk-donut { --tbk-donut-w: 18px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 120px; height: 120px;
             text-align: center; line-height: 1.15; }
.tbk-donut::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--tbk-donut, var(--tbk-plate));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--tbk-donut-w)), #000 calc(100% - var(--tbk-donut-w) + 1px));
            mask: radial-gradient(farthest-side, transparent calc(100% - var(--tbk-donut-w)), #000 calc(100% - var(--tbk-donut-w) + 1px)); }
.tbk-donut b { font-size: 17px; font-weight: 700; color: var(--tbk-text); font-variant-numeric: tabular-nums; }
.tbk-donut span { font-size: 11px; color: var(--tbk-muted); }
/* круговой прогресс (по heroui.com progress-circle): style="--tbk-donut: conic-gradient(var(--tbk-check) 0 60%, var(--tbk-plate) 0)" */
.tbk-donut--sm { --tbk-donut-w: 6px; width: 56px; height: 56px; }
.tbk-donut--sm b { font-size: 13px; }
.tbk-donut--xs { --tbk-donut-w: 3px; width: 20px; height: 20px; }
/* столбики по годам (.ma_yb): высота — style="height: N%" у __bar; выбранный — .active */
.tbk-cols { display: flex; align-items: flex-end; gap: 8px; height: 104px; }
.tbk-cols > div { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; height: 100%; }
.tbk-cols__bar { width: 100%; margin-top: auto; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--tbk-blue-pale); }
.tbk-cols > .active .tbk-cols__bar { background: var(--tbk-blue); }
.tbk-cols__lbl { font-size: 11px; color: var(--tbk-muted); }
.tbk-cols > .active .tbk-cols__lbl { color: var(--tbk-text); font-weight: 600; }
/* спарклайн — рисует kit.js: <span class="tbk-spark" data-tbk-spark="3,5,2,8"></span>; цвет — color */
.tbk-spark { display: inline-block; width: 64px; height: 24px; color: var(--tbk-blue); vertical-align: middle; }
.tbk-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* числа колонками через тонкий разделитель (.ma_acols) */
.tbk-stats { display: grid; grid-template-columns: repeat(var(--tbk-cols, 3), minmax(0, 1fr)); }
.tbk-stats > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 2px 12px; border-left: 1px solid var(--tbk-line); }
.tbk-stats > div:first-child { padding-left: 0; border-left: 0; }
.tbk-stats b { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.tbk-stats) b { color: var(--tbk-text); }   /* слабее .tbk-up / .tbk-down */
.tbk-stats > div > span { font-size: 12px; color: var(--tbk-muted); }
.tbk-stats b > .tbk-spark { margin: -3px 0; }   /* спарклайн 24 px не раздвигает строку числа: подпись на одном уровне с соседними */

/* =================================== Карточка лота: метки, заметка, клиенты (19.10.2026) =================================== */
:where(button.tbk-link) { padding: 0; border: 0; background: none; font: inherit; }   /* ссылка-кнопка без рамки и фона браузера */
/* метки лота — свои у пользователя: название и цвет из палитры (pages/head_modals.php #mark_color_picker). На карточке — над верхним краем слева,
   как .lot_mark (2023/web/css/lot.css); выбор — список «Метки» (2023/view/modal/marks.twig, 2023/web/js/lotMenu.js), правка — окно «Мои метки» (#set_lot_mark_modal) */
.tbk-lmarks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.tbk-lmarks:empty { display: none; }
.tbk-lmarks--top { position: absolute; top: 0; left: 16px; z-index: 1; transform: translateY(-50%); }
:has(> .tbk-lmarks--top) { position: relative; }
.tbk-lmark { --c: var(--tbk-mark-gray); display: inline-flex; align-items: center; height: 18px; padding: 1px 8px 0; border-radius: var(--tbk-r-sm); background: var(--c);
             color: var(--tbk-surface); font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; box-shadow: var(--tbk-sh-pop); }
.tbk-lmarks:not(.tbk-lmarks--top) > .tbk-lmark { box-shadow: none; }
.tbk-lmark-dot { --c: var(--tbk-mark-gray); flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.tbk-lmark-pop { min-width: 220px; padding: 6px; }
.tbk-lmark-pop__title { margin: 0; padding: 4px 8px 6px; font-size: 12px; font-weight: 500; color: var(--tbk-muted); }
.tbk-lmark-pop .tbk-lb { min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.tbk-lmark-pop__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 8px 8px 4px; border-top: 1px solid var(--tbk-line); }
.tbk-lmark-edit { display: flex; flex-direction: column; gap: 8px; }
.tbk-lmark-row { display: flex; align-items: center; gap: 8px; }
.tbk-lmark-row > .tbk-input { flex: 1; min-width: 0; height: 32px; }
.tbk-swatch { --c: var(--tbk-mark-gray); flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; transition: box-shadow .15s; }
.tbk-swatch:hover, .tbk-swatch.open { box-shadow: 0 0 0 2px var(--tbk-surface), 0 0 0 3px var(--tbk-border-btn); }
.tbk-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tbk-surface), 0 0 0 4px var(--c); }
.tbk-palette { display: grid; grid-template-columns: repeat(5, 20px); gap: 10px; padding: 12px; }
.tbk-pop.tbk-palette { display: none; min-width: 0; }
.tbk-pop.tbk-palette.open { display: grid; }
/* заметка к лоту — видна только пользователю, как .lot_note (2023/web/css/lot.css): бледно-оранжевая, значок icon-note в оранжевом круге; текст правится на месте.
   Пустая скрыта, пока не открыта кнопкой [data-tbk-note] (kit.js) */
.tbk-lnote { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: var(--tbk-r); background: var(--tbk-note-bg); font-size: 13px; line-height: 18px; color: var(--tbk-text); transition: box-shadow .15s; }
.tbk-lnote:not(.is-open):has(> .tbk-lnote__text:empty), .tbk-lnote.is-hidden { display: none; }   /* .is-hidden — скрыта повторным нажатием кнопки, и с текстом (20.10.2026) */
.tbk-lnote:focus-within { box-shadow: inset 0 0 0 1px var(--tbk-note-ic); }
.tbk-lnote__ic { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-top: -1px; border-radius: 50%; background: var(--tbk-note-ic); color: var(--tbk-surface); font-size: 10px; }
.tbk-lnote__ic > i::before { margin: 0; }
.tbk-lnote__text { flex: 1; min-width: 0; outline: 0; overflow-wrap: anywhere; cursor: text; }
.tbk-lnote__text:empty::before { content: attr(data-placeholder); color: var(--tbk-muted); }
/* «Подходит для» — клиенты из кабинета агента, которым подходит лот; только в прототипе lot-card (.lot_fit_row), на сайте нет */
.tbk-fit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--tbk-gray); }
.tbk-fit__label { font-weight: 500; color: var(--tbk-text); }
.tbk-fit__item { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid var(--tbk-border-btn); border-radius: var(--tbk-r-xs); background: var(--tbk-surface);
                 color: var(--tbk-text-2); font-size: 12px; text-decoration: none; white-space: nowrap; transition: box-shadow .15s; }
.tbk-fit__item:hover { box-shadow: var(--tbk-sh-hover); text-decoration: none; }
.tbk-fit__item > .tbk-svg { color: var(--tbk-muted); }
.tbk-fit__item.is-extra { display: none; }
.tbk-fit__item--locked { cursor: help; }   /* тариф ниже — один пункт под маской, не ссылка */
.tbk-fit__item--locked:hover { box-shadow: none; }
.tbk-fit.is-open > .tbk-fit__item.is-extra { display: inline-flex; }
.tbk-fit.is-open > .tbk-fit__more { display: none; }
/* информация от организатора — вид прототипа lot-card (_archive/prototype-2026-10-09/lot.css .inspection_text), данные — как .inspection_text страницы лота
   (script/lot_func/lot_page.php:567): светло-зелёная плашка, значок /img/icons/info.svg 16 px, свёрнута в строку с «…»; нажатие на строку (kit.js) — текст целиком,
   телефоны и почта. В карточке — с tbk-lot__row: во всю ширину карточки, без черты (21.10.2026, со стенда lot-card) */
.tbk-insp { display: block; border-radius: var(--tbk-r); background: var(--tbk-insp-bg); font-size: 13px; line-height: 18px; color: var(--tbk-insp-text); }
.tbk-lot__row.tbk-insp { display: block; margin: 0; padding: 0; border-top: 0; border-radius: 0; color: var(--tbk-insp-text); }
.tbk-lot__card > .tbk-insp:last-child { border-radius: 0 0 calc(var(--tbk-r-md) - 1px) calc(var(--tbk-r-md) - 1px); }   /* последняя строка — по скруглению карточки */
.tbk-insp__head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 20px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tbk-insp__head > img { flex: none; width: 16px; height: 16px; }
.tbk-insp__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbk-insp__chev { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; color: var(--tbk-muted); transition: transform .18s, color .15s; }
.tbk-insp__head:hover > .tbk-insp__chev { color: var(--tbk-text); }
.tbk-insp.is-open .tbk-insp__head { align-items: flex-start; }
.tbk-insp.is-open .tbk-insp__head > img { margin-top: 1px; }
.tbk-insp.is-open .tbk-insp__text { white-space: normal; }
.tbk-insp.is-open .tbk-insp__chev { transform: rotate(180deg); }
.tbk-insp__contacts { display: none; flex-wrap: wrap; gap: 6px 20px; margin: -2px 48px 0 44px; padding-bottom: 10px; }   /* слева — под текстом (20 + 16 + 8), справа — до шеврона */
.tbk-insp.is-open .tbk-insp__contacts { display: flex; }
@media (max-width: 768px) {
    .tbk-insp__head { padding: 10px 16px; }   /* как отступ строк tbk-lot__row на ≤768 */
    .tbk-insp__contacts { margin: -2px 16px 0 40px; }
    .tbk-lot__card > .tbk-insp:last-child { border-radius: 0; }   /* низ карточки на ≤768 без скругления */
}
@media (max-width: 600px) { .tbk-insp__contacts { margin-left: 16px; } }

/* ---------- карточка лота tbk-lot (20.10.2026, стенд direct-sales #2427) — вид стенда lot-card (2023/lot-card/lot.css):
   белая карточка с тенью, справа столбец действий; шапка (статус, номер, метки), текст, даты, цены справа; строки снизу (должник, итоги, файлы, задача).
   Без фото — две колонки, с фото — .tbk-lot__main--photo. ≤768 — колонкой, действия строкой снизу. ---------- */
.tbk-lots { display: flex; flex-direction: column; gap: 20px; }
.tbk-lot { position: relative; display: flex; align-items: flex-start; width: 100%; font-family: var(--font-family); }
.tbk-lot__card { flex: 1; min-width: 0; position: relative; z-index: 1; background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-md) 0 var(--tbk-r-md) var(--tbk-r-md);
                 box-shadow: var(--tbk-sh-lot); transition: box-shadow .18s; }
.tbk-lot:hover .tbk-lot__card { box-shadow: var(--tbk-sh-lot-hover); }
.tbk-lot__card:has(.tbk-tip.is-open) { z-index: 3; }   /* открытая подсказка — поверх колонки действий (z-index 2) и соседних карточек */
/* без фото: цены справа сверху (float), описание обтекает их и дальше идёт на всю ширину карточки (20.10.2026, #2427); в разметке .tbk-lot__prices — первым.
   Колонка цен — не уже --tbk-lot-pw; заметка в колонку цен не заходит ни рядом с ценами, ни под ними (отступ справа = колонка + 40) */
.tbk-lot__main { --tbk-lot-pw: 150px; display: flow-root; padding: 20px; }
.tbk-lot__main > .tbk-lot__prices { float: right; min-width: var(--tbk-lot-pw); margin: 0 0 8px 40px; }
.tbk-lot__main--photo { display: grid; grid-template-areas: "photo head price" "photo body price"; grid-template-columns: 175px minmax(0, 1fr) auto; column-gap: 20px; }
.tbk-lot__main--photo > .tbk-lot__prices { float: none; min-width: 0; margin: 0; }
.tbk-lot__main--photo > .tbk-photo { grid-area: photo; }
.tbk-lot__head { grid-area: head; display: flex; align-items: center; gap: 4px 12px; min-width: 0; padding-bottom: 8px; font-size: 13px; color: var(--tbk-muted); white-space: nowrap; overflow: hidden; }
.tbk-lot__head > * { flex: none; }
.tbk-lot__status { width: 10px; height: 10px; margin-right: -6px; border-radius: 50%; background: var(--tbk-st-on); }
.tbk-lot__status--off { background: var(--tbk-st-off); }
.tbk-lot__status--wait { background: var(--tbk-st-wait); }
.tbk-lot__status--done { background: var(--tbk-st-done); }
.tbk-lot__num { font-weight: 600; color: var(--tbk-blue); text-decoration: none; }
.tbk-lot__num:hover { text-decoration: underline; }
.tbk-lot__src { display: inline-flex; align-items: center; gap: 4px; color: var(--tbk-muted); text-decoration: none; }
.tbk-lot__src:hover { color: var(--tbk-text); }
.tbk-lot__body { grid-area: body; min-width: 0; }
.tbk-lot__body > * + * { margin-top: 8px; }
.tbk-lot__main > .tbk-lot__body > .tbk-lnote { margin-right: calc(var(--tbk-lot-pw) + 40px); }   /* заметка — левее колонки цен (flex-контейнер обтекание не допускает) */
.tbk-lot__main--photo > .tbk-lot__body > .tbk-lnote { margin-right: 0; }
.tbk-lot__main--photo > .tbk-lot__body { display: flex; flex-direction: column; gap: 8px; }
.tbk-lot__main--photo > .tbk-lot__body > * + * { margin-top: 0; }
.tbk-lot__title { margin: 0; font-size: 13px; font-weight: 700; line-height: 18px; color: var(--tbk-text); }
.tbk-lot__title a { color: inherit; text-decoration: none; }
.tbk-lot__title a:hover { color: var(--tbk-blue); }
.tbk-lot__text { font-size: 14px; line-height: 20px; color: var(--tbk-text); overflow-wrap: anywhere; }
.tbk-lot__text.is-clamped { max-height: 60px; overflow: clip; }   /* 3 строки; clip, а не hidden и не line-clamp — не создаёт свой блок, текст обтекает цены и идёт на всю ширину */
.tbk-lot__text mark { background: var(--tbk-hl); color: inherit; font-weight: 600; }   /* совпадение с запросом — как span.highlight прямых продаж (css/style.css:4889), 20.10.2026; было красным текстом */
.tbk-lot__more { display: block; align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--tbk-gray); cursor: pointer; }
.tbk-lot__more:hover { color: var(--tbk-text); }
/* даты — как .inline_dates стенда lot-card: подпись, «с» дата время, «до» дата время; время красное */
.tbk-lot__dates { display: grid; grid-template-columns: auto repeat(6, auto); column-gap: 4px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 6px 0 0; padding: 8px 12px;
                  border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-sm); background: var(--tbk-hover); font-size: 13px; line-height: 18px; color: var(--tbk-gray); }
.tbk-lot__dates > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; justify-items: start; }
.tbk-lot__dates dt { margin-right: 8px; white-space: nowrap; }
.tbk-lot__dates dd { display: contents; }
.tbk-lot__dates b { font-weight: 400; color: var(--tbk-text); white-space: nowrap; }
.tbk-lot__dates s { text-decoration: none; color: var(--tbk-red); white-space: nowrap; }
/* цены справа */
.tbk-lot__prices { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; white-space: nowrap; }
.tbk-lot__price { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; color: var(--tbk-text); }
.tbk-lot__price > img { width: 10px; height: auto; }
.tbk-lot__plabel { margin: -8px 0 0; font-size: 11px; color: var(--tbk-gray); }
.tbk-lot__plabel > .tbk-tip { display: none; }   /* график снижения у подписи — только на телефоне; на десктопе — строка .tbk-lot__pmini--reduce */
.tbk-lot__pmini { margin: 0; font-size: 11px; line-height: 16px; color: var(--tbk-gray); }
.tbk-lot__pmini > b { display: block; font-size: 13px; font-weight: 600; color: var(--tbk-text); }
.tbk-lot__pmini > b.is-up, .tbk-lot__kv > b.is-up { color: var(--tbk-green); }
.tbk-lot__pmini > b.is-down, .tbk-lot__kv > b.is-down { color: var(--tbk-red); }
/* строки под основной частью: должник, итоги, файлы, задача */
/* строки под чертой — как .analysis карточки лота на бою (2023/web/css/lot.css): подписи светло-серые, черта и разделители #EDEAE9 (20.10.2026) */
.tbk-lot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 0 20px; padding: 11px 0; border-top: 1px solid var(--tbk-sep); font-size: 13px; line-height: 18px; color: var(--tbk-muted); }
.tbk-lot__row > .tbk-lot__kv + .tbk-lot__kv { position: relative; }
.tbk-lot__row > .tbk-lot__kv + .tbk-lot__kv:not(.tbk-lot__end)::before { content: ""; position: absolute; left: -10.5px; top: 50%; width: 1px; height: 17px; margin-top: -8.5px; background: var(--tbk-sep); }   /* .analysis .line; перед __end (вправо) — нет */
.tbk-lot__row > .tbk-lot__end { margin-left: auto; }
.tbk-lot__kv { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tbk-lot__kv > .tbk-svg { flex: none; color: var(--tbk-muted); }
.tbk-lot__kv > img { flex: none; }   /* значок региона — /img/icons/location.svg, как .debtor_location карточки лота (2023/view/lot/lot.twig:196) (20.10.2026) */
.tbk-lot__kv > .tbk-btn--link { height: 18px; padding: 0; }   /* кнопка в строке («Скопировать») не выше строки — строки организатора и должника одной высоты (20.10.2026) */
.tbk-lot__kv > b { font-weight: 500; color: var(--tbk-text); }
.tbk-lot__kv a { color: var(--tbk-text); text-decoration: none; }
.tbk-lot__kv a:hover { color: var(--tbk-blue); }
.tbk-lot__kv > b.tbk-lot__win { color: var(--tbk-red); }   /* цена продажи — как «Конечная цена» (.color-red) */
/* длинное имя (победитель, должник, организатор) — «…», соседние пары не уезжают; полное — в title (20.10.2026) */
.tbk-lot__row--line { flex-wrap: nowrap; }
.tbk-lot__row--line > * { flex: none; }
.tbk-lot__row--line > .tbk-lot__kv--cut { flex: 0 1 auto; }
.tbk-lot__kv--cut { max-width: 100%; }
.tbk-lot__kv--cut > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Процент изм.» — плашка .pricePercentLabel: цена выше начальной — красная (--up), ниже — зелёная (--down), как percentColor в 2023/script/func.php */
.tbk-lot__pct { padding: 2px 6px; border-radius: var(--tbk-r-xs); font-size: 13px; line-height: 16px; color: #fff; white-space: nowrap; }
.tbk-lot__pct--up { background: var(--tbk-bg-red); }
.tbk-lot__pct--down { background: var(--tbk-bg-green); }
.tbk-lot__file { display: inline-flex; align-items: center; gap: 4px; color: var(--tbk-text); text-decoration: none; cursor: pointer; }
.tbk-lot__file:hover { text-decoration: underline; }
.tbk-lot__file > img { width: 16px; height: 16px; }
.tbk-lot__file.is-locked { color: var(--tbk-muted); cursor: default; text-decoration: none; }
/* столбец действий справа — как .lot_actions стенда lot-card: 38 px, кнопки 34 px; наведённая и включённая — оранжевые */
.tbk-lot__acts { position: relative; z-index: 2; flex: none; width: 38px; border-radius: 0 var(--tbk-r-md) var(--tbk-r-md) 0; background: var(--tbk-surface); box-shadow: var(--tbk-sh-lot); transition: box-shadow .18s; }
.tbk-lot:hover .tbk-lot__acts { box-shadow: var(--tbk-sh-lot-hover); }
.tbk-lot__act { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 34px; padding: 0; border: 0; background: var(--tbk-surface); color: var(--tbk-gray); cursor: pointer; }
.tbk-lot__act + .tbk-lot__act { border-top: 1px solid var(--tbk-line); }
.tbk-lot__act:first-child { border-radius: 0 var(--tbk-r-md) 0 0; }
.tbk-lot__act:last-child { border-radius: 0 0 var(--tbk-r-md) 0; }
.tbk-lot__act:hover { z-index: 2; background: var(--tbk-act-bg); color: var(--tbk-act); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tbk-act) 30%, transparent); }
.tbk-lot__act.is-on { color: var(--tbk-act); }
.tbk-lot__act--fill.is-on .tbk-svg { fill: currentColor; }   /* избранное — звезда заливается */
.tbk-lot__act > i { position: absolute; top: 3px; right: 4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: var(--tbk-r-pill); background: var(--tbk-act); color: var(--tbk-surface);
                    font-size: 9px; font-style: normal; font-weight: 600; line-height: 14px; box-sizing: border-box; }
/* подпись действия — тёмная, справа от кнопки (на сайте салатовая data-hint — в набор не берём, style.md) */
.tbk-lot__act[data-hint]:hover::after { content: attr(data-hint); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: var(--tbk-r-xs);
                                        background: var(--tbk-tip-dark); color: var(--tbk-surface); font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; }
/* удалённый (цена завершённого — обычным цветом, как у активного, 20.10.2026) */
.tbk-lot.is-deleted .tbk-lot__card { opacity: .6; }
@media (max-width: 768px) {
    .tbk-lot { flex-direction: column; }
    .tbk-lot__card { width: 100%; box-sizing: border-box; border-radius: var(--tbk-r-md) var(--tbk-r-md) 0 0; box-shadow: none; }
    .tbk-lot:hover .tbk-lot__card { box-shadow: none; }
    .tbk-lot__main, .tbk-lot__main--photo { display: grid; grid-template-areas: "head" "body" "price"; grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 16px; }
    .tbk-lot__main > .tbk-lot__prices { float: none; min-width: 0; margin: 0; }
    .tbk-lot__main > .tbk-lot__body > .tbk-lnote { margin-right: 0; }
    .tbk-lot__main--photo { grid-template-areas: "head" "photo" "body" "price"; }
    .tbk-lot__main--photo > .tbk-photo { width: 100%; height: 175px; }
    .tbk-lot__head { flex-wrap: wrap; white-space: normal; padding-bottom: 0; }
    /* две равные колонки, как .lot_prices на бою (2023/lot-card/lot.css ≤768): слева цена с подписью, справа первая малая (задаток), остальные — ниже по колонкам.
       График снижения — значком у подписи цены, строки «Снижение цены» нет (20.10.2026) */
    .tbk-lot__prices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: start; align-items: start; gap: 8px 20px; text-align: left; }
    .tbk-lot__prices > .tbk-lot__price { grid-column: 1; grid-row: 1; }
    .tbk-lot__prices > .tbk-lot__plabel { grid-column: 1; grid-row: 2; }
    .tbk-lot__prices > .tbk-lot__plabel + .tbk-lot__pmini { grid-column: 2; grid-row: 1 / span 2; }
    .tbk-lot__plabel { margin-top: -6px; }
    .tbk-lot__plabel > .tbk-tip { display: inline-flex; margin-left: 4px; vertical-align: -3px; }
    .tbk-lot__pmini--reduce { display: none; }
    .tbk-lot__dates { grid-template-columns: auto auto auto; row-gap: 4px; }
    .tbk-lot__dates dt { grid-column: 1 / -1; font-weight: 600; color: var(--tbk-text); }
    .tbk-lot__row { margin: 0 16px; gap: 6px 14px; }
    .tbk-lot__row > .tbk-lot__end { margin-left: 0; }
    .tbk-lot__row--line.tbk-lot__row--res { flex-wrap: wrap; }   /* итоги (6 пар) в строку не влезают — переносим, длинное имя — одной строкой с «…» */
    .tbk-lot__row > .tbk-lot__kv + .tbk-lot__kv::before { display: none; }   /* как .analysis .line на бою */
    .tbk-lot__acts { display: flex; width: 100%; border: 1px solid var(--tbk-line); border-top: 0; box-sizing: border-box; border-radius: 0 0 var(--tbk-r-md) var(--tbk-r-md); box-shadow: none; }
    .tbk-lot:hover .tbk-lot__acts { box-shadow: none; }
    .tbk-lot__act { flex: 1; width: auto; height: 46px; }
    .tbk-lot__act + .tbk-lot__act { border-top: 0; border-left: 1px solid var(--tbk-line); }
    .tbk-lot__act:first-child { border-radius: 0 0 0 var(--tbk-r-md); }
    .tbk-lot__act:last-child { border-radius: 0 0 var(--tbk-r-md) 0; }
    .tbk-lot__act[data-hint]:hover::after { display: none; }
}
@media (max-width: 600px) { .tbk-lot__row--line { flex-wrap: wrap; } }   /* телефон: имя и вторая пара в строку не влезают — переносим, имя — одной строкой с «…» */

/* =================================== Шаблоны блоков лендинга (21.10.2026) ===================================
   Раскладка — по Flowbite Blocks → Marketing UI, Preline → Marketing, Tailwind Plus → Marketing; оформление — /about (view/about/about.twig, 2023/web/css/about.css)
   и токены набора; выделение — тенью и рамкой --tbk-sel, не салатовым (style.md скилла stand). Витрина — docs/93-bloki.php.
   Блок кладётся в секцию section.tbk-lp: по её ширине блоки перестраиваются (container queries, как .about_ft_panel), поэтому одинаково на странице и в превью.
   Пороги ширины секции: ≤ 720 — сетки 3–4 в 2 колонки; ≤ 600 — колонки столбиком; ≤ 420 — телефон (заголовки по левому краю). */

/* ---------- секция: фон, отступы, ширина 1000 (.about_section, .about_container, .about_pad) ---------- */
.tbk-lp { container: tbk-lp / inline-size; padding: clamp(36px, 6vw, 56px) clamp(16px, 4vw, 32px); background: var(--tbk-surface); color: var(--tbk-text); font-size: 14px; line-height: 1.5; }
.tbk-lp :is(p, ul, ol, li, blockquote, figcaption, summary) { font-family: var(--font-family); }   /* боевой style.css ставит p и ul шрифт Exo 2 */
.tbk-lp--gray { background: var(--tbk-bg); }
.tbk-lp--blue { background: var(--tbk-lp-blue); }
.tbk-lp--plate { background: var(--tbk-lp-gray); }
.tbk-lp--sm { padding-top: clamp(24px, 4vw, 32px); padding-bottom: clamp(24px, 4vw, 32px); }
.tbk-lp--lg { padding-top: clamp(48px, 8vw, 80px); padding-bottom: clamp(48px, 8vw, 80px); }
.tbk-lp--round { border-radius: var(--tbk-r-lg); }
.tbk-lp__in { max-width: 1000px; margin: 0 auto; }
.tbk-lp__in--narrow { max-width: 760px; }
.tbk-lp__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }   /* общая кнопка под блоком (.about_tiers_cta) */

/* заголовок секции: метка, заголовок 28/700 (.about_h2), лид (.about_lead) */
.tbk-lp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 720px; margin-bottom: 32px; }
.tbk-lp-head--center { align-items: center; margin-left: auto; margin-right: auto; text-align: center; }
.tbk-lp-head__title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--tbk-text); text-wrap: balance; }
.tbk-lp-head__lead { margin: 0; max-width: 600px; font-size: 15px; line-height: 1.6; color: var(--tbk-gray); }
.tbk-lp-head--split { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; max-width: none; }
.tbk-lp-head--split > div { display: flex; flex: 1 1 360px; flex-direction: column; align-items: flex-start; gap: 12px; }
.tbk-lp-head--sm .tbk-lp-head__title { font-size: 22px; }
@container tbk-lp (max-width: 420px) {
    .tbk-lp-head { margin-bottom: 24px; }
    .tbk-lp-head__title { font-size: 22px; }
    .tbk-lp-head--center { align-items: flex-start; text-align: left; }
}

/* ---------- первый экран: текст слева, скриншот / форма / видео справа; --center — как /about (.about_hc, .about_hcS5) ---------- */
.tbk-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.tbk-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.tbk-hero__title { margin: 0; text-align: inherit; font-size: 40px; font-weight: 700; line-height: 1.15; color: var(--tbk-text); text-wrap: balance; }
.tbk-hero__sub { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--tbk-text-2); }
.tbk-hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.tbk-hero__note { margin: 0; font-size: 13px; color: var(--tbk-muted); }
.tbk-hero__media { min-width: 0; }
.tbk-hero__media > .tbk-shot { box-shadow: var(--tbk-sh-shot); }
.tbk-hero__stats { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.tbk-hero--center { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; text-align: center; }
.tbk-hero--center .tbk-hero__body { align-items: center; max-width: 760px; }
.tbk-hero--center .tbk-hero__stats { max-width: 880px; }
.tbk-hero--center .tbk-lineform { justify-content: center; }
.tbk-hero--compact { grid-template-columns: minmax(0, 1fr); }
.tbk-hero--compact .tbk-hero__title { font-size: 32px; }
@container tbk-lp (max-width: 720px) { .tbk-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container tbk-lp (max-width: 600px) {
    .tbk-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .tbk-hero__title { font-size: 32px; }
}
@container tbk-lp (max-width: 420px) {
    .tbk-hero__title, .tbk-hero--compact .tbk-hero__title { font-size: 26px; }
    .tbk-hero__sub { font-size: 15px; }
    .tbk-hero--center { justify-items: stretch; gap: 28px; text-align: left; }
    .tbk-hero--center .tbk-hero__body { align-items: flex-start; }
    .tbk-hero--center .tbk-lineform { justify-content: flex-start; }
    .tbk-hero__stats { gap: 8px; }
    .tbk-hero__acts { align-self: stretch; }
    .tbk-hero__acts > .tbk-btn { flex: 1 1 100%; }
}

/* поле и кнопка в одну строку: телефон в первом экране, почта в подписке (.about_hero_form) */
.tbk-lineform { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 480px; }
.tbk-lineform > .tbk-input, .tbk-lineform > .tbk-unit { flex: 1 1 220px; width: auto; height: 44px; }
.tbk-lineform > .tbk-btn { flex: none; height: 44px; }
.tbk-lineform__note { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.45; color: var(--tbk-muted); }
.tbk-lineform__note a { color: inherit; text-decoration: underline; }
@container tbk-lp (max-width: 420px) { .tbk-lineform > .tbk-btn { flex: 1 1 100%; } }

/* ---------- призыв к действию: по центру (.about_soft), строкой, с картинкой, Премиум ---------- */
.tbk-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.tbk-cta__ic { display: flex; margin-bottom: 4px; color: var(--tbk-blue); }
.tbk-cta__body { display: flex; flex-direction: column; align-items: inherit; gap: 8px; min-width: 0; }
.tbk-cta__title { margin: 0; max-width: 640px; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--tbk-text); text-wrap: balance; }
.tbk-cta__text { margin: 0; max-width: 480px; font-size: 14px; line-height: 1.6; color: var(--tbk-gray); }
.tbk-cta__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.tbk-cta--row { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding: 28px 32px; border-radius: var(--tbk-r-lg); background: var(--tbk-lp-gray); text-align: left; }
.tbk-cta--row > .tbk-cta__body { flex: 1 1 360px; align-items: flex-start; }
.tbk-cta--row .tbk-cta__acts { margin-top: 0; }
.tbk-cta--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 40px; text-align: left;
                  background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-lg); box-shadow: var(--tbk-sh-card); }
.tbk-cta--media > .tbk-cta__body { align-items: flex-start; }
.tbk-cta--media .tbk-cta__acts { justify-content: flex-start; }
.tbk-cta--premium { padding: 40px 32px; border-radius: var(--tbk-r-lg); background: var(--tbk-upgrade); }   /* градиент апгрейда тарифа (.tooltip__premium-overlay) */
.tbk-cta--premium :is(.tbk-cta__ic, .tbk-cta__title) { color: #fff; }
.tbk-cta--premium .tbk-cta__text { color: rgba(255, 255, 255, .88); }
.tbk-cta--gold { padding: 40px 32px; border-radius: var(--tbk-r-lg); background: var(--tbk-gold-bg); box-shadow: inset 0 0 0 1px var(--tbk-gold-line); }   /* /lp/awards */
.tbk-cta--gold .tbk-cta__title { color: var(--tbk-gold-title); }
.tbk-cta--gold .tbk-cta__text { color: var(--tbk-gold-txt); }
.tbk-cta--gold :is(.tbk-cta__ic, .tbk-cta__accent) { color: var(--tbk-gold); }   /* __accent — слово в заголовке («Профи») */
@container tbk-lp (max-width: 600px) {
    .tbk-cta--media { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
    .tbk-cta--row { padding: 20px; }
    .tbk-cta--premium, .tbk-cta--gold { padding: 28px 20px; }
}
@container tbk-lp (max-width: 420px) {
    .tbk-cta, .tbk-cta__body { align-items: flex-start; text-align: left; }
    .tbk-cta__title { font-size: 20px; }
    .tbk-cta__acts { justify-content: flex-start; }
    .tbk-cta__acts > .tbk-btn { flex: 1 1 100%; }
}
/* баннером: значок, текст, кнопка в один ряд, ниже по высоте (direct-sales «нет доступа»); цвет — --premium / --gold.
   По ширине содержимого баннера (без отступов): ≤ 680 px — без значка, кнопка под текстом; ≤ 480 px — кнопка во всю ширину */
.tbk-cta--bar { container: tbk-cta-bar / inline-size; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 24px; text-align: left; }
.tbk-cta--bar > .tbk-cta__ic { flex: none; margin: 0; }
.tbk-cta--bar > .tbk-cta__body { flex: 1 1 0; align-items: flex-start; gap: 4px; }
.tbk-cta--bar .tbk-cta__title { max-width: none; font-size: 18px; }
.tbk-cta--bar .tbk-cta__text { max-width: none; font-size: 13px; line-height: 1.5; }
.tbk-cta--bar > .tbk-cta__acts { flex: none; margin-top: 0; }
@container tbk-cta-bar (max-width: 680px) {
    .tbk-cta--bar > .tbk-cta__ic { display: none; }
    .tbk-cta--bar > .tbk-cta__body { flex-basis: 100%; }
}
@container tbk-cta-bar (max-width: 480px) {
    .tbk-cta--bar > .tbk-cta__acts { flex: 1 1 100%; }
    .tbk-cta--bar > .tbk-cta__acts > .tbk-btn { flex: 1 1 100%; }
}
@media (max-width: 600px) { .tbk-cta--bar { padding: 16px; } }

/* ---------- отзывы: цитата с фото (.about_bq), крупная по центру, карточки сеткой ---------- */
.tbk-quote { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; align-items: center; margin: 0; padding: 32px 36px;
             background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-xl); box-shadow: var(--tbk-sh-soft); }
.tbk-quote__who { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.tbk-quote__who > .tbk-avatar { width: 120px; height: 120px; margin-bottom: 10px; font-size: 36px; box-shadow: 0 0 0 4px var(--tbk-surface), 0 0 0 6px var(--tbk-lime); }
.tbk-quote__name { display: block; font-size: 15px; font-weight: 700; color: var(--tbk-text); }
.tbk-quote__role { display: block; font-size: 12.5px; color: var(--tbk-gray); }
.tbk-quote__text { position: relative; margin: 0; padding-top: 31px; }
.tbk-quote__text::before { content: ''; position: absolute; top: 0; left: 0; width: 22px; height: 17px; background: var(--tbk-lime);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M0 26V15.6C0 6.9 4.6 1.7 13.8 0l1.5 3.6C10.6 5 8.2 8 7.9 12.4H14V26H0zm19 0V15.6C19 6.9 23.6 1.7 32.8 0l1.5 3.6C29.6 5 27.2 8 26.9 12.4H33V26H19z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M0 26V15.6C0 6.9 4.6 1.7 13.8 0l1.5 3.6C10.6 5 8.2 8 7.9 12.4H14V26H0zm19 0V15.6C19 6.9 23.6 1.7 32.8 0l1.5 3.6C29.6 5 27.2 8 26.9 12.4H33V26H19z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tbk-quote__text p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--tbk-text-2); }
.tbk-quote__text p + p { margin-top: 10px; }
/* крупная по центру: без карточки, текст 20 px, автор строкой под ним */
.tbk-quote--center { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; max-width: 760px; margin: 0 auto; padding: 0; text-align: center;
                     background: none; border: 0; box-shadow: none; }
.tbk-quote--center .tbk-quote__text { order: -1; padding-top: 40px; }
.tbk-quote--center .tbk-quote__text::before { left: 50%; width: 30px; height: 23px; margin-left: -15px; }
.tbk-quote--center .tbk-quote__text p { font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--tbk-text); }
.tbk-quote--center .tbk-quote__who { display: grid; grid-template-columns: 48px auto; column-gap: 12px; align-items: center; text-align: left; }
.tbk-quote--center .tbk-quote__who > .tbk-avatar { grid-row: span 2; width: 48px; height: 48px; margin: 0; font-size: 16px; box-shadow: none; }
@container tbk-lp (max-width: 600px) { .tbk-quote { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px; } }
@container tbk-lp (max-width: 420px) {
    .tbk-quote--center { justify-items: start; padding: 0; text-align: left; }
    .tbk-quote--center .tbk-quote__text::before { left: 0; margin-left: 0; }
    .tbk-quote--center .tbk-quote__text p { font-size: 17px; }
}
/* карточки отзывов */
.tbk-reviews { display: grid; grid-template-columns: repeat(var(--tbk-cols, 3), minmax(0, 1fr)); gap: 20px; }
.tbk-reviews--2 { --tbk-cols: 2; }
.tbk-review { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 24px; background: var(--tbk-surface); border: 1px solid var(--tbk-line);
              border-radius: var(--tbk-r-xl); box-shadow: var(--tbk-sh-soft); transition: box-shadow .15s; }
.tbk-review:hover { box-shadow: var(--tbk-sh-lift); }
.tbk-review__text { flex: 1; margin: 0; font-size: 14px; line-height: 1.6; color: var(--tbk-text-2); }
.tbk-review__who { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--tbk-line); }
.tbk-review__name { display: block; font-size: 14px; font-weight: 600; color: var(--tbk-text); }
.tbk-review__role { display: block; font-size: 12.5px; color: var(--tbk-muted); }
/* оценка звёздами: 5 значков, выключенные — .is-off */
.tbk-rating { display: inline-flex; gap: 2px; color: var(--tbk-mark-yellow); }
.tbk-rating > .is-off { color: var(--tbk-sel); }
@container tbk-lp (max-width: 720px) { .tbk-reviews { --tbk-cols: 2; } }
@container tbk-lp (max-width: 600px) { .tbk-reviews { --tbk-cols: 1; } .tbk-review { padding: 20px; } }

/* ---------- тарифы: таблица сравнения (view/tariff/tariff-table.twig), уровни «лестницей» (.about_tl) ---------- */
/* число тарифов — --tbk-pt-cols (4), --2, --3; выделенный столбец — --hit2 / --hit3 / --hit4 (номер тарифа слева); группы строк — <details>;
   на ≤ 600 — прокрутка вбок, названия строк закреплены слева */
.tbk-ptable { --tbk-pt-cols: 4; background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-lg); box-shadow: var(--tbk-sh-card); }
.tbk-ptable--2 { --tbk-pt-cols: 2; }   .tbk-ptable--3 { --tbk-pt-cols: 3; }
.tbk-ptable__row { display: grid; grid-template-columns: minmax(160px, 1.6fr) repeat(var(--tbk-pt-cols), minmax(84px, 1fr)); align-items: stretch; border-top: 1px solid var(--tbk-line); }
.tbk-ptable__row > * { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; text-align: center; }
.tbk-ptable__row > :first-child { justify-content: flex-start; gap: 6px; padding-left: 20px; text-align: left; font-size: 14px; color: var(--tbk-text-2); }
.tbk-ptable__row--head { border-top: 0; }
.tbk-ptable__row > .tbk-ptable__plan { flex-direction: column; justify-content: flex-end; gap: 6px; padding: 16px 8px; }
.tbk-ptable__name { font-size: 15px; font-weight: 700; color: var(--tbk-text); }
.tbk-ptable__price { font-size: 13px; color: var(--tbk-gray); white-space: nowrap; }
.tbk-ptable__price b { font-size: 18px; font-weight: 800; color: var(--tbk-text); }
.tbk-ptable__hit { padding: 2px 10px; border-radius: var(--tbk-r-pill); background: var(--tbk-lime); color: var(--tbk-text); font-size: 11px; font-weight: 700; }   /* «Хит» — как .about_tl_hit */
.tbk-ptable__txt { font-size: 12.5px; line-height: 1.35; color: var(--tbk-value); }
.tbk-ptable__yes::before, .tbk-ptable__no::before { content: ''; display: block; width: 16px; height: 16px; background: var(--tbk-check);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.4 3.4 7-7.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.4 3.4 7-7.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.tbk-ptable__no::before { width: 12px; height: 2px; border-radius: 1px; background: var(--tbk-border); -webkit-mask: none; mask: none; }
.tbk-ptable__grp > summary { display: flex; align-items: center; gap: 8px; padding: 18px 20px 10px; border-top: 1px solid var(--tbk-line); list-style: none; cursor: pointer;
                             font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tbk-value); }
.tbk-ptable__grp > summary::-webkit-details-marker { display: none; }
.tbk-ptable__grp > summary::after { content: ''; width: 7px; height: 7px; margin-top: 2px; border: solid var(--tbk-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-135deg); transition: transform .2s; }
.tbk-ptable__grp:not([open]) > summary::after { margin-top: -3px; transform: rotate(45deg); }   /* закрыта — вниз, открыта — вверх, как tbk-acc */
.tbk-ptable__grp > summary:hover { color: var(--tbk-text); }
.tbk-ptable__grp > summary + .tbk-ptable__row { border-top: 0; }
.tbk-ptable--hit2 .tbk-ptable__row > :nth-child(3), .tbk-ptable--hit3 .tbk-ptable__row > :nth-child(4), .tbk-ptable--hit4 .tbk-ptable__row > :nth-child(5) { background: var(--tbk-hover); }
@container tbk-lp (max-width: 600px) {
    .tbk-ptable { overflow-x: auto; }
    .tbk-ptable > * { min-width: calc(150px + var(--tbk-pt-cols) * 92px); }
    .tbk-ptable__row { grid-template-columns: 150px repeat(var(--tbk-pt-cols), minmax(92px, 1fr)); }
    .tbk-ptable__row > :first-child { position: sticky; left: 0; z-index: 1; padding-left: 14px; background: var(--tbk-surface); font-size: 13px; }
    .tbk-ptable__grp > summary { position: sticky; left: 0; padding-left: 14px; }
    .tbk-ptable--2 > * { min-width: 0; }
    .tbk-ptable--2 .tbk-ptable__row { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(72px, 1fr)); }
    .tbk-ptable--2 .tbk-ptable__row > :first-child { position: static; }
}
/* уровни тарифов: каждый следующий — плюс к предыдущему (.about_tl); полоски уровня — синие, как шаги (style.md) */
.tbk-tiers { display: grid; grid-template-columns: repeat(var(--tbk-cols, 3), minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tbk-tier { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 20px; background: var(--tbk-surface); border: 1px solid var(--tbk-line);
            border-radius: var(--tbk-r-xl); box-shadow: var(--tbk-sh-soft); }
.tbk-tier.is-hit { border-color: var(--tbk-sel); box-shadow: var(--tbk-sh-lift); }
.tbk-tier__lvl { display: flex; gap: 4px; margin-bottom: 14px; }
.tbk-tier__lvl > i { width: 22px; height: 5px; border-radius: 3px; background: var(--tbk-active); }
.tbk-tier__lvl > i.on { background: var(--tbk-blue); }
.tbk-tier__name { margin: 0; font-size: 19px; font-weight: 800; color: var(--tbk-text); }
.tbk-tier__for { margin: 4px 0 0; font-size: 13px; color: var(--tbk-gray); }
.tbk-tier__price { margin: 14px 0 18px; font-size: 13px; color: var(--tbk-gray); }
.tbk-tier__price b { margin: 0 2px; font-size: 26px; font-weight: 800; color: var(--tbk-text); }
.tbk-tier__inc { margin-bottom: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tbk-value); }
.tbk-tier > .tbk-checks { margin-bottom: 20px; }
.tbk-tier > .tbk-btn { margin-top: auto; }
@container tbk-lp (max-width: 720px) { .tbk-tiers { --tbk-cols: 1; max-width: 460px; margin: 0 auto; } }

/* ---------- «Без сервиса / С сервисом»: две колонки (.about_wc), с числами, строками «было → стало» ---------- */
.tbk-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tbk-vs__col { min-width: 0; padding: 24px; border-radius: var(--tbk-r-xl); background: var(--tbk-bg); }
.tbk-lp--gray .tbk-vs__col { background: var(--tbk-plate); }
.tbk-vs__col--after, .tbk-lp--gray .tbk-vs__col--after { background: var(--tbk-surface); border: 1px solid var(--tbk-sel); box-shadow: var(--tbk-sh-lift); }
.tbk-vs__head { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--tbk-muted); }
.tbk-vs__col--after .tbk-vs__head { color: var(--tbk-text); }
.tbk-vs__num { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.1; color: var(--tbk-muted); white-space: nowrap; }
.tbk-vs__col--after .tbk-vs__num { color: var(--tbk-text); }
.tbk-vs__cap { margin: 6px 0 0; font-size: 14px; color: var(--tbk-gray); }
/* строками: было — стрелка — стало */
.tbk-vs--rows { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-lg); box-shadow: var(--tbk-sh-card); }
.tbk-vs__row { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--tbk-line); font-size: 14px; line-height: 1.45; }
.tbk-vs__row:first-child { border-top: 0; }
.tbk-vs__row--head { padding-top: 10px; padding-bottom: 10px; background: var(--tbk-bg); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tbk-muted); }
.tbk-vs__was { color: var(--tbk-muted); }
.tbk-vs__now { font-weight: 600; color: var(--tbk-text); }
.tbk-vs__row > .tbk-svg { color: var(--tbk-muted); }
@container tbk-lp (max-width: 600px) {
    .tbk-vs { grid-template-columns: minmax(0, 1fr); }
    .tbk-vs__col { padding: 20px; }
    .tbk-vs__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 16px; }
    .tbk-vs__row--head { display: none; }
    .tbk-vs__row > .tbk-svg { transform: rotate(90deg); }
}

/* ---------- карточки «для кого»: значок, заголовок, пояснение, список (.about_segcards); плитками; строкой ---------- */
.tbk-auds { display: grid; grid-template-columns: repeat(var(--tbk-cols, 3), minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.tbk-auds--2 { --tbk-cols: 2; }   .tbk-auds--4 { --tbk-cols: 4; gap: 16px; }
.tbk-aud { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 28px 24px; background: var(--tbk-surface); border: 1px solid var(--tbk-line);
           border-radius: var(--tbk-r-xl); box-shadow: var(--tbk-sh-soft); transition: box-shadow .15s, transform .15s; }
.tbk-aud:hover { box-shadow: var(--tbk-sh-lift); transform: translateY(-3px); }
.tbk-aud__head { display: flex; align-items: center; gap: 14px; }
.tbk-aud__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 20px; color: var(--tbk-text); }
.tbk-aud__desc { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--tbk-gray); }
.tbk-aud > .tbk-btn { align-self: flex-start; margin-top: auto; }
.tbk-aud > .tbk-tag { align-self: flex-start; }
.tbk-aud--tile { gap: 12px; padding: 20px; }
.tbk-aud--tile .tbk-aud__desc { margin: 0; }
.tbk-aud--row { flex-direction: row; align-items: flex-start; gap: 16px; padding: 20px; }
.tbk-aud--row .tbk-aud__desc { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .tbk-aud:hover { transform: none; } }
@container tbk-lp (max-width: 720px) { .tbk-auds, .tbk-auds--4 { --tbk-cols: 2; } }
@container tbk-lp (max-width: 600px) { .tbk-auds:not(.tbk-auds--4) { --tbk-cols: 1; } .tbk-aud { padding: 20px; } }
@container tbk-lp (max-width: 420px) { .tbk-auds--4 { --tbk-cols: 1; } }

/* ---------- тур по возможностям: пункты слева, экран справа (.about_ft, .about_mk_frame); kit.js [data-tbk-tour] ---------- */
.tbk-tour { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.tbk-tour__list { display: flex; flex-direction: column; min-width: 0; }
.tbk-tour__item { position: relative; border-bottom: 1px solid var(--tbk-line); }
.tbk-tour__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; text-align: left; font-size: 14px; line-height: 1.3; color: var(--tbk-gray); transition: color .2s; }
.tbk-tour__btn:hover { color: var(--tbk-text); }
.tbk-tour__btn:focus-visible { outline: 2px solid var(--tbk-blue); outline-offset: 3px; border-radius: var(--tbk-r-xs); }
.tbk-tour__item.is-active .tbk-tour__btn { font-weight: 700; color: var(--tbk-text); }
.tbk-tour__num { display: flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: var(--tbk-r-sm); background: var(--tbk-plate);
                 font-size: 12px; font-weight: 700; color: var(--tbk-muted); transition: background-color .2s, color .2s; }
.tbk-tour__item.is-active .tbk-tour__num { background: var(--tbk-blue); color: #fff; }   /* /about — салатовый; в наборе номера шагов синие (style.md) */
.tbk-tour__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.tbk-tour__item.is-active .tbk-tour__body { grid-template-rows: 1fr; }
.tbk-tour__body > div { overflow: hidden; padding-left: 32px; }
.tbk-tour__body p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--tbk-gray); }
.tbk-tour__body .tbk-checks { margin-bottom: 12px; }
.tbk-tour__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.tbk-tour__bar::after { content: ''; position: absolute; inset: 0; background: var(--tbk-blue); transform: scaleX(0); transform-origin: left; }
.tbk-tour.is-auto .tbk-tour__item.is-active .tbk-tour__bar::after { animation: tbk-tour-run var(--tbk-tour-s, 7s) linear forwards; }
.tbk-tour:hover .tbk-tour__bar::after { animation-play-state: paused !important; }
@keyframes tbk-tour-run { to { transform: scaleX(1); } }
.tbk-tour__stage { position: sticky; top: 24px; min-width: 0; }
.tbk-tour__stage > .tbk-shot { box-shadow: var(--tbk-sh-shot); }
.tbk-tour__panel { display: none; }
.tbk-tour__panel.is-on { display: flex; animation: tbk-fade .3s ease both; }
@keyframes tbk-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tbk-tour__body { transition: none; } .tbk-tour__panel.is-on { animation: none; } }
@container tbk-lp (max-width: 600px) {
    .tbk-tour { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .tbk-tour__stage { position: static; order: -1; }
}
/* текст и картинка рядом, через раз зеркально (--rev) — Content Sections */
.tbk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.tbk-split + .tbk-split { margin-top: 56px; }
.tbk-split--rev > .tbk-split__media { order: -1; }
.tbk-split__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.tbk-split__title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--tbk-text); text-wrap: balance; }
.tbk-split__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tbk-gray); }
.tbk-split__media { min-width: 0; }
.tbk-split__media > .tbk-shot { box-shadow: var(--tbk-sh-shot); }
@container tbk-lp (max-width: 600px) {
    .tbk-split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .tbk-split + .tbk-split { margin-top: 40px; }
    .tbk-split--rev > .tbk-split__media { order: 0; }
}

/* ---------- крупные числа: строкой, с чертой, карточками ---------- */
.tbk-nums { display: grid; grid-template-columns: repeat(var(--tbk-cols, 4), minmax(0, 1fr)); gap: 24px; }
.tbk-nums--2 { --tbk-cols: 2; }   .tbk-nums--3 { --tbk-cols: 3; }
.tbk-nums__item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.tbk-nums__val { font-size: 36px; font-weight: 800; line-height: 1.1; color: var(--tbk-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbk-nums__lbl { font-size: 14px; line-height: 1.4; color: var(--tbk-gray); }
.tbk-nums__item > .tbk-ico { margin-bottom: 10px; }
.tbk-nums--center .tbk-nums__item { align-items: center; text-align: center; }
.tbk-nums--sep .tbk-nums__item + .tbk-nums__item { padding-left: 24px; border-left: 1px solid var(--tbk-border); }
.tbk-nums--cards { gap: 16px; }
.tbk-nums--cards .tbk-nums__item { gap: 6px; padding: 20px; background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-lg); box-shadow: var(--tbk-sh-soft); }
@container tbk-lp (max-width: 720px) {
    .tbk-nums:not(.tbk-nums--2) { --tbk-cols: 2; row-gap: 28px; }
    .tbk-nums--sep .tbk-nums__item:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@container tbk-lp (max-width: 420px) {
    .tbk-nums { gap: 16px; }
    .tbk-nums__val { font-size: 28px; }
    .tbk-nums--3 { --tbk-cols: 1; }
    .tbk-nums--sep .tbk-nums__item + .tbk-nums__item { padding-left: 16px; }
    .tbk-nums--sep.tbk-nums--3 .tbk-nums__item { padding-left: 0; border-left: 0; }
}

/* ---------- форма заявки: карточкой, состояние «отправлено» ---------- */
.tbk-leadform { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 28px; background: var(--tbk-surface); border: 1px solid var(--tbk-line);
                border-radius: var(--tbk-r-xl); box-shadow: var(--tbk-sh-lift); }
.tbk-leadform__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--tbk-text); }
.tbk-leadform__sub { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: var(--tbk-gray); }
.tbk-leadform :is(.tbk-input, .tbk-unit) { height: 40px; }
.tbk-leadform .tbk-check { font-size: 12px; line-height: 1.45; color: var(--tbk-muted); }
.tbk-leadform .tbk-check a { color: inherit; text-decoration: underline; }
.tbk-leadform__done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; text-align: center; }
.tbk-leadform__done[hidden] { display: none; }
@container tbk-lp (max-width: 420px) { .tbk-leadform { padding: 20px 16px; } }

/* ---------- логотипы: строкой, плитками, бегущая строка; виды торгов чипами (.about_pchip) ---------- */
.tbk-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 40px; }
.tbk-logos__item { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--tbk-muted);
                   white-space: nowrap; opacity: .8; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.tbk-logos__item:hover { opacity: 1; filter: none; }
.tbk-logos__item img { display: block; width: auto; max-height: 32px; }
.tbk-logos--grid { display: grid; grid-template-columns: repeat(var(--tbk-cols, 4), minmax(0, 1fr)); gap: 12px; }
.tbk-logos--grid .tbk-logos__item { height: 72px; padding: 0 12px; background: var(--tbk-surface); border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-lg); }
@container tbk-lp (max-width: 600px) { .tbk-logos--grid { --tbk-cols: 2; } .tbk-logos { gap: 12px 28px; } }
/* бегущая строка: в ленте пункты дважды (второй раз — aria-hidden), сдвиг на половину; наведение — пауза; без анимации — одна строка с переносом */
.tbk-marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tbk-marquee__track { display: flex; align-items: center; gap: var(--tbk-mq-gap, 40px); width: max-content; animation: tbk-marquee var(--tbk-mq-s, 30s) linear infinite; }
.tbk-marquee:hover .tbk-marquee__track { animation-play-state: paused; }
.tbk-marquee--sm { --tbk-mq-gap: 10px; }
@keyframes tbk-marquee { to { transform: translateX(calc(-50% - var(--tbk-mq-gap, 40px) / 2)); } }
@media (prefers-reduced-motion: reduce) {
    .tbk-marquee { -webkit-mask: none; mask: none; }
    .tbk-marquee__track { flex-wrap: wrap; justify-content: center; width: auto; animation: none; }
    .tbk-marquee__track > [aria-hidden="true"] { display: none; }
}
/* чип вида торгов: серая плашка, точка цветом секции (--c); наведение — белая с рамкой и тенью (на /about — салатовая рамка, в наборе не берём) */
.tbk-pchips { display: flex; flex-wrap: wrap; gap: 10px; }
.tbk-pchip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #EEF1F5; border: 1px solid transparent; border-radius: var(--tbk-r-xs);
             font-size: 14px; font-weight: 500; line-height: 1; color: var(--tbk-text-2); white-space: nowrap; transition: background-color .15s, border-color .15s, box-shadow .15s; }
:where(a, button).tbk-pchip:hover { background: var(--tbk-surface); border-color: var(--tbk-sel); box-shadow: var(--tbk-sh-hover); }
.tbk-pchip::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #313948); }

/* ---------- бенто-сетка: 6 колонок, ячейка на 2 / 3 / 4 / 6, --tall — на две строки ---------- */
.tbk-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px; }
.tbk-bento__cell { display: flex; flex-direction: column; gap: 8px; grid-column: span 2; min-width: 0; padding: 24px; overflow: hidden; background: var(--tbk-surface);
                   border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-xl); box-shadow: var(--tbk-sh-soft); }
.tbk-bento__cell--3 { grid-column: span 3; }   .tbk-bento__cell--4 { grid-column: span 4; }   .tbk-bento__cell--6 { grid-column: span 6; }
.tbk-bento__cell--tall { grid-row: span 2; }
.tbk-bento__cell--blue { background: var(--tbk-lp-blue); border-color: transparent; box-shadow: none; }
.tbk-bento__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--tbk-text); }
.tbk-bento__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tbk-gray); }
.tbk-bento__val { font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--tbk-text); white-space: nowrap; }
.tbk-bento__media { margin-top: auto; padding-top: 12px; }
.tbk-bento__media--bleed { margin: auto -24px -24px; }   /* картинка до краёв ячейки снизу */
.tbk-bento__media--bleed > .tbk-shot { border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
@container tbk-lp (max-width: 720px) {
    .tbk-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tbk-bento__cell, .tbk-bento__cell--3 { grid-column: span 1; }
    .tbk-bento__cell--4, .tbk-bento__cell--6 { grid-column: span 2; }
    .tbk-bento__cell--tall { grid-row: auto; }   /* во всю ширину на две строки — пустая высота */
}
@container tbk-lp (max-width: 480px) {
    .tbk-bento { grid-template-columns: minmax(0, 1fr); }
    .tbk-bento__cell, .tbk-bento__cell--3, .tbk-bento__cell--4, .tbk-bento__cell--6 { grid-column: auto; }
    .tbk-bento__cell { padding: 20px; }
    .tbk-bento__media--bleed { margin: auto -20px -20px; }
}

/* ---------- мобильное приложение: телефон и магазины (.about_appA), с QR, строкой ---------- */
.tbk-app { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: end; padding: 48px 56px; border-radius: var(--tbk-r); background: var(--tbk-lp-gray); }
.tbk-app__img { display: block; width: 100%; height: auto; margin: -32px 0 -48px; filter: var(--tbk-sh-app); }
.tbk-app__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: center; min-width: 0; }
.tbk-app__title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--tbk-text); }
.tbk-app__text { margin: 0 0 12px; max-width: 440px; font-size: 15px; line-height: 1.5; color: var(--tbk-text-2); }
.tbk-app__stores { display: flex; flex-wrap: wrap; gap: 12px; }
.tbk-app__qr { display: flex; align-items: center; gap: 14px; max-width: 240px; font-size: 13px; line-height: 1.4; color: var(--tbk-gray); }
.tbk-app__qr > img, .tbk-app__qr > .tbk-app__qrbox { flex: none; width: 104px; height: 104px; padding: 6px; border-radius: var(--tbk-r); background: var(--tbk-surface); box-shadow: var(--tbk-sh-soft); object-fit: contain; }
.tbk-app__qrbox { display: flex; align-items: center; justify-content: center; color: var(--tbk-muted); }
.tbk-app--qr { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 40px 48px; }
.tbk-app--row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 20px 24px; border-radius: var(--tbk-r-lg); }
.tbk-app--row > .tbk-app__body { flex: 1 1 280px; flex-direction: row; align-items: center; gap: 14px; }
.tbk-app--row .tbk-app__title { font-size: 16px; }
.tbk-app--row .tbk-app__text { margin: 2px 0 0; font-size: 14px; color: var(--tbk-gray); }
@container tbk-lp (max-width: 600px) {
    .tbk-app, .tbk-app--qr { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 20px 0; }
    .tbk-app--qr { padding-bottom: 28px; }
    .tbk-app__img { order: 1; max-width: 180px; margin: 0 auto -24px; }
    .tbk-app__title { font-size: 22px; }
    .tbk-app--row { padding: 20px; }
}

/* ---------- полоса-объявление над шапкой: крестик [data-tbk-dismiss] прячет (kit.js); --gray, --premium; --float — плашка снизу экрана ---------- */
.tbk-announce { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; min-height: 40px; padding: 8px 48px;
                background: var(--tbk-lp-blue); font-size: 14px; line-height: 20px; color: var(--tbk-text-2); text-align: center; }
.tbk-announce[hidden] { display: none; }
.tbk-announce b { font-weight: 600; color: var(--tbk-text); }
.tbk-announce__link { font-weight: 600; color: var(--tbk-blue); white-space: nowrap; }
.tbk-announce__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tbk-announce > .tbk-x { position: absolute; top: 50%; right: 8px; margin-top: -16px; }
.tbk-announce--gray { background: var(--tbk-plate); }
.tbk-announce--premium { background: var(--tbk-upgrade); color: rgba(255, 255, 255, .9); }
.tbk-announce--premium :is(b, .tbk-announce__link) { color: #fff; }
.tbk-announce--premium .tbk-announce__link { text-decoration: underline; text-underline-offset: 3px; }
.tbk-announce--premium > .tbk-x { color: #fff; }
.tbk-announce--premium > .tbk-x:hover { background: rgba(255, 255, 255, .18); color: #fff; }
/* плашка снизу: на странице — position: fixed; left / right / bottom 16px (раскладка варианта) */
.tbk-announce--float { justify-content: space-between; max-width: 560px; margin: 0 auto; padding: 12px 52px 12px 16px; border-radius: var(--tbk-r-lg);
                       background: var(--tbk-surface); box-shadow: var(--tbk-sh-modal); text-align: left; }
.tbk-announce--float > .tbk-btn { flex: none; }
.tbk-announce--float > span { flex: 1 1 240px; }   /* текст переносится, кнопка остаётся в строке */
@media (max-width: 600px) { .tbk-announce:not(.tbk-announce--float) { justify-content: flex-start; padding-left: 16px; text-align: left; } }

/* ---------- вебинар: спикеры, программа, карточка события ---------- */
.tbk-team { display: grid; grid-template-columns: repeat(var(--tbk-cols, 3), minmax(0, 1fr)); gap: 20px; }
.tbk-team--2 { --tbk-cols: 2; }   .tbk-team--4 { --tbk-cols: 4; }
.tbk-person { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 24px 20px; background: var(--tbk-surface); border: 1px solid var(--tbk-line);
              border-radius: var(--tbk-r-xl); box-shadow: var(--tbk-sh-soft); text-align: center; }
.tbk-person > .tbk-avatar { width: 96px; height: 96px; margin-bottom: 12px; font-size: 28px; }
.tbk-person__name { display: block; margin: 0; font-size: 16px; font-weight: 700; color: var(--tbk-text); }
.tbk-person__role { display: block; margin: 0; font-size: 13px; color: var(--tbk-muted); }
.tbk-person__text { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--tbk-gray); }
.tbk-person--row { flex-direction: row; gap: 14px; padding: 16px; text-align: left; }
.tbk-person--row > .tbk-avatar { width: 56px; height: 56px; margin: 0; font-size: 18px; }
@container tbk-lp (max-width: 720px) { .tbk-team, .tbk-team--4 { --tbk-cols: 2; } }
@container tbk-lp (max-width: 480px) { .tbk-team, .tbk-team--2, .tbk-team--4 { --tbk-cols: 1; } }
/* программа: время — тема и пояснение — ведущий */
.tbk-agenda { display: flex; flex-direction: column; border-top: 1px solid var(--tbk-line); }
.tbk-agenda__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 6px 24px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--tbk-line); }
.tbk-agenda__time { font-size: 14px; font-weight: 700; line-height: 22px; color: var(--tbk-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbk-agenda__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 22px; color: var(--tbk-text); }
.tbk-agenda__text { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--tbk-gray); }
.tbk-agenda__who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tbk-gray); white-space: nowrap; }
@container tbk-lp (max-width: 600px) { .tbk-agenda__row { grid-template-columns: minmax(0, 1fr); } }
/* карточка события: дата в плашке, название, время и место, кнопка */
.tbk-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding: 20px 24px; background: var(--tbk-surface);
             border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-xl); box-shadow: var(--tbk-sh-soft); }
.tbk-event__date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--tbk-r-lg);
                   background: var(--tbk-sel-bg); color: var(--tbk-blue); }
.tbk-event__day { font-size: 24px; font-weight: 800; line-height: 1; }
.tbk-event__mon { margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tbk-event__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tbk-event__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--tbk-text); }
.tbk-event__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--tbk-gray); }
.tbk-event__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.tbk-event__meta .tbk-svg { color: var(--tbk-muted); }
@container tbk-lp (max-width: 600px) {
    .tbk-event { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
    .tbk-event > .tbk-btn, .tbk-event > .tbk-row { grid-column: 1 / -1; }
}

/* ---------- подписка: почта в строку, Telegram, по центру ---------- */
.tbk-subscribe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px 32px; background: var(--tbk-surface);
                 border: 1px solid var(--tbk-line); border-radius: var(--tbk-r-lg); box-shadow: var(--tbk-sh-card); }
.tbk-subscribe__body { display: flex; flex: 1 1 300px; align-items: flex-start; gap: 16px; min-width: 0; }
.tbk-subscribe__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--tbk-text); }
.tbk-subscribe__text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--tbk-gray); }
.tbk-subscribe > .tbk-lineform { flex: 1 1 320px; max-width: 440px; }
.tbk-subscribe--center { flex-direction: column; padding: 0; background: none; border: 0; box-shadow: none; text-align: center; }
.tbk-subscribe--center > .tbk-subscribe__body { flex: none; flex-direction: column; align-items: center; }   /* flex-basis 300px в колонке — высота, был зазор до формы */
.tbk-subscribe--center > .tbk-lineform { flex: none; justify-content: center; }
@container tbk-lp (max-width: 600px) { .tbk-subscribe:not(.tbk-subscribe--center) { padding: 20px; } }
@container tbk-lp (max-width: 420px) {
    .tbk-subscribe__body { flex-direction: column; gap: 12px; }
    .tbk-subscribe--center { align-items: flex-start; text-align: left; }
    .tbk-subscribe--center > .tbk-subscribe__body { align-items: flex-start; }
    .tbk-subscribe--center > .tbk-lineform { justify-content: flex-start; }
    .tbk-subscribe > .tbk-btn { flex: 1 1 100%; }
}

/* ---------- карусель: лента с прокруткой и привязкой, стрелки и точки — kit.js [data-tbk-carousel]; видно 3 / 2 / 1 (--2, --1) ---------- */
.tbk-carousel { --tbk-car-n: 3; --tbk-car-gap: 20px; position: relative; min-width: 0; }
.tbk-carousel--2 { --tbk-car-n: 2; }   .tbk-carousel--1 { --tbk-car-n: 1; }
.tbk-carousel__track { display: flex; gap: var(--tbk-car-gap); margin: -4px -4px -16px; padding: 4px 4px 16px; overflow-x: auto; overscroll-behavior-x: contain;
                       scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scroll-behavior: smooth; scrollbar-width: none; }
.tbk-carousel__track::-webkit-scrollbar { display: none; }
.tbk-carousel__track:focus-visible { outline: 2px solid var(--tbk-blue); outline-offset: 2px; border-radius: var(--tbk-r); }
.tbk-carousel__track > * { flex: 0 0 calc((100% - (var(--tbk-car-n) - 1) * var(--tbk-car-gap)) / var(--tbk-car-n)); min-width: 0; scroll-snap-align: start; }
.tbk-carousel__nav { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.tbk-carousel__dots { display: flex; flex-wrap: wrap; gap: 6px; }
.tbk-carousel__dots > button { width: 8px; height: 8px; border-radius: var(--tbk-r-pill); background: var(--tbk-sel); transition: width .2s, background-color .2s; }
.tbk-carousel__dots > button.active { width: 20px; background: var(--tbk-blue); }
.tbk-carousel__arrows { display: flex; gap: 8px; margin-left: auto; }
.tbk-carousel__arrows > .tbk-btn[disabled] { opacity: .4; }
/* затухание краёв, пока есть куда листать (.can-prev / .can-next ставит kit.js) */
.tbk-carousel--fade.can-next .tbk-carousel__track { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
.tbk-carousel--fade.can-prev .tbk-carousel__track { -webkit-mask: linear-gradient(90deg, transparent, #000 15%); mask: linear-gradient(90deg, transparent, #000 15%); }
.tbk-carousel--fade.can-prev.can-next .tbk-carousel__track { -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
@media (prefers-reduced-motion: reduce) { .tbk-carousel__track { scroll-behavior: auto; } }
@container tbk-lp (max-width: 720px) { .tbk-carousel:not(.tbk-carousel--1) { --tbk-car-n: 2; } }
@container tbk-lp (max-width: 480px) {
    .tbk-carousel { --tbk-car-gap: 12px; }
    .tbk-carousel:not(.tbk-carousel--1) .tbk-carousel__track > * { flex-basis: 85%; }   /* следующая карточка выглядывает — понятно, что можно листать */
}