/* вынесен из inline-<style> страницы catalog.html (SEC-11: style-src без unsafe-inline) */
    * { box-sizing: border-box; }
    body { background: #07050d; color: #f4f1ff; margin: 0; min-height: 100vh; overflow-x: hidden; }
    .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

    .nv-header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(7,5,13,0.78);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid rgba(167,139,255,0.08);
      padding: 16px 0;
    }
    .nv-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .nv-logo {
      display: inline-flex; align-items: center; gap: 10px;
      font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em;
      text-decoration: none; color: #fff;
    }
    .nv-logo-mark {
      width: 32px; height: 32px; border-radius: 9px;
      background: linear-gradient(135deg, #8b5cff 0%, #ff3ec9 100%);
      display: flex; align-items: center; justify-content: center;
      font-weight: 900; color: #fff; font-size: 0.92rem;
      box-shadow: 0 4px 14px rgba(139,92,255,0.45);
    }
    .nv-nav { display: flex; gap: 28px; font-size: 0.88rem; font-weight: 500; }
    .nv-nav a {
      color: rgba(244,241,255,0.65); text-decoration: none;
      transition: color 0.15s; position: relative;
    }
    .nv-nav a.active, .nv-nav a:hover { color: #fff; }
    .nv-nav a.active::after, .nv-nav a:hover::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
      background: linear-gradient(90deg, #8b5cff, #ff3ec9);
    }
    @media (max-width: 880px) { .nv-nav { display: none; } }
    .nv-cta-mini {
      padding: 10px 20px;
      background: linear-gradient(135deg, #8b5cff 0%, #ff3ec9 100%);
      color: #fff; border-radius: 11px; font-weight: 700; font-size: 0.86rem;
      text-decoration: none; transition: transform 0.15s, box-shadow 0.25s;
      box-shadow: 0 4px 16px rgba(139,92,255,0.35);
      display: inline-flex; align-items: center; gap: 8px;
    }
    .nv-cta-mini:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(139,92,255,0.5); }

    .page-head { padding: 60px 0 30px; text-align: center; position: relative; overflow: hidden; }
    .page-head::before {
      content: ''; position: absolute; top: 0; left: 50%;
      transform: translateX(-50%);
      width: 800px; height: 300px;
      background: radial-gradient(ellipse at center, rgba(139,92,255,0.2) 0%, transparent 70%);
      pointer-events: none; z-index: 0;
    }
    .page-head-inner { position: relative; z-index: 1; }
    .page-eyebrow {
      display: inline-block; padding: 6px 16px;
      background: rgba(139,92,255,0.1);
      border: 1px solid rgba(167,139,255,0.25);
      border-radius: 99px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: #a78bff; margin-bottom: 22px;
    }
    .page-title {
      font-size: clamp(2rem, 4.2vw, 3rem);
      font-weight: 800; letter-spacing: -0.025em;
      margin: 0 0 14px; line-height: 1.1;
    }
    .page-title .grad {
      background: linear-gradient(135deg, #a78bff, #ff3ec9);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .page-sub {
      font-size: 1.02rem; color: rgba(244,241,255,0.6);
      max-width: 600px; margin: 0 auto;
      line-height: 1.55;
    }

    .filters {
      padding: 22px 0;
      position: sticky; top: 64px; z-index: 50;
      background: rgba(7,5,13,0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(167,139,255,0.08);
    }
    .filters-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .filter-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(244,241,255,0.4);
      margin-right: 6px;
    }
    .filter-chip {
      padding: 7px 14px;
      background: rgba(244,241,255,0.04);
      border: 1px solid rgba(167,139,255,0.18);
      border-radius: 99px;
      font-size: 0.82rem; font-weight: 600;
      color: rgba(244,241,255,0.7);
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .filter-chip:hover { background: rgba(167,139,255,0.12); color: #fff; }
    .filter-chip.active {
      background: linear-gradient(135deg, #8b5cff, #ff3ec9);
      border-color: transparent;
      color: #fff;
      box-shadow: 0 4px 14px rgba(139,92,255,0.35);
    }
    .filter-search {
      flex: 1; min-width: 200px;
      padding: 9px 16px;
      background: rgba(244,241,255,0.04);
      border: 1px solid rgba(167,139,255,0.2);
      border-radius: 10px;
      color: #fff; font-size: 0.88rem;
      outline: none;
      transition: border-color 0.15s, background 0.15s;
    }
    .filter-search:focus { border-color: rgba(167,139,255,0.5); background: rgba(167,139,255,0.08); }
    .filter-search::placeholder { color: rgba(244,241,255,0.35); }
    .filter-count {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem; color: rgba(244,241,255,0.5);
      margin-left: auto;
    }

    .catalog { padding: 40px 0 80px; }
    /* [ПОЛОСА-ПРОСМОТРЕННЫХ] Горизонтальная лента последних просмотренных.
       Идиома взята у .cmp-track на compare.html: flex + overflow-x:auto +
       scroll-snap, стрелки — СИБЛИНГИ трека, а не абсолютные над ним (иначе они
       накрывают крайние плитки). Логика сравнения сюда не переехала: ни
       активной стороны, ни крестика, ни бейджа здесь нет и не нужно.

       Компактная плитка: 140px на десктопе (63% от плитки сетки 220.8) и 110px
       на узких экранах. Фото держит те же 3:2, что и в сетке, — 93.3 и 73.3px
       соответственно. Полоса номера 24px: строка .72rem x 1.2 = 13.8px плюс
       падинги по 5px. Итого плитка 117 и 97px.

       Сколько видно без прокрутки: на десктопе контент 1160 минус стрелки и
       зазоры (92) даёт трек 1068 при шаге 152 — семь плиток. На телефоне 390
       контент 350 при шаге 120 — почти три. */
    .viewed-strip { padding: 0 0 6px; }
    .viewed-strip__head {
      font-size: .78rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: .06em; color: var(--muted); margin-bottom: 10px;
    }
    .viewed-strip__wrap { display: flex; align-items: center; gap: 10px; }
    /* min-width:0 обязателен: у флекс-элемента min-width по умолчанию auto, и
       без него лента из двадцати плиток распёрла бы строку вместо прокрутки. */
    .viewed-strip__track {
      flex: 1 1 auto; min-width: 0;
      display: flex; gap: 12px; overflow-x: auto;
      padding: 6px 2px 10px;
      scroll-snap-type: x proximity; scroll-behavior: smooth;
      scrollbar-width: thin; scrollbar-color: rgba(167,139,255,.45) transparent;
    }
    .viewed-strip__track::-webkit-scrollbar { height: 6px; }
    .viewed-strip__track::-webkit-scrollbar-track { background: transparent; }
    .viewed-strip__track::-webkit-scrollbar-thumb { background: rgba(167,139,255,.35); border-radius: 99px; }
    .viewed-tile {
      flex-shrink: 0; width: 140px; border-radius: 12px; overflow: hidden;
      cursor: pointer; background: #0d0a18; border: 1px solid rgba(167,139,255,.1);
      display: flex; flex-direction: column; scroll-snap-align: start;
      transition: border-color .2s, transform .2s;
    }
    .viewed-tile:hover { border-color: rgba(167,139,255,.45); transform: translateY(-2px); }
    .viewed-tile__photo { aspect-ratio: 3/2; overflow: hidden; background: #0d0a18; }
    .viewed-tile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
    .viewed-tile__art {
      padding: 5px 8px; text-align: center;
      font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 800;
      color: #a78bff; letter-spacing: .05em; background: rgba(7,5,13,.92);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .viewed-strip__nav {
      display: none; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
      background: rgba(20,12,44,.6); border: 1px solid rgba(167,139,255,.22);
      color: #c9b6ff; font-size: 1.1rem; line-height: 1; cursor: pointer;
      align-items: center; justify-content: center; transition: all .18s;
    }
    .viewed-strip__nav:hover { border-color: rgba(167,139,255,.5); color: #fff; }
    .viewed-strip__nav.is-off { opacity: 0; pointer-events: none; }
    /* Стрелки только там, где есть мышь. Гейт по ТИПУ ВВОДА, а не по ширине, в
       отличие от остальных брейкпоинтов этого файла: вопрос не в размере экрана,
       а в наличии указателя — на тач ленту листают жестом, и стрелки были бы
       мусором. */
    @media not all and (hover: none) and (pointer: coarse) {
      .viewed-strip__nav { display: flex; }
    }
    @media (max-width: 600px) {
      .viewed-tile { width: 110px; }
      .viewed-strip__track { scrollbar-width: none; }
      .viewed-strip__track::-webkit-scrollbar { display: none; }
    }

    .catalog-grid {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
    }
    @media (max-width: 1100px) { .catalog-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 880px)  { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 600px)  { .catalog-grid { grid-template-columns: repeat(2, 1fr); } }

    /* [ПОЛОСА-ПЛИТКИ] Плитка = фото + полоса под ним, как на карточках рядов
       сравнения. Раньше подпись лежала НАЛОЖЕНИЕМ на фото с градиентной
       подложкой; теперь фото чистое, а данные вынесены вниз.
       aspect-ratio переехало с плитки на блок фото, и заодно СМЕНИЛОСЬ — см.
       разбор у .film-tile-bg. Плитка при этом растёт на высоту полосы:
       альтернатива, ужать фото в прежний габарит, на странице-витрине хуже —
       превью плёнки и есть главное содержимое. */
    .film-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      background: #0d0a18;
      border: 1px solid rgba(167,139,255,0.1);
      transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    }
    .film-tile:hover {
      transform: translateY(-4px);
      border-color: rgba(167,139,255,0.45);
      box-shadow: 0 20px 40px rgba(139,92,255,0.2);
    }
    /* Фото больше не absolute: оно обычный блок в колонке.
       overflow:hidden нужен ЗДЕСЬ — при hover картинка увеличивается на 6%, и
       без обрезки она наползала бы на полосу.

       [ПРОПОРЦИЯ-ПЛИТКИ] 1/0.92 -> 3/2, contain -> cover. Прежняя связка
       давала ЛЕТТЕРБОКСИНГ: блок имел отношение сторон 1.087, а все превью
       каталога сняты в 1334x889, то есть ровно 1.501. При object-fit:contain
       кадр упирался в ширину, и по высоте оставалось 0.92W - W/1.501 = 0.254W,
       то есть 27.6% высоты блока пустой подложкой. object-position:center 42%
       делил эту пустоту 42/58, поэтому снизу её было больше: на десктопной
       плитке 220.8px это 23.5px сверху и 32.5px снизу, на телефонной 168px —
       17.9 и 24.8px.

       Раньше пустоту не было видно: нижнюю часть фото накрывала подпись
       .film-tile-info — absolute, bottom:0, с градиентной подложкой и высотой
       около 48px. Когда подпись переехала ПОД фото, маскировка исчезла.

       Почему именно 3/2, а не «cover при 1/0.92»: cover на прежней пропорции
       заполнил бы блок, срезав 27.6% ширины кадра, примерно по 14% с каждой
       стороны — на фото машины это режет кузов. Совпадающая пропорция не режет
       ничего. Заодно это та же пропорция, что зафиксирована инвариантом у
       карточек рядов сравнения (.cmp-chip__photo), так что кадр на обеих
       страницах показывается одинаково.

       cover, а не contain, при совпадающей пропорции ничего не меняет — он
       страховка на будущее: если в каталог зальют кадр другого отношения
       сторон, он заполнит блок, а не вернёт полосы. Тогда же сработает и
       object-position:center 42% — сместит обрезку вверх, сохранив кузов и
       подрезав дорогу. Ради этого он и оставлен, хотя на сегодняшних данных
       не влияет ни на что. */
    .film-tile-bg { position: relative; aspect-ratio: 3/2; overflow: hidden; z-index: 0; background: #0d0a18; }
    .film-tile-bg img {
      width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block;
      transition: transform 0.5s;
    }
    .film-tile:hover .film-tile-bg img { transform: scale(1.06); }
    /* [ПОЛОСА-ПЛИТКИ] Сетка с ФИКСИРОВАННЫМИ боковыми колонками одной ширины —
       тот же приём, что в полосе карточек сравнения, и по той же причине.
       Элементов здесь всего два: номер и сердечко. При обычном flex номер
       прижался бы влево и «по центру» не получилось бы; при space-between он
       съехал бы влево ещё сильнее. Фиксированные боковые колонки делают
       центральную ровно по центру полосы, а левая остаётся пустой — она нужна
       именно как противовес сердечку.
       Колонки не заполняются по порядку: номер и кнопка расставлены явным
       grid-column, поэтому пустой узел-распорка не нужен. */
    .film-tile-bar {
      display: grid; grid-template-columns: 22px 1fr 22px; align-items: center;
      gap: 8px; padding: 5px 10px;
      background: rgba(7,5,13,0.92);
    }
    /* Тот же шрифт, кегль и цвет, что были у артикула в наложении — связь с
       номером в модалке и на карточках сравнения должна читаться без пояснений. */
    .film-tile-art {
      grid-column: 2; text-align: center; min-width: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem; font-weight: 800;
      color: #a78bff; letter-spacing: 0.05em;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Голая иконка без подложки — как в полосе карточек сравнения. */
    .film-tile-fav {
      grid-column: 3; width: 22px; height: 22px; padding: 0;
      background: none; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .film-tile-fav .cmp-heart { width: 18px; height: 18px; }
    /* [СЕРДЦЕ] Размер иконки в кнопке модалки. Без этого правила svg с viewBox,
       но без width/height и без CSS-размера растягивается на всю кнопку —
       базовый .cmp-heart в design-system.css задаёт только форму и цвет,
       размер намеренно оставлен КОНТЕКСТУ: иконка живёт в кнопках разного
       калибра. Здесь 17px — как у #favDetBtn на detailing-page.html: кнопка
       того же характера, широкая, с подписью рядом (у .modal-btn-ghost
       font-size 0.92rem против 0.95rem там). */
    #modalFavBtn .cmp-heart { width: 17px; height: 17px; }
    .film-tile-fav:hover .cmp-heart { stroke: #ff3b5c; }
    /* Тач-цель крупнее. Гейт по ширине, а не по типу ввода: в этом файле уже
       все брейкпоинты сетки сделаны по ширине, второй идиомы заводить незачем. */
    @media (max-width: 600px) {
      .film-tile-bar { grid-template-columns: 28px 1fr 28px; padding: 6px 8px; }
      .film-tile-fav { width: 28px; height: 28px; }
      .film-tile-fav .cmp-heart { width: 22px; height: 22px; }
    }
    .film-tile-brand {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.58rem; font-weight: 800;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: #a78bff; margin-bottom: 3px;
    }
    .film-tile-meta {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px;
      font-size: 0.72rem;
      color: rgba(244,241,255,0.55);
    }
    .film-tile-price {
      color: #b4ff39;
      font-weight: 700;
    }

    .catalog-empty {
      grid-column: 1 / -1;
      padding: 80px 30px; text-align: center;
      color: rgba(244,241,255,0.5);
      font-size: 0.95rem;
    }
    .catalog-empty-icon {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: rgba(167,139,255,0.1);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.8rem; margin-bottom: 14px;
    }

    /* MODAL */
    .modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(7,5,13,0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 200; display: none;
      align-items: center; justify-content: center;
      padding: 24px;
      animation: fade-in 0.2s;
    }
    .modal-backdrop.visible { display: flex; }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    .modal {
      max-width: 1180px; width: 100%;
      max-height: 94vh;
      background: linear-gradient(180deg, #14102a 0%, #0d0a18 100%);
      border: 1px solid rgba(167,139,255,0.25);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0,0,0,0.7);
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      animation: scale-in 0.25s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes scale-in {
      from { transform: scale(0.92); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    @media (max-width: 880px) {
      .modal { grid-template-columns: 1fr; max-height: 95vh; overflow-y: auto; }
    }
    .modal-media {
      position: relative;
      min-height: 320px;
      max-height: 70vh;
      background: #0a0814;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 880px) { .modal-media { max-height: 50vh; min-height: 240px; } }
    .modal-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; transition: opacity 0.2s; }

    .modal-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 42px; height: 42px; border-radius: 50%;
      background: rgba(7,5,13,0.7);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(167,139,255,0.3);
      color: #fff; display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 5; transition: all 0.2s; font-size: 1.1rem;
    }
    .modal-nav:hover {
      background: linear-gradient(135deg, #8b5cff, #ff3ec9);
      border-color: transparent; transform: translateY(-50%) scale(1.08);
    }
    .modal-nav--prev { left: 14px; }
    .modal-nav--next { right: 14px; }
    .modal-counter {
      position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      padding: 5px 14px; background: rgba(7,5,13,0.8);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(167,139,255,0.25); border-radius: 99px;
      font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 700;
      color: #fff; z-index: 5;
    }
    .modal-dots {
      position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 7px; z-index: 5; padding: 6px 12px;
      background: rgba(7,5,13,0.6);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      border-radius: 99px;
    }
    .modal-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(244,241,255,0.3); cursor: pointer; transition: all 0.2s;
    }
    .modal-dot.active {
      background: linear-gradient(135deg, #8b5cff, #ff3ec9);
      width: 22px; border-radius: 99px;
    }
    .modal-body {
      padding: 36px;
      display: flex; flex-direction: column;
      overflow-y: auto;
    }
    @media (max-width: 600px) { .modal-body { padding: 24px; } }
    .modal-brand {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem; font-weight: 800;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #a78bff; margin-bottom: 8px;
    }
    .modal-title {
      font-size: 1.6rem; font-weight: 800;
      letter-spacing: -0.015em; line-height: 1.2;
      margin: 0 0 16px;
    }
    .modal-row {
      display: flex; justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid rgba(167,139,255,0.1);
      font-size: 0.9rem;
    }
    .modal-row:last-of-type { border-bottom: none; }
    .modal-row-label { color: rgba(244,241,255,0.55); }
    .modal-row-value { color: #fff; font-weight: 600; }
    .modal-row-value.price {
      color: #b4ff39;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 800;
    }
    .modal-actions {
      margin-top: 24px;
      display: flex; gap: 10px; flex-direction: column;
    }
    .modal-btn-primary {
      padding: 14px 24px;
      background: linear-gradient(135deg, #8b5cff 0%, #ff3ec9 100%);
      color: #fff; border: none; border-radius: 12px;
      font-weight: 800; font-size: 0.95rem;
      text-decoration: none; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      box-shadow: 0 8px 24px rgba(139,92,255,0.4);
      transition: transform 0.15s, box-shadow 0.25s;
    }
    .modal-btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 32px rgba(139,92,255,0.55);
    }
    .modal-btn-ghost {
      padding: 13px 24px;
      background: rgba(244,241,255,0.04);
      color: #fff;
      border: 1px solid rgba(167,139,255,0.25);
      border-radius: 12px;
      font-weight: 700; font-size: 0.92rem;
      text-decoration: none; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      transition: background 0.2s, border-color 0.2s;
    }
    .modal-btn-ghost:hover {
      background: rgba(167,139,255,0.1);
      border-color: rgba(167,139,255,0.5);
    }
    .modal-close {
      position: absolute; top: 16px; right: 16px;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(7,5,13,0.7);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(167,139,255,0.2);
      color: #fff; font-size: 1.2rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      z-index: 5;
      transition: background 0.15s, transform 0.15s;
    }
    .modal-close:hover {
      background: rgba(255,62,201,0.2);
      border-color: rgba(255,62,201,0.5);
      transform: rotate(90deg);
    }

    .nv-footer {
      padding: 40px 0 30px;
      border-top: 1px solid rgba(167,139,255,0.08);
      font-size: 0.86rem; color: rgba(244,241,255,0.4);
    }
    .nv-footer-inner {
      display: flex; flex-wrap: wrap; gap: 24px;
      justify-content: space-between; align-items: center;
    }
    .nv-footer-links { display: flex; gap: 22px; }
    .nv-footer-links a {
      color: rgba(244,241,255,0.55); text-decoration: none;
      transition: color 0.15s;
    }
    .nv-footer-links a:hover { color: #fff; }

    .skeleton {
      background: linear-gradient(90deg,
        rgba(167,139,255,0.04) 0%,
        rgba(167,139,255,0.1) 50%,
        rgba(167,139,255,0.04) 100%);
      background-size: 200% 100%;
      animation: shimmer 1.6s ease-in-out infinite;
    }
    @keyframes shimmer {
      0%   { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .film-tile-cmp {
      margin-top:8px; width:100%; padding:7px 10px; border-radius:9px;
      background:rgba(139,47,255,.14); border:1px solid rgba(167,139,255,.3);
      color:#c9b6ff; font-family:inherit; font-size:.72rem; font-weight:700; cursor:pointer;
      transition:all .16s;
    }
    .film-tile-cmp:hover { background:linear-gradient(135deg,#8b5cff,#ff3ec9); color:#fff; border-color:transparent; }
    .film-tile-cmp.added { background:rgba(52,211,153,.15); border-color:rgba(52,211,153,.4); color:#6ee7b7; }

    .cmp-toast {
      position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
      z-index:2000; background:linear-gradient(160deg,#1a1030,#0d0820);
      border:1px solid rgba(167,139,255,.3); border-radius:16px; padding:16px 18px;
      box-shadow:0 16px 48px rgba(0,0,0,.5); opacity:0; pointer-events:none;
      transition:opacity .25s, transform .25s; max-width:min(420px,92vw); width:max-content;
    }
    .cmp-toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
    .cmp-toast__txt { font-size:.86rem; margin-bottom:12px; color:#f4f1ff; }
    .cmp-toast__txt b { color:#c9b6ff; }
    .cmp-toast__row { display:flex; gap:8px; }
    .cmp-toast__btn { flex:1; padding:10px 12px; border-radius:10px; font-family:inherit; font-size:.8rem; font-weight:700; cursor:pointer; border:none; }
    .cmp-toast__btn--go { background:linear-gradient(135deg,#8b5cff,#ff3ec9); color:#fff; text-decoration:none; text-align:center; }
    .cmp-toast__btn--more { background:rgba(255,255,255,.08); color:#c9b6ff; border:1px solid rgba(167,139,255,.2); }