/* ============================================================================
   ELYQO — сторис в карточке бизнеса (ТЗ «Stories» v1.0)
   ----------------------------------------------------------------------------
   Стили живут отдельным файлом, а не в <style> карточки: модуль включается
   одному бизнесу (пилот), и его легче выключить и обновить, когда он не
   вшит в тысячу строк общей разметки. Токены — общие с карточкой
   (--brand, --surface, --ink), поэтому кольцо и подборки выглядят частью
   страницы, а не наклейкой.
   ========================================================================== */

/* ---------- кольцо сторис вокруг логотипа (ТЗ §3.1) ----------
   Градиент СТАТИЧНЫЙ: крутящееся кольцо читается как индикатор загрузки
   («что-то грузится»), а не как «тут новое».
   Зовут два разных слоя, и они живут по разным правилам (решение владелицы
   15.10.2026, стенд __proto-ring.html):
     ВОЛНА — зов. Расходится от плитки, как след от пальца, который уже
       нажал за вас. Три раза примерно за 14 секунд после открытия карточки,
       дальше молчит. Бесконечное движение через минуту перестают видеть, а
       батарею оно тратит всё время.
     СЛОВО — состояние, а не анимация. «Zobacz» просто стоит под плиткой,
       пока кадры не посмотрели, и уходит вместе с градиентом в ту же
       секунду, когда человек закрыл просмотр. */
.st-ring{position:relative;flex:0 0 auto}
.st-tap{display:block;border:0;background:none;padding:0;border-radius:32px;position:relative;
  overflow:hidden;transition:transform .16s ease,filter .16s ease;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.st-tap::before{content:"";position:absolute;inset:-38%;
  background:conic-gradient(from 160deg,
    #5B4CFF 0deg,#7B55FF 48deg,#9C5CFF 96deg,#C94FE4 144deg,#F05DC7 196deg,
    #FF7E9D 244deg,#FF9A6C 292deg,#C94FE4 330deg,#5B4CFF 360deg)}
.st-ring.seen .st-tap::before{background:#D8D4E6}
.st-ring.none .st-tap::before{background:transparent}
.st-tap:active{transform:scale(.985)}
/* обод 5 px и белый зазор 3 px: на крупном логотипе тонкое кольцо теряется */
.st-gap{position:relative;display:block;margin:5px;padding:3px;border-radius:27px;background:var(--surface,#fff)}
.st-ring.none .st-gap{margin:0;padding:0}
/* ── зов: волна ──────────────────────────────────────────────────────
   Волнам нужен свой слой: .st-tap прячет всё лишнее (overflow:hidden),
   а волна обязана выходить ЗА пределы плитки. */
.st-fx{position:absolute;inset:0;border-radius:32px;pointer-events:none}
.st-ring.has .st-fx::before,.st-ring.has .st-fx::after{content:"";position:absolute;inset:0;
  border-radius:32px;border:2px solid rgba(201,79,228,.55);opacity:0;
  animation:st-wave 4.8s cubic-bezier(.16,.84,.44,1) 3}
.st-ring.has .st-fx::after{animation-delay:.42s;border-color:rgba(91,76,255,.45)}
@keyframes st-wave{
  0%{transform:scale(1);opacity:.75}
  24%{transform:scale(1.34);opacity:0}
  100%{transform:scale(1.34);opacity:0}
}

/* ── зов: слово ──────────────────────────────────────────────────────
   Владельцу слова нет: в этом углу плитки у него «плюс», две подписи рядом
   столкнулись бы, да и про свои сторис он знает. */
.st-tip{position:absolute;left:50%;bottom:-11px;transform:translate(-50%,0);z-index:2;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;pointer-events:none;
  padding:3.5px 10px;border-radius:999px;color:#fff;
  background:linear-gradient(92deg,#5B4CFF,#F05DC7);box-shadow:0 5px 14px -6px rgba(91,76,255,.8);
  animation:st-tip-in .42s cubic-bezier(.2,.8,.3,1) both;
  transition:opacity .22s ease,transform .22s ease}
@keyframes st-tip-in{
  from{opacity:0;transform:translate(-50%,7px) scale(.92)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}
}
/* animation:none здесь обязателен: всплывание стоит с fill-mode both и
   продолжает утверждать opacity:1 — анимация в каскаде сильнее обычного
   объявления, и слово осталось бы висеть над серым ободом. */
.st-ring:not(.has) .st-tip,.st-ring.own .st-tip{animation:none;opacity:0;
  transform:translate(-50%,7px) scale(.94)}
.st-add{position:absolute;right:-4px;bottom:-4px;width:36px;height:36px;border-radius:50%;
  border:3px solid var(--surface,#fff);background:var(--grad,linear-gradient(90deg,#5B4CFF,#F05DC7));
  color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(91,76,255,.7);
  z-index:3;cursor:pointer;padding:0}
.st-add svg{width:16px;height:16px}
.st-add[hidden]{display:none}
@media(hover:hover){
  .st-tap:hover{transform:scale(1.02)}
  .st-ring.has .st-tap:hover{filter:brightness(1.06)}
  .st-add:hover{filter:brightness(1.08)}
}
@media(max-width:560px){
  .st-gap{margin:4px;padding:2.5px;border-radius:23px}
  .st-tap{border-radius:28px}
  .st-fx,.st-ring.has .st-fx::before,.st-ring.has .st-fx::after{border-radius:28px}
  .st-tip{font-size:10.5px;padding:3px 9px;bottom:-10px}
}
@media(prefers-reduced-motion:reduce){
  /* Зов убираем, слово оставляем: это не движение, а надпись. */
  .st-ring.has .st-fx::before,.st-ring.has .st-fx::after{display:none}
  .st-tip{animation:none}
}

/* ---------- подборки в галерее (ТЗ §3.2) ---------- */
#stTop{margin:14px 0 2px}
#stTop .blk-tools{margin-bottom:12px}
/* Рельса подборок живёт в той же карточке, что и стена («блок актуальная и
   блок фотографии это фактически один блок», 17.10.2026), и едет от края до
   края: последняя подборка уходит под срез, и сразу видно, что ряд
   продолжается. Полосу прокрутки прячем — на телефоне её и так нет. */
.st-high{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;
  margin:0 -28px;padding:18px 28px 16px;-webkit-overflow-scrolling:touch}
.st-high::-webkit-scrollbar{display:none}
@media(max-width:1023px){ .st-high{margin:0 -16px;padding:14px 16px 12px} }
.st-hi{flex:0 0 auto;width:92px;text-align:center;border:0;background:none;padding:0;cursor:pointer}
/* span строчный, ширина и высота на нём не работают — обложка схлопывалась
   в точку, пока не появился display:block */
.st-hi .ring{display:block;width:76px;height:76px;margin:0 auto;border-radius:50%;padding:2.5px;
  background:linear-gradient(140deg,#E9E4F7,#D7CEEE);box-sizing:border-box}
.st-hi .cv{display:block;width:100%;height:100%;border-radius:50%;border:2.5px solid var(--surface,#fff);
  overflow:hidden;position:relative;box-sizing:border-box;background:var(--surface-2,#F5F2FF)}
.st-hi .cv > *{position:absolute;inset:0}
.st-hi .cv img{width:100%;height:100%;object-fit:cover}
.st-hi .nm{display:block;font-size:12.5px;margin-top:8px;line-height:1.25;color:var(--ink,#111224);font-weight:600}
.st-hi .n{display:block;font-size:11.5px;color:var(--ink-faint,#9092A6)}
.st-hi.add .ring{background:none;padding:2.5px}
.st-hi.add .cv{border:1.5px dashed color-mix(in srgb,var(--brand,#5B4CFF) 45%,transparent);
  background:linear-gradient(160deg,var(--brand-tint,#F1ECFF),#fff);
  display:grid;place-items:center;color:var(--brand,#5B4CFF)}
.st-hi.add svg{width:22px;height:22px;position:static}
.st-hi.add .nm{color:var(--brand-ink,#4636C4)}
@media(hover:hover){.st-hi.add:hover .cv{background:linear-gradient(160deg,#fff,var(--brand-tint,#F1ECFF));
  border-color:var(--brand,#5B4CFF)}}
@media(max-width:700px){.st-hi{width:80px}.st-hi .ring{width:68px;height:68px}}

/* блоки владельца внизу галереи */
#stOwner{margin-top:26px;padding-top:18px;border-top:1px solid var(--line,#ECECF3)}
.st-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:22px 0 12px}
.st-head:first-child{margin-top:0}
.st-head b{font-size:15.5px;letter-spacing:-.01em}
.st-head span{font-size:13px;color:var(--ink-soft,#5C5D72)}
.st-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin:2px 0 6px}
.st-stat{background:var(--surface-2,#F5F2FF);border-radius:14px;padding:11px 14px}
.st-stat b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.st-stat span{font-size:12.5px;color:var(--ink-soft,#5C5D72)}
.st-arch{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.st-ar{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:0;padding:0;
  cursor:pointer;background:#17141f}
.st-ar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-ar .d{position:absolute;left:0;right:0;bottom:0;padding:7px 8px;color:#fff;font-size:11px;
  background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);text-align:left;line-height:1.3}
.st-ar .d b{display:block;font-size:11.5px;font-weight:700}
.st-note{font-size:13px;color:var(--ink-soft,#5C5D72);line-height:1.5;margin-top:10px;
  border-left:3px solid var(--brand-tint,#F1ECFF);padding-left:12px}
.st-empty{font-size:13.5px;color:var(--ink-soft,#5C5D72);background:var(--surface-2,#F5F2FF);
  border-radius:14px;padding:14px;line-height:1.5}
@media(max-width:700px){
  .st-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-arch{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .st-head{margin:18px 0 10px}
}

/* ---------- просмотрщик (ТЗ §3.3) ---------- */
.sv[hidden]{display:none}
.sv{position:fixed;inset:0;z-index:9000;background:rgba(14,12,22,.97);display:grid;place-items:center;
  animation:sv-in .18s ease;overscroll-behavior:contain}
@keyframes sv-in{from{opacity:0}to{opacity:1}}
.sv-deck{position:relative;width:min(428px,100vw);height:min(94vh,calc(min(428px,100vw)*16/9));perspective:1500px}
@media(max-width:700px){.sv-deck{width:100vw;height:100dvh}}
.sv-card{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#17141f;
  box-shadow:0 30px 90px rgba(0,0,0,.55);backface-visibility:hidden}
@media(max-width:700px){.sv-card{border-radius:0}}
/* Удержание кадра ставит паузу — и ничего больше. Браузер на долгое
   нажатие по картинке норовит открыть своё меню («Скопировать изображение»,
   «Поделиться…») и выделить подпись: на iOS это -webkit-touch-callout, на
   остальных — отмена contextmenu в stories.js. Перетаскивание картинки
   мышью тоже снимаем: на десктопе кадр уезжал за курсором. */
.sv{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.sv-media{position:absolute;inset:0;background:#17141f}
.sv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;pointer-events:none}
/* Превью 256x455 (19 КБ против 200) лежит ПОД кадром и появляется сразу:
   чёрного прямоугольника в ожидании кадра человек не видит никогда.
   Размытие и запас 3% прячут и мягкость маленькой картинки, и кромку. */
.sv-media .ph{filter:blur(8px);transform:scale(1.04)}
/* Кадр из кэша показываем БЕЗ появления — иначе мгновенное открытие само
   себе дорисовывает 180 мс. Класс wait ставится только тогда, когда кадр
   и правда приходится ждать. */
.sv-media .full.wait{opacity:0;transition:opacity .18s ease}
.sv-media .full.wait.on{opacity:1}
@media(prefers-reduced-motion:reduce){.sv-media .full.wait{transition:none}}
.sv-scrim-t{position:absolute;left:0;right:0;top:0;height:140px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,0))}
.sv-scrim-b{position:absolute;left:0;right:0;bottom:0;height:210px;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,0))}
.sv-bars{position:absolute;top:calc(9px + env(safe-area-inset-top,0px));left:9px;right:9px;display:flex;gap:3px;z-index:6}
.sv-bar{flex:1;height:2.6px;border-radius:3px;background:rgba(255,255,255,.34);overflow:hidden}
.sv-bar i{display:block;height:100%;width:100%;background:#fff;border-radius:3px;transform:scaleX(0);transform-origin:left}
.sv-top{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));left:10px;right:6px;z-index:6;
  display:flex;align-items:center;gap:8px;color:#fff}
.sv-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:#F3E4DD;position:relative}
.sv-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-who{min-width:0;flex:1}
.sv-who b{display:block;font-size:13.5px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.sv-who span{font-size:12px;opacity:.78}
.sv-ico{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:#fff;display:grid;
  place-items:center;flex:0 0 auto;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0}
.sv-ico svg{width:19px;height:19px}
.sv-ico.dim{opacity:.5}
@media(hover:hover){.sv-ico:hover{background:rgba(255,255,255,.16)}}
.sv-zones{position:absolute;inset:0;z-index:4;display:flex;touch-action:pan-y}
.sv-zones b{display:block;height:100%;border:0;background:transparent}
.sv-zones .z-prev{width:32%}
.sv-zones .z-next{flex:1}
.sv-cap{position:absolute;left:16px;right:16px;bottom:96px;z-index:5;color:#fff;font-size:14px;line-height:1.45;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.sv-card.has-cta .sv-cap{bottom:152px}
.sv-cta{position:absolute;left:50%;translate:-50% 0;bottom:96px;z-index:5;border:0;border-radius:999px;
  padding:13px 24px;font-size:14.5px;font-weight:700;background:#fff;color:#15142a;display:inline-flex;gap:8px;
  align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:cta-pulse 2.6s ease-in-out infinite;cursor:pointer}
.sv-cta svg{width:15px;height:15px}
@keyframes cta-pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.sv-foot{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px))}
/* ---------- кто смотрел кадр (ТЗ §7.2) ----------
   Список вошедших с лицами и временем; гости — строкой с числом. */
.sv-own .seen{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;border-radius:999px}
.sv-own .seen:active{transform:scale(.97)}
@media(hover:hover){.sv-own .seen:hover{opacity:.82}}
.wh-wait{padding:18px 2px;color:var(--ink-soft,#5C5D72);font-size:14px}
.wh-list{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow:auto;margin:0 -6px;padding:0 6px}
.wh-row{display:flex;align-items:center;gap:11px;padding:8px 6px;border-radius:12px}
@media(hover:hover){.wh-row:hover{background:var(--surface-2,#FBFAFF)}}
.wh-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(140deg,#EDE9FF,#F7E7F4);color:#4636C4;font-weight:700;font-size:15px}
.wh-av{position:relative}
.wh-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wh-nm{flex:1;min-width:0;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-at{flex:0 0 auto;font-size:12.5px;color:var(--ink-faint,#9092A6)}
.wh-guests{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2,#FBFAFF);
  border:1px solid var(--line,#ECECF3);font-size:13.5px;color:var(--ink-soft,#5C5D72)}
.wh-hint{margin-top:12px}

/* Вход в карточку из показа в ленте каталога: та же строка, что у ответа,
   но одна широкая кнопка — чата на странице поиска нет. */
.sv-open{display:flex}
.sv-openbtn{flex:1;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:14.5px;font-weight:600;
  cursor:pointer;backdrop-filter:blur(4px)}
.sv-openbtn:active{transform:scale(.99)}
@media(hover:hover){.sv-openbtn:hover{background:rgba(255,255,255,.22)}}

.sv-reply{display:flex;align-items:center;gap:8px}
.sv-reply input{flex:1;min-width:0;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.08);color:#fff;padding:0 16px;font-size:16px;outline:none;font-family:inherit}
.sv-reply input::placeholder{color:rgba(255,255,255,.72)}
.sv-reply input:focus{border-color:#fff;background:rgba(255,255,255,.16)}
.sv-sent{margin-top:9px;text-align:center;font-size:12.5px;color:#fff;opacity:.9}
.sv-sent[hidden]{display:none}
.sv-own{display:flex;align-items:center;gap:8px;color:#fff;flex-wrap:wrap}
.sv-own .seen{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;flex:1;min-width:110px}
.sv-own .seen svg{width:17px;height:17px}
.sv-own button{border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;padding:11px 15px;
  font-size:13px;font-weight:650;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit}
.sv-own button svg{width:14px;height:14px}
@media(hover:hover){.sv-own button:hover{background:rgba(255,255,255,.26)}}
.sv-heart{position:absolute;left:50%;top:48%;translate:-50% -50%;z-index:7;pointer-events:none;color:#FF4D6D;
  animation:heart .9s cubic-bezier(.2,1.4,.4,1) forwards}
.sv-heart svg{width:110px;height:110px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}
@keyframes heart{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.12);opacity:1}
  70%{transform:scale(1);opacity:1}100%{transform:scale(1.25) translateY(-28px);opacity:0}}
.sv-menu{position:absolute;right:10px;top:62px;z-index:8;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.4);min-width:224px}
.sv-menu button{display:flex;width:100%;align-items:center;gap:9px;border:0;background:none;padding:14px;
  font-size:14px;text-align:left;color:#111224;cursor:pointer;font-family:inherit}
.sv-menu button+button{border-top:1px solid #ECECF3}
.sv-menu button.danger{color:#E85A67}
.sv-menu svg{width:16px;height:16px;flex:0 0 auto}
@media(hover:hover){.sv-menu button:hover{background:#F5F2FF}}
/* ---------- листы: публикация, подборка, «Поделиться» ---------- */
.sh[hidden]{display:none}
.sh{position:fixed;inset:0;z-index:9100;background:rgba(14,12,22,.6);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:16px;overscroll-behavior:contain}
.sh-box{background:var(--surface,#fff);border-radius:22px;box-shadow:0 24px 70px rgba(20,16,40,.4);
  width:min(680px,100%);max-height:min(92vh,900px);overflow:auto;color:var(--ink,#111224);
  animation:sh-in .22s cubic-bezier(.2,.9,.3,1)}
@keyframes sh-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sh-head{display:flex;align-items:center;gap:10px;padding:16px 18px 0}
.sh-head h3{font-size:18px;font-weight:800;letter-spacing:-.02em;flex:1}
.sh-x{width:38px;height:38px;border-radius:50%;border:0;background:var(--surface-2,#F5F2FF);
  color:var(--ink,#111224);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;padding:0}
.sh-x svg{width:18px;height:18px}
.sh-body{padding:14px 18px 18px}
.sh-body p.h{font-size:13.5px;color:var(--ink-soft,#5C5D72);line-height:1.5}
.sh-act{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
label.fl{display:block;font-size:13px;font-weight:650;margin:14px 0 6px}
.fi{width:100%;height:46px;border-radius:12px;border:1px solid var(--line-strong,#E9E6F3);padding:0 13px;
  font-size:16px;outline:none;background:var(--surface,#fff);color:inherit;font-family:inherit}
.fi:focus{border-color:var(--brand,#5B4CFF)}
@media(max-width:700px){
  .sh{padding:0;align-items:flex-end}
  .sh-box{width:100%;max-width:none;max-height:92dvh;border-radius:22px 22px 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px);animation:sh-up .24s cubic-bezier(.2,.9,.3,1)}
  @keyframes sh-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
}

/* окно публикации: кадрирование (ТЗ §4.2.1) */
.cmp{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px}
.cmp-stage{background:linear-gradient(180deg,#1A1626,#100D18);border-radius:18px;padding:16px;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.cmp-frame{position:relative;height:min(448px,46vh);width:calc(min(448px,46vh)*0.5625);max-width:100%;
  border-radius:16px;overflow:hidden;background:#241f33;touch-action:none;cursor:grab;
  box-shadow:0 18px 40px rgba(0,0,0,.4)}
.cmp-frame:active{cursor:grabbing}
.cmp-frame img{position:absolute;left:50%;top:50%;transform-origin:center;max-width:none;
  will-change:transform;user-select:none;-webkit-user-drag:none}
.cmp-frame .grid{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s ease;
  background:linear-gradient(to right,rgba(255,255,255,.28) 1px,transparent 1px) 33.33% 0/33.33% 100%,
             linear-gradient(to bottom,rgba(255,255,255,.28) 1px,transparent 1px) 0 33.33%/100% 33.33%}
.cmp-frame.moving .grid{opacity:1}
.cmp-frame .scrim{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
.cmp-frame .cap{position:absolute;left:12px;right:12px;bottom:14px;color:#fff;font-size:12.5px;line-height:1.4;
  text-shadow:0 1px 8px rgba(0,0,0,.6);pointer-events:none}
.cmp-frame .cta{position:absolute;left:50%;translate:-50% 0;bottom:50px;background:#fff;color:#15142a;
  border-radius:999px;padding:8px 15px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;
  gap:6px;box-shadow:0 8px 20px rgba(0,0,0,.35);pointer-events:none}
.cmp-frame .cta svg{width:12px;height:12px}
.cmp-zoom{display:flex;align-items:center;gap:12px;width:100%;max-width:252px;color:rgba(255,255,255,.85)}
.cmp-zoom svg{width:16px;height:16px;flex:0 0 auto;opacity:.8}
.cmp-zoom input[type=range]{flex:1;min-width:0;height:4px;border-radius:999px;appearance:none;
  background:linear-gradient(90deg,#fff var(--p,0%),rgba(255,255,255,.22) var(--p,0%));cursor:pointer}
.cmp-zoom input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:grab}
.cmp-hint{font-size:11.5px;color:rgba(255,255,255,.6);text-align:center;line-height:1.45;max-width:252px}
.cmp-reset{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:7px 13px;
  font-size:12px;font-weight:650;cursor:pointer;font-family:inherit}
.cmp-file{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft,#5C5D72);
  background:var(--surface-2,#F5F2FF);border-radius:12px;padding:10px 12px}
.cmp-file i{width:30px;height:30px;border-radius:9px;background:var(--brand-tint,#F1ECFF);
  color:var(--brand-ink,#4636C4);display:grid;place-items:center;flex:0 0 auto}
.cmp-file i svg{width:15px;height:15px}
.cmp-file b{display:block;font-size:13px;color:var(--ink,#111224);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cmp-row .cnt{font-size:11.5px;color:var(--ink-faint,#9092A6);font-variant-numeric:tabular-nums}
.cmp-sw{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line,#ECECF3);cursor:pointer}
.cmp-sw input{width:20px;height:20px;accent-color:var(--brand,#5B4CFF);flex:0 0 auto}
.cmp-sw b{display:block;font-size:13.5px}
.cmp-sw span{display:block;font-size:12px;color:var(--ink-soft,#5C5D72);margin-top:2px}
@media(max-width:700px){
  .cmp{grid-template-columns:1fr;gap:14px}
  .cmp-stage{padding:12px}
  .cmp-frame{height:min(380px,42dvh);width:calc(min(380px,42dvh)*0.5625)}
  .cmp-zoom,.cmp-hint{max-width:min(240px,66vw)}
}

/* сетка выбора кадров в подборку */
.hg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:6px;
  max-height:46vh;overflow:auto;padding:2px}
.hg-cell{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:0;padding:0;
  cursor:pointer;background:#17141f;-webkit-tap-highlight-color:transparent}
.hg-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hg-cell .ck{position:absolute;right:7px;top:7px;width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.25)}
.hg-cell .ck svg{width:13px;height:13px;opacity:0}
.hg-cell[aria-pressed="true"] .ck{background:var(--brand,#5B4CFF);border-color:#fff}
.hg-cell[aria-pressed="true"] .ck svg{opacity:1}
.hg-cell[aria-pressed="true"]::after{content:"";position:absolute;inset:0;border:2.5px solid var(--brand,#5B4CFF);
  border-radius:12px;pointer-events:none}
.hg-covers{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 2px;-webkit-overflow-scrolling:touch}
.hg-cov{flex:0 0 auto;width:54px;border:0;background:none;padding:0;cursor:pointer}
.hg-cov span{display:block;width:54px;height:54px;border-radius:50%;overflow:hidden;position:relative;
  border:2.5px solid transparent;box-sizing:border-box}
.hg-cov[aria-pressed="true"] span{border-color:var(--brand,#5B4CFF)}
.hg-cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* окно «Поделиться» */
.sh-share{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:10px;margin-top:6px}
.sh-net{display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:none;padding:8px 2px;
  border-radius:14px;cursor:pointer;color:inherit;font-family:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent}
.sh-net i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.sh-net i svg{width:24px;height:24px}
.sh-net b{font-size:12px;font-weight:600;color:var(--ink-soft,#5C5D72);text-align:center;line-height:1.25}
@media(hover:hover){.sh-net:hover{background:var(--surface-2,#F5F2FF)}}
.sh-link{display:flex;gap:8px;align-items:center;margin-top:16px}
.sh-link input{flex:1;min-width:0;height:46px;border-radius:12px;border:1px solid var(--line-strong,#E9E6F3);
  padding:0 13px;font-size:14px;background:var(--surface-2,#F5F2FF);color:var(--ink-soft,#5C5D72);
  font-family:inherit;text-overflow:ellipsis}
.sh-quote{display:flex;gap:10px;align-items:center;background:var(--surface-2,#F5F2FF);border-radius:14px;
  padding:10px;margin-bottom:6px}
.sh-quote .th{width:44px;height:78px;border-radius:8px;overflow:hidden;position:relative;flex:0 0 auto;background:#17141f}
.sh-quote .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-quote .tx{min-width:0}
.sh-quote .tx b{display:block;font-size:13.5px;line-height:1.3}
.sh-quote .tx span{font-size:12px;color:var(--ink-soft,#5C5D72)}

/* всплывающая подсказка модуля */
.st-toast{position:fixed;left:50%;bottom:28px;translate:-50% 0;z-index:9200;background:#15122A;color:#fff;
  border-radius:12px;padding:12px 16px;font-size:13.5px;box-shadow:0 18px 40px rgba(0,0,0,.35);
  max-width:calc(100vw - 32px);text-align:center}
.st-toast.up{bottom:96px}