/* ───────────────────────────────────────────────────────────────────────────
   SpellBook · «ИССЛЕДОВАТЬ» (explore.php) — глобальный поиск + фильтрация
   КУДА КЛАСТЬ:  /css/explore.css   (грузится ПОСЛЕ marketplace.css → наследует токены)

   Переиспользует из marketplace.css: токены, .sk, .avatar, .chip, .delta(.pos/.neg),
   .spark, .spark-tip, .abadge(.b-rag/.b-ag), .verified, .mkt-num.

   Лэйаут в духе OpenSea Rankings: БЕЗ крупных заголовков, плотно. Сверху — большой
   поиск и панель инструментов (вкладки/период/сортировка/счётчик), ниже — фильтры
   слева + «таблица рейтинга» справа. На мобиле фильтры открываются BOTTOM SHEET'ом,
   строки превращаются в компактные карточки.

   СКЕЛЕТОН 1:1: показывается на первой загрузке (body.loading) и при ЛЮБОМ
   обновлении (#exResults.is-busy / #exCount.is-busy). Реальный контент скрыт во время.
─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════ КАРКАС (плотно) ═══════════════════ */
.ex-wrap{ max-width:1840px; margin:0 auto; padding:clamp(14px,1.7vw,22px) clamp(14px,2.2vw,36px) 56px; }
.ex-top{ display:block; }

/* ── большой поиск (внутри тулбара, по центру) ── */
.ex-searchbar{ display:flex; align-items:center; gap:10px; flex:1 1 300px; min-width:220px; height:42px; padding:0 14px; background:var(--surface); border:1px solid var(--ring); border-radius:var(--r-sm); transition:border-color var(--dur), box-shadow var(--dur); }
.ex-searchbar:focus-within{ border-color:var(--line-2); box-shadow:0 0 0 3px var(--line); }
.ex-searchbar > svg{ width:19px; height:19px; color:var(--text-4); flex-shrink:0; }
.ex-searchbar input{ flex:1; min-width:0; height:100%; background:none; border:none; outline:none; color:var(--text); font-family:var(--font-body); font-size:0.9375rem; }
.ex-searchbar input::placeholder{ color:var(--text-4); }
.ex-searchbar input::-webkit-search-cancel-button{ display:none; }
.ex-q-clear{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0; border:none; background:var(--raised); color:var(--text-3); border-radius:50%; cursor:pointer; transition:color var(--dur), background var(--dur); }
.ex-q-clear:hover{ color:var(--text); background:var(--wash); }
.ex-q-clear svg{ width:13px; height:13px; }
.ex-q-clear[hidden]{ display:none; }

/* ── панель инструментов ── */
.ex-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ex-tools{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-left:auto; }

/* счётчик (компактный, в правом кластере) */
.ex-count{ display:inline-flex; align-items:center; font-size:0.8125rem; color:var(--text-3); white-space:nowrap; margin-right:2px; }
.ex-count-tx b{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; color:var(--text); }
.ex-count-sk{ display:none; width:96px; height:14px; border-radius:var(--r-xs); }

/* вкладки — в левом рельсе, над фильтрами (десктоп) */
/* Вкладки: горизонтальная прокрутка при переполнении (как pill-карусель market).
   Кнопки по контенту (не равной ширины) — «Рекомендации» больше не ломает раскладку.
   Скроллбар скрыт, свайп на тач, колесо/трекпад на десктопе, scroll-snap для аккуратности. */
.ex-tabs{ display:flex; gap:7px; margin-bottom:18px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scroll-behavior:smooth; overscroll-behavior-x:contain; }
.ex-tabs::-webkit-scrollbar{ display:none; }
/* Подсказка прокрутки: градиент-затухание у края, если есть куда скроллить (класс ставит JS).
   Скроллбар скрыт, поэтому без этого на десктопе не видно, что вкладки прокручиваются. */
.ex-tabs.ex-tabs--sr{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%); }
.ex-tabs.ex-tabs--sl.ex-tabs--sr{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%); }
.ex-tabs.ex-tabs--sl:not(.ex-tabs--sr){ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%); mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%); }
.ex-tab{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:9px 15px; border:1px solid var(--ring); border-radius:var(--r-xs); background:var(--surface); color:var(--text-2); font-family:var(--font-display); font-weight:500; font-size:0.8125rem; white-space:nowrap; cursor:pointer; scroll-snap-align:start; transition:color var(--dur), background var(--dur), border-color var(--dur); }
.ex-tab:hover{ color:var(--text); border-color:var(--line-2); }
.ex-tab.is-on{ background:var(--raised); color:var(--text); border-color:var(--line-2); }

/* период */
.ex-tf{ display:inline-flex; align-items:center; gap:2px; }
.ex-tf-b{ padding:6px 10px; border:none; border-radius:var(--r-sm); background:transparent; color:var(--text-3); font-family:var(--font-display); font-weight:500; font-size:0.8125rem; white-space:nowrap; cursor:pointer; transition:color var(--dur), background var(--dur); }
.ex-tf-b:hover{ color:var(--text); }
.ex-tf-b.is-on{ background:var(--raised); color:var(--text); }

/* селект сортировки */
.ex-sortsel{ position:relative; display:inline-flex; align-items:center; }
.ex-sortsel select{ -webkit-appearance:none; appearance:none; padding:8px 32px 8px 12px; background:var(--surface); border:1px solid var(--ring); border-radius:var(--r-sm); color:var(--text); font-family:var(--font-display); font-weight:500; font-size:0.8125rem; cursor:pointer; outline:none; transition:border-color var(--dur); }
.ex-sortsel select:hover{ border-color:var(--line-2); }
.ex-sortsel select:focus-visible{ border-color:var(--line-2); box-shadow:0 0 0 3px var(--line); }
.ex-sortsel-ic{ position:absolute; right:10px; width:14px; height:14px; color:var(--text-3); pointer-events:none; }
.ex-sortsel option{ background:var(--surface); color:var(--text); }

/* кнопка «Фильтры» (видна на планшете/мобиле) */
.ex-filter-btn{ display:none; align-items:center; gap:7px; padding:8px 13px; background:var(--surface); border:1px solid var(--ring); border-radius:var(--r-sm); color:var(--text); font-family:var(--font-display); font-weight:500; font-size:0.8125rem; cursor:pointer; transition:border-color var(--dur); }
.ex-filter-btn:hover{ border-color:var(--line-2); }
.ex-filter-btn svg{ width:16px; height:16px; }
.ex-fbadge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--btn); color:var(--btn-text); font-family:var(--font-mono); font-size:0.6875rem; font-weight:700; line-height:1; }
.ex-fbadge[hidden]{ display:none; }

/* ═══════════════════ ТЕЛО: ВКЛАДКИ + ФИЛЬТРЫ + ЛЕНТА ═══════════════════ */
.ex-body{ display:grid; grid-template-columns:290px minmax(0,1fr); grid-template-areas:"side main"; gap:0; align-items:start; margin-top:24px; }
.ex-side{ grid-area:side; position:sticky; top:calc(var(--hdr-h) + 14px); }

/* ── фильтры (десктоп: липкий, БЕЗ карточки; справа вертикальная hr) ── */
.ex-filters{ padding-right:24px; }
.ex-fpanel{ display:flex; flex-direction:column; max-height:calc(100vh - var(--hdr-h) - 96px); background:transparent; }
.ex-fgrab{ display:none; }
.ex-fhead{ display:none; align-items:center; justify-content:space-between; padding:6px 4px 12px; flex-shrink:0; }
.ex-fhead-t{ font-family:var(--font-display); font-weight:700; font-size:1.0625rem; color:var(--text); }
.ex-fclose{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:none; background:var(--raised); border-radius:var(--r-sm); color:var(--text-2); cursor:pointer; transition:color var(--dur), background var(--dur); }
.ex-fclose:hover{ color:var(--text); background:var(--wash); }
.ex-fclose svg{ width:16px; height:16px; }
.ex-fscroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; }
.ex-fscroll::-webkit-scrollbar{ width:7px; }
.ex-fscroll::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }
.ex-fscroll::-webkit-scrollbar-track{ background:transparent; }

/* секции */
.ex-fsec{ border-top:1px solid var(--line); }
.ex-fsec:first-child{ border-top:none; }
.ex-fsec-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:13px 2px; border:none; background:none; color:var(--text); font-family:var(--font-display); font-weight:600; font-size:0.9375rem; cursor:pointer; transition:color var(--dur); }
.ex-fsec-h:hover{ color:var(--text); }
.ex-fsec-h svg{ width:16px; height:16px; color:var(--text-3); flex-shrink:0; transition:transform var(--dur); }
.ex-fsec-h[aria-expanded="false"] svg{ transform:rotate(-90deg); }
.ex-fsec-b{ padding:0 0 14px; }
.ex-fsec-h[aria-expanded="false"] + .ex-fsec-b{ display:none; }

/* чипы категорий */
.ex-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.ex-chip{ display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:7px 11px; border:1px solid var(--ring); border-radius:var(--r-sm); background:transparent; color:var(--text-2); font-family:var(--font-display); font-weight:500; font-size:0.78125rem; line-height:1.1; white-space:nowrap; cursor:pointer; transition:color var(--dur), border-color var(--dur), background var(--dur); }
.ex-chip i{ font-size:0.8125rem; line-height:1; color:var(--text-3); transition:color var(--dur); }
.ex-chip .n{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:0.6875rem; color:var(--text-4); transition:color var(--dur); }
.ex-chip:hover{ color:var(--text); border-color:var(--line-2); background:var(--raised); }
.ex-chip.is-on{ background:var(--raised); border-color:var(--line-2); color:var(--text); }
.ex-chip.is-on i{ color:var(--text-2); }
.ex-chip.is-on .n{ color:var(--text-3); }

/* скрытые категории (свыше 8) — раскрываются по «Показать ещё»; выбранная всегда видна */
.ex-chip-extra{ display:none; }
.ex-chips.is-expanded .ex-chip-extra,
.ex-chip-extra.is-on{ display:inline-flex; }
.ex-cats-more{ display:inline-flex; align-items:center; gap:5px; margin-top:9px; padding:4px 2px; border:none; background:none; color:var(--text-2); font-family:var(--font-display); font-weight:500; font-size:0.8125rem; cursor:pointer; transition:color var(--dur); }
.ex-cats-more:hover{ color:var(--text); }
.ex-cats-more-ic{ width:14px; height:14px; transition:transform var(--dur); }
.ex-cats-more[aria-expanded="true"] .ex-cats-more-ic{ transform:rotate(180deg); }

/* опции-переключатели */
.ex-opts{ display:flex; flex-direction:column; gap:1px; }
.ex-opt{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 8px 8px 6px; border:none; border-radius:var(--r-sm); background:transparent; color:var(--text-2); font-family:var(--font-body); font-size:0.875rem; text-align:left; cursor:pointer; transition:background var(--dur), color var(--dur); }
.ex-opt:hover{ background:var(--raised); color:var(--text); }
.ex-opt-ic{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; border-radius:var(--r-sm); background:var(--raised); color:var(--text-3); transition:background var(--dur), color var(--dur); }
.ex-opt:hover .ex-opt-ic{ background:var(--wash); }
.ex-opt-ic i{ font-size:0.9375rem; line-height:1; }
.ex-opt-tx{ flex:1; min-width:0; line-height:1.25; }
.ex-opt-check{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex-shrink:0; border:1.5px solid var(--line-2); border-radius:var(--r-xs); color:var(--btn-text); transition:background var(--dur), border-color var(--dur); }
.ex-opt-check svg{ width:13px; height:13px; opacity:0; transform:scale(.6); transition:opacity var(--dur), transform var(--dur); }
.ex-opt.is-on{ color:var(--text); }
.ex-opt.is-on .ex-opt-ic{ background:var(--text); color:var(--canvas); }
.ex-opt.is-on .ex-opt-check{ background:var(--btn); border-color:var(--btn); }
.ex-opt.is-on .ex-opt-check svg{ opacity:1; transform:scale(1); }

/* подвал панели (десктоп: скрыт — фильтры применяются вживую) */
.ex-ffoot{ display:none; gap:10px; padding:12px 0 2px; flex-shrink:0; }
.ex-fclear{ flex-shrink:0; padding:0 16px; height:42px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:transparent; color:var(--text); font-family:var(--font-display); font-weight:600; font-size:0.875rem; cursor:pointer; transition:background var(--dur), border-color var(--dur); }
.ex-fclear:hover{ background:var(--raised); border-color:var(--text-3); }
.ex-fdone{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; border:none; border-radius:var(--r-sm); background:var(--btn); color:var(--btn-text); font-family:var(--font-display); font-weight:700; font-size:0.9375rem; cursor:pointer; transition:filter var(--dur); }
.ex-fdone:hover{ filter:brightness(0.94); }
.ex-fdone-n{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; opacity:0.7; }

/* затемнение под bottom sheet (фикс «ничего не жмётся»: pointer-events:none, пока закрыто) */
.ex-fscrim{ display:none; position:fixed; inset:0; z-index:158; background:rgba(0,0,0,0.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity var(--dur); }

/* ═══════════════════ ЛЕНТА (таблица рейтинга, плотно) ═══════════════════ */
.ex-main{ grid-area:main; min-width:0; padding-left:24px; border-left:1px solid var(--line); }
.ex-results{
  /* МАСТЕР-СЕТКА: треки колонок заданы ЗДЕСЬ; каждая строка наследует их через subgrid → выравнивание гарантировано. */
  /* №/звезда · имя · Чатов · Пользователи · Лайки · Избранное · Коммент · Рейтинг · Δ · Динамика */
  /* числовые колонки = auto: ширина РОВНО по содержимому (самый широкий — заголовок со стрелкой). */
  /* → заголовок физически не может быть шире своей колонки, наезжать нечему. */
  --ex-grid: 40px minmax(190px,1fr) auto auto auto auto auto auto minmax(64px,auto) 78px;
  display:grid; grid-template-columns:var(--ex-grid); align-content:start;
  column-gap:18px; padding:0 14px;
  /* АРХИТЕКТУРНЫЙ фикс обрезки: если всё вместе шире области — горизонтальный скролл (а не клиппинг/наезд). SOTA-2026. */
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
}
.ex-results:focus-visible{ outline:2px solid var(--line-2); outline-offset:-2px; border-radius:var(--r-sm); }
/* контейнеры-обёртки «исчезают» → строки становятся прямыми элементами мастер-сетки */
.ex-list, .ex-skel{ display:contents; }
/* шапка и все строки тянут ЕДИНЫЕ треки родителя (subgrid) → колонки совпадают без магических px */
.ex-head, .ex-row, .ex-skrow{ grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:center; }
.ex-empty, .ex-more-foot{ grid-column:1 / -1; }

/* шапка таблицы — статичная (НЕ sticky → не наезжает на 1-ю строку), плотная */
.ex-head{ padding:9px 0; border-bottom:1px solid var(--line); }
.ex-head .ex-c{ font-family:var(--font-display); font-weight:600; font-size:0.6875rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-3); }
.ex-th{ position:relative; cursor:pointer; transition:color var(--dur); }
.ex-th:hover{ color:var(--text-2); }
.ex-th.is-on{ color:var(--text); }
/* индикатор сортировки — пара шевронов (▲/▼) ВСЕГДА видна на каждом сортируемом заголовке (как на OpenSea); активное направление подсвечено */
.ex-sort{ position:relative; display:inline-block; width:8px; height:13px; vertical-align:middle; flex:0 0 auto; }
.ex-sort::before, .ex-sort::after{ content:""; position:absolute; left:0; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; transition:opacity var(--dur); }
.ex-sort::before{ top:0; border-bottom:4.5px solid currentColor; opacity:0.3; }     /* ▲ вверх */
.ex-sort::after{ bottom:0; border-top:4.5px solid currentColor; opacity:0.3; }       /* ▼ вниз */
.ex-th:hover .ex-sort::before, .ex-th:hover .ex-sort::after{ opacity:0.55; }
.ex-th.is-on .ex-sort::before, .ex-th.is-on .ex-sort::after{ opacity:0.2; }          /* активная колонка: неактивное направление приглушено */
.ex-th.is-on[data-dir="asc"]  .ex-sort::before{ opacity:1; }                         /* ↑ по возрастанию */
.ex-th.is-on[data-dir="desc"] .ex-sort::after{ opacity:1; }                          /* ↓ по убыванию */

/* ячейки */
.ex-c{ display:flex; align-items:center; min-width:0; }
.ex-c-rank{ justify-content:center; position:relative; }
.ex-c-name{ gap:9px; }
.ex-c-chats, .ex-c-users, .ex-c-likes, .ex-c-favs, .ex-c-comments, .ex-c-score, .ex-c-delta{ justify-content:flex-end; text-align:right; padding-right:15px; }
/* в числовых колонках индикатор уходит в правый «карман» (абсолют) → подписи и значения по одному правому краю */
.ex-c-chats.ex-th .ex-sort, .ex-c-users.ex-th .ex-sort, .ex-c-likes.ex-th .ex-sort, .ex-c-favs.ex-th .ex-sort, .ex-c-comments.ex-th .ex-sort, .ex-c-score.ex-th .ex-sort, .ex-c-delta.ex-th .ex-sort{ position:absolute; right:3px; top:50%; transform:translateY(-50%); }
.ex-c-spark{ justify-content:flex-end; }
.ex-c-spark .spark{ width:100%; height:30px; min-width:0; overflow:hidden; }

/* строки (a) */
.ex-row{ padding:8px 0; border-bottom:1px solid var(--line); color:var(--text); transition:background var(--dur); }
.ex-skrow{ border-bottom:1px solid var(--line); }
.ex-skel .ex-skrow:last-child{ border-bottom:none; }
.ex-row:last-child{ border-bottom:none; }
.ex-row:hover{ background:var(--raised); }
.ex-rk-n{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:0.875rem; color:var(--text-4); transition:opacity var(--dur); }

/* звезда «в избранное» поверх номера */
.ex-star{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:0; border:none; background:none; color:var(--text-3); cursor:pointer; transition:color var(--dur), transform var(--dur); }
.ex-star i{ font-size:15px; line-height:1; pointer-events:none; }
.ex-star .ex-star-f{ display:none; }
.ex-star:hover{ color:#f5b301; transform:scale(1.15); }
.ex-row:hover .ex-star{ display:flex; }          /* десктоп: появляется на ховере */
.ex-row:hover .ex-rk-n{ opacity:0; }
.ex-c-rank.is-fav .ex-star{ display:flex; color:#f5b301; }   /* в избранном — всегда жёлтая залитая */
.ex-c-rank.is-fav .ex-star .ex-star-o{ display:none; }
.ex-c-rank.is-fav .ex-star .ex-star-f{ display:inline; }
.ex-c-rank.is-fav .ex-rk-n{ opacity:0; }

/* имя + аватар + подпись-категория + бейджи */
.ex-av{ width:40px; height:40px; flex-shrink:0; }            /* наследует .avatar */
.ex-nm{ display:flex; flex-direction:column; min-width:0; gap:1px; }
.ex-nm-top{ display:flex; align-items:center; gap:5px; min-width:0; }
.ex-nm-tx{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:0.9375rem; line-height:1.2; color:var(--text); }
.ex-nm-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.75rem; color:var(--text-3); }
.ex-badges{ display:inline-flex; gap:4px; margin-left:2px; flex-shrink:0; }
.ex-nm-badges{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:3px; }

.ex-v{ font-size:0.8125rem; color:var(--text); }              /* .mkt-num */
.ex-c-users .ex-v, .ex-c-likes .ex-v, .ex-c-favs .ex-v, .ex-c-comments .ex-v{ color:var(--text-2); }
.ex-c-score .ex-v{ color:var(--text); font-weight:600; }
.ex-c-spark .spark svg{ width:100%; height:100%; display:block; }

/* тултипы заголовков таблицы (свой бабл в стиле .tip из marketplace.css) */
.ex-htip{ position:fixed; left:-9999px; top:0; z-index:400; max-width:min(258px, calc(100vw - 24px)); background:var(--tip-bg, var(--raised)); color:var(--tip-text, var(--text)); border:1px solid var(--tip-border, var(--line-2)); border-radius:8px; box-shadow:0 10px 34px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.16); opacity:0; transform:translateY(3px); pointer-events:none; transition:opacity 0.15s ease, transform 0.15s ease; }
.ex-htip.is-show{ opacity:1; transform:translateY(0); }
.ex-htip-tx{ display:block; padding:9px 12px; font-family:var(--font-body); font-size:0.8125rem; line-height:1.45; }
.ex-htip-arrow{ position:absolute; width:9px; height:9px; background:var(--tip-bg, var(--raised)); border:1px solid var(--tip-border, var(--line-2)); transform:rotate(45deg); }
.ex-htip[data-pos="top"] .ex-htip-arrow{ bottom:-5px; border-top:none; border-left:none; }
.ex-htip[data-pos="bottom"] .ex-htip-arrow{ top:-5px; border-bottom:none; border-right:none; }

/* ── ПУСТО (фикс: уважает [hidden]) ── */
.ex-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:60px 24px; }
.ex-empty[hidden]{ display:none !important; }
.ex-empty-ic{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; background:var(--raised); color:var(--text-3); margin-bottom:14px; }
.ex-empty-ic i{ font-size:1.4rem; }
.ex-empty-t{ font-family:var(--font-display); font-weight:700; font-size:1.0625rem; color:var(--text); }
.ex-empty-s{ margin-top:6px; max-width:340px; color:var(--text-3); font-size:0.875rem; line-height:1.5; }
.ex-empty-btn{ margin-top:16px; padding:10px 18px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:transparent; color:var(--text); font-family:var(--font-display); font-weight:600; font-size:0.8125rem; cursor:pointer; transition:background var(--dur), border-color var(--dur); }
.ex-empty-btn:hover{ background:var(--raised); border-color:var(--text-3); }

/* ── подгрузка / «Загрузить ещё» (фикс: уважает [hidden]) ── */
/* контейнеры «исчезают» → скелетные строки догрузки тоже выравниваются по мастер-сетке */
.ex-more, .ex-more-sk{ display:contents; }
.ex-more[hidden]{ display:none !important; }
.ex-more-foot{ display:flex; flex-direction:column; padding:16px; border-top:1px solid var(--line); }
.ex-more-btn{ align-self:center; padding:10px 24px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:transparent; color:var(--text); font-family:var(--font-display); font-weight:600; font-size:0.8125rem; cursor:pointer; transition:background var(--dur), border-color var(--dur); }
.ex-more-btn:hover{ background:var(--raised); border-color:var(--text-3); }
.ex-more-btn:disabled{ opacity:0.55; cursor:default; }
.ex-more-sk[hidden]{ display:none; }

/* ═══════════════════ СКЕЛЕТОН (1:1) ═══════════════════ */
.ex-skel{ display:none; }
.ex-skrow{ pointer-events:none; }
.ex-skav{ width:40px; height:40px; flex-shrink:0; border-radius:var(--r-xs); }
.ex-sknm{ display:flex; flex-direction:column; min-width:0; flex:1; }

/* видимость по состоянию: первая загрузка (body.loading) и любое обновление (.is-busy) */
body.loading .ex-skel,
#exResults.is-busy .ex-skel{ display:contents; }
body.loading .ex-list,
body.loading .ex-empty,
body.loading .ex-more,
#exResults.is-busy .ex-list,
#exResults.is-busy .ex-empty,
#exResults.is-busy .ex-more{ display:none !important; }

body.loading .ex-count-tx,
#exCount.is-busy .ex-count-tx{ display:none; }
body.loading .ex-count-sk,
#exCount.is-busy .ex-count-sk{ display:inline-block; }

/* мягкое проявление контента (строки, т.к. контейнер теперь display:contents) */
body:not(.loading) #exResults:not(.is-busy) .ex-list > .ex-row{ animation:ex-reveal .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes ex-reveal{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

/* фокус */
.ex-tab:focus-visible, .ex-tf-b:focus-visible, .ex-chip:focus-visible, .ex-opt:focus-visible,
.ex-filter-btn:focus-visible, .ex-fsec-h:focus-visible, .ex-more-btn:focus-visible,
.ex-empty-btn:focus-visible, .ex-fclear:focus-visible, .ex-fdone:focus-visible,
.ex-q-clear:focus-visible, .ex-fclose:focus-visible{ outline:2px solid var(--verified); outline-offset:2px; }
.ex-row:focus-visible{ outline:2px solid var(--verified); outline-offset:-2px; }

/* ═══════════════════ АДАПТИВ ═══════════════════ */

/* ── ≤1100px: фильтры → BOTTOM SHEET, лента на всю ширину ── */
/* ── ≤1400px: прячем «Юзеры» и «Рейтинг» (8 колонок) ── */
@media (max-width:1400px){
  .ex-results{ --ex-grid: 40px minmax(190px,1fr) auto auto auto auto minmax(64px,auto) 78px; }
  .ex-c-users, .ex-c-score{ display:none; }
}
/* ── ≤1240px: прячем «Избранное» и «Комментарии» (6 колонок) ── */
@media (max-width:1240px){
  .ex-results{ --ex-grid: 40px minmax(190px,1fr) auto auto minmax(64px,auto) 78px; }
  .ex-c-favs, .ex-c-comments{ display:none; }
}

@media (max-width:1100px){
  .ex-body{ display:block; margin-top:18px; }
  .ex-side{ position:static; }
  .ex-filter-btn{ display:inline-flex; }
  /* вкладки — на всю ширину над лентой */
  .ex-tabs{ padding-right:0; margin-bottom:14px; }

  /* поиск — на всю ширину, отдельной строкой над вкладками */
  .ex-searchbar{ flex-basis:100%; order:-1; min-width:0; height:46px; }
  /* без вертикальной hr и отступа: лента на всю ширину */
  .ex-main{ padding-left:0; border-left:none; }
  .ex-filters{ padding-right:0; }

  /* bottom sheet */
  .ex-filters{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:100%;
    z-index:160; transform:translateY(100%); visibility:hidden;
    transition:transform .34s cubic-bezier(.16,1,.3,1), visibility 0s linear .34s;
  }
  .ex-filters.is-open{ transform:translateY(0); visibility:visible; transition:transform .34s cubic-bezier(.16,1,.3,1); }
  .ex-fpanel{
    height:auto; max-height:86vh; max-height:86dvh;
    background:var(--canvas); border-top:1px solid var(--line);
    border-radius:18px 18px 0 0; box-shadow:0 -16px 50px rgba(0,0,0,0.42);
    padding:0 16px;
  }
  .ex-fgrab{ display:block; width:100%; padding:9px 0 3px; cursor:grab; }
  .ex-fgrab::before{ content:""; display:block; width:38px; height:4px; margin:0 auto; border-radius:3px; background:var(--line-2); }
  .ex-fhead{ display:flex; padding:2px 0 12px; }
  .ex-fscroll{ padding:0; }
  .ex-ffoot{ display:flex; padding:12px 0 calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); }

  /* скрим: показываем и делаем кликабельным ТОЛЬКО когда открыто */
  .ex-fscrim{ display:block; }
  .ex-fscrim.is-open{ opacity:1; pointer-events:auto; }
  body.ex-noscroll{ overflow:hidden; }
}

/* ── ≤900px: прячем «Лайки» (5 колонок) ── */
@media (max-width:900px){
  .ex-results{ --ex-grid: 40px minmax(180px,1fr) auto minmax(64px,auto) 78px; } /* № · имя · Чатов · Δ · Динамика */
  .ex-c-likes{ display:none; }
}

/* ── ≤680px: компактные карточки (мобильный OpenSea) ── */
@media (max-width:680px){
  .ex-wrap{ padding-left:12px; padding-right:12px; padding-bottom:40px; }
  .ex-toolbar{ gap:8px; }
  .ex-tabs{ width:100%; }
  .ex-tab{ flex:0 0 auto; }
  .ex-tools{ width:100%; gap:8px; }
  .ex-count{ order:3; flex:0 0 auto; margin:0; }
  .ex-filter-btn{ flex:1 1 calc(44% - 4px); justify-content:center; }
  .ex-tf{ order:4; flex:1 1 0; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ex-tf::-webkit-scrollbar{ display:none; }
  .ex-tf-b{ flex:0 0 auto; }
  .ex-sortsel{ flex:1 1 calc(56% - 4px); }
  .ex-sortsel select{ width:100%; }

  /* строка → плотная карточка: звезда | имя (2 ряда) | чаты+Δ | спарклайн */
  /* отключаем мастер-сетку и subgrid → карточки текут как обычные блоки */
  .ex-head{ display:none; }
  .ex-results{ display:block; --ex-grid:none; padding:0; overflow:visible; }
  .ex-list{ display:block; }
  /* скелетон по умолчанию скрыт (как на десктопе); показываем ТОЛЬКО при загрузке/обновлении — карточками */
  body.loading #exResults .ex-skel,
  #exResults.is-busy .ex-skel{ display:block; }
  .ex-row, .ex-skrow{
    grid-column:auto;
    grid-template-columns:22px 1fr auto 50px;
    grid-template-areas:
      "star name chats spark"
      "star name delta spark";
    padding:7px 12px; gap:1px 10px;
  }
  .ex-row .ex-c-users, .ex-row .ex-c-likes, .ex-row .ex-c-favs, .ex-row .ex-c-comments, .ex-row .ex-c-score,
  .ex-skrow .ex-c-users, .ex-skrow .ex-c-likes, .ex-skrow .ex-c-favs, .ex-skrow .ex-c-comments, .ex-skrow .ex-c-score{ display:none; }
  .ex-c-rank{ grid-area:star; align-self:center; justify-content:center; }
  /* на тач-экране звезда видна всегда (нет ховера), номер скрыт */
  .ex-c-rank .ex-rk-n{ display:none; }
  .ex-star{ position:static; display:flex; }
  .ex-c-name{ grid-area:name; align-self:center; }
  .ex-c-chats{ grid-area:chats; align-self:end; justify-content:flex-end; padding-right:0; }
  .ex-c-delta{ grid-area:delta; align-self:start; justify-content:flex-end; padding-right:0; }
  .ex-c-spark{ grid-area:spark; align-self:center; }

  .ex-av{ width:38px; height:38px; }
  .ex-nm-tx{ font-size:0.9375rem; }
  .ex-nm-sub{ display:block; font-size:0.75rem; }
  .ex-c-chats .ex-v{ font-size:0.9375rem; font-weight:600; }
  .ex-badges{ display:none; }
}

@media (max-width:380px){
  .ex-results{ --ex-grid:none; }
  .ex-row, .ex-skrow{ grid-template-columns:20px 1fr auto 46px; }
  .ex-av{ width:36px; height:36px; }
}

/* доступность */
@media (prefers-reduced-motion: reduce){
  body:not(.loading) #exResults:not(.is-busy) .ex-list > .ex-row{ animation:none; }
  .ex-filters, .ex-fscrim, .ex-fsec-h svg{ transition:none; }
}

/* ─────────────────────────── тост «избранное» (низ по центру) ─────────────────────────── */
.ex-toast{
  position:fixed; left:50%; bottom:26px; z-index:4000;
  transform:translateX(-50%) translateY(14px);
  display:flex; align-items:center; gap:10px;
  max-width:calc(100vw - 32px);
  padding:11px 16px 11px 14px;
  background:var(--raised); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r-md);
  box-shadow:0 12px 36px rgba(0,0,0,0.36), 0 2px 8px rgba(0,0,0,0.22);
  font-family:var(--font-body); font-size:0.875rem; font-weight:500; line-height:1.2;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}
.ex-toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }
.ex-toast-ic{ font-size:1.05rem; line-height:1; flex-shrink:0; }
.ex-toast-ic.is-add{ color:#f5b301; }
.ex-toast-ic.is-rm{ color:var(--text-3); }
.ex-toast-ic.is-err{ color:var(--neg); }
[data-theme="light"] .ex-toast{ box-shadow:0 12px 30px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08); }
@media (max-width:680px){ .ex-toast{ bottom:18px; } }
@media (prefers-reduced-motion: reduce){
  .ex-toast{ transition:opacity .2s linear; transform:translateX(-50%); }
  .ex-toast.is-show{ transform:translateX(-50%); }
}
/* Сокращаемые подписи колонок таблицы: по умолчанию полная, короткая скрыта. JS включает .is-abbr
   на колонке, когда строка заголовков ex-head не влезает по ширине — длинная подпись меняется на
   короткую (Пользователи→Польз. и т.п.), чтобы не «наезжать» на соседа. Только десктоп: на мобиле
   ex-head скрыт, так что эти правила там ни на что не влияют. */
.ex-lbl-s{ display:none; }
.ex-th.is-abbr .ex-lbl-f{ display:none; }
.ex-th.is-abbr .ex-lbl-s{ display:inline; }