/* testbesplatno.ru — знаки категорий и их анимации.
   Подключать после site.css. Один знак = один предмет; анимация запускается
   при наведении на карточку/строку категории (или при focus-visible).
   Размер задаётся местом применения: .tb-ci{width|height} снаружи. */
.tb-ci{display:block;width:26px;height:26px;color:currentColor;overflow:visible}
.tb-ci--sm,.tb-ci--nav,.tb-ci--md{overflow:hidden}
/* три размера одного знака ─────────────────────────────────────────────
   sm 16 px — строка списка, крошки, чип; штрих утолщён, чтобы не пропал
   md 26 px — плитка 44 px, карточка, меню (базовый)
   lg — водяной знак на обложке: привязан к ВЫСОТЕ обложки, кадрируется краем */
.tb-ci--sm{width:16px;height:16px;stroke-width:2.1}
.tb-ci--md{width:26px;height:26px}
/* Угловой бейдж не дублирует крупный водяной знак: если на обложке уже есть
   .tb-ci--lg / .tb-icon--cover, бейдж скрывается. Анимация при этом остаётся —
   её играет сам водяной знак (правила ниже адресуют .tb-ci[data-cat]/[data-test]
   независимо от размера), плюс он подсвечивается с .24 до .5 по opacity. */
.tb-cover:has(.tb-ci--lg) .tb-ci--badge,
.tb-cover:has(.tb-icon--cover) .tb-ci--badge,
.tb-cover:has(.tb-ci--lg) .tb-icon--badge,
.tb-cover:has(.tb-icon--cover) .tb-icon--badge{display:none}
/* бейдж на обложке теста: угловой знак раздела, целиком в кадре */
.tb-ci--badge{position:absolute;right:.75rem;top:.75rem;width:20px;height:20px;stroke-width:2;opacity:.92;color:#fff;overflow:hidden}
.tb-ci--lg{position:absolute;right:5%;bottom:8%;height:74%;width:auto;aspect-ratio:1;stroke-width:1.15;opacity:.24;color:#fff}
.tb-ci--lg-c{position:static;height:56%;width:auto;aspect-ratio:1;stroke-width:1.3;opacity:.9}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci--lg{opacity:.5;transition:opacity .2s}
.tb-ci path{transform-box:fill-box;transform-origin:center}
.tb-cat:is(:hover,:focus-visible,:active,.is-live){outline:none}

/* emocii */
.tb-ci[data-cat="emocii"] path[data-p="mouth-glad"]{opacity:0}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="emocii"] path[data-p="mouth-sad"]{animation:tb-fade-out .5s var(--tb-ease) forwards}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="emocii"] path[data-p="mouth-glad"]{animation:tb-fade-in .5s var(--tb-ease) .18s forwards}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="emocii"]{animation:tb-nod .9s var(--tb-ease)}
@keyframes tb-fade-out{to{opacity:0}}
@keyframes tb-fade-in{from{opacity:0}to{opacity:1}}
@keyframes tb-nod{0%,100%{transform:rotate(0)}40%{transform:rotate(-6deg)}70%{transform:rotate(4deg)}}

/* tip-lichnosti */
.tb-ci[data-cat="tip-lichnosti"] path{stroke-dasharray:100}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="tip-lichnosti"] path{animation:tb-scan-arc 1.2s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="tip-lichnosti"] path:nth-child(2){animation-delay:.14s}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="tip-lichnosti"] path:nth-child(3){animation-delay:.28s}

/* samoocenka */
.tb-ci[data-cat="samoocenka"] path[data-p="tick"]{stroke-dasharray:100;stroke-dashoffset:0}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="samoocenka"] path[data-p="tick"]{animation:tb-draw .5s var(--tb-ease)}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="samoocenka"] path:first-child{animation:tb-lift .7s var(--tb-ease)}
@keyframes tb-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes tb-lift{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-2px) scale(1.07)}}

/* harakter */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="harakter"]{animation:tb-turn 1.4s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="harakter"] path[data-p="facet"],:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="harakter"] path[data-p="facet2"]{animation:tb-glint 1.4s var(--tb-ease) infinite}
@keyframes tb-turn{0%,100%{transform:rotateY(0)}50%{transform:rotateY(24deg)}}
@keyframes tb-glint{0%,100%{opacity:.45}40%{opacity:1;filter:drop-shadow(0 0 5px currentColor)}}

/* motivaciya */
.tb-ci[data-cat="motivaciya"] path[data-p="arrow"],.tb-ci[data-cat="motivaciya"] path[data-p="arrow-fin"]{transform-origin:100% 0}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="motivaciya"] path[data-p="arrow"],:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="motivaciya"] path[data-p="arrow-fin"]{animation:tb-shoot .8s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="motivaciya"] path:nth-child(1){animation:tb-ring 1.6s ease-out infinite}
@keyframes tb-shoot{0%{transform:translate(6px,-6px);opacity:0}35%{opacity:1}55%{transform:translate(0,0)}100%{transform:translate(0,0);opacity:1}}
@keyframes tb-ring{0%,100%{transform:scale(1);opacity:1}45%{transform:scale(1.1);opacity:.7}}

/* metodiki */
.tb-ci[data-cat="metodiki"] path[data-p^="q"]{stroke-dasharray:100;stroke-dashoffset:0}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="metodiki"] path[data-p="q1"]{animation:tb-draw .34s var(--tb-ease) .02s backwards}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="metodiki"] path[data-p="q2"]{animation:tb-draw .34s var(--tb-ease) .2s backwards}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="metodiki"] path[data-p="q3"]{animation:tb-draw .34s var(--tb-ease) .38s backwards}

/* rasstroystva */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="rasstroystva"] path[data-p="piece"]{animation:tb-snap .9s var(--tb-ease) infinite}
@keyframes tb-snap{0%{transform:translate(-5px,3px);opacity:.4}45%{transform:translate(0,0);opacity:1}55%{transform:scale(1.05)}100%{transform:none;opacity:1}}

/* trevoga */
.tb-ci[data-cat="trevoga"] path{stroke-dasharray:none}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="trevoga"] path{stroke-dasharray:30 70;animation:tb-trace 1.1s linear infinite;filter:drop-shadow(0 0 4px currentColor)}

/* kto-ty-iz */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="kto-ty-iz"]{animation:tb-wobble 1s var(--tb-ease) infinite}

/* prikolnye */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="prikolnye"] path[data-p="spark-c"]{animation:tb-pop .9s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="prikolnye"] path[data-p^="s"]:not([data-p="spark-c"]){animation:tb-fly .9s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="prikolnye"] path[data-p="s2"]{animation-delay:.1s}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="prikolnye"] path[data-p="s3"]{animation-delay:.2s}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="prikolnye"] path[data-p="s4"]{animation-delay:.3s}
@keyframes tb-pop{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.22) rotate(18deg)}}
@keyframes tb-fly{0%{transform:scale(.4);opacity:0}45%{transform:scale(1);opacity:1}100%{transform:scale(1.25);opacity:0}}

/* krasota */
.tb-ci[data-cat="krasota"] path[data-p="shine"]{stroke-dasharray:100;stroke-dashoffset:100;opacity:.7}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="krasota"] path[data-p="shine"]{animation:tb-sweep 1.5s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="krasota"] path:first-child{animation:tb-breathe-s 1.9s ease-in-out infinite}
@keyframes tb-sweep{0%{stroke-dashoffset:100;opacity:0}40%{opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
@keyframes tb-breathe-s{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* organizm */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="organizm"]{animation:tb-vital 1.4s ease-in-out infinite}

/* pitanie */
.tb-ci[data-cat="pitanie"] path[data-p="leaf"]{transform-origin:left bottom}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="pitanie"] path:first-child{animation:tb-squash .95s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="pitanie"] path[data-p="stem"]{animation:tb-pole .95s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="pitanie"] path[data-p="leaf"]{animation:tb-leaf .95s var(--tb-ease) infinite}
@keyframes tb-squash{0%,100%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-2.5px) scale(.92,1.1)}55%{transform:translateY(0) scale(1.14,.88)}80%{transform:translateY(0) scale(.98,1.03)}}
@keyframes tb-leaf{0%,100%{transform:rotate(0)}30%{transform:rotate(-26deg)}65%{transform:rotate(16deg)}85%{transform:rotate(-7deg)}}

/* iq */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="iq"] path[data-p="teeth"]{animation:tb-spin 2.4s linear infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="iq"] path[data-p="gear"]{animation:tb-spin-rev 2.4s linear infinite}
@keyframes tb-spin{to{transform:rotate(360deg)}}
@keyframes tb-spin-rev{to{transform:rotate(-360deg)}}

/* vnimanie */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="vnimanie"] path[data-p="pupil"]{animation:tb-look 1.8s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="vnimanie"] path:first-child{animation:tb-blink 1.8s var(--tb-ease) infinite}
@keyframes tb-look{0%,100%{transform:translateX(0) scale(1)}30%{transform:translateX(3px) scale(.8)}60%{transform:translateX(-3px) scale(.9)}}
@keyframes tb-blink{0%,88%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}

/* erudiciya */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="erudiciya"]{animation:tb-lamp 1.6s steps(1,end) infinite}

/* lyubov */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="lyubov"]{animation:tb-beat .9s cubic-bezier(.3,0,.3,1) infinite}

/* semya */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="semya"] path[data-p="f2"]{animation:tb-hop .9s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="semya"] path[data-p="f1"]{animation:tb-hop .9s var(--tb-ease) .12s infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="semya"] path[data-p="f3"]{animation:tb-hop .9s var(--tb-ease) .24s infinite}
@keyframes tb-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}}

/* druzhba */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="druzhba"] path[data-p="r1"]{animation:tb-join .9s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="druzhba"] path[data-p="r2"]{animation:tb-join-r .9s var(--tb-ease) infinite}
@keyframes tb-join{0%,100%{transform:translateX(0)}45%{transform:translateX(2.5px)}}
@keyframes tb-join-r{0%,100%{transform:translateX(0)}45%{transform:translateX(-2.5px)}}

/* proforientaciya */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="proforientaciya"] path[data-p="needle"]{animation:tb-compass 1.6s cubic-bezier(.25,1.4,.3,1) infinite}
@keyframes tb-compass{0%{transform:rotate(0)}55%{transform:rotate(295deg)}72%{transform:rotate(275deg)}86%{transform:rotate(287deg)}100%{transform:rotate(283deg)}}

/* pravo — весы: чаши качаются и приходят в равновесие */
.tb-ci[data-cat="pravo"] path[data-p="pan-l"],.tb-ci[data-cat="pravo"] path[data-p="pan-r"]{transform-origin:center top}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="pravo"] path[data-p="pan-l"]{animation:tb-pan-l 1.6s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="pravo"] path[data-p="pan-r"]{animation:tb-pan-r 1.6s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="pravo"] path[data-p="beam"]{animation:tb-tilt 1.6s var(--tb-ease) infinite}
@keyframes tb-pan-l{0%,100%{transform:translateY(0)}35%{transform:translateY(-2px)}70%{transform:translateY(1px)}}
@keyframes tb-pan-r{0%,100%{transform:translateY(0)}35%{transform:translateY(2px)}70%{transform:translateY(-1px)}}
@keyframes tb-tilt{0%,100%{transform:rotate(0)}35%{transform:rotate(4deg)}70%{transform:rotate(-2deg)}}

/* liderstvo */
.tb-ci[data-cat="liderstvo"] path[data-p="flag"]{transform-origin:left center}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="liderstvo"] path[data-p="flag"]{animation:tb-wave 1.1s ease-in-out infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="liderstvo"] path:first-child{animation:tb-pole 1.1s ease-in-out infinite}
@keyframes tb-wave{0%,100%{transform:skewY(0) scaleX(1)}30%{transform:skewY(-11deg) scaleX(1.1)}60%{transform:skewY(8deg) scaleX(.92)}80%{transform:skewY(-4deg) scaleX(1.03)}}
@keyframes tb-pole{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.5deg)}65%{transform:rotate(1.5deg)}}

/* finansy */
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="finansy"]{animation:tb-flip 1.6s var(--tb-ease) infinite}
:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="finansy"] path[data-p="rub"],:is(a,.tb-cat,.tb-hub,.tb-card,.tb-cover,.tb-hero,.tb-preview):is(:hover,:focus-visible,:active,.is-live) .tb-ci[data-cat="finansy"] path[data-p="rub2"]{animation:tb-flip-face 1.6s var(--tb-ease) infinite}
@keyframes tb-flip{0%{transform:rotateY(0)}45%{transform:rotateY(180deg)}90%,100%{transform:rotateY(360deg)}}
@keyframes tb-flip-face{0%,20%{opacity:1}35%,60%{opacity:.15}80%,100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .tb-ci,.tb-ci path{animation:none!important}
  .tb-ci path{stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:1!important}
  .tb-ci[data-cat="emocii"] path[data-p="mouth-glad"]{opacity:0!important}
}

/* ── знак в интерфейсе: шапка, плитка хаба, список подкатегорий ───────── */
.tb-ci--nav{width:18px;height:18px;stroke-width:2.1;flex:none}
/* на мелких размерах убираем мелочь, которая слипается в кашу */
.tb-ci--sm[data-cat="semya"] path:nth-child(n+4),
.tb-ci--sm[data-cat="metodiki"] path[data-p="q3"],
.tb-ci--sm[data-cat="prikolnye"] path:not([data-p="spark-c"]),
.tb-ci--sm[data-cat="pravo"] path:nth-child(2),.tb-ci--sm[data-cat="pravo"] path:last-child,
.tb-ci--sm[data-cat="finansy"] path[data-p="rub2"],
.tb-ci--nav[data-cat="semya"] path:nth-child(n+4),
.tb-ci--nav[data-cat="prikolnye"] path:not([data-p="spark-c"]){display:none}
/* строка категории: клик по всей строке, знак в квадрате тона */
/* .tb-catrow* заменены на .tb-row*/.tb-count — design_handoff_counts */
/* полоса популярных категорий под шапкой */
.tb-catstrip{background:var(--tb-card);border-bottom:1px solid var(--tb-hair)}
.tb-catstrip__row{max-width:var(--tb-content);margin:0 auto;padding:.5rem var(--tb-gutter);display:flex;gap:.375rem;overflow-x:auto;scrollbar-width:none}
.tb-catstrip__row::-webkit-scrollbar{display:none}
.tb-catchip{display:flex;align-items:center;gap:.5rem;min-height:38px;padding:0 .75rem;border:1px solid var(--tb-hair);border-radius:999px;background:var(--tb-card);font-size:.875rem;font-weight:500;white-space:nowrap;color:var(--tb-ink)}
.tb-catchip .tb-ci{color:var(--tb-tone)}
.tb-catchip:hover{border-color:var(--tb-tone);background:var(--tb-selected-wash);color:var(--tb-ink)}
/* знак в плитке хаба на главной — рядом с названием категории */
.tb-hub__cats{display:flex;flex-direction:column;gap:.125rem;margin-top:auto}
.tb-hub__cat{display:flex;align-items:center;gap:.5rem;min-height:34px;font-size:.9375rem;color:#fff}
.tb-hub__cat .tb-ci{color:#fff;opacity:.92}
.tb-hub--soon .tb-hub__cat{color:var(--tb-mute)}
.tb-hub--soon .tb-hub__cat .tb-ci{color:var(--tb-tone)}