/* ЗБС: стили, специфичные для каталога карточек и формы — поверх ds/components.css. */

/* ds/components.css задаёт display: grid/inline-flex напрямую классам (.ui-note, .ui-btn,
   .zbs-empty и т.п.) — это author-правило с той же специфичностью, что и [hidden], и по
   порядку подключения перебивает его. Без этой строки app.js мог бы скрыть элемент через
   hidden=true, а он остался бы видимым пустым блоком. */
[hidden] { display: none !important; }

.view { display: none; }
.view.is-active { display: block; }

/* ---------- Текстура: лёгкое зерно поверх плоского тёмного фона ---------- */
.zbs-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main.ui-page { position: relative; z-index: 2; }

/* ---------- Верхняя брендовая плашка: лого + название клуба ---------- */
.zbs-topbar {
  position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--gutter); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.zbs-topbar__mark {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: linear-gradient(160deg, var(--brand), var(--brand-2)); color: var(--on-brand);
  font-family: var(--logo); font-weight: 700; font-size: 15px; padding: 5px;
}
.zbs-topbar__mark img { width: 100%; height: 100%; object-fit: contain; }
.zbs-topbar__word { font-family: var(--logo); font-weight: 700; font-size: 16px; letter-spacing: .01em; }
.zbs-topbar__word i { color: var(--brand-2); font-style: normal; }
.zbs-topbar__sub { color: var(--text-3); font-size: 12px; padding-left: var(--s-2); border-left: 1px solid var(--line); }
.zbs-topbar__theme {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); cursor: pointer; transition: color .15s ease;
}
.zbs-topbar__theme svg { width: 17px; height: 17px; }
.zbs-topbar__theme:hover { color: var(--text); }

/* ---------- Бейдж-пилюля с точкой и акцентный цвет в заголовке — в духе промо-лендинга ---------- */
.zbs-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: 99px; margin-bottom: var(--s-3);
}
.zbs-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.zbs-accent { color: var(--brand); }

/* ---------- Заголовки ---------- */
.ui-overline { margin-bottom: 2px; }
.ui-h1 { margin-bottom: var(--s-2); }
.ui-lead { margin-bottom: var(--s-6); }

/* ---------- Фильтры каталога ---------- */
.zbs-filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-5); }

/* ---------- Сетка карточек: один столбец на телефоне, два — на широком экране ---------- */
.zbs-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }

.zbs-textarea { height: auto; min-height: 84px; padding-block: 14px; resize: vertical; }

.zbs-logo-row { display: flex; align-items: center; gap: var(--s-4); }
.zbs-logo-row .ui-avatar { font-size: 22px; overflow: hidden; }
.zbs-logo-row .ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.zbs-avatar--square { border-radius: var(--r-m); }
.zbs-avatar--square img { border-radius: var(--r-m); }

/* ---------- Карточка участника: целиком кликабельна — открывает «подробнее» ---------- */
.zbs-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: var(--s-6); display: grid; gap: var(--s-4);
  box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.zbs-card .ui-btn { position: relative; z-index: 1; }
.zbs-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.zbs-card:active { transform: translateY(-1px) scale(.995); }
.zbs-card__head { display: flex; align-items: center; gap: var(--s-3); }
.zbs-card__head .ui-avatar { width: 54px; height: 54px; font-size: 19px; overflow: hidden; border-radius: var(--r-m); }
.zbs-card__head .ui-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-m); }
.zbs-card__title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.zbs-card__meta { color: var(--text-2); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.zbs-card__about { color: var(--text); font-size: 16px; line-height: 1.55; }
.zbs-card__request { color: var(--text-2); font-size: 15px; border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: 2px; }
.zbs-card__request b { color: var(--text); font-weight: 600; }
.zbs-card .ui-btn { margin-top: 2px; }

/* ---------- Кнопки: форма и вес в духе «Много денег» (скруглённый прямоугольник
   вместо пилюли ds по умолчанию, градиент + цветное свечение на акцентных) ---------- */
.ui-btn {
  border-radius: var(--r-m); font-weight: 600;
  transition: transform .14s var(--ease, ease), background .15s ease, filter .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.ui-btn:active { transform: scale(.97); }
.ui-btn--primary, .ui-btn--accent {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--brand) 55%, transparent);
}
.ui-btn--primary:hover, .ui-btn--accent:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ui-btn--round { border-radius: 50%; }

/* ---------- Переключатель-«таблетки»: тема оформления и подобные выборы ---------- */
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick > button {
  flex: 1 1 auto; min-height: 46px; padding: 11px 14px;
  border-radius: var(--r-m); font-size: 14px; font-weight: 500; font-family: inherit;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
  cursor: pointer; transition: transform .12s var(--ease, ease), background .15s, color .15s, border-color .15s;
}
.pick > button:active { transform: scale(.96); }
.pick > button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.zbs-theme-hint { color: var(--text-2); font-size: 13px; line-height: 1.5; margin-top: var(--s-3); }

/* ---------- Статус-плашка карточки ---------- */
/* ds/components.css кладёт .ui-note в грид 32px (иконка) + 1fr — у нас нет иконки,
   без этой строки текст статуса ужимается в 32-пиксельную колонку по одному слову в строке. */
#cardStatus.ui-note { grid-template-columns: 1fr; }
.ui-note { border: 1px solid var(--line); background: var(--surface); }
.ui-note[data-tone="draft"] { border-color: var(--line); }
.ui-note[data-tone="pending"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.ui-note[data-tone="published"] { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.ui-note[data-tone="rejected"] { border-color: color-mix(in srgb, var(--loss) 45%, var(--line)); background: color-mix(in srgb, var(--loss) 10%, var(--surface)); }

/* ---------- Ссылки на политику: без иконки-колонки, компактный серый текст ---------- */
.zbs-consent.ui-note, .zbs-legal.ui-note { grid-template-columns: 1fr; padding: 10px 2px; background: transparent; border: none; font-size: 13px; color: var(--text-2); text-align: center; }
.zbs-consent a, .zbs-legal a { color: inherit; text-decoration: underline; }

/* ---------- Нижнее меню: одна цельная панель вместо отдельных «пилюль» ----------
   Базовый ds/components.css рассчитан на иконку + подпись, которая всплывает только
   у активной вкладки — без иконок (как было тут) все подписи оставались видны всегда
   разной ширины, и «О клубе» переносилось на две строки. Теперь иконка есть у каждой
   вкладки, подпись видна всегда, а сама панель — один блок на всю ширину (grid 1fr),
   а не бегущая пилюля с зазорами. */
.ui-tabbar {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  width: min(520px, calc(100% - 24px)); height: 68px; padding: 0;
  border-radius: var(--r-l); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.ui-tab {
  flex-direction: column; gap: 2px; height: 100%; min-width: 0; padding: 5px 4px;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--r-m); font-size: 10.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--text-3); transition: color .15s;
}
.ui-tab span:not(.i3) { display: block !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ui-tab[aria-current="page"] { padding: 6px 4px; color: var(--text); background: none; }

/* ---------- IconSquare: тот же набор объёмных плиток, что в @Mnogodenegme_bot ----------
   Рецепт перенесён как есть: --s задаёт размер, радиус/подсветка/тень глифа считаются от
   него же. Два веса — glow (залитый, активная вкладка) и linear (контурный, неактивная),
   переключаются через display, а не через лишний DOM. */
.i3 {
  --s: 34px; --e: 1px;
  width: var(--s); height: var(--s); flex: none;
  display: inline-grid; place-items: center;
  border-radius: calc(var(--s) * .273);
  background: var(--i3-bg, var(--surface-2));
  box-shadow:
    inset 0 var(--e) 0 rgba(255,255,255,.45),
    inset 0 0 0 var(--e) rgba(255,255,255,.28),
    inset 0 0 calc(var(--s) * .364) calc(var(--s) * -.136) var(--i3-glow, transparent);
  transition: transform .16s var(--ease, ease);
}
.i3 svg { width: calc(var(--s) * .5); height: calc(var(--s) * .5); display: block; overflow: visible; }
.i3 .gl {
  fill: url(#glyph-gradient) rgba(255,255,255,.82);
  filter: drop-shadow(0 calc(var(--s) * .057) calc(var(--s) * .17) rgba(0,0,0,.32))
          drop-shadow(0 -.5px 0 rgba(255,255,255,.5));
}
.i3 .ln { display: none; fill: none; color: var(--text-2); }
/* Наложение цветом текста, а не фиксированным --surface-2: --text сам инвертируется между
   тёмной и светлой темой, поэтому плитка остаётся одинаково заметной в обеих — раньше в
   светлой теме --surface-2 был почти белым на белом фоне навигации, и неактивные вкладки
   выглядели «пустыми» рядом с цветной активной. */
.ui-tab:not([aria-current="page"]) .i3 {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 13%, transparent);
}
.ui-tab:not([aria-current="page"]) .i3 .gl { display: none; }
.ui-tab:not([aria-current="page"]) .i3 .ln { display: block; }
.ui-tab:active .i3 { transform: scale(.92); }
.ui-tab[aria-current="page"] .i3 { transform: scale(1.05); }

.i3.c-blue   { --i3-bg: linear-gradient(90deg, #0075db 0%, #0088ff 55%, #3aa3ff 100%); --i3-glow: #70bcff; }
.i3.c-cyan   { --i3-bg: linear-gradient(90deg, #00a1ac 0%, #00c3d0 55%, #0bf0ff 100%); --i3-glow: #41f3ff; }
.i3.c-orange { --i3-bg: linear-gradient(90deg, #ff7a04 0%, #ff8d28 55%, #ffac62 100%); --i3-glow: #ffc898; }
.i3.c-purple { --i3-bg: linear-gradient(90deg, #a134d8 0%, #af52de 55%, #c683e7 100%); --i3-glow: #dbb0f0; }
.i3.c-green { --i3-bg: linear-gradient(90deg, #2caa4c 0%, #34c759 55%, #60d57d 100%); --i3-glow: #8be1a0; }

/* ---------- Группа строк-действий (как в @Mnogodenegme_bot: «Ещё») ----------
   Карточка .menu группирует кликабельные строки .mrow — цветная плитка .i3 слева
   (здесь всегда «залитый» вес, нет понятия неактивной строки), заголовок+подпись,
   справа шеврон/значение. Разделитель начинается после плитки, а не от края. */
.menu {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); overflow: hidden; margin-bottom: 14px;
}
.mrow {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 16px; min-height: 64px; text-align: left;
  background: none; border: 0; position: relative; transition: background .15s;
  color: inherit; text-decoration: none; cursor: pointer;
}
.mrow + .mrow::before {
  content: ""; position: absolute; left: 70px; right: 0; top: 0;
  height: 1px; background: var(--line);
}
.mrow:active { background: var(--surface-2); }
.mrow .i3 { --s: 40px; }
.mrow .i3 .ln { display: none; }
.mrow .i3 .gl { display: block; }
.mrow .tx { flex: 1; min-width: 0; }
.mrow .tx b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.mrow .tx span { display: block; font-size: 13px; color: var(--text-2); margin-top: 1px; }
.mrow .val { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; flex: none; }
.mrow .chev { color: var(--text-2); font-size: 18px; line-height: 1; flex: none; }

/* ---------- Переключатель «Список / Листать» ---------- */
.zbs-viewpick { margin-bottom: var(--s-4); }
.zbs-viewpick > button { flex: none; min-height: 38px; padding: 8px 16px; font-size: 13px; }

/* ---------- Слайдер: карточки на весь экран, свайп, знакомство «по одной» ----------
   Нативный scroll-snap вместо JS-библиотеки: лёгкий, работает пальцем как обычная
   лента Telegram, не требует отдельного drag-движка. */
.zbs-slider {
  display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
  padding: 2px var(--gutter) 10px; margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}
.zbs-slider::-webkit-scrollbar { display: none; }
.zbs-slide {
  flex: 0 0 calc(100% - var(--gutter) * 2); scroll-snap-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: var(--s-5); display: grid; gap: var(--s-3); box-shadow: var(--shadow-card); cursor: pointer;
}
.zbs-slide .ui-avatar { width: 64px; height: 64px; font-size: 24px; border-radius: var(--r-m); overflow: hidden; }
.zbs-slide .ui-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-m); }
.zbs-slider__count { text-align: center; color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: .02em; }

/* ---------- Профиль: карточка статуса + инструкция ---------- */
.zbs-profile-card {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: var(--s-4); margin-bottom: var(--s-3);
}
.zbs-profile-card .ui-avatar { width: 48px; height: 48px; font-size: 18px; flex: none; }
.zbs-profile-card__title { font-weight: 700; font-size: 16px; }
.zbs-profile-card__sub { color: var(--text-2); font-size: 13px; margin-top: 2px; }
#view-profile .ui-btn--block + .ui-btn--block { margin-top: var(--s-3); }
.zbs-profile-section { margin-top: var(--s-7); margin-bottom: var(--s-2); }
.zbs-howto li { margin-bottom: var(--s-3); }

/* ---------- Заявки: список входящих/исходящих ---------- */
.zbs-reqlist { display: grid; gap: var(--s-3); }
.zbs-req {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: var(--s-4); display: grid; gap: var(--s-2); cursor: pointer;
  transition: border-color .15s ease;
}
.zbs-req:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.zbs-req__head { display: flex; align-items: center; gap: var(--s-3); }
.zbs-req__head .ui-avatar { width: 38px; height: 38px; font-size: 14px; border-radius: var(--r-m); overflow: hidden; }
.zbs-req__head .ui-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-m); }
.zbs-req__title { font-weight: 700; font-size: 15px; }
.zbs-req__time { color: var(--text-3); font-size: 12px; margin-left: auto; white-space: nowrap; }
.zbs-req__msg { color: var(--text-2); font-size: 14px; line-height: 1.4; }
.zbs-req__badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent);
  padding: 2px 8px; border-radius: 99px; width: fit-content;
}

/* ---------- Заявка из карточки «подробнее»: компактная форма ---------- */
.zbs-compose { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.zbs-compose textarea {
  width: 100%; min-height: 70px; padding: 12px 14px; border-radius: var(--r-m);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 14px; resize: vertical;
}
.zbs-compose textarea:focus { outline: none; border-color: var(--brand); }

/* ---------- Пустой каталог: составное состояние, а не одна строка ---------- */
.zbs-empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-10) var(--s-4); text-align: center; }
.zbs-empty__badge {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2); font-size: 20px; font-weight: 700;
}
.zbs-empty__title { font-weight: 700; font-size: 17px; }
.zbs-empty__text { color: var(--text-2); font-size: 15px; max-width: 32ch; }

/* ---------- Обложка «О клубе» ---------- */
.zbs-hero {
  position: relative; border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--s-6);
  aspect-ratio: 16 / 9; box-shadow: var(--shadow-card);
}
.zbs-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zbs-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,12,.1) 0%, rgba(8,9,12,.5) 60%, rgba(8,9,12,.92) 100%);
}
.zbs-hero__text { position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); }
.zbs-hero__text .ui-overline { color: rgba(255,255,255,.75); }
.zbs-hero__text .ui-h1 { color: #fff; margin-bottom: 0; }

/* ---------- Статистика клуба: сжатая строка цифр из реального сайта ---------- */
.zbs-stats { display: flex; gap: var(--s-3); margin-bottom: var(--s-6); text-align: center; }
.zbs-stats > div {
  flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--s-3) var(--s-2);
}
.zbs-stats b { display: block; font-size: 20px; font-weight: 800; color: var(--brand); letter-spacing: -.01em; }
.zbs-stats span { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; }

/* ---------- Лента аватаров «Уже с нами» ---------- */
.zbs-members { margin-bottom: var(--s-8); }
.zbs-members > .ui-overline { margin-bottom: var(--s-3); }
.zbs-rail { padding-block: 2px; }
.zbs-avatar-chip { display: grid; justify-items: center; gap: var(--s-2); width: 64px; cursor: pointer; }
.zbs-avatar-chip .ui-avatar { width: 52px; height: 52px; font-size: 18px; border: 2px solid var(--line); }
.zbs-avatar-chip span {
  font-size: 11px; color: var(--text-2); text-align: center; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Подпись разработчика (низ «О клубе») ---------- */
.zbs-devcredit { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-6); }
.zbs-devcredit a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  color: var(--text-3); font-size: 13px; line-height: 1.4; text-decoration: none; transition: color .15s ease;
}
.zbs-devcredit a:hover { color: var(--text); }
.zbs-devcredit a:hover .zbs-devcredit__mark { color: var(--brand-2); }
.zbs-devcredit__mark { font-family: var(--font-mono); font-weight: 700; letter-spacing: .02em; color: var(--text-2); }
.zbs-devcredit__mark i { color: var(--brand-2); font-style: normal; }

/* ---------- Цветная точка сферы деятельности (идентичность «в духе» proninhere/money) ---------- */
.zbs-niche-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* ---------- Toast вместо alert() — сдержанный, в духе «Много денег»:
   нейтральная поверхность с рамкой, тон — цветом текста/рамки, а не заливкой фона ---------- */
.zbs-toast {
  position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -80px);
  z-index: 60; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--r-m);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-float);
  pointer-events: none; transition: transform .3s var(--ease, ease);
}
.zbs-toast.is-visible { transform: translate(-50%, 0); }
.zbs-toast[data-tone="error"] { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 45%, var(--line)); }
.zbs-toast[data-tone="ok"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }

/* ---------- Карточка «подробнее»: шторка снизу (тот же язык, что в боте «Много денег») ---------- */
.sheet-bg {
  position: fixed; inset: 0; z-index: 50; background: rgba(3,8,16,.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.sheet-bg.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
  z-index: 51; background: var(--surface); border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 10px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.sheet.on { transform: translate(-50%, 0); }
html.sheet-open { overflow: hidden; }
.sheet-grip { width: 38px; height: 4px; border-radius: 99px; background: var(--line); margin: 6px auto 18px; }
.sheet-close {
  position: absolute; top: 14px; right: var(--gutter); width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); border: 0;
  font-size: 13px; cursor: pointer;
}
.sheet-close:hover { color: var(--text); }

/* ---------- Содержимое «подробнее»: скриншот сайта, контакты, активные ссылки ---------- */
.zbs-detail { display: grid; gap: var(--s-4); }
.zbs-detail__shot {
  position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16/10;
  background: var(--surface-2); border: 1px solid var(--line);
}
.zbs-detail__shot.is-loading::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 8%, transparent) 50%, transparent 70%);
  background-size: 200% 100%; animation: zbs-shimmer 1.3s infinite;
}
@keyframes zbs-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.zbs-detail__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zbs-detail__head { display: flex; align-items: center; gap: var(--s-3); }
.zbs-detail__head .ui-avatar { width: 56px; height: 56px; font-size: 20px; overflow: hidden; border-radius: var(--r-m); }
.zbs-detail__head .ui-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-m); }
.zbs-detail__title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.zbs-detail__row { font-size: 14px; color: var(--text); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.zbs-detail__label { color: var(--text-3); min-width: 70px; flex: none; }
.zbs-detail__owner { border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: 2px; }
.zbs-detail__owner .ui-overline { margin-bottom: 4px; }
.zbs-detail__link { color: var(--link); text-decoration: none; word-break: break-word; }
.zbs-detail__link:hover { text-decoration: underline; }