/* DramaScope — Night Theme
   Полная замена warm cream / burgundy / brown палитры на холодную ночную.
   Подключается последним <link>, перебивает FINAL OVERRIDE через !important. */

/* Значения hero-чипов (СЕРИЙ 33 / СТРАНА Китай) — почти белые на night-теме.
   На day-теме остаётся inline '#1e6fd9' (тёмно-синий) для контраста. */
.ds-drama-chip-value { color: #f0f8ff !important; }

/* ============================================================
   0. Global +3pt font bump для мелких, +2 для средних — все inline font-size крупнее
   (Атрибут-селекторы не каскадируются: rule 11→14 не зацепит 10px-элемент)
   ============================================================ */
[style*="font-size: 9px"]    { font-size: 12px !important; }
[style*="font-size: 10px"]   { font-size: 13px !important; }
[style*="font-size: 10.5px"] { font-size: 13.5px !important; }
[style*="font-size: 11px"]   { font-size: 14px !important; }
[style*="font-size: 11.5px"] { font-size: 14.5px !important; }
[style*="font-size: 12px"]   { font-size: 15px !important; }
[style*="font-size: 12.5px"] { font-size: 15.5px !important; }
[style*="font-size: 13px"]   { font-size: 16px !important; }
[style*="font-size: 13.5px"] { font-size: 16.5px !important; }
[style*="font-size: 14px"]   { font-size: 17px !important; }
[style*="font-size: 14.5px"] { font-size: 17.5px !important; }
[style*="font-size: 15px"]   { font-size: 18px !important; }
[style*="font-size: 16px"]   { font-size: 19px !important; }
[style*="font-size: 17px"]   { font-size: 20px !important; }
[style*="font-size: 18px"]   { font-size: 21px !important; }
[style*="font-size: 19px"]   { font-size: 22px !important; }
[style*="font-size: 20px"]   { font-size: 23px !important; }
[style*="font-size: 22px"]   { font-size: 25px !important; }
[style*="font-size: 24px"]   { font-size: 27px !important; }
[style*="font-size: 26px"]   { font-size: 29px !important; }
[style*="font-size: 28px"]   { font-size: 31px !important; }
[style*="font-size: 30px"]   { font-size: 33px !important; }
[style*="font-size: 32px"]   { font-size: 35px !important; }
[style*="font-size: 34px"]   { font-size: 37px !important; }
[style*="font-size: 36px"]   { font-size: 39px !important; }
[style*="font-size: 40px"]   { font-size: 43px !important; }

/* Узкое усиление для главного: меню и названия дорам */
nav button { font-size: 16px !important; }
.ds-cat-strip button { font-size: 16px !important; }
.ds-card .title,
img.ds-poster ~ div + div > div:first-child,
[style*="rgb(200, 216, 240)"],
[style*="rgb(31, 31, 31)"] {
  font-size: 15px !important;
}

/* ============================================================
   1. CSS-переменные на :root
   ============================================================ */
:root {
  --bg:      #050912 !important;
  --bg2:     #131c3a !important;
  --bg3:     #16213f !important;
  --bg4:     #1a2548 !important;
  --border:  rgba(140,180,235,0.18) !important;
  --accent:  #5ed7c6 !important;
  --accent2: #9fe9e0 !important;
  --text:    #eef3ff !important;
  --text2:   #c7d2ec !important;
  --text3:   #94a3c4 !important;
  --green:   #7fbd9a !important;
  --red:     #e05858 !important;
  --gold:    #f5c518 !important;
  --purple:  #a87dff !important;
  --ds-burgundy:      #3b5bcc !important;
  --ds-burgundy-soft: #5577e0 !important;
  --ds-ink:           #eef3ff !important;
  --ds-bg:            #050912 !important;
  --ds-surface:       #14203d !important;
  --ds-surface-2:     #1c2752 !important;
  --ds-ink-soft:      #c7d2ec !important;
  --ds-muted:         #94a3c4 !important;
  --ds-muted-2:       #7d88a3 !important;
  --ds-blue:          #7aa8ff !important;
  --ds-blue-soft:     #5577c4 !important;
  --ds-amber:         #f5c518 !important;
  --ds-green:         #7fbd9a !important;
  --ds-purple:        #a87dff !important;
  --ds-purple-soft:   #c9b6ff !important;
  --ds-border:        rgba(140,180,235,0.18) !important;
  --ds-divider:       rgba(140,180,235,0.10) !important;
}

/* ============================================================
   2. Слоистый фон: html (внешний), body (transparent), #root>div (остров)
   ============================================================ */
html {
  background: #000000 !important;
}
body {
  background: transparent !important;
  color: #eef3ff !important;
}
#root > div {
  background: #05080f !important; /* центр — сине-чёрный (был #0a1226 дарк-нэви) */
  box-shadow:
    0 0 100px rgba(0,0,0,0.95),
    0 0 0 1px rgba(140,200,255,0.16),
    inset 0 1px 0 rgba(180,220,255,0.22),
    inset 0 -1px 0 rgba(140,200,255,0.12) !important;
}

/* Hero упирается в фиксированный навбар: верх героя ровно под навбаром (gap = 0).
   --nav-height выставляется ResizeObserver-ом в Nav (index.html) и обновляется
   при изменении высоты шапки (ретайл на узких ширинах, появление бейджей). */
.ds-hero-banner { margin-top: var(--nav-height, 56px) !important; }

/* ============================================================
   3. Текст
   ============================================================ */
h1, h2, h3, h4, h5, h6 { color: #f1f5ff !important; }
main h1, main h2 { color: #f1f5ff !important; }
main p { color: #c7d2ec !important; }

/* Названия дорам / год — точечные замены тёплых rgb */
[style*="rgb(200, 216, 240)"],
[style*="rgb(31, 31, 31)"],
[style*="rgb(58, 58, 58)"] {
  color: #eef3ff !important;
  font-weight: 600 !important;
}
[style*="rgb(77, 106, 154)"],
[style*="rgb(107, 107, 107)"],
[style*="rgb(138, 138, 138)"] {
  color: #c0d4f5 !important;
}

/* Тёмно-коричневый текст → moonlight */
[style*="color: rgb(90, 68, 56)"],
[style*="color:rgb(90,68,56)"] {
  color: #eef3ff !important;
}
[style*="color: rgb(139, 111, 98)"],
[style*="color:rgb(139,111,98)"] {
  color: #c7d2ec !important;
}
[style*="color: rgb(197, 138, 130)"],
[style*="color:rgb(197,138,130)"] {
  color: #8ec4ff !important;
}
[style*="color: rgb(34, 78, 159)"],
[style*="color:rgb(34,78,159)"] {
  color: #b8e6dd !important;
}
[style*="color: rgb(217, 168, 163)"],
[style*="color: rgb(165, 138, 124)"] {
  color: #aed4ff !important;
}

/* ============================================================
   4. Hero
   ============================================================ */
/* Оверлеи-градиенты на hero убраны — слайды показываются чистой картинкой.
   (Раньше тут были тёмно-синие fade'ы; теперь оба div'а делаются прозрачными.) */
.ds-hero-banner > div[style*="linear-gradient(to right"],
.ds-hero-banner > div[style*="linear-gradient(to top"] {
  background: transparent !important;
}

/* News-карточка на hero (NewsCard variant="hero") */
.ds-hero-banner [style*="rgb(8, 10, 22)"],
.ds-hero-banner [style*="rgba(8,10,22"] {
  background: rgba(8,14,30,0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(140,180,235,0.14) !important;
}

/* Hero CTA кнопки */
.ds-btn-primary {
  background: linear-gradient(135deg, #0abab5 0%, #1ed4ce 100%) !important;
  color: #0a1226 !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(10, 186, 181, 0.32) !important;
}
.ds-btn-primary:hover {
  background: linear-gradient(135deg, #1fcac5 0%, #3ee0d9 100%) !important;
  box-shadow: 0 6px 22px rgba(10, 186, 181, 0.45) !important;
}
.ds-btn-primary * { color: #0a1226 !important; }

.ds-btn-secondary {
  background: linear-gradient(135deg, #e8f9f6 0%, #f5fcfb 100%) !important;
  color: #0a1226 !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(10, 186, 181, 0.12) !important;
}
.ds-btn-secondary:hover {
  background: linear-gradient(135deg, #d8f5f1 0%, #ecfaf7 100%) !important;
  box-shadow: 0 4px 14px rgba(10, 186, 181, 0.22) !important;
}
.ds-btn-secondary * { color: #0a1226 !important; }

/* AI Recommendations кнопка — оставляем фиолетовой (фирменная) */

/* Drama of the Week mini-card */
.ds-hero-banner [style*="rgb(180, 130, 120)"],
.ds-hero-banner [style*="rgba(20,135,203"],
.ds-hero-banner [style*="rgba(20, 135, 203"] {
  background: rgba(140,200,255,0.18) !important;
  border: 1px solid rgba(140,200,255,0.45) !important;
  color: #cdeef0 !important;
}
/* «8.8» рейтинг */
.ds-hero-banner [style*="color: rgb(58, 58, 58)"] {
  color: #8ec4ff !important;
}
/* Звезда ★ */
.ds-hero-banner [style*="color: rgb(212, 160, 23)"],
.ds-hero-banner [style*="color: rgb(245, 197, 24)"] {
  color: #ffd866 !important;
}

/* ============================================================
   5. Верхняя навигация
   ============================================================ */
#root > div > nav {
  background: rgba(8,12,26,0.45) !important;   /* Apple glass — более прозрачный */
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border: none !important;
  border-radius: 18px !important;               /* плавающие скруглённые края */
  box-shadow: 0 6px 24px rgba(0,0,0,0.4) !important;
}
/* Тонкая обводка аватара — ночью Tiffany */
:root { --avatar-ring: rgba(10,186,181,0.85); }
/* Logo — layered shadows for depth: tight + ambient + tiffany glow */
nav img[alt="DramaScope"] {
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6))
    drop-shadow(0 8px 20px rgba(10, 18, 38, 0.85))
    drop-shadow(0 0 22px rgba(10, 186, 181, 0.18));
}
#root > div > nav button,
#root > div > nav a,
#root > div > nav span,
#root > div > nav input {
  color: #e6ecf7 !important;
}
/* Auth-кнопка — иконка-человечек + дропдаун с логином. Сбрасываем все старые стили. */
#root > div > nav .ds-auth-signup,
#root > div > nav .ds-auth-signin {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
  font-weight: 500 !important;
  color: #b8c5d6 !important;
  text-decoration: none !important;
}
#root > div > nav .ds-auth-signup:hover,
#root > div > nav .ds-auth-signin:hover {
  background: transparent !important;
  color: #e6ecf7 !important;
}
/* Back-to-actors на десктопе — text-link стиль (как mobile), sky-blue */
.ds-actor-back-arrow {
  color: #7bc3ff !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Auth dropdown — NIGHT: тёмная карточка, dark-tiffany (#0abab5) кнопка как лого */
.ds-auth-dropdown {
  background: rgba(14,20,40,0.96);
  border: 1px solid rgba(140,180,235,0.18);
}
.ds-auth-dropdown-arrow {
  background: rgba(14,20,40,0.96);
  border-left: 1px solid rgba(140,180,235,0.18);
  border-top: 1px solid rgba(140,180,235,0.18);
}
.ds-auth-dropdown-text { color: #cfd8e8; }
.ds-auth-dropdown-btn {
  background: #0abab5;
  color: #0a1226;
  box-shadow: 0 2px 10px rgba(10,186,181,0.32);
}
.ds-auth-dropdown-btn:hover {
  background: #1fcac5;
  box-shadow: 0 3px 14px rgba(10,186,181,0.45);
}
/* Lang menu items — night: светло-голубой текст, tiffany для активного */
.ds-lang-item { color: #b8c5d6; }
.ds-lang-item:hover { background: rgba(10,186,181,0.10) !important; color: #ffffff; }
.ds-lang-item[data-active="true"] { color: #0abab5; }
/* Premium pill in nav — gold text matching desktop hero version */
#root > div > nav .ds-nav-premium,
#root > div > nav .ds-nav-premium svg {
  color: #ffd770 !important;
  stroke: #ffd770 !important;
}
/* Nav center menu items — почти белый light tiffany */
#root > div > nav .ds-nav-item > button {
  color: #e3f8f3 !important;
}
/* Brand text logo — 福 и точка Tiffany, DramaScope и Asia белые */
#root > div > nav .ds-brand-fu { color: #0abab5 !important; }
#root > div > nav .ds-brand-name { color: #ffffff !important; }
#root > div > nav .ds-brand-dot { color: #0abab5 !important; }
#root > div > nav .ds-brand-asia { color: #ffffff !important; }
/* Hover на пунктах меню — brighter tiffany */
#root > div > nav > div > div:nth-child(2) > button:hover,
#root > div > nav .ds-nav-item > button:hover {
  background: rgba(94,215,198,0.12) !important;
  color: #ffffff !important;
}
/* Активный пункт (бывший rgb(201,122,115)) — light Tiffany */
#root > div > nav > div > div:nth-child(2) > button[style*="rgb(201, 122, 115)"],
#root > div > nav > div > div:nth-child(2) > button[style*="rgba(74,158,255,0.13)"],
#root > div > nav > div > div:nth-child(2) > button[style*="rgba(74, 158, 255, 0.13)"] {
  background: linear-gradient(135deg, #5ed7c6, #9fe9e0) !important;
  color: #0a1226 !important;
  border-bottom-color: #5ed7c6 !important;
}

/* Поиск — мягкий полупрозрачный pill, тонкий разделитель перед иконкой-лупой */
.ds-topsearch {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 24px !important;
}
.ds-topsearch input,
.ds-topsearch input:focus,
.ds-topsearch input:focus-visible,
.ds-topsearch input:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #eef3ff !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.ds-topsearch input::placeholder { color: rgba(238,243,255,0.55) !important; }
.ds-topsearch__submit {
  border: none !important;
  background: transparent !important;
  color: #eef3ff !important;
  border-left: 1px solid rgba(238,243,255,0.22) !important;
  border-radius: 0 !important;
}
.ds-topsearch__submit svg { stroke: currentColor; }
.ds-topsearch input {
  color: #eef3ff !important;
  background: transparent !important;
}
.ds-topsearch input::placeholder { color: #94a3c4 !important; }

/* ============================================================
   6. Меню под hero (.ds-cat-strip)
   ============================================================ */
.ds-cat-strip {
  background: linear-gradient(135deg, #131c3a 0%, #1c2752 100%) !important;
  color: #9fe9e0 !important;
  padding: 0 80px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  border: 0 !important;
}
.ds-cat-strip > div {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}
.ds-cat-strip * { color: #9fe9e0 !important; }
.ds-cat-strip button:hover,
.ds-cat-strip a:hover {
  background: rgba(120,220,210,0.14) !important;
  color: #c9f5ee !important;
  border-radius: 8px !important;
}
/* Ромбики */
.ds-cat-strip .ds-menu-diamond {
  background: #5ed7c6 !important;
}

/* ============================================================
   7. Карточки сайдбара
   ============================================================ */
/* Latest News / Upcoming / Active Topics — единая поверхность */
.ds-home-grid > div:last-child > div[style*="rgb(248, 230, 220)"],
.ds-home-grid > div:last-child > div[style*="rgba(248, 230, 220"],
.ds-home-grid > div:last-child > div[style*="background: var(--bg2)"] {
  background: #131c3a !important;
  border: 1px solid rgba(140,180,235,0.18) !important;
  color: #eef3ff !important;
}

/* Тёплые подложки строк (бывший rgba(20,135,203,0.18)) → прозрачный + ночной бордер */
[style*="rgba(20, 135, 203, 0.18)"],
[style*="rgba(20,135,203,0.18)"],
[style*="rgba(20, 135, 203, 0.06)"],
[style*="rgba(20,135,203,0.06)"] {
  background: transparent !important;
  border-color: rgba(140,180,235,0.10) !important;
}

/* AI Recommendations — мягкий приглушённый периwinkle (нежные цвета) */
.ds-ai-card {
  background: linear-gradient(140deg, #2a2b46 0%, #353556 45%, #3e3d68 100%) !important;
  border: 1px solid rgba(142,157,196,0.32) !important;
  box-shadow:
    0 6px 22px rgba(60,60,120,0.28),
    0 0 0 1px rgba(159,203,233,0.08) inset !important;
  color: #d8d4e8 !important;
}
.ds-ai-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 85% 12%, rgba(159,203,233,0.18), transparent 55%),
    radial-gradient(circle at 12% 90%, rgba(142,157,196,0.20), transparent 60%) !important;
  pointer-events: none !important;
  display: block !important;
}
.ds-ai-card * { color: #f3ecff !important; }
.ds-ai-card h1, .ds-ai-card h2, .ds-ai-card h3, .ds-ai-card h4 { color: #ffffff !important; }
.ds-ai-card a, .ds-ai-card button {
  color: #ffffff !important;
  background: rgba(180,140,255,0.22) !important;
  border: 1px solid rgba(200,160,255,0.50) !important;
  box-shadow: 0 2px 10px rgba(120,60,220,0.20) !important;
}
.ds-ai-card a:hover, .ds-ai-card button:hover {
  background: rgba(180,140,255,0.36) !important;
  border-color: rgba(220,190,255,0.75) !important;
  box-shadow: 0 4px 14px rgba(120,60,220,0.30) !important;
}
/* Ромбик "✦" / .ds-menu-diamond внутри AI Recommendations — лавандовый */
.ds-ai-card .ds-menu-diamond {
  background: #c9b6ff !important;
}

/* ============================================================
   8. Карусели — 6 карточек в ряд, sky-blue стрелки
   ============================================================ */
/* Скрытие нативной полосы прокрутки и мягкий fade справа,
   чтобы обрезанная карточка у края тающим градиентом выглядела интенционально. */
[style*="padding: 4px 24px 12px"] {
  scrollbar-width: none !important;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 60px), transparent 100%) !important;
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 60px), transparent 100%) !important;
}
[style*="padding: 4px 24px 12px"]::-webkit-scrollbar { display: none !important; }

/* Стрелки next/prev — light Tiffany */
[style*="rgba(8,10,22,0.92)"],
[style*="rgba(8, 10, 22, 0.92)"] {
  background: linear-gradient(135deg, #5ed7c6 0%, #9fe9e0 100%) !important;
  color: #0a1226 !important;
  border: 1px solid rgba(94, 215, 198, 0.55) !important;
  box-shadow: 0 4px 14px rgba(94, 215, 198, 0.28) !important;
  font-weight: 700 !important;
}
[style*="rgba(8,10,22,0.92)"]:hover,
[style*="rgba(8, 10, 22, 0.92)"]:hover {
  background: linear-gradient(135deg, #7fe2d4 0%, #b8eee6 100%) !important;
}

/* ============================================================
   9. Заголовки секций карусели — выровнены с постерами по 24px
   ============================================================ */
/* Padding 0 24px остаётся (как у scroll-контейнера), не трогаем — иначе заголовок съезжает левее постеров. */

/* «View all →» — белый, чтобы читался на тёмном фоне */
[style*="justify-content: space-between"][style*="padding: 0 24px"] > button,
[style*="justify-content: space-between"][style*="padding: 0 24px"] > a {
  color: #ffffff !important;
  opacity: 0.95 !important;
}

/* ============================================================
   10. Футер
   ============================================================ */
footer {
  background: #131c3a !important;
  color: #c7d2ec !important;
  border-top: 1px solid rgba(140,180,235,0.12) !important;
}
footer * { color: #c7d2ec !important; }
footer a { color: #8ec4ff !important; }

/* ============================================================
   11. Формы и скроллбары
   ============================================================ */
input, textarea, select {
  background: rgba(20,28,56,0.7) !important;
  color: #eef3ff !important;
  border: 1px solid rgba(140,180,235,0.18) !important;
}
input::placeholder, textarea::placeholder { color: #94a3c4 !important; }

::-webkit-scrollbar-track { background: #050912 !important; }
::-webkit-scrollbar-thumb { background: #26345c !important; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a4d80 !important; }
* { scrollbar-color: #26345c #050912 !important; }

/* ============================================================
   12. Sweep тёплых rgb (атрибут-селекторы по inline-стилю)
   ============================================================ */
[style*="rgb(255, 247, 241)"],
[style*="rgb(255,247,241)"],
[style*="background: rgb(255, 247, 241)"] {
  background-color: #16213f !important;
}
[style*="rgb(253, 247, 224)"],
[style*="rgb(253,247,224)"] {
  background-color: #14203d !important;
}
[style*="rgb(250, 240, 208)"],
[style*="rgb(250,240,208)"] {
  background-color: #060a18 !important;
}
[style*="rgb(248, 230, 220)"],
[style*="rgb(248,230,220)"] {
  background-color: #1a2444 !important;
}
[style*="rgb(250, 249, 245)"],
[style*="rgb(250,249,245)"] {
  background-color: #11193a !important;
}
[style*="rgb(245, 232, 220)"],
[style*="rgb(244, 230, 218)"] {
  background-color: #1a2444 !important;
}
/* Бывшие бордовые/розовые - кроме .ds-btn-primary, который уже задан выше */
[style*="rgb(122, 46, 58)"] { background-color: #1f3a8a !important; }
[style*="rgb(161, 67, 82)"] { background-color: #5ed7c6 !important; }

/* Бывшие тёплые тонкие подложки */
[style*="rgba(232, 183, 176"],
[style*="rgba(232,183,176"] {
  background-color: rgba(140,200,255,0.15) !important;
}

/* Пастельные сайдбар-градиенты → ночные */
[style*="rgb(233, 213, 255)"],
[style*="rgb(252, 231, 243)"],
[style*="rgb(251, 207, 232)"],
[style*="rgb(243, 232, 255)"] {
  background-image: linear-gradient(135deg, #1a2756 0%, #25315e 100%) !important;
}

/* ============================================================
   12.4 Drama detail page — «Network: iQiyi» — размер как у года,
   лейбл в Tiffany */
.ds-drama-meta {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.ds-drama-meta .ds-label {
  color: #9fe9e0 !important;
}
.ds-drama-meta .ds-network-name {
  color: #eef3ff !important;
  font-weight: 600 !important;
}

/* ============================================================
   12.5 Уведомление-бейдж на колокольчике — HOT-style красный градиент
   (var(--red) у нас холодно-синий, но конкретно эта плашка должна
   быть красной, как «HOT» в новостях) */
[style*="background: var(--red)"],
[style*="background:var(--red)"] {
  background: linear-gradient(135deg, #ff6b35, #ff3d3d) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(255, 61, 61, 0.45) !important;
}

/* ============================================================
   12.6 Постеры — менее закруглённые углы (12 → 4 px) */
div:has(> img.ds-poster) {
  border-radius: 4px !important;
}
img.ds-poster {
  border-radius: 4px !important;
}
img.ds-poster ~ div:last-child {
  border-radius: 0 0 4px 4px !important;
}

/* ============================================================
   12.63 Hero backdrop — заполняем весь блок (cover), как на дневной теме.
   Раньше было object-fit: contain — получалось узко с полями по бокам. */
.ds-hero-banner img.ds-backdrop {
  object-fit: cover !important;
  object-position: center !important;
}

/* ============================================================
   12.64 Light-panel (Advanced Search) — тёмный текст на белой Tiffany подложке */
.ds-light-panel,
.ds-light-panel * {
  color: #0a1226 !important;
}
/* Chip buttons inside light-panel — white text on dark bg */
.ds-light-panel button {
  color: #ffffff !important;
}
/* Active chip (tiffany bg) — keep dark navy text */
.ds-light-panel button[style*="var(--accent)"] {
  color: #0a1226 !important;
}
/* Inputs (year, status, etc) — white bg, dark navy text */
.ds-light-panel input,
.ds-light-panel textarea,
.ds-light-panel select {
  background: #ffffff !important;
  border: 1px solid rgba(94, 215, 198, 0.5) !important;
  color: #0a1226 !important;
}
.ds-light-panel input::placeholder,
.ds-light-panel textarea::placeholder {
  color: #7d88a3 !important;
}
/* Range slider — bright tiffany accent (replaces system blue) */
.ds-light-panel input[type="range"],
input[type="range"] {
  accent-color: #0abab5 !important;
  background: transparent !important;
  border: none !important;
}
.ds-light-panel input::placeholder,
.ds-light-panel textarea::placeholder {
  color: #6b7384 !important;
}
.ds-light-panel button {
  color: inherit;
}

/* ============================================================
   12.65 Uppercase section labels (Category, Streaming Platform, etc.) — light Tiffany */
[style*="text-transform: uppercase"][style*="color: var(--text3)"],
[style*="text-transform:uppercase"][style*="color: var(--text3)"],
[style*="text-transform: uppercase"][style*="color:var(--text3)"] {
  color: #b8e6dd !important;
}
/* Exception: inside light-panel (Advanced Search) — keep dark navy */
.ds-light-panel [style*="text-transform: uppercase"],
.ds-light-panel [style*="text-transform:uppercase"] {
  color: #0a1226 !important;
}

/* ============================================================
   12.7 Nav dropdown submenu — показывается на hover */
.ds-nav-item .ds-nav-submenu { display: none; }
.ds-nav-item:hover .ds-nav-submenu,
.ds-nav-item:focus-within .ds-nav-submenu { display: block; }
/* .ds-nav-megamenu — managed via JS isOpen state */

.ds-cat-strip__item .ds-cat-strip__submenu { display: none; }
.ds-cat-strip__item:hover .ds-cat-strip__submenu,
.ds-cat-strip__item:focus-within .ds-cat-strip__submenu { display: block; }

/* ============================================================
   13. Перехват «warm-force» правила
   (любой инлайн с rgba(74,158,255,*) и siblings → ночная плашка)
   ============================================================ */
html [style*="rgba(74, 158, 255"],
html [style*="rgba(74,158,255"],
html [style*="rgba(96, 165, 250"],
html [style*="rgba(96,165,250"],
html [style*="rgba(123, 195, 255"],
html [style*="rgba(123,195,255"] {
  background: rgba(20,32,64,0.85) !important;
  color: #eef3ff !important;
  border-color: rgba(140,180,235,0.25) !important;
}

/* ============================================================
   14. Actor page — hero за именем и фото актёра.
   На day-теме inline-стиль задаёт #f5f5f7 (светло-серый) — это окей.
   На night-теме нужно перебить на чёрный, чтобы фото и инфа не лежали
   на светлом прямоугольнике.
   ============================================================ */
html[data-theme="night"] .ds-actor-hero {
  background: var(--bg) !important;
}

/* ActorRatingPanel + ActorReactionPanel — Apple-style: тёмный фон (bg2) + soft shadow + крупный радиус. */
html[data-theme="night"] .ds-actor-rate-panel,
html[data-theme="night"] .ds-actor-reaction-panel {
  background: var(--bg2) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45) !important;
  border-radius: 18px !important;
}

/* ============================================================
   15. Heart-like-кнопка (FavoriteDramaButton / FavoritePersonButton).
        Night неактивное: белый контур кнопки + белое полое сердце на тёмном круге.
        Night активное:   красное заполненное сердце, БЕЗ контура кнопки.
        Парный day-стиль — в day-theme.css (раздел 12c).
   ============================================================ */
html[data-theme="night"] .ds-fav-heart-btn {
  background: transparent !important;
  border: none !important;
}
html[data-theme="night"] .ds-fav-heart-btn:hover {
  background: transparent !important;
}
/* Heart svg-слои — точно такие же как на day-теме: halo чёрный stroke,
   inner белый fill, активное → красная заливка без обводки. */
html[data-theme="night"] .ds-fav-heart-halo {
  fill: none;
  stroke: #555555;
  stroke-width: 1;
}
html[data-theme="night"] .ds-fav-heart-halo[data-active="1"] {
  stroke: none;
}
html[data-theme="night"] .ds-fav-heart-inner {
  fill: #ffffff;
  stroke: none;
}
html[data-theme="night"] .ds-fav-heart-inner[data-active="1"] {
  fill: #ff3b5e;
}

/* ============================================================
   Night-theme MOBILE only: тёмно-синий почти чёрный фон
   под hero-контентом на странице дорамы (аналог серого Apple-фона).
   От края до края, до начала описания.
   ============================================================ */
@media (max-width: 640px) {
  html[data-theme="night"] .ds-drama-hero-grid {
    background: #161f3a !important;
    /* выходим из 12px padding'a у .ds-drama-page-wrap, чтобы фон шёл от края до края */
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 12px 12px 16px 12px !important;
  }
}

/* ============================================================
   Night-theme MOBILE only: тёмно-синий фон под hero-блоком
   страницы актёра (имя + постер + кнопки + карусель + соцсети).
   Тот же #161f3a что у hero-grid на странице дорамы.
   От края до края, до начала био/фильмографии.
   ============================================================ */
@media (max-width: 640px) {
  /* Ссылка «← К списку актёров» — сверху панели */
  html[data-theme="night"] .ds-actor-back-link {
    background: #161f3a !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    margin-top: 0 !important;
    padding: 10px 12px 4px 12px !important;
    display: block !important;
  }
  /* Имя актёра — продолжение панели */
  html[data-theme="night"] .ds-actor-mobile-title {
    background: #161f3a !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 4px 12px 6px 12px !important;
  }
  /* Постер + кнопки + карусель + соцсети — основная часть панели */
  html[data-theme="night"] .ds-actor-hero-grid > .ds-actor-poster-col {
    background: #161f3a !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 6px 12px 16px 12px !important;
  }
  /* Бар с кнопкой "← К списку актёров" — выравниваем по цвету панели,
     чтобы переход от back-button к имени был бесшовным */
  html[data-theme="night"] .ds-actor-hero {
    background: #161f3a !important;
  }
}

/* ============================================================
   NIGHT THEME: brand sky-blue (#1487cb / rgb(20,135,203))
   меняем на Tiffany из логотипа (福 = #0abab5).
   Применяется ВЕЗДЕ в ночной теме — Subscribe, Share, кнопки, бордеры.
   ============================================================ */

/* Сплошной фон #1487cb / rgb(20,135,203) — везде заменяем на Tiffany.
   ВАЖНО: React сериализует inline-стиль так, что hex (#1487cb) часто остаётся
   как есть, но иногда браузер преобразует. Ловим оба варианта + полупрозрачные. */
html[data-theme="night"] [style*="background: #1487cb"],
html[data-theme="night"] [style*="background:#1487cb"],
html[data-theme="night"] [style*="background: rgb(20, 135, 203)"],
html[data-theme="night"] [style*="background:rgb(20,135,203)"],
html[data-theme="night"] [style*="background-color: #1487cb"],
html[data-theme="night"] [style*="background-color:#1487cb"],
html[data-theme="night"] [style*="background-color: rgb(20, 135, 203)"],
html[data-theme="night"] [style*="background-color:rgb(20,135,203)"] {
  background: #0abab5 !important;
  background-color: #0abab5 !important;
  border-color: transparent !important;
  border-width: 0 !important;
  box-shadow: none !important;
}

/* Текст/иконки в цвете #1487cb (Share-icon, back-link, ссылки) */
html[data-theme="night"] [style*="color: #1487cb"],
html[data-theme="night"] [style*="color:#1487cb"],
html[data-theme="night"] [style*="color: rgb(20, 135, 203)"],
html[data-theme="night"] [style*="color:rgb(20,135,203)"] {
  color: #0abab5 !important;
}

/* Border с этим цветом — убираем полностью (по запросу: «такие кнопки вообще без обводки») */
html[data-theme="night"] [style*="1px solid #1487cb"],
html[data-theme="night"] [style*="1px solid rgb(20, 135, 203)"],
html[data-theme="night"] [style*="2px solid #1487cb"],
html[data-theme="night"] [style*="2px solid rgb(20, 135, 203)"] {
  border: none !important;
}

/* Полупрозрачные варианты rgba(20,135,203,...) — фон активного Subscribe → Tiffany,
   обводка убирается. */
html[data-theme="night"] [style*="rgba(20,135,203,0.18)"],
html[data-theme="night"] [style*="rgba(20, 135, 203, 0.18)"] {
  background-color: rgba(10,186,181,0.18) !important;
  border-color: transparent !important;
  border: none !important;
}
html[data-theme="night"] [style*="rgba(20,135,203,0.45)"],
html[data-theme="night"] [style*="rgba(20, 135, 203, 0.45)"] {
  border-color: transparent !important;
  border: none !important;
}
html[data-theme="night"] [style*="rgba(20,135,203,0.25)"],
html[data-theme="night"] [style*="rgba(20, 135, 203, 0.25)"],
html[data-theme="night"] [style*="rgba(20,135,203,0.30)"],
html[data-theme="night"] [style*="rgba(20, 135, 203, 0.30)"] {
  box-shadow: none !important;
}

/* Сам back-link «← К списку актёров» — текст в Tiffany */
html[data-theme="night"] .ds-actor-back-link {
  color: #0abab5 !important;
}
/* Back-arrow на десктопе — text-link стиль, не пилюля.
   Принудительно сбрасываем фон/тень, цвет — tiffany как в логотипе. */
html[data-theme="night"] .ds-actor-back-arrow {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #5ED7C6 !important;
}