/* ============================================================
   MODERN SKIN — Зубарев Стрим
   Современный слой поверх main.css. Подключается последним.
   Бренд-акцент (золото #ffd200) сохранён, обновлены поверхности,
   карточки, хедер, заголовки, кнопки, скролл и фокус-состояния.
   Чтобы откатить — удалить <link ... modern.css> из main.tpl.
   ============================================================ */

:root{
  /* Золотая палитра (возвращена) */
  --mx-bg:        #0b0c11;
  --mx-bg-2:      #0e0f16;
  --mx-surface:   #14151d;
  --mx-surface-2: #1b1d27;
  --mx-border:    rgba(255,255,255,.08);
  --mx-border-2:  rgba(255,210,0,.32);
  --mx-gold:      #ffd200;
  --mx-gold-2:    #ffb400;
  --mx-gold-3:    #ffe35c;
  --mx-gold-soft: rgba(255,210,0,.30);
  --mx-text:      #f4f5f8;
  --mx-text-dim:  #9a9db0;
  --mx-ink:       #171920;            /* тёмный текст на золоте */
  --mx-shadow:    0 18px 40px -18px rgba(0,0,0,.75);
  --mx-glow:      0 0 0 1px rgba(255,210,0,.4), 0 14px 44px -10px rgba(255,210,0,.42);
  --mx-radius:    14px;
  --mx-ease:      cubic-bezier(.22,.61,.36,1);
  --mx-spring:    cubic-bezier(.34,1.56,.64,1);
  --mx-font:      'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---------- Современный дизайнерский фон ---------- */
html{ scroll-behavior:smooth; }
body{
  font-family: var(--mx-font) !important;
  background-color:#0c0d14 !important;
  background-image:
    radial-gradient(1100px 780px at 100% 2%, rgba(255,200,40,.17), transparent 52%),
    radial-gradient(1050px 860px at -2% 26%, rgba(123,80,234,.22), transparent 52%),
    radial-gradient(1200px 900px at 62% 105%, rgba(255,150,30,.13), transparent 55%),
    linear-gradient(140deg, #1c1636 0%, #0c0d15 42%, #100c1d 72%, #1b1432 100%) !important;
  background-attachment: fixed !important;
}
/* анимированное мягкое «дыхание» цветовых пятен */
body::after{
  content:''; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(closest-side at 18% 28%, rgba(255,210,0,.16), transparent),
    radial-gradient(closest-side at 82% 72%, rgba(140,100,255,.18), transparent);
  filter: blur(40px);
  animation: mx-aurora 18s ease-in-out infinite alternate;
}
@keyframes mx-aurora{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(0,-3%,0) scale(1.08); }
}
/* тонкая сетка с мягким затуханием — глубина без шума */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
          mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
}
/* Секции были залиты сплошным тёмным и перекрывали градиент — делаем прозрачными */
.content, .premiers, .about, .details{ background:transparent !important; }

/* ---------- Глобальное перекрытие легаси-золота под Twitch ---------- */
a{ color: var(--mx-text-dim); }
a:hover, a:focus{ color: var(--mx-gold-3) !important; }
::selection{ background: var(--mx-gold); color: var(--mx-ink); }
::-moz-selection{ background: var(--mx-gold); color: var(--mx-ink); }
.heading, .stat_group > h5,
.edit__group.addselect label, .edit__group.default label,
.features__box h3,
.header__login:hover, .header__login:hover svg,
.header__sign,
.header__menu a:hover, .header__drop a:hover, .header__megamenu-sort a:hover,
.header__megamenu-list a:hover, .header__notify-list li p a, .header__notify-list li p a:hover,
.header__search-btn:hover svg, .header__search-find:hover svg, .header__notify-btn:hover svg,
.content__sort-btn:hover svg, .content__sort-menu a:hover,
.content__mobile-tabs-menu a:hover, .content__filter-btn:hover, .content__filter-btn:hover svg,
.content__tabs a.active, .content__tabs a:hover,
.breadcrumb__list a:hover, .breadcrumb__list a:hover span{
  color: var(--mx-gold-3) !important;
}
.header__login:hover svg, .content__filter-btn:hover svg,
.content__sort-btn:hover svg, .header__search-find:hover svg{ fill: var(--mx-gold-3) !important; }
.pagination a.active{ background: var(--mx-gold) !important; color: var(--mx-ink) !important; }
.label-b{ background: var(--mx-gold) !important; color: var(--mx-ink) !important; }

/* Modern scrollbar */
*{ scrollbar-width: thin; scrollbar-color: #2a2c3a transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{
  background:#2a2c3a; border-radius:20px; border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:#3a3d4f; background-clip:padding-box; }

/* ---------- Header — стеклянная панель ---------- */
.header__navigation{
  background: rgba(14,15,22,.72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--mx-border);
  box-shadow: 0 8px 28px -16px rgba(0,0,0,.8);
  border-radius: 0 0 14px 14px;
}
.header__logo{
  background: transparent !important;
  font-weight: 800;
  letter-spacing:.3px;
  transition: color .2s var(--mx-ease), transform .2s var(--mx-ease);
}
.header__logo span{
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.header__logo:hover{ transform: translateY(-1px); }

.header__search-btn,
.header__profile{ transition: opacity .2s var(--mx-ease); }
.header__search-btn:hover{ opacity:.75; }

/* ---------- Section titles ---------- */
.premiers__title{
  border-bottom: 1px solid var(--mx-border) !important;
  height: 86px !important;
  margin-bottom: 34px !important;
}
.premiers__title:before{
  width: 56px !important; height: 3px !important;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--mx-gold), var(--mx-gold-2)) !important;
  box-shadow: 0 0 16px var(--mx-gold-soft);
}
.premiers__title h2{
  font-size: 28px !important;
  letter-spacing:.2px;
  color: var(--mx-text) !important;
}
.premiers__title a{
  background: var(--mx-surface-2) !important;
  border: 1px solid var(--mx-border);
  border-radius: 22px !important;
  transition: background .25s var(--mx-ease), border-color .25s var(--mx-ease), transform .2s var(--mx-ease);
}
.premiers__title a:hover{
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2)) !important;
  border-color: transparent;
  transform: translateY(-1px);
}
.premiers__title a:hover svg{ fill:#171920 !important; }
@media (min-width:768px){ .premiers__title a span{ display:inline-block !important; color:inherit; font-size:13px; margin-right:8px; } }

/* ---------- Film cards ---------- */
.film{
  border-radius: var(--mx-radius);
  transition: transform .3s var(--mx-ease);
  will-change: transform;
}
.film .img-fit-cover{
  border-radius: var(--mx-radius) var(--mx-radius) 0 0;
  box-shadow: var(--mx-shadow);
  border: 1px solid var(--mx-border);
  border-bottom: none;
  background:#0d0e15;
}
.film .img-fit-cover img{
  transition: transform .5s var(--mx-ease), filter .35s var(--mx-ease);
}
/* затемняющий градиент снизу постера — для читаемости */
.film .img-fit-cover:after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:42%;
  background: linear-gradient(to top, rgba(8,9,14,.78), transparent);
  opacity:.0; transition: opacity .35s var(--mx-ease); pointer-events:none; z-index:1;
}
.film:hover{ transform: translateY(-8px); }
.film:hover .img-fit-cover{
  border-color: var(--mx-gold);
  box-shadow: 0 28px 56px -20px rgba(0,0,0,.9), 0 0 0 1px var(--mx-gold), 0 14px 44px -10px var(--mx-gold-soft);
}
.film:hover .img-fit-cover img{ transform: scale(1.06); filter: saturate(1.08); }
.film:hover .img-fit-cover:after{ opacity:1; }

/* Рейтинги поверх постера */
.film__badges{
  position:absolute; top:8px; left:8px; right:8px; z-index:3;
  display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; pointer-events:none;
}
.film__badge{
  display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:0 8px; border-radius:8px;
  background:rgba(14,14,16,.84);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.13);
  font-size:11px; font-weight:800; color:#fff; line-height:1;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.7);
}
.film__badge i{ font-style:normal; font-size:9px; font-weight:900; letter-spacing:.4px; opacity:.95; }
.film__badge--zub i{ color:var(--mx-gold-3); }
.film__badge--imdb i{ color:#f5c518; }
.film__badge--zr{ margin-left:auto; }
.film__badge--zr i{ color:var(--mx-gold-3); font-size:12px; }

.film__title{
  color: var(--mx-text) !important;
  font-size: 15px !important;
  padding: 12px 12px 0 !important;
  letter-spacing:.1px;
  transition: color .2s var(--mx-ease);
}
.film:hover .film__title{ color: var(--mx-gold) !important; }
.film__date, .film__date a{ color: var(--mx-text-dim) !important; padding:0 12px; }

/* Кнопка «Смотреть онлайн» */
.film__watch, .favs-btn a{
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2)) !important;
  border-radius: 0 0 var(--mx-radius) var(--mx-radius);
  color: var(--mx-ink) !important;
  font-weight: 800;
  letter-spacing:.5px !important;
  z-index:2;
  transition: filter .2s var(--mx-ease), box-shadow .25s var(--mx-ease) !important;
}
.film__watch svg, .favs-btn a svg{ fill: var(--mx-ink) !important; }
.film:hover .film__watch, .favs-btn a:hover{
  background: linear-gradient(135deg, var(--mx-gold-3), var(--mx-gold)) !important;
  filter: brightness(1.04);
  box-shadow: 0 -2px 26px -2px var(--mx-gold-soft);
}

/* ---------- Home slider title ---------- */
.home__title{ color: var(--mx-text) !important; letter-spacing:1px; }
.home__title b{
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.home__btn{
  border-radius: 12px;
  border: 1px solid var(--mx-border) !important;
  background: var(--mx-surface-2) !important;
  transition: background .25s var(--mx-ease), border-color .25s var(--mx-ease), transform .2s var(--mx-ease);
}
.home__btn:hover{
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2)) !important;
  border-color: transparent; transform: translateY(-1px);
}
.home__btn:hover svg{ fill:#171920 !important; }

/* ---------- Footer ---------- */
.footer__nav a{ transition: color .2s var(--mx-ease); }
.footer__nav a:hover{ color: var(--mx-gold) !important; }
.footer__btn{
  border-radius: 12px;
  transition: transform .2s var(--mx-ease), background .25s var(--mx-ease);
}
.footer__btn:hover{ transform: translateY(-2px); }

/* ---------- Доступно скрытый текст (для SEO/скринридеров) ---------- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* ---------- Accessibility: видимый фокус ---------- */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--mx-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   РАСШИРЕНИЕ: все внутренние страницы
   ============================================================ */

/* ---------- Хлебные крошки ---------- */
.breadcrumb__content{ gap:10px; }
.breadcrumb__back{
  border:1px solid var(--mx-border) !important;
  border-radius:12px;
  transition: background .25s var(--mx-ease), border-color .25s var(--mx-ease), transform .2s var(--mx-ease) !important;
}
.breadcrumb__back:hover{
  background: var(--mx-surface-2) !important;
  border-color: var(--mx-border-2) !important;
  transform: translateY(-1px);
}

/* ---------- Заголовок категории ---------- */
.content__title h2{ color: var(--mx-text) !important; letter-spacing:.2px; }

/* ---------- Слайдер ---------- */
.home__slide-title{
  color: var(--mx-text) !important;
  letter-spacing:.2px;
  margin-top:0 !important;
  line-height:1.18 !important;
  padding-top:2px;
}
/* Антиобрезка: owl прячет overflow, поэтому даём сцене вертикальный воздух
   (паддинг компенсируем отрицательным margin — позиция не сдвигается) */
.home__slider .owl-stage-outer,
.home__carousel .owl-stage-outer{
  padding:18px 0 22px !important;
  margin:-18px 0 -22px !important;
}
.home__slide-cat a{
  display:inline-block; padding:4px 14px; border-radius:20px;
  background: var(--mx-surface-2); border:1px solid var(--mx-border);
  color: var(--mx-gold) !important; font-size:12px;
  transition: background .25s var(--mx-ease), border-color .25s var(--mx-ease);
}
.home__slide-cat a:hover{ border-color: var(--mx-gold); }
.home__slide-cover .img-fit-cover{
  border-radius:16px; overflow:hidden;
  box-shadow:0 22px 46px -20px rgba(0,0,0,.85), 0 0 0 1px var(--mx-border);
}
.home__slide-play{
  position:absolute !important; inset:0 !important;
  width:auto !important; height:auto !important; margin:0 !important;
  background:rgba(10,11,16,.4) !important; border-radius:inherit;
  opacity:0; transition: opacity .3s var(--mx-ease);
}
.home__slide-cover:hover .home__slide-play{ opacity:1; }
/* круг — строго по центру постера */
.home__slide-play:before{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:66px; height:66px; border-radius:50%;
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2));
  box-shadow:0 10px 34px -6px var(--mx-gold-soft);
  transition: transform .25s var(--mx-ease);
}
/* треугольник play — тоже по центру */
.home__slide-play:after{
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-40%,-50%);
  width:0; height:0; border-style:solid;
  border-width:11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.home__slide-cover:hover .home__slide-play:before{ transform:translate(-50%,-50%) scale(1.08); }
.home__btn svg{ fill:#9a9db0; transition: fill .2s var(--mx-ease); }

/* Слайдер показывается ТОЛЬКО после полной инициализации owl.
   До этого карусели скрыты (owl-дефолт display:none) — никакого «сырого»
   гигантского постера. Вместо этого — аккуратный плейсхолдер с резервом высоты,
   чтобы не было прыжка вёрстки. Когда owl готов — плавно проявляется. */
.home{
  position:relative;
  min-height:480px;
  background:
    linear-gradient(120deg, #131019 0%, #1d1830 48%, #131019 100%) !important;
}
/* центр плейсхолдера — крутящийся индикатор, скрывается, когда слайдер готов */
.home__bg:not(.owl-loaded) ~ .container::after,
.home__bg:not(.owl-loaded) + .container::after{
  content:''; position:absolute; top:200px; left:50%;
  width:42px; height:42px; margin-left:-21px;
  border:3px solid rgba(255,210,0,.25);
  border-top-color: var(--mx-gold);
  border-radius:50%;
  animation: mx-spin .8s linear infinite;
  z-index:5; pointer-events:none;
}
@keyframes mx-spin{ to{ transform: rotate(360deg); } }
/* плавное появление загруженных каруселей */
.home__bg.owl-loaded,
.home__slider.owl-loaded,
.home__carousel.owl-loaded{ animation: mx-fade-in .45s var(--mx-ease) both; }
@keyframes mx-fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- Страница фильма ---------- */
.details__title h1{
  color: var(--mx-text) !important;
  letter-spacing:.2px;
}
.details__film-cover .fposter,
.details__film-cover .fposter img{ border-radius:16px; }
.details__film-cover .fposter{
  overflow:hidden; display:block !important;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.85), 0 0 0 1px var(--mx-border);
}
.details__film-cover .fposter img,
.details__film-cover img{
  width:100% !important; height:auto !important;   /* без растяжения */
  display:block; object-fit:contain;
}
.details__film-info{ gap:10px; flex-wrap:wrap; }
.details__film-info .stats{
  display:inline-flex !important; align-items:center; gap:7px;
  white-space:nowrap;
  background: var(--mx-surface-2); border:1px solid var(--mx-border);
  border-radius:10px; padding:7px 13px; color: var(--mx-text-dim);
  line-height:1;
}
.details__film-info .stats img{ width:16px !important; height:16px !important; flex-shrink:0; }

/* Вкладка плеера */
.tabs-block__select span{
  background: var(--mx-surface-2) !important;
  border:1px solid var(--mx-border);
  border-radius:10px !important;
  height:42px !important; line-height:42px !important;
  letter-spacing:.5px; transition: background .25s var(--mx-ease), color .2s var(--mx-ease);
}
.tabs-block__select span:hover,
.tabs-block__select span.is-active{
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2)) !important;
  color:#171920 !important; border-color:transparent;
}
.tabs-block__content.video-inside{
  border-radius:16px; overflow:hidden;
  border:1px solid var(--mx-border);
  box-shadow: var(--mx-shadow);
  background:#06070b;
}
.repport{
  display:inline-block; margin:8px 0; padding:7px 16px; border-radius:10px;
  background: rgba(228,75,74,.12); border:1px solid rgba(228,75,74,.35);
  color:#ff8585 !important; font-size:13px; cursor:pointer;
  transition: background .2s var(--mx-ease);
}
.repport:hover{ background: rgba(228,75,74,.2); }

/* Блок «Поделиться» и рейтинг зрителей — подгон под тему */
.share-block{
  background: var(--mx-surface) !important;
  border:1px solid var(--mx-border) !important;
  border-radius:16px !important;
}
.viewer-rating{
  background: var(--mx-surface) !important;
  border:1px solid var(--mx-border) !important;
  border-radius:16px !important;
}

/* ---------- Комментарии ---------- */
.comment{
  background: var(--mx-surface);
  border:1px solid var(--mx-border);
  border-radius:14px;
  padding:16px 18px;
  margin-bottom:14px;
  transition: border-color .25s var(--mx-ease);
}
.comment:hover{ border-color: var(--mx-border-2); }
.comment__avatar{
  border:1px solid var(--mx-border-2);
  box-shadow:0 4px 12px -4px rgba(0,0,0,.6);
}
.comment__autor{ color: var(--mx-text) !important; font-weight:700; }
.comment__date{ color: var(--mx-text-dim) !important; }
.comment__message{ color:#d7dae2 !important; line-height:1.6; }
.comment__quote{
  color: var(--mx-text-dim) !important; cursor:pointer;
  transition: color .2s var(--mx-ease);
}
.comment__quote:hover{ color: var(--mx-gold) !important; }
.comment__quote svg{ fill: currentColor; }

/* ---------- Формы: инпуты, кнопки ---------- */
.edit__group input,
.login__group input,
.search input.textin{
  border-radius:10px !important;
  border:1px solid var(--mx-border) !important;
  background: rgba(255,255,255,.04) !important;
  padding:0 14px !important;
  transition: border-color .2s var(--mx-ease), background .2s var(--mx-ease) !important;
}
.edit__group input:focus,
.login__group input:focus,
.search input.textin:focus{
  border-color: var(--mx-gold) !important;
  background: rgba(255,255,255,.06) !important;
}
.edit__group input.active + label,
.login__group input:focus + label{ color: var(--mx-gold) !important; }

/* Кнопка «Добавить комментарий» */
.similar__form-publish{
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2)) !important;
  color:#171920 !important; border-radius:12px !important;
  border:none; transition: filter .2s var(--mx-ease), transform .2s var(--mx-ease) !important;
}
.similar__form-publish:hover{
  filter: brightness(1.05); transform: translateY(-1px);
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2)) !important;
  color:#171920 !important;
}

/* ---------- Логин / регистрация (хедер) ---------- */
.login__btn{
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2)) !important;
  border-radius:10px; transition: filter .2s var(--mx-ease), transform .2s var(--mx-ease);
}
.login__btn:hover{ filter:brightness(1.05); transform:translateY(-1px); background:linear-gradient(135deg,var(--mx-gold),var(--mx-gold-2)) !important; color:#171920 !important; }
.login__forgot{ color: var(--mx-text-dim) !important; transition: color .2s var(--mx-ease); }
.login__forgot:hover{ color: var(--mx-gold) !important; }
.header__sign{
  border:1px solid var(--mx-border); border-radius:10px; padding:0 16px;
  transition: border-color .2s var(--mx-ease), color .2s var(--mx-ease);
}
.header__sign:hover{ border-color: var(--mx-gold); color: var(--mx-gold) !important; }
.header__profile-menu{
  background: rgba(20,21,29,.92) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border:1px solid var(--mx-border) !important;
  border-radius:14px !important;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.8) !important;
}
.header__profile-menu a{ transition: background .2s var(--mx-ease), color .2s var(--mx-ease); border-radius:8px; }
.header__profile-menu a:hover{ background: var(--mx-surface-2); color: var(--mx-gold) !important; }
.header__notify-btn:hover svg,
.header__profile-btn:hover{ opacity:.85; }

/* ---------- Пагинация ---------- */
.pagination__pages a,
.pagination__pages span{
  margin-right:8px !important;
  min-width:40px; height:40px; padding:0 12px;
  display:inline-flex !important; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--mx-border);
  color: var(--mx-text-dim) !important; font-weight:700;
  transition: background .2s var(--mx-ease), color .2s var(--mx-ease), border-color .2s var(--mx-ease), transform .15s var(--mx-ease);
}
.pagination__pages a:hover{
  background: var(--mx-surface-2) !important; color: var(--mx-text) !important;
  border-color: var(--mx-border-2); transform: translateY(-1px);
}
.pagination__pages span{
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2)) !important;
  color:#171920 !important; border-color:transparent;
}
.pagination__prev, .pagination__next{
  border:1px solid var(--mx-border); border-radius:10px;
  transition: background .2s var(--mx-ease), border-color .2s var(--mx-ease), transform .15s var(--mx-ease);
}
.pagination__prev:hover, .pagination__next:hover{
  background: var(--mx-surface-2); border-color: var(--mx-border-2); transform: translateY(-1px);
}

/* ---------- Быстрый поиск ---------- */
.fast-search{
  border-radius:12px; transition: background .2s var(--mx-ease);
}
.fast-search:hover{ background: var(--mx-surface-2); }
.fast-search img{ border-radius:8px; }
.searchheading{ color: var(--mx-text) !important; }

/* ---------- О сайте ---------- */
.about__title{ color: var(--mx-text) !important; }
.about__img{ border-radius:16px; }

/* ---------- Меню категорий ---------- */
.categorymenu a, .navigation a{ transition: color .2s var(--mx-ease); }

/* ============================================================
   СОВРЕМЕННЫЙ ШРИФТ
   ============================================================ */
body, button, input, textarea, select, a,
.film__title, .film__badge, .home__title, .home__slide-title, .home__slide-text,
.premiers__title h2, .content__title h2, .details__title h1, .about__title, .about__text,
.comment__autor, .comment__message, .comment__date,
.film__watch, .favs-btn a, .login__btn, .similar__form-publish, .header__logo,
.header__sign, .header__login, .pagination__pages a, .pagination__pages span,
.tabs-block__select span, .repport, .share-block, .home__slide-cat a{
  font-family: var(--mx-font) !important;
}
/* Веса под новый шрифт */
.header__logo{ font-weight:800 !important; letter-spacing:-.2px; }
.premiers__title h2, .content__title h2{ font-weight:800 !important; }
.details__title h1, .about__title{ font-weight:800 !important; }
.home__title b, .home__slide-title{ font-weight:800 !important; }
.home__title{ font-weight:600 !important; }
.film__title{ font-weight:600 !important; }

/* ============================================================
   ЕДИНЫЙ СТИЛЬ КНОПОК
   ============================================================ */
.login__btn, .similar__form-publish, .home__btn, .footer__btn,
.pagination__prev, .pagination__next, .header__sign, .tabs-block__select span,
.repport, .breadcrumb__back, .premiers__title a, .bookmark-btn, .share-block a,
.header__tg-btn, .film__watch{
  transition: transform .2s var(--mx-ease), box-shadow .25s var(--mx-ease),
              filter .2s var(--mx-ease), background .25s var(--mx-ease), border-color .2s var(--mx-ease) !important;
}
.login__btn:active, .similar__form-publish:active, .home__btn:active,
.pagination__prev:active, .pagination__next:active, .header__sign:active,
.bookmark-btn:active, .share-block a:active, .film__watch:active, .header__tg-btn:active{
  transform: translateY(0) scale(.97) !important;
}

/* «Регистрация» — фикс центровки текста */
.header__sign{
  display:inline-flex !important; align-items:center; justify-content:center;
  height:38px !important; padding:0 18px !important;
  line-height:1 !important;
  border:1px solid var(--mx-border) !important; border-radius:11px !important;
  color: var(--mx-gold) !important; font-weight:700;
}
.header__sign:hover{
  border-color: var(--mx-gold) !important; color: var(--mx-ink) !important;
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2)) !important;
  transform: translateY(-1px);
}

/* Кнопка «В закладки» (блок «О сайте») */
.bookmark-btn{
  background: linear-gradient(135deg, var(--mx-gold), var(--mx-gold-2)) !important;
  color: var(--mx-ink) !important; border:none !important; border-radius:12px !important;
  font-weight:800; padding:11px 22px !important;
}
.bookmark-btn svg{ fill: var(--mx-ink) !important; }
.bookmark-btn:hover{ transform: translateY(-2px); box-shadow: var(--mx-glow); }

/* Блок «Поделиться стримом» — компактные кнопки в один ряд, единый стиль */
.share-block{
  padding:22px !important; margin:30px 0 !important;
  background: var(--mx-surface) !important;
  border:1px solid var(--mx-border) !important;
  border-radius:16px !important;
}
.share-block__title{
  text-align:center; font-weight:800; font-size:18px;
  color: var(--mx-text); margin-bottom:16px; letter-spacing:.2px;
}
.share-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.share-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 15px; border-radius:11px;
  background: var(--mx-surface-2); border:1px solid var(--mx-border);
  color: var(--mx-text) !important; text-decoration:none !important;
  font-size:13px; font-weight:700; line-height:1; white-space:nowrap;
  transition: transform .2s var(--mx-ease), background .2s var(--mx-ease),
              border-color .2s var(--mx-ease), box-shadow .25s var(--mx-ease);
}
.share-btn svg{ width:18px; height:18px; flex-shrink:0; }
.share-btn:hover{
  transform: translateY(-2px);
  background:#23252f; border-color: var(--mx-border-2);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
}
.share-btn:active{ transform: translateY(0) scale(.97); }
.share-btn--vk svg{ color:#4a90e2; }
.share-btn--tg svg{ color:#2ca5e0; }
.share-btn--ok svg{ color:#ee8208; }
.share-btn--x  svg{ color:#f4f5f8; }
.share-btn--fb svg{ color:#1877f2; }

/* ============================================================
   АНИМАЦИИ
   ============================================================ */
@keyframes mx-fade-up{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes mx-shimmer{ 0%{ background-position:-180% 0; } 100%{ background-position:180% 0; } }

.premiers__title, .comment, .details__film-cover, .tabs-block,
[class*="col-xl-2"]{
  animation: mx-fade-up .55s var(--mx-ease) both;
}
/* лёгкий каскад для первых карточек ряда (анимируем колонку, а не .film —
   иначе fill:both перебил бы hover-подъём карточки) */
[class*="col-xl-2"]:nth-child(1){ animation-delay:.02s; }
[class*="col-xl-2"]:nth-child(2){ animation-delay:.06s; }
[class*="col-xl-2"]:nth-child(3){ animation-delay:.10s; }
[class*="col-xl-2"]:nth-child(4){ animation-delay:.14s; }
[class*="col-xl-2"]:nth-child(5){ animation-delay:.18s; }
[class*="col-xl-2"]:nth-child(6){ animation-delay:.22s; }

/* «бегущий» блик на акцентной полоске заголовков */
.premiers__title:before{
  background: linear-gradient(90deg, var(--mx-gold), var(--mx-gold-3), var(--mx-gold)) !important;
  background-size:200% 100% !important;
  animation: mx-shimmer 2.6s linear infinite;
}
/* пружинистый подъём карточек */
.film{ transition: transform .32s var(--mx-spring) !important; }

/* ---------- Блоки на странице фильма: слайдер + «другие фильмы» ---------- */
#zub-fs-slider{ margin-bottom:8px; }
.related-films{ margin:50px 0; animation: mx-fade-up .55s var(--mx-ease) both; }
.related-films .premiers__title{ margin-bottom:30px !important; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .related-films{ animation:none !important; }
  .premiers__title, .film, .home__slide, .comment, .details__film-cover, .tabs-block{ animation:none !important; }
  body::after, .premiers__title:before{ animation:none !important; }
  *, *::before, *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  .film:hover{ transform:none; }
  .film:hover .img-fit-cover img{ transform:none; }
}