/* Filtster — стили сайта поверх Bootstrap (тёмная тема). Стили редактора — engine/assets/photo_editor.css. */
:root, [data-bs-theme="dark"] {
  --bs-body-bg: #1b1d21;
  --bs-body-color: #d8dbe0;
  --bs-primary: #6ea8fe;
  --bs-primary-rgb: 110, 168, 254;
  --bs-link-color: #8bb9fe;
  --bs-link-color-rgb: 139, 185, 254;
}
body { background: var(--bs-body-bg); }
.fs-nav { background: #202227; }

/* Редактор во всю ширину контейнера (у движка своя сетка и свои отступы). */
.fs-editor-wrap .pe { margin: 0; }
/* Узкая витрина (4–13 карточек): ряды не растягиваются на всю высоту колонки. */
.fs-editor-wrap .pe__grid { align-content: start; }

/* Сетка карточек фильтров. */
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.fs-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.fs-card img, .fs-card-ph { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: #2c2f35; }
.fs-card-ph { display: flex; align-items: center; justify-content: center; color: #555b66; font-size: 1.6rem; }
.fs-card-name { font-size: .85rem; line-height: 1.25; }
.fs-card:hover img { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.fs-card:hover .fs-card-name { color: #fff; }

/* Плитки узких редакторов. */
.fs-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 10px; background: #24262b;
  border: 1px solid #33363d; text-decoration: none; color: inherit; height: 100%; }
.fs-tile:hover { border-color: var(--bs-primary); }

.fs-ba-img { display: block; width: 100%; height: auto; border-radius: 12px; background: #2c2f35; }

/* До / после: «после» — основа, «до» — сверху, обрезан слева по положению ползунка. */
.fs-ba { position: relative; overflow: hidden; border-radius: 12px; user-select: none; --pos: 50%; background: #2c2f35; }
.fs-ba img { display: block; width: 100%; height: auto; }
/* Склейка — основа и размер блока; полные кадры лежат поверх и видны только «вживую». */
.fs-ba .fs-ba-img { border-radius: 0; }
.fs-ba-after { position: absolute; inset: 0; height: 100% !important; object-fit: cover; }
.fs-ba-after, .fs-ba-before, .fs-ba-tag { visibility: hidden; }
.fs-ba.is-live .fs-ba-after, .fs-ba.is-live .fs-ba-before, .fs-ba.is-live .fs-ba-tag { visibility: visible; }
.fs-ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.fs-ba-before img { width: 100%; height: 100%; object-fit: cover; }
.fs-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.fs-ba-line span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: #222; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.fs-ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.fs-ba-tag { position: absolute; top: 10px; padding: 2px 8px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: .75rem; pointer-events: none; }
.fs-ba-tag-l { left: 10px; }
.fs-ba-tag-r { right: 10px; }