:root{
  --bg: #ffffff;
  --fg: #0b0f19;
  --card: #ffffff;
  --muted: rgba(11, 15, 25, 0.65);
  --border: rgba(11, 15, 25, 0.12);
  --accent: #ff2b2b;
}

html.dark{
  --bg: #070A10;
  --fg: #F4F7FF;
  --card: rgba(255, 255, 255, 0.06);
  --muted: rgba(244, 247, 255, 0.65);
  --border: rgba(255, 255, 255, 0.12);
}

body{
  background: var(--bg);
  color: var(--fg);
}

/* кнопка солнце/луна */
.theme-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  cursor:pointer;
  margin-left: 8px;
}

.theme-btn:hover{ opacity:.9; }

/* Переключатель темы в верхнем меню */
.themeToggleLink{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  color: #fff !important;
  opacity: 0.95;
}
.themeToggleLink:hover{ opacity: 1; }

/* FIX: меню было рассчитано на фиксированное число пунктов (ширина 15.5%),
   из-за этого новый пункт (переключатель темы) уезжал вправо и не виден. */
.main-menu{
  display:flex !important;
}

.main-menu > li{
  width:auto !important;
  flex: 1 1 auto;
  border-left: 2px dotted rgba(255,255,255,0.35);
}

/* первый пункт (домик) не должен растягиваться */
.main-menu > li:first-child{
  flex: 0 0 auto;
  width:auto !important;
}

/* Переключатель темы — маленький пункт */
.main-menu > li:has(#themeToggle){
  flex: 0 0 auto;
}

.themeToggleLink{
  min-width: 56px;
  padding: 0 10px;
}

/* 100% совместимый вариант без :has() */
.main-menu > li.theme-li{
  flex: 0 0 auto;
  width:auto !important;
}

/* Переключатель темы "капсула" (как на скрине) */
.theme-switch-wrap{
  position:absolute;
  right: 70px;   /* если налезет на профиль — поменяем число */
  top: 14px;
  z-index: 9999;
}

.theme-switch{
  display:inline-flex;
  border-radius: 999px;
  padding: 4px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}

.theme-seg{
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.80);
  border-radius: 999px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.theme-seg:hover{ color:#fff; }

.theme-seg.active{
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* На светлой теме пусть не будет "белым по белому" */
html:not(.dark) .theme-switch{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
}
html:not(.dark) .theme-seg{ color: rgba(0,0,0,0.70); }
html:not(.dark) .theme-seg:hover{ color: #000; }
html:not(.dark) .theme-seg.active{ background: rgba(0,0,0,0.10); color:#000; }


/* Капсула переключателя темы (как на скрине) */
.theme-switch-wrap{
  position: fixed;
  top: 78px;      /* под верхней шапкой, над меню */
  right: 24px;
  z-index: 999999;
}

.theme-switch{
  display:inline-flex;
  border-radius: 999px;
  padding: 4px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}

.theme-seg{
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.80);
  border-radius: 999px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.theme-seg:hover{ color:#fff; }
.theme-seg.active{
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* На светлой теме */
html:not(.dark) .theme-switch{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
}
html:not(.dark) .theme-seg{ color: rgba(0,0,0,0.70); }
html:not(.dark) .theme-seg:hover{ color: #000; }
html:not(.dark) .theme-seg.active{ background: rgba(0,0,0,0.10); color:#000; }


/* Капсула рядом с {login} в шапке */
.theme-switch-inline{
  display:inline-flex;
  margin-left: 10px;
  vertical-align: middle;
}

.theme-switch{
  display:inline-flex;
  border-radius: 999px;
  padding: 4px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.10);
}

html.dark .theme-switch{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}

.theme-seg{
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(0,0,0,0.70);
}

html.dark .theme-seg{ color: rgba(255,255,255,0.80); }

.theme-seg:hover{ color: #000; }
html.dark .theme-seg:hover{ color: #fff; }

.theme-seg.active{
  background: rgba(0,0,0,0.10);
  color: #000;
}
html.dark .theme-seg.active{
  background: rgba(255,255,255,0.22);
  color: #fff;
}


/* Шапка: чтобы absolute работал внутри неё */
header.head{ position: relative; }

/* Капсула в правом верхнем углу шапки (рядом с профилем) */
.theme-switch-abs{
  position: absolute;
  right: 150px;   /* если налезает на профиль — увеличим */
  top: 14px;
  z-index: 9999;
}

/* Внешний вид капсулы */
.theme-switch{
  display:inline-flex;
  border-radius: 999px;
  padding: 4px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.10);
}
html.dark .theme-switch{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}

.theme-seg{
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(0,0,0,0.70);
}
html.dark .theme-seg{ color: rgba(255,255,255,0.80); }

.theme-seg.active{
  background: rgba(0,0,0,0.10);
  color: #000;
}
html.dark .theme-seg.active{
  background: rgba(255,255,255,0.22);
  color:#fff;
}


/* FIX: выравнивание логина + капсулы в шапке */
.login-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

/* капсула рядом с профилем */
.theme-switch-inline{ display:inline-flex; }


/* ОТКАТ: не трогаем login-wrap, иначе ломает верстку профиля */
.login-wrap{
  display: block !important;
}

/* Мини-капсула рядом с поиском (без влияния на {login}) */
.search-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.theme-switch-mini{
  display:inline-flex;
  padding:4px;
  border-radius:999px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.10);
}
html.dark .theme-switch-mini{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

.theme-mini-btn{
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  border-radius:999px;
  cursor:pointer;
  font-size:16px;
  line-height:34px;
}

.theme-mini-btn.active{
  background: rgba(0,0,0,0.10);
}
html.dark .theme-mini-btn.active{
  background: rgba(255,255,255,0.22);
}


header.head{ position: relative; }

.theme-switch-abs{
  position: absolute;
  top: 14px;
  right: 260px;
  z-index: 9999;
}

.theme-switch{
  display:inline-flex;
  padding:4px;
  border-radius:999px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.10);
}

html.dark .theme-switch{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

.theme-seg{
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  border-radius:999px;
  cursor:pointer;
  font-size:16px;
  line-height:36px;
}

.theme-seg.active{
  background: rgba(0,0,0,0.10);
}

html.dark .theme-seg.active{
  background: rgba(255,255,255,0.22);
}


/* === ВИД "как на картинке": серый pill + синяя активная кнопка === */
.theme-switch{
  background: #e9edf3 !important;
  border: 1px solid #d6dde8 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.theme-seg{
  width: 38px !important;
  height: 38px !important;
  font-size: 18px !important;
  color: #2d3a4a !important;
  background: transparent !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.theme-seg.active{
  background: #1677ff !important;     /* синий кружок */
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(22,119,255,0.35);
}


/* === ТЁМНАЯ ТЕМА: убираем белые фоны шапки/обёрток === */
html.dark body{
  background: #070A10 !important;
  color: #F4F7FF !important;
}

/* самые частые контейнеры в темах DLE: */
html.dark .head-wrap,
html.dark header.head,
html.dark .nav-wrap,
html.dark .wrapper,
html.dark .container,
html.dark .content,
html.dark .main,
html.dark .center,
html.dark .site,
html.dark #wrapper,
html.dark #content{
  background: transparent !important;
}

/* если где-то задан белый фон блоком */
html.dark div, 
html.dark section,
html.dark header{
  background-color: transparent;
}


/* === ФИКС: чтобы разделители "/" были видны в тёмной теме === */
html.dark .shortstory,
html.dark .fullstory,
html.dark .short,
html.dark .full,
html.dark .short-content,
html.dark .full-content{
  color: #F4F7FF;
}

/* Часто категории/метки идут внутри ссылок и span */
html.dark .shortstory a,
html.dark .fullstory a,
html.dark .short a,
html.dark .full a{
  color: rgba(244,247,255,0.92) !important;
}

/* А вот сам текст-разделитель обычно просто текст внутри контейнера */
html.dark .shortstory,
html.dark .fullstory,
html.dark .short,
html.dark .full{
  opacity: 1 !important;
}


/* === Капсула в тёмной теме: тёмный фон + синяя активная === */
html.dark .theme-switch{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.16) !important;
}
html.dark .theme-seg{
  color: rgba(255,255,255,0.80) !important;
}
html.dark .theme-seg.active{
  background: #1677ff !important;
  color: #fff !important;
}


/* ===== HERO (MOVIES IN STYLE) ===== */
.hero-block{
  margin: 18px auto 0;
  max-width: 1200px;
  padding: 34px 26px 24px;
  border-radius: 28px;
  background: radial-gradient(900px 420px at 70% 20%, rgba(255,0,0,0.20), transparent 55%),
              radial-gradient(700px 360px at 20% 85%, rgba(80,160,255,0.16), transparent 55%),
              #05070d;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}

.hero-inner{ max-width: 680px; }

.hero-kicker{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
}

.hero-title{
  margin: 14px 0 8px;
  font-weight: 900;
  font-size: 74px;
  line-height: 0.92;
  color: #ff2b2b;
}

.hero-title span{ color: #ff2b2b; }

.hero-sub{
  margin: 10px 0 18px;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  max-width: 520px;
}

.hero-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

.hero-btn-primary{
  background: #ff2b2b;
  color: #fff !important;
}

.hero-btn-primary:hover{ opacity: 0.92; }

.hero-btn-ghost{
  background: transparent;
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.16);
}

.hero-btn-ghost:hover{ border-color: rgba(255,255,255,0.28); }

/* якорь для scroll */
#catalog{ scroll-margin-top: 90px; }

/* адаптив */
@media (max-width: 900px){
  .hero-title{ font-size: 54px; }
}
@media (max-width: 520px){
  .hero-title{ font-size: 44px; }
  .hero-block{ padding: 26px 18px 18px; }
}


/* общий фон страницы под премиум-стиль */
html.dark body{
  background: #05070d !important;
}

/* чтобы центральная область не была белой */
html.dark .base,
html.dark .center,
html.dark .content-wrap,
html.dark .main-wrap{
  background: transparent !important;
}


/* === Премиум фон по всему сайту === */
html.dark body{
  background: #05070d !important;
}

/* Центровые контейнеры часто белые — убираем */
html.dark .head-wrap,
html.dark .nav-wrap,
html.dark .base,
html.dark .center,
html.dark .content-wrap,
html.dark .main-wrap,
html.dark .wrapper,
html.dark #content,
html.dark #wrapper{
  background: transparent !important;
}


/* ===== Premium cards (shortstory) ===== */
html.dark .premium-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);
  transition: transform .18s ease, border-color .18s ease;
}

html.dark .premium-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
}

html.dark .premium-img{
  position: relative;
  background: rgba(255,255,255,0.04);
}

html.dark .premium-img img{
  width: 100%;
  display: block;
  transform: scale(1);
  transition: transform .25s ease;
}

html.dark .premium-card:hover .premium-img img{
  transform: scale(1.03);
}

html.dark .premium-mask{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.55));
  pointer-events: none;
}

html.dark .premium-views{
  position: absolute;
  right: 10px;
  top: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.90);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
}

html.dark .premium-title{
  padding: 12px 14px 6px;
  color: rgba(255,255,255,0.94);
  font-weight: 700;
  line-height: 1.15;
}

html.dark .premium-cat{
  padding: 0 14px 10px;
  color: rgba(255,255,255,0.65);
  font-size: 12px;
}

/* фикс слэшей "/" и ссылок категорий */
html.dark .premium-cat a{
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none;
}
html.dark .premium-cat a:hover{
  color: rgba(255,255,255,0.95) !important;
  text-decoration: underline;
}
html.dark .premium-cat{
  opacity: 1 !important;
}

/* OnLine как небольшой бейдж */
html.dark .premium-time{
  padding: 0 14px 12px;
}
html.dark .premium-time span{
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.70);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* рейтинг аккуратно */
html.dark .premium-rate{
  padding: 0 14px 14px;
}


/* Премиум-стиль для синей кнопки "Открыть информацию" */
html.dark a.btn,
html.dark .btn,
html.dark .button,
html.dark input[type="button"],
html.dark button{
  border-color: rgba(255,255,255,0.14);
}

html.dark a[href*="info"],
html.dark .open-info,
html.dark .btn-info{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.88) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}


/* приглушаем декоративный верх в тёмной теме */
html.dark .head-wrap,
html.dark .speedbar-wrap{
  filter: brightness(0.85) saturate(0.85);
}


/* ровные отступы между карточками на главной */
html.dark .short-item{
  margin-bottom: 16px;
}


/* ===== SEO/Info block (main-seo.tpl) premium glass ===== */
html.dark .desc-text{
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.78) !important;
}

html.dark .desc-text h1,
html.dark .desc-text h2,
html.dark .desc-text h3{
  color: rgba(255,255,255,0.92) !important;
}

html.dark .desc-text a{
  color: rgba(255,255,255,0.88) !important;
}

/* кнопка "Закрыть Информацию" */
html.dark a.close-desc{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
}

html.dark a.close-desc:hover{
  border-color: rgba(255,255,255,0.22) !important;
}


/* По умолчанию скрываем длинный SEO-текст в тёмной теме */
html.dark .desc-text{
  display: none;
}

/* Если пользователь нажмёт "Открыть информацию" и на body появится класс show-desc — покажем */
html.dark body.show-desc .desc-text{
  display: block;
}


/* ===== INFO/SEO toggle (используется a.close-desc) ===== */
html.dark .desc-text{ display:none; }
html.dark body.show-desc .desc-text{ display:block; }

/* ссылка "Открыть/Закрыть Информацию" в премиум стиле */
html.dark a.close-desc{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration:none !important;
  margin: 12px auto 0;
}

html.dark a.close-desc:hover{
  border-color: rgba(255,255,255,0.22) !important;
}


/* FIX: кнопка "Открыть/Закрыть Информацию" не должна наезжать на hero */
html.dark a.close-desc{
  position: static !important;   /* убираем absolute/fixed если есть в старых стилях */
  float: none !important;
  clear: both !important;
}

/* ставим кнопку в нормальный поток и прижимаем вправо под hero */
html.dark a.close-desc{
  display: inline-flex !important;
  margin: 14px auto 0 !important;
}

/* если нужно именно вправо — оборачиваем через block + text-align */
html.dark a.close-desc{
  display: flex !important;
  justify-content: flex-end !important;
  max-width: 1200px;
  padding-right: 26px;
}


/* ===== УБРАТЬ "ТРЕУГОЛЬНИКИ" И СДЕЛАТЬ ВЕРХ ОДНОТОННЫМ (DARK) ===== */
html.dark .speedbar-wrap,
html.dark .head-wrap,
html.dark header.head{
  background: #05070d !important;
  background-image: none !important;
}

/* если треугольники сделаны псевдоэлементом */
html.dark .speedbar-wrap::before,
html.dark .speedbar-wrap::after,
html.dark .head-wrap::before,
html.dark .head-wrap::after,
html.dark header.head::before,
html.dark header.head::after{
  content: none !important;
  display: none !important;
}

/* иногда узор висит на body/html */
html.dark html,
html.dark body{
  background-image: none !important;
}


/* ===== УБРАТЬ УЗОР В СВЕТЛОЙ ТЕМЕ ТОЖЕ ===== */
html:not(.dark) .speedbar-wrap,
html:not(.dark) .head-wrap,
html:not(.dark) header.head{
  background-image: none !important;
}

html:not(.dark) .speedbar-wrap::before,
html:not(.dark) .speedbar-wrap::after,
html:not(.dark) .head-wrap::before,
html:not(.dark) .head-wrap::after,
html:not(.dark) header.head::before,
html:not(.dark) header.head::after{
  content: none !important;
  display: none !important;
}


/* ===== LIGHT: верхняя полоса читаемая ===== */
html:not(.dark) .speedbar-wrap,
html:not(.dark) .head-wrap{
  background: #ffffff !important;
}

/* текст сверху (хлебные крошки/заголовок) */
html:not(.dark) .speedbar-wrap,
html:not(.dark) .speedbar-wrap *{
  color: #0b0f19 !important;
}

/* убираем/приглушаем синий “ярлык” Movies in English */
html:not(.dark) .speedbar-wrap a,
html:not(.dark) .speedbar-wrap .speedbar,
html:not(.dark) .speedbar-wrap .speedbar a{
  background: transparent !important;
  color: #0b0f19 !important;
}

/* чтобы иконки/звёздочка не пропадали */
html:not(.dark) .speedbar-wrap img,
html:not(.dark) .speedbar-wrap .fa{
  filter: none !important;
}


/* ===== ЕДИНЫЙ СТИЛЬ КНОПКИ "Открыть/Закрыть Информацию" (везде) ===== */
a.close-desc{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: rgba(0,0,0,0.06) !important;
  color: rgba(11,15,25,0.85) !important;
  box-shadow: none !important;
}

/* чтобы она была справа под hero */
a.close-desc{
  max-width: 1200px;
  margin: 14px auto 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* ===== В ТЁМНОЙ ТЕМЕ: те же формы, но другие цвета ===== */
html.dark a.close-desc{
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.85) !important;
}

html.dark a.close-desc:hover{
  border-color: rgba(255,255,255,0.22) !important;
}


/* кнопка инфо внутри hero */
.hero-block{ position: relative; }

.hero-info-btn{
  position: absolute;
  right: 22px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
}

.hero-info-btn:hover{
  border-color: rgba(255,255,255,0.22);
}

/* в светлой теме (если hero на светлом фоне) */
html:not(.dark) .hero-info-btn{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
  color: rgba(11,15,25,0.85) !important;
}


/* старая ссылка внизу SEO-блока — прячем, используем кнопку в hero */
a.close-desc{ display: none !important; }


/* ===== ОДИНАКОВО В ОБЕИХ ТЕМАХ: кнопка "Открыть/Закрыть Информацию" ===== */
a.close-desc{
  display: flex !important;
  justify-content: flex-end !important;
  max-width: 1200px;
  margin: 14px auto 0 !important;
  padding-right: 26px;
  position: static !important;
  float: none !important;
  clear: both !important;

  height: 36px !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  background: rgba(0,0,0,0.10) !important;     /* видно на белом */
  border: 1px solid rgba(0,0,0,0.16) !important;
  color: rgba(0,0,0,0.75) !important;
  text-decoration: none !important;
}

/* в тёмной теме — те же формы, но светлые цвета */
html.dark a.close-desc{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.85) !important;
}


/* FIX: ссылка не должна быть полосой на всю ширину */
a.close-desc{
  display: inline-flex !important;  /* обратно в "пилюлю" */
  width: auto !important;
  max-width: none !important;
  margin: 14px 0 0 !important;
  padding: 0 16px !important;
}

/* выравнивание вправо делаем родителю */
.desc-text{
  text-align: right;
}


/* УБРАТЬ белую полосу: не трогаем desc-text */
.desc-text{ 
  text-align: initial !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Кнопка сама уходит вправо без контейнера */
a.close-desc{
  float: right !important;
  margin: 12px 26px 0 0 !important;
}


/* ===== ОДИНАКОВО ВЕЗДЕ (как в тёмной теме) ===== */
a.close-desc{
  /* убираем всё старое */
  position: static !important;
  float: none !important;
  clear: both !important;

  /* "премиум-полоса" */
  display: block !important;
  max-width: 1200px;
  margin: 12px auto 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.88) !important;
  text-decoration: none !important;
  box-shadow: none !important;

  /* текст вправо внутри полосы */
  text-align: right !important;
}

a.close-desc:hover{
  border-color: rgba(255,255,255,0.22) !important;
}


/* Кнопка инфо внутри hero — всегда видна */
.hero-block{ position: relative; }

.hero-info-btn{
  position: absolute;
  right: 22px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.16);
  color: rgba(0,0,0,0.75) !important;
  text-decoration: none !important;
}

/* в тёмной теме — как премиум */
html.dark .hero-info-btn{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.88) !important;
}

html.dark .hero-info-btn:hover{ border-color: rgba(255,255,255,0.22); }

/* Родную close-desc прячем, управление будет через кнопку в hero */
a.close-desc{ display:none !important; }

/* В DARK: убираем нижнюю "полосу" close-desc, оставляем только кнопку в hero */
html.dark a.close-desc{ display: none !important; }


/* В LIGHT: делаем hero-кнопку контрастной (чтобы было видно) */
html:not(.dark) .hero-info-btn{
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  color: rgba(0,0,0,0.80) !important;
}

html:not(.dark) .hero-info-btn:hover{
  background: rgba(255,255,255,0.90) !important;
}


/* HERO info button: всегда контрастная */
.hero-block{ position: relative; }

.hero-info-btn{
  position: absolute;
  right: 22px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none !important;

  /* БАЗА: светлая “пилюля” — отлично видна на градиенте */
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  color: rgba(0,0,0,0.82) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

.hero-info-btn:hover{
  background: rgba(255,255,255,0.95) !important;
}

/* В DARK — премиум-стекло */
html.dark .hero-info-btn{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.88) !important;
  box-shadow: none;
}

html.dark .hero-info-btn:hover{
  border-color: rgba(255,255,255,0.24) !important;
}

/* Спрятать нижнюю ссылку, чтобы не было дубля и конфликтов */
a.close-desc{ display: none !important; }

/* Текст/SEO скрыт пока не show-desc */
.desc-text{ display: none !important; }
body.show-desc .desc-text{ display: block !important; }


/* ===== Анимация выезда кнопки ===== */
.hero-info-btn{
  opacity: 0;
  transform: translateX(16px);
  transition: transform .35s ease, opacity .35s ease, box-shadow .2s ease;
  will-change: transform, opacity;
}

/* когда страница готова — показываем */
body.ui-ready .hero-info-btn{
  opacity: 1;
  transform: translateX(0);
}

/* hover эффект */
.hero-info-btn:hover{
  transform: translateX(0) translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}

/* для пользователей, кто отключает анимации */
@media (prefers-reduced-motion: reduce){
  .hero-info-btn,
  body.ui-ready .hero-info-btn{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== Анимация раскрытия блока информации ===== */
.desc-text{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .45s ease, opacity .25s ease, transform .25s ease;
}

body.show-desc .desc-text{
  max-height: 2000px; /* достаточно большое, чтобы вместить текст */
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .desc-text, body.show-desc .desc-text{
    transition: none !important;
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ===== ГАРАНТИЯ ВЫЕЗДА: старт пока нет ui-ready ===== */
body:not(.ui-ready) .hero-info-btn{
  opacity: 0 !important;
  transform: translateX(18px) !important;
}

body.ui-ready .hero-info-btn{
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: transform .45s ease, opacity .45s ease, box-shadow .2s ease !important;
}

body.ui-ready .hero-info-btn:hover{
  transform: translateX(0) translateY(-1px) !important;
}

@media (prefers-reduced-motion: reduce){
  body:not(.ui-ready) .hero-info-btn,
  body.ui-ready .hero-info-btn{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ===== FINAL OVERRIDE: анимация выезда hero-info-btn ===== */
body:not(.ui-slide) .hero-info-btn{
  opacity: 0 !important;
  transform: translateX(22px) !important;
}

body.ui-slide .hero-info-btn{
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: transform .55s ease, opacity .55s ease, box-shadow .25s ease !important;
  will-change: transform, opacity;
}

body.ui-slide .hero-info-btn:hover{
  transform: translateX(0) translateY(-1px) !important;
}


/* ===== Анимация раскрытия блока информации ===== */

/* ВАЖНО: не используем display:none, иначе анимации не будет */
.desc-text{
  max-width: 1200px;
  margin: 14px auto 0;
  padding: 18px 18px 16px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.78);

  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height .55s ease, opacity .25s ease, transform .25s ease;
}

/* Открыто */
body.show-desc .desc-text{
  max-height: 1200px;   /* если текста много — увеличим */
  opacity: 1;
  transform: translateY(0);
}

/* В светлой теме пусть блок будет светлее */
html:not(.dark) .desc-text{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.78);
  box-shadow: 0 18px 50px rgba(0,0,0,0.12);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .desc-text, body.show-desc .desc-text{
    transition: none !important;
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* FORCE: display не трогаем, иначе не анимируется */
.desc-text{ display: block !important; }

/* ===== Текст кнопки зависит от show-desc ===== */
#heroInfoBtn{ position: relative; }

#heroInfoBtn::after{
  content: "Открыть информацию";
}

body.show-desc #heroInfoBtn::after{
  content: "Закрыть инфу";
}

/* прячем исходный текст внутри <a> (чтобы не было дубля) */
#heroInfoBtn{ color: transparent !important; }
#heroInfoBtn::after{ color: inherit; }


/* FIX: откат псевдотекста, возвращаем нормальную кнопку */
#heroInfoBtn::after{ content: none !important; }
#heroInfoBtn{ color: #fff !important; }             /* для dark */
html:not(.dark) #heroInfoBtn{ color: #000 !important; } /* для light */


/* ===== FIX: heroInfoBtn обратно вправо-вниз ===== */
.hero-block{ position: relative !important; }

#heroInfoBtn.hero-info-btn{
  position: absolute !important;
  right: 22px !important;
  bottom: 18px !important;
  left: auto !important;
  top: auto !important;

  margin: 0 !important;
  float: none !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: 5 !important;
}

/* чтобы кнопки Play/Scroll не растягивались и не пересекались */
.hero-actions{ display: flex !important; gap: 10px !important; }


/* ===== LIGHT: скрытый info-блок не должен оставлять "полосу" ===== */
html:not(.dark) .desc-text{
  margin: 0 auto !important;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* когда закрыто — вообще схлопнуть */
html:not(.dark) body:not(.show-desc) .desc-text{
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  overflow: hidden !important;
}

/* когда открыто — можно вернуть красивую карточку */
html:not(.dark) body.show-desc .desc-text{
  margin: 14px auto 0 !important;
  padding: 18px 18px 16px !important;
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.12) !important;

  max-height: 1200px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ===== ОДИНАКОВЫЙ ФОН ИНФО-БЛОКА В ОБЕИХ ТЕМАХ (как в dark) ===== */
body.show-desc .desc-text{
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.86) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45) !important;
}

/* ссылки/заголовки внутри — тоже светлые */
body.show-desc .desc-text a{ color: rgba(255,255,255,0.90) !important; }
body.show-desc .desc-text h1,
body.show-desc .desc-text h2,
body.show-desc .desc-text h3{ color: rgba(255,255,255,0.92) !important; }


/* ===== УБРАТЬ ВНУТРЕННИЕ БЕЛЫЕ КАРТОЧКИ В desc-text ===== */
body.show-desc .desc-text,
body.show-desc .desc-text *{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Сам контейнер оставляем "glass" */
body.show-desc .desc-text{
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45) !important;
  padding: 18px 18px 16px !important;
}

/* Текст внутри */
body.show-desc .desc-text{
  color: rgba(255,255,255,0.86) !important;
}
body.show-desc .desc-text p,
body.show-desc .desc-text span,
body.show-desc .desc-text div,
body.show-desc .desc-text section{
  color: inherit !important;
}


/* ===== GLASS для инфо-блока ===== */
body.show-desc .desc-text{
  background: rgba(0,0,0,0.38) !important;          /* стекло */
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45) !important;
}

/* чтобы внутри не вылезали белые подложки */
body.show-desc .desc-text,
body.show-desc .desc-text *{
  background: transparent !important;
  box-shadow: none !important;
}


/* ===== FIX: стекло на контейнере, но текст читаемый ===== */
body.show-desc .desc-text{
  background: rgba(0,0,0,0.38) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: rgba(255,255,255,0.90) !important;
}

/* возвращаем нормальный цвет текста внутри */
body.show-desc .desc-text *{
  color: rgba(255,255,255,0.90) !important;
  opacity: 1 !important;
}

/* убираем только фон у внутренних "белых карточек", но не глушим текст */
body.show-desc .desc-text div,
body.show-desc .desc-text section,
body.show-desc .desc-text p{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}


/* ===== FINAL FIX: текст внутри desc-text всегда читаемый ===== */
body.show-desc .desc-text{
  background: rgba(0,0,0,0.38) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45) !important;
}

/* главное: убираем любую прозрачность, которую где-то повесили */
body.show-desc .desc-text,
body.show-desc .desc-text *{
  opacity: 1 !important;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: none !important;
  filter: none !important;
}

/* заголовки/красный текст оставим красным */
body.show-desc .desc-text h1,
body.show-desc .desc-text h2,
body.show-desc .desc-text h3,
body.show-desc .desc-text strong{
  color: rgba(255,80,80,0.98) !important;
}


/* ===== GLASS правильно: стекло слоем, текст сверху ===== */
body.show-desc .desc-text{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  padding: 18px 18px 16px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45) !important;
}

/* слой-стекло */
body.show-desc .desc-text::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 0 !important;
}

/* весь контент поверх стекла */
body.show-desc .desc-text > *{
  position: relative !important;
  z-index: 1 !important;
}

/* нормальная читаемость текста */
body.show-desc .desc-text,
body.show-desc .desc-text *{
  opacity: 1 !important;
  filter: none !important;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: none !important;
}

/* красные заголовки оставим красными */
body.show-desc .desc-text h1,
body.show-desc .desc-text h2,
body.show-desc .desc-text h3{
  color: rgba(255,80,80,0.98) !important;
}


/* ===== Убираем "белые уголки" у контейнера вокруг desc-text ===== */
body.show-desc .desc-text{
  margin-top: 0 !important;
}

/* Родители вокруг .desc-text (1-2 уровня) делаем прозрачными */
body.show-desc .desc-text,
body.show-desc .desc-text.parent,
body.show-desc .desc-text *{
  border-radius: 18px !important;
}

/* главное — обнуляем фон у обёрток, где могут быть белые углы */
body.show-desc .desc-text{
  box-sizing: border-box;
}

/* чаще всего белые углы у родителя .desc-text (div/section) */
body.show-desc .desc-text{
  background-clip: padding-box;
}

body.show-desc .desc-text{
  /* ок */
}

/* Убираем фон у ближайших контейнеров */
body.show-desc .desc-text{
  /* ничего */
}

body.show-desc .desc-text{
  /* ничего */
}

/* Практический фикс: родительские блоки делаем прозрачными */
body.show-desc .desc-text{
  /* already glass */
}

body.show-desc .desc-text{
  /* keep */
}

body.show-desc .desc-text{
  /* keep */
}

/* 1 уровень вверх */
body.show-desc .desc-text{
  /* keep */
}
body.show-desc .desc-text{
  /* keep */
}

/* РЕАЛЬНЫЙ ФИКС: прозрачный фон у родителей */
body.show-desc .desc-text{
  /* keep */
}
body.show-desc .desc-text{
  /* keep */
}

/* универсально: если обёртка есть, она обычно div вокруг desc-text */
body.show-desc .desc-text{
  /* keep */
}
body.show-desc .desc-text{
  /* keep */
}

/* самый эффективный: сделаем прозрачными div, которые содержат desc-text */
body.show-desc div:has(> .desc-text){
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}


/* LIGHT: фон страницы не чисто белый, чтобы не было "полосы" */
html:not(.dark) body{
  background: #f2f4f7 !important;
}

/* и основные обёртки тоже */
html:not(.dark) .head-wrap,
html:not(.dark) .base,
html:not(.dark) .center,
html:not(.dark) .content-wrap,
html:not(.dark) .main-wrap{
  background: transparent !important;
}


/* LIGHT: убираем светлую нижнюю кромку у hero */
html:not(.dark) .hero-block{
  border: 0 !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.10) !important;
}

/* если кромка рисуется псевдоэлементом */
html:not(.dark) .hero-block::before,
html:not(.dark) .hero-block::after{
  content: none !important;
  display: none !important;
}

/* мягкий "подклад" под hero, чтобы не было резкой полосы */
html:not(.dark) .hero-block{
  background-clip: padding-box;
}


/* ===== FIX: при закрытии не оставлять светлый контейнер ===== */
body:not(.show-desc) .desc-text{
  padding: 0 !important;
  margin: 0 auto !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:not(.show-desc) .desc-text::before{
  opacity: 0 !important;
}


/* ===== ПЛАВНО И БЕЗ МИГАНИЙ: scaleY вместо max-height ===== */
.desc-text{
  /* единый стиль (чтобы не прыгал фон) */
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45) !important;
  padding: 18px 18px 16px !important;

  /* стекло */
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  /* анимация */
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  transition: transform .35s ease, opacity .25s ease;
}

/* открыто */
body.show-desc .desc-text{
  transform: scaleY(1);
  opacity: 1;
}

/* текст всегда одинаковый, без "проскакиваний" */
.desc-text, .desc-text *{
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* на светлой теме тоже оставляем этот же вид (как ты хотел — один стиль) */
html:not(.dark) .desc-text,
html:not(.dark) .desc-text *{
  color: rgba(255,255,255,0.92) !important;
}

@media (prefers-reduced-motion: reduce){
  .desc-text, body.show-desc .desc-text{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* Отключаем старую max-height схему, чтобы не было layout-миганий */
.desc-text{
  max-height: none !important;
}


/* ===== Когда инфа закрыта — НЕ занимать место (чтобы фильмы были ближе) ===== */
body:not(.show-desc) .desc-text{
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: scaleY(0) !important;
  opacity: 0 !important;
}

/* Когда открыта — возвращаем размеры */
body.show-desc .desc-text{
  height: auto !important;
  margin: 14px auto 0 !important;
  padding: 18px 18px 16px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}


/* ===== FINAL: одинаковая анимация и вид на light/dark ===== */
.desc-text{
  /* единый вид */
  max-width: 1200px;
  margin: 14px auto 0;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45) !important;

  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  color: rgba(255,255,255,0.92) !important;

  /* анимация */
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  overflow: hidden !important;

  transition: transform .35s ease, opacity .25s ease, margin .25s ease, padding .25s ease;
}

/* текст внутри — одинаковый */
.desc-text, .desc-text *{
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* открыто */
body.show-desc .desc-text{
  transform: scaleY(1);
  opacity: 1;
  padding: 18px 18px 16px !important;
}

/* закрыто — не занимает место */
body:not(.show-desc) .desc-text{
  padding: 0 !important;
  margin: 0 auto !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 0 !important;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .desc-text, body.show-desc .desc-text{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    height: auto !important;
    padding: 18px 18px 16px !important;
    margin: 14px auto 0 !important;
  }
}


/* строка-фраза в hero вместо speedbar */
.hero-topline{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255,255,255,0.70);
  max-width: 720px;
}

html:not(.dark) .hero-topline{
  color: rgba(255,255,255,0.70); /* hero у нас тёмный, так что оставляем светлый */
}


/* убрать плашку "Movies in English" в верхней строке */
.speedbar-wrap b{
  display: none !important;
}


/* ===== ЧИТАЕМЫЙ INFO-БЛОК ===== */
body.show-desc .desc-text{
  max-width: 980px !important;          /* чтобы строка не была слишком длинной */
  margin: 16px auto 0 !important;
  padding: 22px 24px 20px !important;

  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(0,0,0,0.42) !important;   /* чуть темнее для читабельности */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  box-shadow: 0 22px 60px rgba(0,0,0,0.45) !important;

  color: rgba(255,255,255,0.92) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  letter-spacing: 0.01em;
}

/* внутри — нормальные абзацы */
body.show-desc .desc-text p{
  margin: 0 0 12px !important;
}

/* заголовки/выделение */
body.show-desc .desc-text h1,
body.show-desc .desc-text h2,
body.show-desc .desc-text h3{
  margin: 0 0 12px !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: rgba(255,80,80,0.98) !important;
}

/* ссылки */
body.show-desc .desc-text a{
  color: rgba(170,210,255,0.95) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(170,210,255,0.35);
}
body.show-desc .desc-text a:hover{
  border-bottom-color: rgba(170,210,255,0.75);
}

/* если внутри есть span/strong */
body.show-desc .desc-text strong{
  color: rgba(255,255,255,0.98) !important;
}

/* убираем любые белые подложки внутри */
body.show-desc .desc-text *{
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}


/* ===== Первый абзац в desc-text (лид) — читабельно ===== */
body.show-desc .desc-text p:first-of-type{
  color: rgba(255,255,255,0.95) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;

  padding: 12px 14px !important;
  margin: 0 0 14px !important;
  border-radius: 12px !important;

  background: rgba(0,0,0,0.20) !important; /* лёгкая подложка */
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* если внутри этого абзаца есть span (красный) — тоже делаем светлым */
body.show-desc .desc-text p:first-of-type span{
  color: rgba(255,255,255,0.95) !important;
}

/* на всякий случай убираем красный цвет у h1 внутри, если он попал не туда */
body.show-desc .desc-text h1,
body.show-desc .desc-text h2,
body.show-desc .desc-text h3{
  color: rgba(255,90,90,0.95) !important;
}


/* ===== FINAL LOOK for desc-text (glass + readable) ===== */
body.show-desc .desc-text{
  max-width: 980px !important;
  margin: 16px auto 0 !important;
  padding: 22px 24px 20px !important;

  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;

  background: rgba(0,0,0,0.38) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  box-shadow: 0 22px 60px rgba(0,0,0,0.45) !important;

  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.90) !important;
}

/* убрать любые “серые подложки” и красные стили внутри */
body.show-desc .desc-text *{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  color: rgba(255,255,255,0.90) !important;
}

/* ЛИД: первый абзац — белый, чуть крупнее, без красного */
body.show-desc .desc-text p:first-of-type{
  color: rgba(255,255,255,0.96) !important;
  font-size: 15px !important;
  font-weight: 650 !important;

  padding: 12px 14px !important;
  margin: 0 0 14px !important;
  border-radius: 12px !important;

  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Заголовки (если есть) — мягко красные */
body.show-desc .desc-text h1,
body.show-desc .desc-text h2,
body.show-desc .desc-text h3{
  color: rgba(255,90,90,0.95) !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
}

/* Ссылки */
body.show-desc .desc-text a{
  color: rgba(170,210,255,0.95) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(170,210,255,0.35) !important;
}
body.show-desc .desc-text a:hover{
  border-bottom-color: rgba(170,210,255,0.75) !important;
}


/* ===== ЛИД: самый первый видимый блок в desc-text (не важно div/h1/p) ===== */
body.show-desc .desc-text > *:first-child{
  color: rgba(255,255,255,0.96) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.6 !important;

  padding: 12px 14px !important;
  margin: 0 0 14px !important;
  border-radius: 12px !important;

  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* если там внутри ещё есть span/strong — тоже делаем белым */
body.show-desc .desc-text > *:first-child *{
  color: rgba(255,255,255,0.96) !important;
}


/* ===== Приводим инфо-блок к премиум виду (без серых вложенных карточек) ===== */

/* основной контейнер — темнее и "glass" */
body.show-desc .desc-text{
  background: rgba(0,0,0,0.40) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: rgba(255,255,255,0.90) !important;
}

/* убираем серые вложенные подложки внутри */
body.show-desc .desc-text div,
body.show-desc .desc-text section{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* обычные абзацы */
body.show-desc .desc-text p{
  margin: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
}

/* лид (первый блок) оставляем с лёгкой подложкой */
body.show-desc .desc-text > *:first-child{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
}


/* ===== ЖЁСТКО УБРАТЬ ВНУТРЕННИЕ СЕРЫЕ БЛОКИ ===== */
body.show-desc .desc-text div,
body.show-desc .desc-text section,
body.show-desc .desc-text blockquote{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* если где-то серый фон висит на вложенных "контейнерах" */
body.show-desc .desc-text [style*="background"],
body.show-desc .desc-text [style*="border"]{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ЛИД: только первый блок с подложкой, остальные без */
body.show-desc .desc-text > *:not(:first-child){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ===== FIX: libs.js не должен ломать анимацию display:none ===== */
.desc-wrap .desc-text{
  display: block !important;     /* перебиваем inline display:none */
}

/* ===== Контейнер инфо (glass) ===== */
.desc-wrap{
  max-width: 980px;
  margin: 16px auto 0;
  padding: 0;
}

.desc-wrap .desc-text{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);

  /* анимация */
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height .45s ease, opacity .25s ease, transform .25s ease;
}

/* открыто */
body.show-desc .desc-wrap .desc-text{
  max-height: 2000px;
  opacity: 1;
  transform: translateY(0);
}

/* ===== Убираем серые вложенные подложки, оставляем чистый текст ===== */
.desc-wrap .desc-text section.main-desc{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 22px 24px 20px !important;
  margin: 0 !important;
}

/* текст внутри */
.desc-wrap .desc-text,
.desc-wrap .desc-text *{
  color: rgba(255,255,255,0.92) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}


/* ЛИД: заголовок + первый абзац */
.desc-wrap .desc-text section.main-desc h1{
  margin: 0 0 12px !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: rgba(255,90,90,0.96) !important;
}

.desc-wrap .desc-text section.main-desc p{
  margin: 0 0 12px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* первый абзац делаем "лидом" */
.desc-wrap .desc-text section.main-desc p:first-of-type{
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-weight: 650 !important;
  color: rgba(255,255,255,0.96) !important;
}


/* ===== ABSOLUTE FINAL FIX (по реальной структуре из DevTools) ===== */

/* стекло на desc-text */
body.show-desc .desc-wrap .desc-text{
  background: rgba(0,0,0,0.40) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* убираем серую подложку у main-desc */
body.show-desc .desc-wrap .desc-text section.main-desc.clearfix{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* весь текст по умолчанию белый */
body.show-desc .desc-wrap .desc-text,
body.show-desc .desc-wrap .desc-text *{
  color: rgba(255,255,255,0.92) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* заголовок (верхняя строка) — делаем белым полностью (вместе со span) */
body.show-desc .desc-wrap .desc-text section.main-desc.clearfix h1,
body.show-desc .desc-wrap .desc-text section.main-desc.clearfix h1 *{
  color: rgba(255,255,255,0.96) !important;
  font-weight: 800 !important;
}

/* абзацы */
body.show-desc .desc-wrap .desc-text section.main-desc.clearfix p{
  margin: 0 0 12px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* первый абзац — лид */
body.show-desc .desc-wrap .desc-text section.main-desc.clearfix p:first-of-type{
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-weight: 650 !important;
}


/* УБРАТЬ подложку/рамку у "лида" (первого абзаца) */
body.show-desc .desc-wrap .desc-text section.main-desc.clearfix p:first-of-type{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 600 !important;  /* можно оставить чуть жирнее */
}


/* ===== Более читабельный шрифт для блока информации ===== */
.desc-wrap .desc-text,
.desc-wrap .desc-text *{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em;
}

.desc-wrap .desc-text h1{
  font-size: 18px !important;
  letter-spacing: 0.02em;
}


/* ===== Инфо-блок той же ширины, что и hero ===== */
.desc-wrap{
  width: 1100px !important;       /* подгони под свой hero (можно 1120/1200) */
  max-width: 92vw !important;     /* чтобы на маленьких экранах не вылезало */
  margin: 16px auto 0 !important;
}

/* сам контейнер текста растягиваем на всю ширину desc-wrap */
.desc-wrap .desc-text{
  max-width: 100% !important;
}


/* ===== Растянуть инфо-блок до ширины hero ===== */

/* и hero, и desc-wrap — одна ширина */
.hero-block,
.desc-wrap{
  width: min(1100px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* desc-text занимает всю ширину desc-wrap */
.desc-wrap .desc-text{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}


/* ===== FIX: одинаковая ширина/отступы инфо-блока в light/dark ===== */
.hero-block,
.desc-wrap{
  width: min(1100px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.desc-wrap .desc-text{
  width: 100% !important;
  max-width: 100% !important;
}

.desc-wrap .desc-text section.main-desc.clearfix{
  padding: 22px 24px 20px !important; /* одинаково в обеих темах */
  margin: 0 !important;
}


/* ===== FIX: одинаковый border-radius карточек фильмов ===== */
.short-item{
  border-radius: 12px !important;
  overflow: hidden !important;
}

.short-img,
.short-img img{
  border-radius: 12px !important;
}


/* ===== FIX: чтобы ширина не прыгала из-за вертикального скроллбара ===== */
html{
  scrollbar-gutter: stable both-edges;
}


/* ===== FORCE: одинаковая ширина section.main-desc в обеих темах ===== */
.desc-wrap .desc-text section.main-desc.clearfix{
  width: 942px !important;      /* ставим как в светлой теме */
  max-width: 100% !important;   /* чтобы на узких экранах не ломалось */
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}


/* ===== KILL inline display:none на desc-text ===== */
.desc-wrap .desc-text[style]{
  display: block !important;
}

/* Закрыто — скрываем через max-height/opacity, а не display */
body:not(.show-desc) .desc-wrap .desc-text{
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transform: translateY(-10px) !important;
  pointer-events: none !important;
}

body.show-desc .desc-wrap .desc-text{
  max-height: 3000px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Старая кнопка пусть не работает и не мешает */
a.close-desc{ display:none !important; }
a.close-desc{ display:none !important; }
.desc-wrap .desc-text section.main-desc.clearfix{
  width: 942px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ===== FORCE одинаковая геометрия main-desc в обеих темах ===== */
.desc-wrap .desc-text{
  width: 980px !important;
  max-width: 92vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ВАЖНО: main-desc = 100% от desc-text */
.desc-wrap .desc-text section.main-desc.clearfix{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 22px 24px 20px !important; /* одинаково */
  border: 0 !important;
}

/* На всякий случай: убить любые dark/light переопределения ширины */
html.dark .desc-wrap .desc-text section.main-desc.clearfix,
html:not(.dark) .desc-wrap .desc-text section.main-desc.clearfix{
  width: 100% !important;
  max-width: 100% !important;
}


/* ===== Реальное выравнивание: один padding/центрирование в обеих темах ===== */
.desc-wrap{
  width: min(1100px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.desc-wrap .desc-text{
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;      /* убираем любые padding у desc-text */
  margin: 0 !important;
}

.desc-wrap .desc-text section.main-desc.clearfix{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 22px 24px 20px !important;
  box-sizing: border-box !important;
}


/* ===== Pixel-perfect: одинаковая центровка hero и info в light/dark ===== */
.hero-block,
.desc-wrap{
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: min(1100px, 92vw) !important;  /* одна ширина для обоих */
  margin: 0 !important;                /* margin auto больше не нужен */
  box-sizing: border-box !important;
}

/* сам текстовый контейнер на всю ширину desc-wrap */
.desc-wrap .desc-text{
  width: 100% !important;
  max-width: 100% !important;
}


/* ===== FIX: одинаковая геометрия текста в info-блоке (light/dark) ===== */

/* убираем любые “наследованные” ограничения */
.desc-wrap .desc-text .main-desc{
  max-width: none !important;
}

/* main-desc всегда 100% ширины desc-text */
.desc-wrap .desc-text section.main-desc.clearfix{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;

  /* ВАЖНО: одинаковые боковые отступы в обеих темах */
  padding-left: 25px !important;
  padding-right: 25px !important;
  padding-top: 22px !important;
  padding-bottom: 20px !important;

  margin: 0 !important;
}


/* аккуратные одинаковые поля внутри инфо-блока */
.desc-wrap .desc-text section.main-desc.clearfix{
  padding: 22px 24px 20px !important;
  box-sizing: border-box !important;
}


/* ===== одинаковый рендер шрифта в light/dark ===== */
html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* инфо-блок — фиксируем вес/межбукв. чтобы не "гулял" */
.desc-wrap .desc-text,
.desc-wrap .desc-text *{
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

html{ overflow-y: scroll; }  /* всегда держим место под scrollbar */

/* ===== отключаем transitions на время смены темы, чтобы не было промежуточных “прыжков” ===== */
html.theme-changing *{
  transition: none !important;
  animation: none !important;
}


html.theme-changing *{
  transition: none !important;
  animation: none !important;
}


/* ===== УБРАТЬ "ПРЫЖОК" ПРИ СМЕНЕ ТЕМЫ: фиксируем геометрию шапки ===== */
/* Всегда держим место под scrollbar (иначе тоже бывают сдвиги) */
html{ overflow-y: scroll; }

/* Шапка и меню: делаем одинаковые отступы/высоты в обеих темах */
.head-wrap,
.nav-wrap{
  box-sizing: border-box !important;
}

/* ВАЖНО: минимальная высота шапки — берём максимальную (чтобы dark не был ниже) */
.head-wrap{ min-height: 120px !important; }   /* если надо — подними до 130/140 */
.nav-wrap{  min-height: 60px  !important; }   /* меню */

html.dark .head-wrap,
html:not(.dark) .head-wrap{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html.dark .nav-wrap,
html:not(.dark) .nav-wrap{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* На всякий случай: запрещаем любые margin-top/bottom, которые могут отличаться в темах */
html.dark .head-wrap *,
html.dark .nav-wrap *,
html:not(.dark) .head-wrap *,
html:not(.dark) .nav-wrap *{
  box-sizing: border-box !important;
}


/* убрать полосу/тень под верхним меню */
.nav-wrap{
  box-shadow: none !important;
  border: 0 !important;
}
.nav-wrap:before,
.nav-wrap:after{
  display: none !important;
}


/* убрать полосу/тень под верхним меню */