:root {
  --activity-w: 420px;
  --pink: #E91E84;
  --pink-bg: #DE377A;
  --font: -apple-system, "SF Pro", "Inter", system-ui, sans-serif;
}

/* ─── Утил-классы рваных кромок ──────────────────────────────────────────
   torn-top / torn-bottom / torn-left / torn-right — clip-path только с
   указанной стороны (~6% от размера ячейки), остальные кромки прямые.
   Используют SVG clipPath из main.html (id="torn-{side}-{1..3}").
   По дефолту берётся вариант -1. Чтобы взять другой — добавь модификатор:
   .torn-top.torn-v-2 или .torn-top.torn-v-3.
   Можно совмещать: .torn-top.torn-bottom (две стороны) — нужны 2 разные
   SVG-маски, поэтому для сочетаний есть готовые .torn-tb / .torn-lr ниже. */
.torn-top    { -webkit-clip-path: url(#torn-top-1);    clip-path: url(#torn-top-1); }
.torn-bottom { -webkit-clip-path: url(#torn-bottom-1); clip-path: url(#torn-bottom-1); }
.torn-left   { -webkit-clip-path: url(#torn-left-1);   clip-path: url(#torn-left-1); }
.torn-right  { -webkit-clip-path: url(#torn-right-1);  clip-path: url(#torn-right-1); }

.torn-top.torn-v-2    { -webkit-clip-path: url(#torn-top-2);    clip-path: url(#torn-top-2); }
.torn-top.torn-v-3    { -webkit-clip-path: url(#torn-top-3);    clip-path: url(#torn-top-3); }
.torn-bottom.torn-v-2 { -webkit-clip-path: url(#torn-bottom-2); clip-path: url(#torn-bottom-2); }
.torn-bottom.torn-v-3 { -webkit-clip-path: url(#torn-bottom-3); clip-path: url(#torn-bottom-3); }
.torn-left.torn-v-2   { -webkit-clip-path: url(#torn-left-2);   clip-path: url(#torn-left-2); }
.torn-left.torn-v-3   { -webkit-clip-path: url(#torn-left-3);   clip-path: url(#torn-left-3); }
.torn-right.torn-v-2  { -webkit-clip-path: url(#torn-right-2);  clip-path: url(#torn-right-2); }
.torn-right.torn-v-3  { -webkit-clip-path: url(#torn-right-3);  clip-path: url(#torn-right-3); }

/* Полный запрет любого пользовательского зума: pan-x pan-y разрешают только
   панорамирование (скролл), отрезают pinch-zoom и double-tap-zoom. iOS Safari
   игнорирует maximum-scale в meta viewport, поэтому делаем на уровне CSS. */
html, body { touch-action: pan-x pan-y; }

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

::-webkit-scrollbar { display: none; }

[hidden] { display: none !important; }

body {
  min-height: 100vh;
  font-family: var(--font);
  color: #eee;
  overflow: hidden;

  background:
    radial-gradient(ellipse at 30% 20%, #1a1520 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, #161218 0%, transparent 55%),
    #0c0b0d;
}

.wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity {
  width: var(--activity-w);
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0A0A0B;
}

@media (min-width: 500px) {
  .activity {
    height: 94vh;
    max-height: 960px;
    border-radius: 28px;
    border: 1px solid rgba(243, 226, 235, 0.08);
    box-shadow:
      0 0 100px rgba(200, 40, 60, 0.06),
      0 40px 80px rgba(0, 0, 0, 0.5);
  }
}

@media (min-width: 1200px) {
  .activity { height: 96vh; max-height: 100%; }
}

@media (max-width: 499px) {
  :root { --activity-w: 100%; }
  .activity { width: 100%; border-radius: 0; }
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


.home-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: 12px 0;
  background: rgba(10, 10, 11, 0.2);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,0.65) 92%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,0.65) 92%, rgba(0,0,0,0) 100%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition: background 240ms ease, -webkit-mask-size 240ms ease, mask-size 240ms ease;
}
.home-topbar.is-scrolled { background: rgba(10, 10, 11, 0.55); }
/* Выдача исчерпана — фильтры бесполезны, скрываем весь топбар (tz5 #11 / 05.5). */
.home-topbar.is-hidden { display: none; }

.feed-end {
  padding: 90px 28px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
.feed-end-title {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 8px;
}
.feed-end-text { font-size: 14px; line-height: 1.4; }

/* Когда открыт фильтр-sheet, topbar окрашивается в цвет filter-sheet-head
   (родительский .sheet — #14111c), чтобы зрительно склеиться с шапкой sheet'а.
   mask-size 200% стрейтчит градиент в 2 раза → fade-портион (78–100% градиента)
   уезжает в 156–200% высоты topbar'а, то есть ниже видимой области. Получается
   плотная нижняя кромка без «тени». Транзишн на mask-size — плавный.
   Класс .filter-open вешается на body в openSheet/closeSheet (см. main.js). */
body.filter-open .home-topbar {
  background: #14111c;
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
}

.home-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 12px;
  height: 44px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.home-tabs::-webkit-scrollbar { display: none; }

.home-tab {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  font-weight: 400;
  position: relative;
  transition: all 160ms ease;
  white-space: nowrap;
}

.home-tab.is-active {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
}

.home-tab--paid { color: rgba(255, 255, 255, 0.35); }
.home-tab--paid:hover { color: rgba(255, 255, 255, 0.6); }

.home-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 66px;
  padding-bottom: 90px;
  /* убрал scroll-snap — был перескок с карточки на карточку при колесе мыши */
  scroll-padding-top: 66px;
  scroll-padding-bottom: 90px;
  -webkit-overflow-scrolling: touch;
}

.home-feed { position: relative; }

@keyframes card-fly-in {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

.feed-publish-gate {
  margin: 60px 20px;
  padding: 32px 24px;
  background: #16141A;
  border-radius: 20px;
  text-align: center;
  color: #fff;
}
.feed-publish-gate-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.feed-publish-gate-text {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 22px;
  line-height: 1.4;
}
.feed-publish-gate-btn {
  background: var(--pink);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.feed-publish-gate-btn:active { opacity: 0.85; }

.feed-card {
  padding: 25px 0px 25px;
  opacity: 0;
  display: flex;
  flex-direction: column;
  height: 550px;
  min-height: 340px;
  scroll-snap-align: start;
  /* Оффскрин-карточки не layout'ятся и не paint'ятся → бюджет памяти и
     композитор-слоёв (mask / image-decode) тратится только на видимые.
     Критично для iOS — без этого Safari убивал renderer на 7-й анкете.
     contain-intrinsic-size резервирует высоту для скролла. */
  content-visibility: auto;
  contain-intrinsic-size: auto 550px;
}
.feed-card.is-visible {
  animation: card-fly-in 0.38s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.feed-card--limited {
  position: relative;
}
.feed-card--limited .fpc-body {
  filter: blur(14px);
  transform: scale(1.05);   pointer-events: none;
  user-select: none;
}
.feed-limit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}
.feed-limit-plate {
  transform: rotate(5deg);
  background: linear-gradient(135deg, #B23763 0%, #ba3b68 100%);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-radius: 20px;
  --torn-clip: url(#torn-sq-7);
  -webkit-clip-path: var(--torn-clip);
          clip-path: var(--torn-clip);
}
.feed-limit-text {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}
.feed-limit-btn {
  /* TZ3: чёрный, пилюля 30px, рваная кромка. */
  background: #000000;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 30px;
  cursor: pointer;
  --torn-clip: url(#torn-wide-11);
  -webkit-clip-path: var(--torn-clip);
          clip-path: var(--torn-clip);
}
.feed-limit-btn:active { opacity: 0.85; }

.fpc-body {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(to top, #111111 0%, #191816 100%);
  border-radius: 16px;
  /* Рваная «скомканная бумага» ТОЛЬКО сверху и снизу (лево/право ровные —
     блок на всю ширину экрана). Две маски (top + bottom) с composite:intersect,
     как у .sheet-cta, но без боковых. Заменяет прежний 4-сторонний torn-sq. */
  -webkit-clip-path: none;
          clip-path: none;
  -webkit-mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,1.94 2.00,2.02 4.00,2.17 6.00,2.34 8.00,2.49 10.00,2.54 12.00,2.47 14.00,2.21 16.00,1.82 18.00,1.35 20.00,0.92 22.00,0.60 24.00,0.45 26.00,0.48 28.00,0.62 30.00,0.71 32.00,0.67 34.00,0.52 36.00,0.36 38.00,0.30 40.00,0.33 42.00,0.49 44.00,0.77 46.00,1.20 48.00,1.65 50.00,1.97 52.00,2.10 54.00,2.11 56.00,2.13 58.00,2.13 60.00,2.11 62.00,2.04 64.00,2.04 66.00,2.15 68.00,2.38 70.00,2.68 72.00,3.02 74.00,3.39 76.00,3.77 78.00,4.04 80.00,4.13 82.00,4.05 84.00,3.86 86.00,3.62 88.00,3.34 90.00,3.02 92.00,2.72 94.00,2.52 96.00,2.42 98.00,2.39 100.00,2.38 100.00,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 100.00,0.00 100.00,95.07 98.00,95.11 96.00,95.24 94.00,95.47 92.00,95.83 90.00,96.30 88.00,96.83 86.00,97.30 84.00,97.63 82.00,97.80 80.00,97.90 78.00,98.00 76.00,98.14 74.00,98.21 72.00,98.17 70.00,98.04 68.00,97.95 66.00,97.97 64.00,98.12 62.00,98.30 60.00,98.44 58.00,98.47 56.00,98.44 54.00,98.41 52.00,98.48 50.00,98.59 48.00,98.78 46.00,99.01 44.00,99.28 42.00,99.43 40.00,99.41 38.00,99.25 36.00,99.07 34.00,98.89 32.00,98.73 30.00,98.58 28.00,98.48 26.00,98.42 24.00,98.36 22.00,98.26 20.00,98.08 18.00,97.89 16.00,97.79 14.00,97.92 12.00,98.28 10.00,98.82 8.00,99.30 6.00,99.59 4.00,99.59 2.00,99.47 0.00,99.36' fill='%23fff'/></svg>");
  mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,1.94 2.00,2.02 4.00,2.17 6.00,2.34 8.00,2.49 10.00,2.54 12.00,2.47 14.00,2.21 16.00,1.82 18.00,1.35 20.00,0.92 22.00,0.60 24.00,0.45 26.00,0.48 28.00,0.62 30.00,0.71 32.00,0.67 34.00,0.52 36.00,0.36 38.00,0.30 40.00,0.33 42.00,0.49 44.00,0.77 46.00,1.20 48.00,1.65 50.00,1.97 52.00,2.10 54.00,2.11 56.00,2.13 58.00,2.13 60.00,2.11 62.00,2.04 64.00,2.04 66.00,2.15 68.00,2.38 70.00,2.68 72.00,3.02 74.00,3.39 76.00,3.77 78.00,4.04 80.00,4.13 82.00,4.05 84.00,3.86 86.00,3.62 88.00,3.34 90.00,3.02 92.00,2.72 94.00,2.52 96.00,2.42 98.00,2.39 100.00,2.38 100.00,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 100.00,0.00 100.00,95.07 98.00,95.11 96.00,95.24 94.00,95.47 92.00,95.83 90.00,96.30 88.00,96.83 86.00,97.30 84.00,97.63 82.00,97.80 80.00,97.90 78.00,98.00 76.00,98.14 74.00,98.21 72.00,98.17 70.00,98.04 68.00,97.95 66.00,97.97 64.00,98.12 62.00,98.30 60.00,98.44 58.00,98.47 56.00,98.44 54.00,98.41 52.00,98.48 50.00,98.59 48.00,98.78 46.00,99.01 44.00,99.28 42.00,99.43 40.00,99.41 38.00,99.25 36.00,99.07 34.00,98.89 32.00,98.73 30.00,98.58 28.00,98.48 26.00,98.42 24.00,98.36 22.00,98.26 20.00,98.08 18.00,97.89 16.00,97.79 14.00,97.92 12.00,98.28 10.00,98.82 8.00,99.30 6.00,99.59 4.00,99.59 2.00,99.47 0.00,99.36' fill='%23fff'/></svg>");
  -webkit-mask-size: 100% 100%, 100% 100%;
          mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.fpc-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* snap делаем вручную в JS при остановке — нативный mandatory дёргает
     ленту при дорисовке/удалении блоков, поэтому он выключен. */
  scroll-snap-type: none;
  /* НЕ включаем -webkit-overflow-scrolling: touch — на iOS его инерция идёт
     отдельным потоком и замирает при дорисовке/удалении блоков. Современный
     скролл iOS и так с инерцией и переживает изменения DOM плавно. */
  /* manipulation = pan-x + pan-y + pinch-zoom, но БЕЗ double-tap-zoom.
     Это убирает 300ms задержку браузера на детект double-tap, которая
     ощущалась как фриз при тапе по краю анкеты для переключения фото. */
  touch-action: manipulation;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fpc-track::-webkit-scrollbar { width: 0; height: 0; display: none; }

.fpc-cell {
  flex: 0 0 72%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 16px;
  scroll-snap-align: center;
  /* Выносим каждую ячейку на свой GPU-слой: при бесшовном recenter в кадр
     въезжают элементы соседней копии, и iOS на один кадр перерастеризует
     их (мерцание). Готовый композит-слой только перекомпоновывается —
     перерисовки и вспышки нет. translateZ(0)+backface-visibility — связка,
     которая стабильно держит слой именно в WebKit/iOS. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.fpc-cell.fpc-cell-desc {
  /* Та же ширина что у фото-ячейки (72%). flex-basis 65% раньше давал узкий
     блок, и любая длинная цепочка символов без пробелов раздувала flex-item
     до своего min-content, толкая фото вправо. min-width:0 + break-anywhere
     внутри гарантируют что текст обязательно перенесётся. */
  flex: 0 0 72%;
  min-width: 0;
  padding: 100px 20px 150px 20px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font);
  scroll-snap-align: start;   /* текст у левого края, фото выглядывает справа */
}

.feed-card.is-flipped .fpc-cell.fpc-cell-desc {
  align-items: flex-end;
  scroll-snap-align: end;     /* зеркально: текст справа, фото слева. padding симметричный — оверрайд не нужен */
}
.feed-card.is-flipped .fpc-desc-text,
.feed-card.is-flipped .fpc-desc-meta {
  text-align: right;
}

.fpc-photo-frame {
  position: relative;
  width: 100%;
  height: 75%;
  border-radius: 14px;
  background-color: #0f0e13;
  overflow: hidden;
  /* rotate отдельным CSS-свойством (не transform!) — transform создаёт
     stacking-context и в Chrome/Safari ломает clip-path: url(#...) для torn. */
  rotate: var(--rot, 0deg);
  -webkit-clip-path: var(--torn-clip-tight, none);
          clip-path: var(--torn-clip-tight, none);
}
.fpc-photo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  /* Фото фиксируем на своём GPU-слое — иначе iOS перерастеризует bitmap
     при въезде новой копии в кадр после recenter. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.fpc-photo-empty {
  width: 100%;
  height: 75%;
  border-radius: 14px;
  background: linear-gradient(135deg, #a5a2a2 0%, #b17b95 50%, #893c8d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  rotate: var(--rot, 0deg);
  -webkit-clip-path: var(--torn-clip-tight, none);
          clip-path: var(--torn-clip-tight, none);
}
.fpc-photo-empty svg {
  width: 48px;
  height: 48px;
}

.fpc-desc-text {
  /* Шрифт адаптивный (на узких экранах 14px, на широких до 16px).
     break-anywhere — единственное что заставит wrap «слитного» текста типа
     150-значного числа без пробелов. width:100% + min-width:0 чтобы flex-item
     не растягивался по min-content контента. */
  font-size: clamp(14px, 3.8vw, 16px);
  color: rgba(255,255,255,0.88);
  text-align: left;
  font-family: var(--font);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 14;       /* было 10 — 150 символов могли не влезть */
  -webkit-box-orient: vertical;
}
.fpc-desc-text--empty {
  color: rgba(255,255,255,0.3);
  font-style: italic;
}
.fpc-desc-meta {
  margin-top: 30px;
  font-size: 14px;
  color: #797876;
  font-family: var(--font);
  text-align: left;
}

.fpc-bottom-row {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 30px 24px;        /* запас от рваной кромки маски */
  z-index: 2;
  pointer-events: none;
}
.fpc-card-meta {
  min-width: 0;
  flex: 1;
  pointer-events: none;
  transition: opacity 220ms;
}
/* Когда фокус карусели уехал с описания на фото — прячем «Имя, возраст».
   .is-photo-mode выставляет updateFocus в main.js (см. initCardCarousel). */
.feed-card.is-photo-mode .fpc-card-meta { opacity: 0; }
.fpc-name {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.3px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.fpc-city {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.fpc-card-btns {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  pointer-events: auto;
}
.ink-btn {
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: rgba(12, 10, 18, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms;
  flex-shrink: 0;
  pointer-events: auto;
}
.ink-btn.is-liked { background: #ff3d5f; }

.screen--chats { background: #1a1620; }

.chats-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding-top: 12px;
  padding-bottom: 90px;
}

.promo-banner {
  position: relative;
  margin: 0 12px 4px;
  padding: 16px 16px 18px;
  background: linear-gradient(135deg, #B23763 0%, #E91E84 60%, #FF5BA5 100%);
  border-radius: 14px;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* У активного подписчика на главном скрываем рекламный баннер. */
body.is-subscriber .promo-banner { display: none; }

.promo-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-content { flex: 1; padding-right: 50px; }
.promo-title   { font-size: 17px; font-weight: 700; line-height: 21px; margin-bottom: 6px; }
.promo-text    { font-size: 12.5px; line-height: 16px; color: rgba(255, 255, 255, 0.92); }

.promo-illust {
  flex-shrink: 0;
  width: 56px; height: 62px;
  margin-top: 2px;
}
.promo-illust svg { width: 100%; height: 100%; }

.chats-wrap {
  margin-top: -18px;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  background: #1a1620;
  padding: 20px 0 6px;
}

.chats-heading {
  padding: 0 18px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.95);
  transform: rotate(-0.5deg);
}

/* Wrap для swipe-влево: внутри лежит абсолютная плашка «Выйти» справа и
   сама .chat-row (которая скользит по transform). */
.chat-row-wrap {
  position: relative;
  overflow: hidden;
  /* Тот же #1a1620, что у .chat-row — чтобы любой sub-pixel-зазор по правому
     или нижнему краю показывал цвет фона списка, а не красный action под ним.
     Раньше тут было background: inherit — на мобильных при devicePixelRatio≠1
     торчала 1px красная полоса справа/снизу. */
  background: #1a1620;
}
.chat-row-action--leave {
  position: absolute;
  /* Поджимаем плашку «Выйти» на 1 px по правой и нижней сторонам:
     при субпиксельном округлении высоты .chat-row на iOS Safari красный
     фон action иначе торчит из-под перекрывающего row. */
  top: 0; right: 1px; bottom: 1px;
  width: 109px;
  background: #d44141;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
}
.chat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  width: 100%;
  text-align: left;
  position: relative;
  /* Тот же цвет что screen--chats — чтобы chat-row полностью перекрывал
     action-плашку «Выйти» под ней. inherit не работал т.к. wrap прозрачный. */
  background: #1a1620;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  touch-action: pan-y;          /* вертикальный скролл — браузеру, горизонталь — нам */
}
.chat-row-wrap.is-dragging .chat-row { transition: none; }
.chat-row-wrap.is-swiped .chat-row { transform: translateX(-110px); }
.chat-row.is-muted { opacity: 0.55; }
/* Чат, который собеседник покинул: визуально та же row, только без таймера
   и без свайпа «Выйти». Текст превью — «Собеседник покинул чат». */

.chat-row-avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.chat-row-avatar.is-empty {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-row-verified {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 18px; height: 18px;
  border-radius: 9px;
  background: #4CD964;
  border: 2px solid #19161c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-row-body { flex: 1; min-width: 0; }

.chat-row-time {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}
.chat-row-text {
  font-size: 17px;
  color: #b5b2b2;
  font-weight: 400;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-row-title {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}

.chat-row-unread {
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #FF2D55;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Чёрный — юзер передумал про розовый градиент, не подошёл по контрасту с UI. */
.screen--chat-detail { background: #000; }

.chat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 16px 16px;   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.chat-back {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.chat-title { flex: 1; min-width: 0; }

.chat-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.chat-status {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.chat-status.is-online { color: #FF4DA6; }

.chat-menu {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-bomb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.chat-bomb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}
.chat-bomb.is-burning .chat-bomb-left { color: #ff5466; font-weight: 600; }
.chat-bomb.is-idle    .chat-bomb-left { color: rgba(255, 255, 255, 0.45); }

/* Таймер на чат-роу в списке диалогов. Сидит рядом с временем,
 * красный за 30 мин до истечения. */
.chat-row-timer {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.chat-row-timer.is-burning { color: #ff5466; font-weight: 600; }

.chat-bomb-off {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: underline;
}

/* Общая плашка бомбера — запрос на выключение таймера (tz5 #21). */
.chat-timer-req {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(104, 64, 248, 0.14);
  border-bottom: 1px solid rgba(104, 64, 248, 0.30);
}
.chat-timer-req-text {
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
}
.chat-timer-req-actions { display: flex; gap: 8px; flex-shrink: 0; }
.chat-timer-req-btn {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 14px;
  white-space: nowrap;
}
.chat-timer-req-accept { background: #6840F8; color: #fff; }
.chat-timer-req-accept:active { background: #5a36df; }
.chat-timer-req-cancel { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.8); }
.chat-timer-req-cancel:active { background: rgba(255,255,255,0.18); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble {
  max-width: 75%;
  color: #fff;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 18px;
  white-space: pre-wrap;
  flex-shrink: 0;
}
.bubble.from-me {
  align-self: flex-end;
  background: #1f1d23;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-right-radius: 4px;
}
.bubble.from-them {
  align-self: flex-start;
  background: #2a2830;
  border-bottom-left-radius: 4px;
}
/* Метка «ред.» — инлайн в конце текста (правый нижний угол пузыря). Видна
   обоим собеседникам, независимо от того, кто редактировал (06.3). */
.bubble-edited {
  font-size: 10px;
  line-height: 1;
  opacity: 0.45;
  margin-left: 6px;
  white-space: nowrap;
  vertical-align: baseline;
}

.bubble--typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 12px 16px;
  min-width: 52px;
}
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  animation: typing-bounce 1.1s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.limit-card {
  align-self: center;
  max-width: 240px;
  background: #7B5CFF;
  border-radius: 18px;
  padding: 16px 20px;
  text-align: center;
  color: #fff;
  margin-top: 28px;
  margin-bottom: 10px;
}
.limit-card-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 19px;
  margin-bottom: 14px;
}
.limit-card-btn {
  background: #1a1325;
  color: #fff;
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.chat-composer {
  padding: 8px 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.composer-btn {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.composer-btn + .composer-btn { margin-left: -6px;
}

.composer-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: #1e1c22;
  border-radius: 20px;
  padding: 0 16px;
  height: 38px;
}

.composer-input {
  flex: 1;
  font-size: 14px;
}

.screen--profile { background: #0a0a0b; }

.profile-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding-bottom: 160px;
}

.profile-hero {
  position: relative;
  height: 260px;
  width: 100%;
  overflow: hidden;
}

.profile-pattern {
  width: 100%;
  height: 100%;
  display: block;
}

.profile-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 11, 0.92) 100%);
}

.profile-round-btn {
  position: absolute;
  top: 12px;
  width: 38px; height: 38px;
  border-radius: 19px;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.profile-round-btn--left  { left: 14px; }
.profile-round-btn--right { right: 14px; }

/* ── PROFILE CARD: рваный край бумаги ───────────────────── */
.profile-card {
  position: relative;
  margin: -80px 0 0;           /* по горизонтали — до краёв activity */
  padding: 34px 24px 36px;     /* снизу запас, иначе info/age упираются в рваный край */
  background: transparent;     /* фон ушёл на ::before, рвём только его */
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  z-index: 2;
  transform: rotate(-0.3deg);
}
.profile-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: -1;
  background: #16141A;
  border-radius: 20px;
  -webkit-clip-path: var(--torn-clip, url(#torn-wide-1));
          clip-path: var(--torn-clip, url(#torn-wide-1));
}


.torn-edge {
  position: relative;
  background: transparent;   /* фон уходит на слой ::before */
  border: none;
  border-radius: 0;
  box-shadow: none;          /* никаких теней */
}
.torn-edge::before {
  content: "";
  position: absolute;
  inset: 11px;                       /* ≈ scale/2 */
  z-index: -1;
  background: var(--torn-fill, #16141A);
  filter: url(#torn-edges);
}

.profile-avatar-wrap {
  position: absolute;
  top: -62px;          left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 100px;
}
.profile-avatar {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50px;
  overflow: hidden;
  cursor: pointer;
}
.profile-avatar-img {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}
.profile-avatar-img.is-empty {
  background-color: #0e0c12;
}
.profile-avatar-img:not(.is-empty) > svg { display: none; }
.profile-avatar-check {
  position: absolute;
  right: 2px; bottom: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #4CD964;
  border: 2px solid #16141a;
  z-index: 3;
  pointer-events: none;
}

.profile-edit {
  position: absolute;
  top: 28px; right: 28px;
  padding: 4px;
  z-index: 10;
}

.profile-rank {
  font-size: 12px;
  font-weight: 500;
  color: #969697;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 12px;
  margin-bottom: 4px;
}
.profile-name {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  margin-bottom: 2px;
}
.profile-info {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
}
.profile-age {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2px;
}
.profile-langs {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1.2px;
  margin-top: 4px;
}

.profile-tabs {
  margin-top: 18px;
  display: flex;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }

.profile-tab {
  padding: 12px 10px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.2px;
  position: relative;
  white-space: nowrap;
}
.profile-tab.is-active {
  color: #fff;
  font-weight: 700;
}

.profile-panes { padding: 16px 16px 20px; min-height: 280px; }
.profile-pane { display: none; }
.profile-pane.is-active { display: block; }

/* Описание (data-pane="description"): отступ от рваного края + шрифт темы */
.profile-pane[data-pane="description"] {
  padding: 10px;
  font-family: var(--font);
}

.profile-pane p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 22px;
  font-family: var(--font);
}
.profile-pane p + p { margin-top: 4px; }

.profile-photos-count {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}
.profile-photos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 2px 4px;           /* запас под dashed-border 1.5px по бокам */
  box-sizing: border-box;
}
.profile-photo {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  /* pan-y — обычная вертикальная прокрутка страницы пальцем над фото
     работает нативно; long-press/drag перетаскивания начинается только
     после удержания (holdTimer в main.js) с pointer-capture. Раньше было
     touch-action: none → скролл «зажимался» над фото (tz5 #6). */
  touch-action: pan-y;
  box-sizing: border-box;
  /* Наклон «мятой бумаги» — рандомный угол --rot задаётся инлайн в
     renderPhotosGrid. transform на ПЛИТКЕ (а не на .profile-photo-img!) —
     иначе на самом фото ломается clip-path:url(#torn…) и пропадают рваные
     края. Фото с рваными краями наклоняется вместе с плиткой. */
  transform: rotate(var(--rot, 0deg));
}
.profile-photo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
/* Контролы держим ПРЯМЫМИ при наклонённой плитке: контр-поворот на инверсию
   угла через независимое свойство rotate (не ломает их transform: translateX). */
.profile-photo-del,
.profile-photo-main-badge,
.profile-photo-set-main { rotate: calc(-1 * var(--rot, 0deg)); }

.profile-photo-del {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 180ms ease;
  cursor: pointer;
  z-index: 2;
}
.profile-photo:hover .profile-photo-del { opacity: 1; }

.profile-photo-set-main {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px 0;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  letter-spacing: 0.3px;
  text-align: center;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms;
  backdrop-filter: blur(4px);
}
.profile-photo:hover .profile-photo-set-main { opacity: 1; }

.profile-photo-main-badge {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  pointer-events: none;
  white-space: nowrap;
}

.profile-photo-add {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 6px, transparent 6px 12px) top    / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 6px, transparent 6px 12px) bottom / 100% 2px no-repeat,
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.3) 0 6px, transparent 6px 12px) left   / 2px 100% no-repeat,
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.3) 0 6px, transparent 6px 12px) right  / 2px 100% no-repeat,
    rgba(255, 255, 255, 0.03);
  border: none;
  cursor: pointer;
  transition: background-color 160ms;
}
.profile-photo-add:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.5); }

.profile-photo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 2;
}
.profile-photo-arrow--left  { left: 0;  border-radius: 0 9px 9px 0; }
.profile-photo-arrow--right { right: 0; border-radius: 9px 0 0 9px; }
.profile-photo:hover .profile-photo-arrow { opacity: 1; }

.profile-photo.is-drag-source { opacity: 0.3; }
.profile-photo.is-drag-over {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}
.profile-photo-ghost {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65);
  opacity: 0.95;
}

.profile-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.profile-chip {
  min-height: 113px;
  border-radius: 12px;
  border: none;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;        /* по ТЗ — текст по центру chip'а */
  transform: none;
  transition: background 180ms ease, color 180ms ease;
  gap: 5px;
}

.chip-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.15;
  margin-bottom: 5px;
}

.chip-desc {
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.65;
}

.profile-pane[data-pane="lures"] .profile-chip {
  background: #222224;
  color: #fff;
}
.profile-pane[data-pane="lures"] .profile-chip.is-active {
  background: #D2BB92;
  color: #1E1409;
}

.profile-pane[data-pane="looking"] .profile-chip {
  background: #222224;
  color: #fff;
}
.profile-pane[data-pane="looking"] .profile-chip.is-active {
  background: #3E347B;
  color: #fff;
}

.profile-pane[data-pane="zodiac"] .profile-chip {
  /* Невыбранные zodiac-chip'ы — тот же фон что у lures/looking (#222224). */
  background: #222224;
  color: rgba(255, 255, 255, 0.9);
}
.profile-pane[data-pane="zodiac"] .profile-chip.is-active {
  background: #3E347B;
  color: #fff;
}
.profile-pane[data-pane="zodiac"] .chip-title {
  /* TZ3: курсив у знаков зодиака. */
  font-style: italic;
}

.profile-hide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 76px;
  padding: 10px 16px 12px;
  z-index: 6;
}
.profile-hide-btn {
  width: 100%;
  padding: 14px 0;
  background: var(--pink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  /* rotate вместо transform: rotate() — иначе clip-path: url(#...)
     в Chrome/Safari не резолвится внутри transformed stacking-context. */
  rotate: -0.3deg;
  transition: background 180ms, opacity 180ms;
  border-radius: 10px;
}
.profile-hide-btn.is-disabled {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.profile-hide-btn.is-published {
  background: rgb(43 43 43);
  color: rgb(255 255 255 / 70%);
}

@keyframes publish-pulse {
  /* Розовый pulse вместо фиолетового по ТЗ3. */
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 30, 132, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(233, 30, 132, 0.4); }
}
.profile-hide-btn.is-pulsing {
  animation: publish-pulse 0.8s ease-in-out 3;
}

.toast-notify {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: rgba(20, 18, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 22px;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms, transform 200ms;
  backdrop-filter: blur(12px);
}
.toast-notify.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.bottom-nav {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 0 12px;
  background: linear-gradient(180deg,
    rgba(10,10,11,0)    0%,
    rgba(10,10,11,0.72) 38%,
    rgba(10,10,11,0.96) 100%);
  display: flex;
  z-index: 40;
}
.bottom-nav.is-hidden { display: none; }

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  position: relative;
}

.nav-btn svg { opacity: 1; transition: opacity 160ms; }
.nav-btn:not(.is-active) svg { opacity: 0.45; }

.nav-dot {
  position: absolute;
  top: 8px; right: calc(50% - 18px);
  width: 8px; height: 8px;
  border-radius: 4px;
  background: #FF2D55;
  display: none;
}
.nav-dot.is-visible { display: block; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1),
              background-color 280ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: opacity;
  z-index: 60;
}
.sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.sheet-backdrop--filter {
  top: var(--topbar-h, 68px);
  background: rgba(0, 0, 0, 0.16);
}

.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #14111c;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  /* translate вместо transform: translateY() — чтоб clip-path: url(#...)
     резолвился у дочерних .sheet-cta (transform создаёт stacking-context,
     в котором SVG-ссылки на clipPath ломаются в Chrome/Safari). */
  translate: 0 110%;
  transition: translate 340ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: translate;
  z-index: 61;
  overflow: hidden;
  color: #fff;
  max-height: 70%;
  display: flex;
  flex-direction: column;
}
.sheet.is-open { translate: 0 0; }

.sheet--plans {
  max-height: 68%;
  background: #B23763;
}

.sheet-title {
  padding: 22px 20px 16px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 400;
  font-family: 'Source Serif 4', Georgia, serif;
  text-align: center;
  letter-spacing: 0;
}
.sheet-title b { font-weight: 700; }

.plans-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 28px 20px 16px;
  scrollbar-width: none;
}
.plans-scroll::-webkit-scrollbar { display: none; }

/* Обёртка вокруг .plan-card — нужна чтоб .plan-card-bestseller сидела ВНЕ
   carda (clip-path рваной кромки обрезает position:absolute детей). */
.plan-card-wrap {
  position: relative;
  flex: 0 0 auto;
}

.plan-card {
  /* width явно — .plan-card теперь внутри .plan-card-wrap (block), и
     flex: 0 0 250px не сработает (родитель не flex). */
  width: 249px;
  height: 151px;
  border-radius: 22px;
  background: #D04073;
  padding: 16px 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  position: relative;
  overflow: visible;
}
.plan-card.is-selected {
  background: #ffffff;
  color: #070707;
}

.plan-card-top {
  display: flex;
  align-items: center;
}

.plan-card-top-label {
  background: #070707;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.plan-card.is-selected .plan-card-top-label {
  background: #B23763;
}

/*.plan-card-bestseller {
  position: absolute;
  top: -11px;
  right: 14px;
  background: #070707;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 18px;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 2;
}*/

.plan-card-bestseller {
  position: absolute;
  top: -11px;
  right: 14px;
  background: #070707;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 18px;
  white-space: nowrap;
  z-index: 2;
  border-radius: 10px;
  --torn-clip: url(#torn-wide-12);
  -webkit-clip-path: var(--torn-clip);
          clip-path: var(--torn-clip);
}

.plan-card-price {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1px;
}
.plan-card-rub {
  font-size: 44px;
  font-weight: 600;
}

.plan-card-old {
  font-size: 18px;
  text-decoration: line-through;
  opacity: 0.5;
  margin-top: 4px;
  font-family: 'Source Serif 4', Georgia, serif;
}

.sheet-actions {
  padding: 14px 20px 22px;
  /* Рваная кромка ТОЛЬКО снизу (sheet выезжает снизу, верх ровно
     стыкуется с контентом sheet'а). */
  --torn-clip: url(#torn-bottom-2);
  -webkit-clip-path: var(--torn-clip);
          clip-path: var(--torn-clip);
}

/* Для filter-sheet кнопка «Применить» должна не упираться в рваную
   нижнюю кромку самого sheet'а (особенно когда список Городов / ЗЗ
   растянут на весь экран). +20px снизу = безопасный зазор. */
.sheet--filter .sheet-actions {
  padding-bottom: 42px;
}

.sheet-cta {
  width: 100%;
  height: 48px;
  background: #070707;
  color: #fff;
  /* Прямоугольная форма (было pill border-radius: 26px). С pill-формой
     torn-all clip-path выглядел как «укусы», а не как рваная бумага.
     С прямоугольником рельеф ложится естественно. Как у settings-write-btn. */
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.sheet--pay {
  padding: 28px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pay-amount-label {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}
.pay-amount {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.5px;
  font-family: "Playfair Display", Georgia, serif;
  margin-top: 6px;
  text-align: center;
}

.pay-cta {
  width: 100%;
  height: 54px;
  background: var(--pink);
  color: #fff;
  border-radius: 28px;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 4px;
  transition: opacity 160ms;
}
.pay-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pay-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 10.5px;
  line-height: 13px;
}
.pay-check input { display: none; }

.pay-check-box {
  flex-shrink: 0;
  margin-top: 1px;
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1.5px solid #fff;
  background: transparent;
  position: relative;
  transition: background 120ms;
}
.pay-check input:checked + .pay-check-box { background: #fff; }
.pay-check input:checked + .pay-check-box::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px; right: 2px; bottom: 2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M1 4 L3 6 L7 2' stroke='%23DE377A' stroke-width='2' fill='none'/></svg>") no-repeat center;
  background-size: contain;
}

.pay-check-text { color: rgba(255, 255, 255, 0.9); }

.pay-logos {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
}
.pay-logo {
  display: block;
  height: 22px;
  width: auto;
  flex: 0 1 auto;
  object-fit: contain;
}

.screen--settings {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #111111 0%, #191816 100%);
  overflow: hidden;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 20px;
  height: 56px;
  background: #000;
  flex-shrink: 0;
}
.settings-back {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-title {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  text-align: center;
}

.settings-tabs-row {
  display: flex;
  padding: 5px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.settings-tab {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 10px 16px 10px 0;
  color: #7F7E7C;
  margin-right: 16px;
}
.settings-tab.is-active { color: #fff; }

.settings-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}
.settings-scroll::-webkit-scrollbar { display: none; }

.settings-sub-card {
  display: flex;
  min-height: 108px;
}
.settings-sub-card-left {
  flex: 1;
  background: #343434;
  padding: 14px 14px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.settings-sub-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.settings-sub-desc {
  font-size: 11px;
  color: #A1A1A1;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  line-height: 1.45;
  flex: 1;
  margin-bottom: 10px;
}
.settings-sub-card-right {
  width: 76px;
  background: #343434;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-purple-cta {
  /* класс назван historically «purple», но цвет сменили на красно-розовый по ТЗ3 */
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 0.3px;
  text-align: left;
  line-height: 1;
}

.settings-product-row {
  padding: 14px 12px 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.settings-product-status {
  font-size: 14px;
  font-weight: 500;
  color: #7C7B79;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.settings-product-row .settings-purple-cta {
  font-size: 14px;
  margin-top: 2px;
}

.settings-spacer { flex: 1; min-height: 24px; }

.settings-footer-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.31);
  text-align: center;
  line-height: 2;
  padding: 10px 100px;
}
.settings-footer-link {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.31);
  display: inline;
}

.settings-write-btn {
  margin: 0 12px 24px;
  height: 56px;
  background: #393436;
  border: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  flex-shrink: 0;

  clip-path: none;
  -webkit-clip-path: none;
  -webkit-mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,1.11 2.00,1.18 4.00,1.33 6.00,1.49 8.00,1.56 10.00,1.52 12.00,1.38 14.00,1.22 16.00,1.11 18.00,1.15 20.00,1.33 22.00,1.61 24.00,1.88 26.00,2.04 28.00,2.05 30.00,1.92 32.00,1.68 34.00,1.43 36.00,1.27 38.00,1.27 40.00,1.42 42.00,1.64 44.00,1.80 46.00,1.91 48.00,1.98 50.00,2.07 52.00,2.15 54.00,2.22 56.00,2.28 58.00,2.34 60.00,2.32 62.00,2.18 64.00,1.94 66.00,1.68 68.00,1.47 70.00,1.30 72.00,1.15 74.00,1.01 76.00,0.89 78.00,0.78 80.00,0.66 82.00,0.55 84.00,0.42 86.00,0.31 88.00,0.20 90.00,0.11 92.00,0.06 94.00,0.04 96.00,0.04 98.00,0.03 100.00,0.03 100.00,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 99.09,0.00 99.08,2.00 99.10,4.00 99.20,6.00 99.29,8.00 99.30,10.00 99.19,12.00 99.03,14.00 98.89,16.00 98.77,18.00 98.65,20.00 98.54,22.00 98.56,24.00 98.82,26.00 99.23,28.00 99.63,30.00 99.77,32.00 99.63,34.00 99.20,36.00 98.72,38.00 98.34,40.00 98.20,42.00 98.22,44.00 98.34,46.00 98.47,48.00 98.63,50.00 98.72,52.00 98.64,54.00 98.32,56.00 97.89,58.00 97.44,60.00 97.06,62.00 96.82,64.00 96.90,66.00 97.41,68.00 98.21,70.00 99.00,72.00 99.49,74.00 99.72,76.00 99.79,78.00 99.84,80.00 99.87,82.00 99.87,84.00 99.75,86.00 99.59,88.00 99.46,90.00 99.46,92.00 99.57,94.00 99.74,96.00 99.87,98.00 99.93,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 100.00,0.00 100.00,97.03 98.00,96.99 96.00,96.89 94.00,96.73 92.00,96.54 90.00,96.36 88.00,96.25 86.00,96.22 84.00,96.22 82.00,96.18 80.00,96.04 78.00,95.85 76.00,95.67 74.00,95.58 72.00,95.57 70.00,95.65 68.00,95.79 66.00,95.99 64.00,96.27 62.00,96.55 60.00,96.78 58.00,96.85 56.00,96.87 54.00,96.91 52.00,97.03 50.00,97.21 48.00,97.41 46.00,97.63 44.00,97.89 42.00,98.15 40.00,98.35 38.00,98.46 36.00,98.51 34.00,98.55 32.00,98.60 30.00,98.72 28.00,98.94 26.00,99.26 24.00,99.57 22.00,99.80 20.00,99.90 18.00,99.92 16.00,99.90 14.00,99.90 12.00,99.92 10.00,99.94 8.00,99.91 6.00,99.80 4.00,99.64 2.00,99.50 0.00,99.43' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='1.41,100.00 1.46,98.00 1.50,96.00 1.51,94.00 1.47,92.00 1.49,90.00 1.51,88.00 1.52,86.00 1.45,84.00 1.40,82.00 1.35,80.00 1.30,78.00 1.17,76.00 0.93,74.00 0.63,72.00 0.34,70.00 0.13,68.00 0.03,66.00 0.01,64.00 0.04,62.00 0.11,60.00 0.21,58.00 0.29,56.00 0.33,54.00 0.30,52.00 0.23,50.00 0.17,48.00 0.16,46.00 0.21,44.00 0.32,42.00 0.46,40.00 0.58,38.00 0.64,36.00 0.61,34.00 0.52,32.00 0.42,30.00 0.38,28.00 0.44,26.00 0.57,24.00 0.73,22.00 0.85,20.00 0.99,18.00 1.18,16.00 1.42,14.00 1.59,12.00 1.62,10.00 1.49,8.00 1.33,6.00 1.24,4.00 1.24,2.00 1.25,0.00 100.00,0.00 100.00,100.00' fill='%23fff'/></svg>");
  mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,1.11 2.00,1.18 4.00,1.33 6.00,1.49 8.00,1.56 10.00,1.52 12.00,1.38 14.00,1.22 16.00,1.11 18.00,1.15 20.00,1.33 22.00,1.61 24.00,1.88 26.00,2.04 28.00,2.05 30.00,1.92 32.00,1.68 34.00,1.43 36.00,1.27 38.00,1.27 40.00,1.42 42.00,1.64 44.00,1.80 46.00,1.91 48.00,1.98 50.00,2.07 52.00,2.15 54.00,2.22 56.00,2.28 58.00,2.34 60.00,2.32 62.00,2.18 64.00,1.94 66.00,1.68 68.00,1.47 70.00,1.30 72.00,1.15 74.00,1.01 76.00,0.89 78.00,0.78 80.00,0.66 82.00,0.55 84.00,0.42 86.00,0.31 88.00,0.20 90.00,0.11 92.00,0.06 94.00,0.04 96.00,0.04 98.00,0.03 100.00,0.03 100.00,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 99.09,0.00 99.08,2.00 99.10,4.00 99.20,6.00 99.29,8.00 99.30,10.00 99.19,12.00 99.03,14.00 98.89,16.00 98.77,18.00 98.65,20.00 98.54,22.00 98.56,24.00 98.82,26.00 99.23,28.00 99.63,30.00 99.77,32.00 99.63,34.00 99.20,36.00 98.72,38.00 98.34,40.00 98.20,42.00 98.22,44.00 98.34,46.00 98.47,48.00 98.63,50.00 98.72,52.00 98.64,54.00 98.32,56.00 97.89,58.00 97.44,60.00 97.06,62.00 96.82,64.00 96.90,66.00 97.41,68.00 98.21,70.00 99.00,72.00 99.49,74.00 99.72,76.00 99.79,78.00 99.84,80.00 99.87,82.00 99.87,84.00 99.75,86.00 99.59,88.00 99.46,90.00 99.46,92.00 99.57,94.00 99.74,96.00 99.87,98.00 99.93,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 100.00,0.00 100.00,97.03 98.00,96.99 96.00,96.89 94.00,96.73 92.00,96.54 90.00,96.36 88.00,96.25 86.00,96.22 84.00,96.22 82.00,96.18 80.00,96.04 78.00,95.85 76.00,95.67 74.00,95.58 72.00,95.57 70.00,95.65 68.00,95.79 66.00,95.99 64.00,96.27 62.00,96.55 60.00,96.78 58.00,96.85 56.00,96.87 54.00,96.91 52.00,97.03 50.00,97.21 48.00,97.41 46.00,97.63 44.00,97.89 42.00,98.15 40.00,98.35 38.00,98.46 36.00,98.51 34.00,98.55 32.00,98.60 30.00,98.72 28.00,98.94 26.00,99.26 24.00,99.57 22.00,99.80 20.00,99.90 18.00,99.92 16.00,99.90 14.00,99.90 12.00,99.92 10.00,99.94 8.00,99.91 6.00,99.80 4.00,99.64 2.00,99.50 0.00,99.43' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='1.41,100.00 1.46,98.00 1.50,96.00 1.51,94.00 1.47,92.00 1.49,90.00 1.51,88.00 1.52,86.00 1.45,84.00 1.40,82.00 1.35,80.00 1.30,78.00 1.17,76.00 0.93,74.00 0.63,72.00 0.34,70.00 0.13,68.00 0.03,66.00 0.01,64.00 0.04,62.00 0.11,60.00 0.21,58.00 0.29,56.00 0.33,54.00 0.30,52.00 0.23,50.00 0.17,48.00 0.16,46.00 0.21,44.00 0.32,42.00 0.46,40.00 0.58,38.00 0.64,36.00 0.61,34.00 0.52,32.00 0.42,30.00 0.38,28.00 0.44,26.00 0.57,24.00 0.73,22.00 0.85,20.00 0.99,18.00 1.18,16.00 1.42,14.00 1.59,12.00 1.62,10.00 1.49,8.00 1.33,6.00 1.24,4.00 1.24,2.00 1.25,0.00 100.00,0.00 100.00,100.00' fill='%23fff'/></svg>");
  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
          mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.screen--cancel-sub {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #111111 0%, #191816 100%);
  overflow: hidden;
}

.cancel-sub-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  padding: 20px 22px 0;
}
.cancel-sub-scroll::-webkit-scrollbar { display: none; }

.cancel-sub-intro {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  line-height: 1.55;
  margin-bottom: 16px;
}

.cancel-sub-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cancel-sub-num {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.cancel-sub-body p {
  font-size: 12px;
  font-weight: 400;
  color: #D0D0D0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  line-height: 1.7;
}
.cancel-sub-white {
  color: #fff;
}
.cancel-sub-link {
  color: #3C50FF;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  text-decoration: underline;
  display: inline;
}

.cancel-sub-btn {
  margin: 20px 0 0;
  height: 53px;
  background: #B23763;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Source Serif 4', Georgia, serif;
  letter-spacing: 0;
  flex-shrink: 0;
  width: 100%;
}

.cancel-sub-footer-gap {
  flex: 1;
  min-height: 24px;
}

.cancel-sub-footer {
  padding: 12px 100px 96px;
}

.screen--pause-sub {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #111111 0%, #191816 100%);
  overflow: hidden;
  position: absolute;
}
.screen--pause-sub .cancel-sub-link { white-space: nowrap; }

.pause-success-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pause-success-plate {
  background: var(--pink);
  padding: 26px 30px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 320px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.pause-success-text {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}
.pause-success-ok {
  background: #222224;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 36px;
  border-radius: 8px;
  min-width: 120px;
}
.pause-success-ok:active { opacity: 0.85; }

.screen--cancel-form {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #111111 0%, #191816 100%);
  overflow: hidden;
}

.cancel-form-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  padding: 28px 0 0;
  gap: 30px;
}
.cancel-form-scroll::-webkit-scrollbar { display: none; }

.cancel-form-fields {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 302px;
  margin: 0 auto;
}

.cancel-form-input {
  width: 100%;
  height: 53px;
  background: #B7B7B7;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 12px;
  font-weight: 400;
  color: #111;
  text-align: center;
  padding: 0 12px;
}
.cancel-form-input::placeholder {
  color: #515151;
}

.cancel-form-btn {
  display: block;
  margin: 12px auto 0;
  width: 302px;
  height: 53px;
  background: #B23763;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Source Serif 4', Georgia, serif;
  flex-shrink: 0;
}

.settings-main-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.settings-main-label {
  font-size: 14px;
  font-weight: 510;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  letter-spacing: 0.3px;
}
.settings-main-id {
  font-size: 14px;
  font-weight: 700;
  color: #A00F93;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
}

.settings-main-rows {
  margin-top: 0;
}
.settings-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 14px;
  font-weight: 510;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  letter-spacing: 0.3px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pay-doc-link {
  color: inherit;
  text-decoration: underline;
}
.screen--onboarding {
  background: #0A0A0B;
  justify-content: center;
  align-items: center;
}

.onboarding-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px;
  width: 100%;
}

.onboarding-brand {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 38px;
  color: var(--pink);
  margin-bottom: 56px;
  letter-spacing: -0.5px;
}

.onboarding-heading {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  text-align: center;
}

.onboarding-hint {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 44px;
  text-align: center;
}

.onboarding-choices {
  display: flex;
  gap: 12px;
  width: 100%;
}

.onboarding-choice {
  flex: 1;
  padding: 18px 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.onboarding-choice:hover,
.onboarding-choice:active {
  background: rgba(233, 30, 132, 0.18);
  border-color: var(--pink);
}

.onboarding-login-link {
  margin-top: 20px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 15px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sheet--gate {
  padding: 28px 24px 32px;
  gap: 24px;
}

.sheet--gate-desc { background: var(--pink); }
.sheet--gate-publish { background: var(--pink); }

/* ============================================================
 *  Gate-экран авторизации (виден тем, кто пришёл без auth-куки
 *  и без HMAC-ссылки из бота). Перекрывает всё приложение.
 * ============================================================ */
.gate-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: linear-gradient(180deg, #1a1325 0%, #0e0918 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  color: #fff;
}
.gate-screen[hidden] { display: none !important; }

/* ============================================================
 *  EPIC 5.10: preview фото перед отправкой в чат + кнопка
 *  самоуничтожения (огонёк).
 * ============================================================ */
.photo-preview {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #000;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}
.photo-preview[hidden] { display: none !important; }
.photo-preview-back {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.photo-preview-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.photo-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
}
.photo-preview-actions {
  /* fire — строго по центру строки, send — справа (асимметричная grid-сетка). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 4px 0;
}
.photo-preview-fire { grid-column: 2; justify-self: center; }
.photo-preview-send { grid-column: 3; justify-self: end; }
.photo-preview-fire {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #111;
  color: #fff;                              /* svg currentColor */
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.15s ease, color 0.15s ease;
}
.photo-preview-fire.is-armed {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.photo-preview-send {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #393436;
  display: flex; align-items: center; justify-content: center;
}
.photo-preview-send:active { opacity: 0.85; }

/* Self-destruct tile в чате у получателя — тёмная плашка + огонёк,
 * по тапу превращается в обычное фото и стартует 10-сек таймер. */
.media-tile.is-self-destruct {
  position: relative;
  cursor: pointer;
}
.media-tile.is-self-destruct .bubble-media-img {
  filter: brightness(0.4);
}
.media-tile-fire {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-tile-fire svg { width: 36px; height: 42px; }
.media-tile.is-burning-down .bubble-media-img { filter: none; }
.media-tile.is-burning-down .media-tile-fire { display: none; }

.settings-install-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0;
  padding: 14px 16px;
  background: rgba(104, 64, 248, 0.18);
  border: 1px solid rgba(196, 123, 255, 0.35);
  border-radius: 14px;
  color: #d6c8ff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.settings-install-btn:active { opacity: 0.85; }

/* ============================================================
 *  EPIC 2.2-2.3: safe-area для notch / Dynamic Island / Android brow.
 *  Применяется только когда .activity занимает весь экран (мобила).
 *  На десктопе .activity центрирована с margin — safe-area не нужна.
 * ============================================================ */
@media (max-width: 499px) {
  .home-topbar    { padding-top:    max(12px, env(safe-area-inset-top)); }
  .chat-header    { padding-top:    max(26px, env(safe-area-inset-top)); }
  .bottom-nav     { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .chat-composer  { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .home-scroll {
    padding-top:        calc(66px + env(safe-area-inset-top));
    padding-bottom:     calc(90px + env(safe-area-inset-bottom));
    scroll-padding-top: calc(66px + env(safe-area-inset-top));
    scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
  .chats-scroll   { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .chat-messages  { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .gate-screen {
    padding-top:    max(32px, env(safe-area-inset-top));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
  /* Регистрация / онбординг — экраны без topbar, нужен прямой отступ */
  .screen--register,
  .screen--onboarding {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.gate-screen__inner {
  width: 100%;
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.gate-screen__brand {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #FF5BA5 0%, #E91E84 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.gate-screen__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.gate-screen__sub {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  max-width: 320px;
}
.gate-screen__btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.gate-screen__btn:active { opacity: 0.8; }

.gate-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-align: center;
}

.gate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gate-btn {
  width: 100%;
  padding: 16px 0;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background 140ms, opacity 140ms;
}

.gate-btn:not(.gate-btn--ghost):not(.gate-btn--light) {
  background: var(--pink);
  color: #fff;
}

.gate-btn.gate-btn--light {
  background: #fff;
  color: #16121d;
}
.gate-btn.gate-btn--light:active { opacity: 0.85; }

.gate-btn--ghost {
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.screen--register,
.screen--login {
  background: #0A0A0B;
  justify-content: flex-start;
  align-items: center;
  padding: 72px 28px 40px;
  position: relative;
}

.screen-back-btn {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.register-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.register-brand {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  color: var(--pink);
  margin-bottom: 6px;
  text-align: center;
}

.register-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 24px;
  text-align: center;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.register-input {
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  color: #fff;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.register-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.register-input:focus        { border-color: rgba(255, 255, 255, 0.35); }

.register-input[type="number"]::-webkit-inner-spin-button,
.register-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.register-input[type="number"] { -moz-appearance: textfield; }

.register-error {
  font-size: 13px;
  color: #FF4DA6;
  margin: 0;
}

.register-submit {
  margin-top: 6px;
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.login-back-link {
  margin-top: 20px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  padding: 4px;
}

#desc-pane {
  min-height: 64px;
  outline: none;
  cursor: text;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
#desc-pane:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.screen--edit-profile {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #111 0%, #191816 100%);
}
.edit-header {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #2F2E2C;
  flex-shrink: 0;
}
.edit-back {
  position: absolute;
  left: 16px;
  padding: 8px;
  display: flex; align-items: center; justify-content: center;
}
.edit-title {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
}
.edit-rows { flex: 1; }
.edit-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px;
  border-bottom: 1px solid #2F2E2C;
  background: transparent;
}
.edit-row-label {
  font-size: 16px;
  color: #fff;
}
.edit-row-value {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.45);
}
.edit-bottom {
  padding: 20px 20px 44px;
  border-top: 1px solid #343331;
}
.edit-preview-btn {
  width: 100%;
  padding: 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #fff;
  border: 1px solid #343331;
  border-radius: 4px;
  background: transparent;
}

.sheet--edit-field { padding: 24px 20px 0; }
.edit-field-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
}
.edit-field-num-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.edit-field-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.edit-field-input::-webkit-inner-spin-button,
.edit-field-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.edit-field-input--text { width: 100%; }
.edit-field-unit {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  min-width: 40px;
}
.lang-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 16px;
}
.lang-chip {
  padding: 9px 18px;
  border-radius: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  background: transparent;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.lang-chip.is-active {
  border-color: var(--pink);
  color: #fff;
  background: rgba(233, 30, 132, 0.15);
}

.profile-preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.profile-preview-close {
  position: absolute;
  top: 18px; right: 18px;
  padding: 8px;
}
.profile-preview-wrap {
  width: 100%;
  padding: 0;
}
.profile-preview-wrap .feed-card {
  margin: 0;
}
.profile-preview-wrap .feed-card .ink-btn {
  opacity: 0.55;
  cursor: default;
}

.home-tab--lock { letter-spacing: 0.2px; }

.sheet--filter {
  top: var(--topbar-h, 68px);
  bottom: auto;
  max-height: calc(100% - var(--topbar-h, 68px) - 90px);
  /* Перебиваем translate из .sheet (0 110% — для слайда снизу). Filter-sheet
     выезжает СВЕРХУ из-под topbar, поэтому стартует со сдвигом вверх. */
  translate: 0 calc(-100% - var(--topbar-h, 68px) - 20px);
  visibility: hidden;
  transition: translate 340ms cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 340ms;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  /* Рваная кромка СНИЗУ через mask (clip-path: url() ломается в translate
     stacking-context). Кривая — organic random walk, как у .sheet--plans. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0,0 100,0 100.00,97.43 98.33,97.37 96.67,97.20 95.00,96.96 93.33,96.63 91.67,96.35 90.00,96.16 88.33,96.17 86.67,96.28 85.00,96.41 83.33,96.44 81.67,96.42 80.00,96.45 78.33,96.57 76.67,96.73 75.00,96.80 73.33,96.81 71.67,96.81 70.00,96.89 68.33,96.98 66.67,97.05 65.00,97.09 63.33,97.18 61.67,97.34 60.00,97.56 58.33,97.83 56.67,98.08 55.00,98.34 53.33,98.57 51.67,98.78 50.00,98.87 48.33,98.77 46.67,98.47 45.00,98.10 43.33,97.84 41.67,97.76 40.00,97.77 38.33,97.79 36.67,97.75 35.00,97.73 33.33,97.77 31.67,97.99 30.00,98.31 28.33,98.64 26.67,98.82 25.00,98.88 23.33,98.90 21.67,99.00 20.00,99.19 18.33,99.39 16.67,99.51 15.00,99.49 13.33,99.36 11.67,99.19 10.00,99.10 8.33,99.17 6.67,99.35 5.00,99.52 3.33,99.58 1.67,99.53 0.00,99.48' fill='%23fff'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0,0 100,0 100.00,97.43 98.33,97.37 96.67,97.20 95.00,96.96 93.33,96.63 91.67,96.35 90.00,96.16 88.33,96.17 86.67,96.28 85.00,96.41 83.33,96.44 81.67,96.42 80.00,96.45 78.33,96.57 76.67,96.73 75.00,96.80 73.33,96.81 71.67,96.81 70.00,96.89 68.33,96.98 66.67,97.05 65.00,97.09 63.33,97.18 61.67,97.34 60.00,97.56 58.33,97.83 56.67,98.08 55.00,98.34 53.33,98.57 51.67,98.78 50.00,98.87 48.33,98.77 46.67,98.47 45.00,98.10 43.33,97.84 41.67,97.76 40.00,97.77 38.33,97.79 36.67,97.75 35.00,97.73 33.33,97.77 31.67,97.99 30.00,98.31 28.33,98.64 26.67,98.82 25.00,98.88 23.33,98.90 21.67,99.00 20.00,99.19 18.33,99.39 16.67,99.51 15.00,99.49 13.33,99.36 11.67,99.19 10.00,99.10 8.33,99.17 6.67,99.35 5.00,99.52 3.33,99.58 1.67,99.53 0.00,99.48' fill='%23fff'/></svg>");
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.sheet--filter.is-open {
  translate: 0 0;
  visibility: visible;
  transition: translate 340ms cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 0s;
}

.filter-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px 4px;
}
.filter-sheet-title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.filter-sheet-reset {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  padding: 6px 4px;
  transition: color 140ms ease;
}
.filter-sheet-reset:active { color: #fff; }

.filter-sheet-body { padding: 22px 20px 6px; }

.filter-sheet-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 20px;
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 2px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.filter-option:last-child { border-bottom: none; }
.filter-option-label {
  flex: 1;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  transition: color 140ms ease;
}
.filter-option-check {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border-radius: 7px;
  border: 1.6px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, border-color 140ms ease;
}
.filter-option-check svg { opacity: 0; transition: opacity 120ms ease; }
.filter-option.is-checked .filter-option-check {
  background: var(--pink);
  border-color: var(--pink);
}
.filter-option.is-checked .filter-option-check svg { opacity: 1; }
.filter-option.is-checked .filter-option-label { color: #fff; }

.range-values {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 28px;
}
.range-val-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 11px 14px;
  cursor: text;
}
.range-val-box:focus-within { border-color: rgba(255, 255, 255, 0.4); }
.range-val-cap {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
}
.range-val-input {
  width: 100%;
  min-width: 0;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  -moz-appearance: textfield;
}
.range-val-input::-webkit-inner-spin-button,
.range-val-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.range-val-sep { color: rgba(255, 255, 255, 0.3); }
.range-val-unit {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  flex: 0 0 auto;
}

.range-slider {
  position: relative;
  height: 36px;
}
.range-rail,
.range-rail-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}
.range-rail {
  left: 0; right: 0;
  background: rgba(255, 255, 255, 0.14);
}
.range-rail-fill { background: var(--pink); }

.range-handle {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 36px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range-handle::-webkit-slider-runnable-track { background: none; border: none; }
.range-handle::-moz-range-track { background: none; border: none; }
.range-handle::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: all;
  cursor: grab;
}
.range-handle::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: all;
  cursor: grab;
}
.range-handle:active::-webkit-slider-thumb { cursor: grabbing; }

.range-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}

/* ---- Шит «Неподалёку» ---- */
.nearby-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 20px 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
}
.nearby-search:focus-within { border-color: rgba(255, 255, 255, 0.4); }
.nearby-search-icon { flex: 0 0 auto; opacity: 0.85; }
.nearby-search-input {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: #fff;
  background: none;
  border: 0;
}
.nearby-search-input::placeholder { color: rgba(255, 255, 255, 0.35); }

.nearby-locate-wrap { padding: 4px 20px 8px; }
.nearby-locate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  transition: background 140ms ease, opacity 140ms ease;
}
.nearby-locate:active { background: rgba(255, 255, 255, 0.12); }
.nearby-locate.is-busy { opacity: 0.6; pointer-events: none; }

.nearby-list { padding-bottom: 14px; }
.nearby-section-title {
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 12px 2px 6px;
}
.nearby-section-title--cities { padding-top: 18px; }

/* Кликабельный заголовок «Радиус» — схлопывает/раскрывает список вариантов.
   Состояние .is-collapsed на .nearby-radius-section скрывает список, стрелка
   поворачивается на -90° (смотрит влево). Без collapsed — стрелка ▾ вниз. */
.nearby-section-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px 6px;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.nearby-section-toggle:active { color: rgba(255, 255, 255, 0.55); }
.nearby-section-arrow {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.45);
  transition: transform 180ms ease;
}
.nearby-radius-section.is-collapsed .nearby-section-arrow { transform: rotate(90deg); }
.nearby-radius-section.is-collapsed .nearby-radius-list {
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: max-height 220ms ease, opacity 160ms ease;
}
.nearby-radius-section .nearby-radius-list {
  max-height: 800px;
  opacity: 1;
  transition: max-height 220ms ease, opacity 160ms ease;
}
.nearby-radius-hint {
  margin-left: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

.screen--gallery { background: #0A0A0B; }

.gallery-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  flex: 0 0 56px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gallery-back {
  position: absolute;
  left: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  letter-spacing: 0.2px;
}

.gallery-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: 24px;
  -webkit-overflow-scrolling: touch;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 14px 18px;
}

.gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 140ms ease;
}
.gallery-tile:active { transform: scale(0.97); }

.gallery-tile-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.gallery-tile-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 140ms ease;
}
.gallery-tile-del:active { background: rgba(0, 0, 0, 0.8); }

.gallery-tile--add {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.08));
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
}
.gallery-tile--add svg { opacity: 0.7; }

.gallery-hint {
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.4);
  padding: 8px 36px 24px;
}

.sheet--gallery {
  height: 90%;
  max-height: 90%;
  background: #14111c;
  }

.gallery-sheet-header {
  position: relative;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gallery-sheet-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.gallery-sheet-close {
  position: absolute;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-sheet-close:active { background: rgba(255, 255, 255, 0.16); }

.sheet--choice {
  padding: 22px 16px 22px;
  background: #14111c;
}
.choice-title {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
  padding: 0 0 18px;
}
.choice-btn {
  width: 100%;
  height: 54px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  transition: background 120ms ease;
}
.choice-btn:active { background: rgba(255, 255, 255, 0.16); }
.choice-cancel {
  width: 100%;
  height: 54px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  margin-top: 6px;
  transition: background 120ms ease;
}
.choice-cancel:active { background: rgba(255, 255, 255, 0.1); }

.chat-row-avatar-initial {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}
.chat-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.chat-row-name {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.chat-row-name.is-burning { color: #ff5466; font-weight: 600; }
.chat-row-head .chat-row-time {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}
.chat-row-body > .chat-row-text:only-child {
  font-size: 17px;
}

.chats-loading,
.chats-empty {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  padding: 32px 24px;
  line-height: 1.5;
}

.screen--likes { background: #0A0A0B; }

.likes-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  flex: 0 0 56px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.likes-back {
  position: absolute;
  left: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.likes-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  letter-spacing: 0.2px;
}

.likes-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
}
.likes-list { position: relative; padding: 0; }

.likes-loading,
.likes-empty {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  padding: 48px 24px;
  line-height: 1.5;
}

.btn-like.is-liked svg path { fill: #fff; stroke: #fff; }   /* SVG остаётся белой, фон кнопки красный */
.btn-like:disabled { opacity: 0.9; cursor: default; }

/* Огонёк «суперлайк» — лёгкий pulse + burst на клик. ВАЖНО: без
   filter: drop-shadow() — оно требует blur-prepass на GPU каждый кадр и
   жрёт композитор на каждой карточке ленты. С 15 карточками в DOM это
   стабильно давало микрофризы на скролле. Только transform scale. */
@keyframes flame-pulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.08); }
}
@keyframes flame-burst {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1);    }
}
.btn-diamond {
  transition: background-color 200ms ease;
}
.btn-diamond > svg {
  animation: flame-pulse 2.2s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
.btn-diamond > svg path {
  transition: stroke 200ms ease, fill 200ms ease;
}
.btn-diamond.is-firing > svg {
  animation: flame-burst 480ms ease-out;
}
/* Цветовая инверсия на момент burst: фон → белый, SVG-обводка → чёрная. */
.btn-diamond.is-firing {
  background-color: #fff;
}
.btn-diamond.is-firing > svg path {
  stroke: #000;
}
.btn-diamond:disabled { opacity: 0.85; cursor: default; }

/* Зажжённый огонёк после супер-лайка — заливаем SVG-обводку розовым +
   подсветка фона. После перезагрузки страницы класс ставится из item.super_liked_by_me. */
.btn-diamond.is-super-liked { background-color: var(--pink); }
.btn-diamond.is-super-liked > svg path {
  fill: #fff;
  fill-opacity: 0.3;
  stroke: #fff;
}

.chat-row-avatar-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #a5a2a2 0%, #b17b95 50%, #893c8d 100%);
}
.chat-row-avatar-empty svg { width: 48%; height: 48%; }

.feed-card.is-vanish {
  transition: opacity 220ms ease, transform 220ms ease;
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}

.bubble--media {
  padding: 3px;
  background: transparent;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  /* Схлопываем whitespace-текстовые узлы из шаблона (переносы строк вокруг
     .media-tile). Иначе .bubble наследует line-height:18px + white-space:pre-wrap
     → пустые строки сверху/снизу фото («выступы»). Контент тайла — блочный,
     font-size на него не влияет. */
  font-size: 0;
  line-height: 0;
}
.bubble.from-me.bubble--media,
.bubble.from-them.bubble--media {
  background: transparent;
  border: none;
}

.bubble--media-single {
  width: 260px;
  max-width: 70%;
  padding: 0;
  border-radius: 14px;   /* закругление одиночного фото в ЧС (tz5 #14) */
}

.bubble--media-grid   { width: 280px; max-width: 80%; display: grid; gap: 3px; }
.bubble--media-grid.cells-2 { grid-template-columns: 1fr 1fr; }
.bubble--media-grid.cells-3 { grid-template-columns: 1fr 1fr 1fr; }
.bubble--media-grid.cells-4 { grid-template-columns: 1fr 1fr; }
.bubble--media-grid.cells-5 { grid-template-columns: 1fr 1fr 1fr; }
.bubble--media-grid.cells-3 .media-tile:nth-last-child(1) { grid-column: 1 / -1; }

.media-tile {
  position: relative;
  border-radius: 14px;   /* закруглённые фото-сообщения (tz5 #14) */
  overflow: hidden;
  background: transparent;
}
.bubble--media-grid .media-tile {
  aspect-ratio: 1 / 1;
}
.bubble--media-single .media-tile { display: block; }

.bubble-media-img,
.bubble-media-video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  cursor: pointer;
}
.bubble--media-single .bubble-media-img,
.bubble--media-single .bubble-media-video {
  height: 100%;
  min-height: 180px;
}

.media-tile.is-blurred { cursor: pointer; }
.bubble-media-stub {
  width: 100%;
  height: 100%;
  min-height: 180px;
  background-size: cover;
  background-position: center;
  background-color: #2a2830;
  filter: blur(22px);
  transform: scale(1.08);   }
.media-tile.is-blurred[data-kind="video"] .bubble-media-stub {
  background: linear-gradient(135deg, #3a3540, #2a2830);
  filter: none;
  transform: none;
}

.bubble-media-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  cursor: pointer;
}
.bubble-media-lock svg { opacity: 0.95; }
.bubble-media-lock span {
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.bubble-media-lock:active { background: rgba(0, 0, 0, 0.45); }

.media-lightbox {
  position: absolute;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-lightbox-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.media-lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
}
.media-lightbox-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.media-lightbox-close:active { background: rgba(255, 255, 255, 0.22); }

.choice-btn--danger { color: #FF453A; }
.choice-btn--danger:active { background: rgba(255, 69, 58, 0.18); }

.chat-limit-plate {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: -5deg;
  background: var(--pink);
  padding: 22px 26px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 50;
  pointer-events: auto;
  --torn-clip: url(#torn-sq-12);
  -webkit-clip-path: var(--torn-clip);
          clip-path: var(--torn-clip);
  border-radius: 15px;
}
.chat-limit-text {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}
.chat-limit-btn {
  background: #222224;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 8px;
  --torn-clip: url(#torn-wide-8);
  -webkit-clip-path: var(--torn-clip);
          clip-path: var(--torn-clip);
}
.chat-limit-btn:active { opacity: 0.85; }

.chat-composer.is-locked .composer-btn,
.chat-composer.is-locked .composer-input-wrap {
  opacity: 0.45;
  pointer-events: none;
}

.chat-block-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 14px 24px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  background: #0A0A0B;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 45;
}

.report-thanks-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.report-thanks-card {
  background: var(--pink);
  padding: 24px 28px;
  border-radius: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 290px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.report-thanks-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.report-thanks-back {
  align-self: center;
  background: #222224;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 8px;
}
.report-thanks-back:active { background: #6c6c70; }

.promo-banner {
  clip-path: var(--torn-clip);
  -webkit-clip-path: var(--torn-clip);
}

.profile-hide-btn,
.profile-hide-btn.is-published,
.profile-hide-btn.is-disabled,
.profile-photo-img,
.profile-chip.profile-chip--toggle,
.plan-card
{
  clip-path: var(--torn-clip);
  -webkit-clip-path: var(--torn-clip);
}

/* ─── Дефолтные варианты torn-clip для перечисленных элементов ────────────
   Раньше эти классы лишь читали var(--torn-clip), но никто его не задавал
   → clip-path резолвился в none и рваность не появлялась. Теперь у каждого
   класса свой дефолтный SVG-id. profile-chip--toggle дополнительно рандомится
   из JS — каждая chip получает свой вариант (см. main.js applyChipTorn).
   profile-photo-img — рандомится в renderProfilePhotos по URL фотки. */
.profile-hide-btn               { --torn-clip: url(#torn-wide-3); }   /* активная «ОПУБЛИКОВАТЬ» */
.profile-hide-btn.is-published  { --torn-clip: url(#torn-wide-5); }
.profile-hide-btn.is-disabled   { --torn-clip: url(#torn-wide-9); }
.profile-photo-img              { --torn-clip: url(#torn-sq-3); border-radius: 10px; }   /* JS перебивает на торн-sq-N по url */
.plan-card                      { --torn-clip: url(#torn-sq-5); }
.profile-chip.profile-chip--toggle { --torn-clip: url(#torn-wide-1); }  /* JS перебивает на индивидуальный wide-N */

/* sheet-cta — рваная кромка СО ВСЕХ 4 СТОРОН через слоистый mask с composite:intersect.
   CSS не даёт несколько clip-path на один элемент, а единый perimeter-polygon torn-all
   давал «укусы» вместо бумаги. Здесь 4 независимых mask (top/right/bottom/left), браузер
   берёт ПЕРЕСЕЧЕНИЕ → виден только не-обрезанный никем участок. WebKit использует
   source-in (= intersect стандарта). */
.sheet-cta {
  clip-path: none;
  -webkit-clip-path: none;
  -webkit-mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,1.94 2.00,2.02 4.00,2.17 6.00,2.34 8.00,2.49 10.00,2.54 12.00,2.47 14.00,2.21 16.00,1.82 18.00,1.35 20.00,0.92 22.00,0.60 24.00,0.45 26.00,0.48 28.00,0.62 30.00,0.71 32.00,0.67 34.00,0.52 36.00,0.36 38.00,0.30 40.00,0.33 42.00,0.49 44.00,0.77 46.00,1.20 48.00,1.65 50.00,1.97 52.00,2.10 54.00,2.11 56.00,2.13 58.00,2.13 60.00,2.11 62.00,2.04 64.00,2.04 66.00,2.15 68.00,2.38 70.00,2.68 72.00,3.02 74.00,3.39 76.00,3.77 78.00,4.04 80.00,4.13 82.00,4.05 84.00,3.86 86.00,3.62 88.00,3.34 90.00,3.02 92.00,2.72 94.00,2.52 96.00,2.42 98.00,2.39 100.00,2.38 100.00,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 99.25,0.00 99.22,2.00 99.22,4.00 99.29,6.00 99.41,8.00 99.50,10.00 99.57,12.00 99.65,14.00 99.77,16.00 99.86,18.00 99.91,20.00 99.89,22.00 99.89,24.00 99.90,26.00 99.94,28.00 99.93,30.00 99.87,32.00 99.76,34.00 99.66,36.00 99.59,38.00 99.60,40.00 99.68,42.00 99.79,44.00 99.91,46.00 99.96,48.00 99.93,50.00 99.76,52.00 99.48,54.00 99.17,56.00 98.93,58.00 98.76,60.00 98.56,62.00 98.33,64.00 98.14,66.00 98.11,68.00 98.13,70.00 98.03,72.00 97.71,74.00 97.30,76.00 97.02,78.00 97.00,80.00 97.20,82.00 97.45,84.00 97.70,86.00 97.93,88.00 98.19,90.00 98.42,92.00 98.60,94.00 98.65,96.00 98.61,98.00 98.56,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 100.00,0.00 100.00,95.07 98.00,95.11 96.00,95.24 94.00,95.47 92.00,95.83 90.00,96.30 88.00,96.83 86.00,97.30 84.00,97.63 82.00,97.80 80.00,97.90 78.00,98.00 76.00,98.14 74.00,98.21 72.00,98.17 70.00,98.04 68.00,97.95 66.00,97.97 64.00,98.12 62.00,98.30 60.00,98.44 58.00,98.47 56.00,98.44 54.00,98.41 52.00,98.48 50.00,98.59 48.00,98.78 46.00,99.01 44.00,99.28 42.00,99.43 40.00,99.41 38.00,99.25 36.00,99.07 34.00,98.89 32.00,98.73 30.00,98.58 28.00,98.48 26.00,98.42 24.00,98.36 22.00,98.26 20.00,98.08 18.00,97.89 16.00,97.79 14.00,97.92 12.00,98.28 10.00,98.82 8.00,99.30 6.00,99.59 4.00,99.59 2.00,99.47 0.00,99.36' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='5.19,100.00 5.20,98.00 5.23,96.00 5.19,94.00 5.14,92.00 5.11,90.00 5.11,88.00 5.07,86.00 4.91,84.00 4.66,82.00 4.34,80.00 3.95,78.00 3.51,76.00 3.14,74.00 3.00,72.00 3.08,70.00 3.35,68.00 3.69,66.00 4.02,64.00 4.23,62.00 4.31,60.00 4.29,58.00 4.21,56.00 4.06,54.00 3.92,52.00 3.85,50.00 3.94,48.00 4.10,46.00 4.18,44.00 4.14,42.00 4.04,40.00 3.97,38.00 4.01,36.00 4.06,34.00 4.10,32.00 4.02,30.00 3.84,28.00 3.54,26.00 3.22,24.00 2.90,22.00 2.53,20.00 2.02,18.00 1.41,16.00 0.81,14.00 0.42,12.00 0.21,10.00 0.14,8.00 0.10,6.00 0.07,4.00 0.05,2.00 0.04,0.00 100.00,0.00 100.00,100.00' fill='%23fff'/></svg>");
  mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,1.94 2.00,2.02 4.00,2.17 6.00,2.34 8.00,2.49 10.00,2.54 12.00,2.47 14.00,2.21 16.00,1.82 18.00,1.35 20.00,0.92 22.00,0.60 24.00,0.45 26.00,0.48 28.00,0.62 30.00,0.71 32.00,0.67 34.00,0.52 36.00,0.36 38.00,0.30 40.00,0.33 42.00,0.49 44.00,0.77 46.00,1.20 48.00,1.65 50.00,1.97 52.00,2.10 54.00,2.11 56.00,2.13 58.00,2.13 60.00,2.11 62.00,2.04 64.00,2.04 66.00,2.15 68.00,2.38 70.00,2.68 72.00,3.02 74.00,3.39 76.00,3.77 78.00,4.04 80.00,4.13 82.00,4.05 84.00,3.86 86.00,3.62 88.00,3.34 90.00,3.02 92.00,2.72 94.00,2.52 96.00,2.42 98.00,2.39 100.00,2.38 100.00,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 99.25,0.00 99.22,2.00 99.22,4.00 99.29,6.00 99.41,8.00 99.50,10.00 99.57,12.00 99.65,14.00 99.77,16.00 99.86,18.00 99.91,20.00 99.89,22.00 99.89,24.00 99.90,26.00 99.94,28.00 99.93,30.00 99.87,32.00 99.76,34.00 99.66,36.00 99.59,38.00 99.60,40.00 99.68,42.00 99.79,44.00 99.91,46.00 99.96,48.00 99.93,50.00 99.76,52.00 99.48,54.00 99.17,56.00 98.93,58.00 98.76,60.00 98.56,62.00 98.33,64.00 98.14,66.00 98.11,68.00 98.13,70.00 98.03,72.00 97.71,74.00 97.30,76.00 97.02,78.00 97.00,80.00 97.20,82.00 97.45,84.00 97.70,86.00 97.93,88.00 98.19,90.00 98.42,92.00 98.60,94.00 98.65,96.00 98.61,98.00 98.56,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 100.00,0.00 100.00,95.07 98.00,95.11 96.00,95.24 94.00,95.47 92.00,95.83 90.00,96.30 88.00,96.83 86.00,97.30 84.00,97.63 82.00,97.80 80.00,97.90 78.00,98.00 76.00,98.14 74.00,98.21 72.00,98.17 70.00,98.04 68.00,97.95 66.00,97.97 64.00,98.12 62.00,98.30 60.00,98.44 58.00,98.47 56.00,98.44 54.00,98.41 52.00,98.48 50.00,98.59 48.00,98.78 46.00,99.01 44.00,99.28 42.00,99.43 40.00,99.41 38.00,99.25 36.00,99.07 34.00,98.89 32.00,98.73 30.00,98.58 28.00,98.48 26.00,98.42 24.00,98.36 22.00,98.26 20.00,98.08 18.00,97.89 16.00,97.79 14.00,97.92 12.00,98.28 10.00,98.82 8.00,99.30 6.00,99.59 4.00,99.59 2.00,99.47 0.00,99.36' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='5.19,100.00 5.20,98.00 5.23,96.00 5.19,94.00 5.14,92.00 5.11,90.00 5.11,88.00 5.07,86.00 4.91,84.00 4.66,82.00 4.34,80.00 3.95,78.00 3.51,76.00 3.14,74.00 3.00,72.00 3.08,70.00 3.35,68.00 3.69,66.00 4.02,64.00 4.23,62.00 4.31,60.00 4.29,58.00 4.21,56.00 4.06,54.00 3.92,52.00 3.85,50.00 3.94,48.00 4.10,46.00 4.18,44.00 4.14,42.00 4.04,40.00 3.97,38.00 4.01,36.00 4.06,34.00 4.10,32.00 4.02,30.00 3.84,28.00 3.54,26.00 3.22,24.00 2.90,22.00 2.53,20.00 2.02,18.00 1.41,16.00 0.81,14.00 0.42,12.00 0.21,10.00 0.14,8.00 0.10,6.00 0.07,4.00 0.05,2.00 0.04,0.00 100.00,0.00 100.00,100.00' fill='%23fff'/></svg>");
  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
          mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.sheet-cta.filter-apply {
  clip-path: none;
  -webkit-clip-path: none;
  -webkit-mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.61 2.00,0.55 4.00,0.46 6.00,0.38 8.00,0.34 10.00,0.30 12.00,0.28 14.00,0.35 16.00,0.50 18.00,0.71 20.00,0.91 22.00,1.01 24.00,0.98 26.00,0.81 28.00,0.58 30.00,0.34 32.00,0.17 34.00,0.07 36.00,0.05 38.00,0.09 40.00,0.19 42.00,0.30 44.00,0.37 46.00,0.37 48.00,0.31 50.00,0.30 52.00,0.40 54.00,0.63 56.00,0.90 58.00,1.11 60.00,1.25 62.00,1.39 64.00,1.66 66.00,2.04 68.00,2.50 70.00,2.97 72.00,3.38 74.00,3.70 76.00,3.93 78.00,4.16 80.00,4.45 82.00,4.79 84.00,5.06 86.00,5.18 88.00,5.15 90.00,5.05 92.00,4.99 94.00,5.01 96.00,5.10 98.00,5.20 100.00,5.26 100.00,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 99.53,0.00 99.57,2.00 99.63,4.00 99.65,6.00 99.62,8.00 99.59,10.00 99.58,12.00 99.60,14.00 99.64,16.00 99.72,18.00 99.79,20.00 99.84,22.00 99.81,24.00 99.69,26.00 99.54,28.00 99.35,30.00 99.19,32.00 98.99,34.00 98.80,36.00 98.60,38.00 98.49,40.00 98.41,42.00 98.32,44.00 98.11,46.00 97.82,48.00 97.46,50.00 97.13,52.00 96.93,54.00 96.91,56.00 97.04,58.00 97.13,60.00 97.10,62.00 96.99,64.00 96.91,66.00 96.87,68.00 96.79,70.00 96.68,72.00 96.58,74.00 96.56,76.00 96.61,78.00 96.63,80.00 96.55,82.00 96.34,84.00 96.14,86.00 96.08,88.00 96.21,90.00 96.47,92.00 96.73,94.00 96.93,96.00 97.03,98.00 97.07,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 100.00,0.00 100.00,98.72 98.00,98.65 96.00,98.51 94.00,98.33 92.00,98.16 90.00,98.01 88.00,97.96 86.00,98.01 84.00,98.10 82.00,98.13 80.00,98.09 78.00,98.04 76.00,98.01 74.00,97.93 72.00,97.75 70.00,97.46 68.00,97.20 66.00,97.01 64.00,96.93 62.00,96.90 60.00,96.86 58.00,96.79 56.00,96.68 54.00,96.58 52.00,96.50 50.00,96.46 48.00,96.40 46.00,96.30 44.00,96.16 42.00,96.02 40.00,95.87 38.00,95.75 36.00,95.69 34.00,95.71 32.00,95.80 30.00,95.89 28.00,95.99 26.00,96.13 24.00,96.36 22.00,96.65 20.00,96.98 18.00,97.32 16.00,97.69 14.00,98.03 12.00,98.33 10.00,98.48 8.00,98.56 6.00,98.63 4.00,98.81 2.00,99.05 0.00,99.20' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='5.31,100.00 5.25,98.00 5.13,96.00 4.99,94.00 4.92,92.00 4.94,90.00 5.08,88.00 5.26,86.00 5.41,84.00 5.48,82.00 5.50,80.00 5.50,78.00 5.50,76.00 5.49,74.00 5.48,72.00 5.43,70.00 5.26,68.00 4.91,66.00 4.40,64.00 3.92,62.00 3.59,60.00 3.45,58.00 3.37,56.00 3.34,54.00 3.35,52.00 3.41,50.00 3.43,48.00 3.35,46.00 3.17,44.00 2.99,42.00 2.90,40.00 2.92,38.00 2.95,36.00 2.90,34.00 2.72,32.00 2.46,30.00 2.14,28.00 1.81,26.00 1.53,24.00 1.32,22.00 1.24,20.00 1.27,18.00 1.38,16.00 1.50,14.00 1.49,12.00 1.34,10.00 1.07,8.00 0.80,6.00 0.57,4.00 0.41,2.00 0.32,0.00 100.00,0.00 100.00,100.00' fill='%23fff'/></svg>");
  mask-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.61 2.00,0.55 4.00,0.46 6.00,0.38 8.00,0.34 10.00,0.30 12.00,0.28 14.00,0.35 16.00,0.50 18.00,0.71 20.00,0.91 22.00,1.01 24.00,0.98 26.00,0.81 28.00,0.58 30.00,0.34 32.00,0.17 34.00,0.07 36.00,0.05 38.00,0.09 40.00,0.19 42.00,0.30 44.00,0.37 46.00,0.37 48.00,0.31 50.00,0.30 52.00,0.40 54.00,0.63 56.00,0.90 58.00,1.11 60.00,1.25 62.00,1.39 64.00,1.66 66.00,2.04 68.00,2.50 70.00,2.97 72.00,3.38 74.00,3.70 76.00,3.93 78.00,4.16 80.00,4.45 82.00,4.79 84.00,5.06 86.00,5.18 88.00,5.15 90.00,5.05 92.00,4.99 94.00,5.01 96.00,5.10 98.00,5.20 100.00,5.26 100.00,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 99.53,0.00 99.57,2.00 99.63,4.00 99.65,6.00 99.62,8.00 99.59,10.00 99.58,12.00 99.60,14.00 99.64,16.00 99.72,18.00 99.79,20.00 99.84,22.00 99.81,24.00 99.69,26.00 99.54,28.00 99.35,30.00 99.19,32.00 98.99,34.00 98.80,36.00 98.60,38.00 98.49,40.00 98.41,42.00 98.32,44.00 98.11,46.00 97.82,48.00 97.46,50.00 97.13,52.00 96.93,54.00 96.91,56.00 97.04,58.00 97.13,60.00 97.10,62.00 96.99,64.00 96.91,66.00 96.87,68.00 96.79,70.00 96.68,72.00 96.58,74.00 96.56,76.00 96.61,78.00 96.63,80.00 96.55,82.00 96.34,84.00 96.14,86.00 96.08,88.00 96.21,90.00 96.47,92.00 96.73,94.00 96.93,96.00 97.03,98.00 97.07,100.00 0.00,100.00' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.00 100.00,0.00 100.00,98.72 98.00,98.65 96.00,98.51 94.00,98.33 92.00,98.16 90.00,98.01 88.00,97.96 86.00,98.01 84.00,98.10 82.00,98.13 80.00,98.09 78.00,98.04 76.00,98.01 74.00,97.93 72.00,97.75 70.00,97.46 68.00,97.20 66.00,97.01 64.00,96.93 62.00,96.90 60.00,96.86 58.00,96.79 56.00,96.68 54.00,96.58 52.00,96.50 50.00,96.46 48.00,96.40 46.00,96.30 44.00,96.16 42.00,96.02 40.00,95.87 38.00,95.75 36.00,95.69 34.00,95.71 32.00,95.80 30.00,95.89 28.00,95.99 26.00,96.13 24.00,96.36 22.00,96.65 20.00,96.98 18.00,97.32 16.00,97.69 14.00,98.03 12.00,98.33 10.00,98.48 8.00,98.56 6.00,98.63 4.00,98.81 2.00,99.05 0.00,99.20' fill='%23fff'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='5.31,100.00 5.25,98.00 5.13,96.00 4.99,94.00 4.92,92.00 4.94,90.00 5.08,88.00 5.26,86.00 5.41,84.00 5.48,82.00 5.50,80.00 5.50,78.00 5.50,76.00 5.49,74.00 5.48,72.00 5.43,70.00 5.26,68.00 4.91,66.00 4.40,64.00 3.92,62.00 3.59,60.00 3.45,58.00 3.37,56.00 3.34,54.00 3.35,52.00 3.41,50.00 3.43,48.00 3.35,46.00 3.17,44.00 2.99,42.00 2.90,40.00 2.92,38.00 2.95,36.00 2.90,34.00 2.72,32.00 2.46,30.00 2.14,28.00 1.81,26.00 1.53,24.00 1.32,22.00 1.24,20.00 1.27,18.00 1.38,16.00 1.50,14.00 1.49,12.00 1.34,10.00 1.07,8.00 0.80,6.00 0.57,4.00 0.41,2.00 0.32,0.00 100.00,0.00 100.00,100.00' fill='%23fff'/></svg>");
  -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
          mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}


/* sheet--plans — рваность ТОЛЬКО сверху через mask-image (clip-path: url() не
   используем т.к. .sheet имеет translate-анимацию = stacking-context, в нём
   SVG-clipPath по url ломается в Chrome/Safari).
   ВАЖНО: # в data URL = fragment-разделитель → fill='#fff' пишем как '%23fff'.
   Кривая — organic random walk + smoothing (близко к torn-sq), не sawtooth. */
.sheet--plans {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.61 1.67,0.62 3.33,0.62 5.00,0.61 6.67,0.51 8.33,0.35 10.00,0.20 11.67,0.21 13.33,0.43 15.00,0.85 16.67,1.33 18.33,1.75 20.00,2.00 21.67,2.18 23.33,2.34 25.00,2.53 26.67,2.70 28.33,2.90 30.00,3.10 31.67,3.21 33.33,3.05 35.00,2.65 36.67,2.13 38.33,1.73 40.00,1.47 41.67,1.31 43.33,1.17 45.00,1.00 46.67,0.86 48.33,0.83 50.00,0.91 51.67,1.05 53.33,1.05 55.00,0.88 56.67,0.63 58.33,0.49 60.00,0.56 61.67,0.76 63.33,0.95 65.00,1.07 66.67,1.13 68.33,1.19 70.00,1.22 71.67,1.14 73.33,0.90 75.00,0.61 76.67,0.43 78.33,0.46 80.00,0.64 81.67,0.79 83.33,0.83 85.00,0.70 86.67,0.52 88.33,0.35 90.00,0.33 91.67,0.43 93.33,0.63 95.00,0.80 96.67,0.95 98.33,1.03 100.00,1.08 100,100 0,100' fill='%23fff'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0.00,0.61 1.67,0.62 3.33,0.62 5.00,0.61 6.67,0.51 8.33,0.35 10.00,0.20 11.67,0.21 13.33,0.43 15.00,0.85 16.67,1.33 18.33,1.75 20.00,2.00 21.67,2.18 23.33,2.34 25.00,2.53 26.67,2.70 28.33,2.90 30.00,3.10 31.67,3.21 33.33,3.05 35.00,2.65 36.67,2.13 38.33,1.73 40.00,1.47 41.67,1.31 43.33,1.17 45.00,1.00 46.67,0.86 48.33,0.83 50.00,0.91 51.67,1.05 53.33,1.05 55.00,0.88 56.67,0.63 58.33,0.49 60.00,0.56 61.67,0.76 63.33,0.95 65.00,1.07 66.67,1.13 68.33,1.19 70.00,1.22 71.67,1.14 73.33,0.90 75.00,0.61 76.67,0.43 78.33,0.46 80.00,0.64 81.67,0.79 83.33,0.83 85.00,0.70 86.67,0.52 88.33,0.35 90.00,0.33 91.67,0.43 93.33,0.63 95.00,0.80 96.67,0.95 98.33,1.03 100.00,1.08 100,100 0,100' fill='%23fff'/></svg>");
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: top center; mask-position: top center;
}