/* =====================================================
   NekoNest — Premium Redesign 2025–2026
   Design System: Glassmorphism · Gradient Borders · Neon Premium
   ===================================================== */

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
}

button:active {
  transform: none;
}

:root {
  /* Core palette — нейтральный тёплый почти-чёрный (без синего подтона,
     который был в исходной bg:#06080f), в стиле референса. */
  --bg:           #0e0e0e;
  --bg-card:      #161616;
  --bg-card2:     #1c1c1c;
  --bg-input:     #141414;
  --bg-glass:     rgba(22, 22, 22, 0.72);
  --bg-glass2:    rgba(28, 28, 28, 0.60);

  /* Brand colors — минималистичная чёрно-белая палитра без неона.
     Имена переменных (--green/--blue/--purple) оставлены прежними: их
     используют ~194 места по всему файлу через var(...), переименование
     самого токена добавило бы риск без функциональной пользы — меняется
     только то, какой цвет каждое имя хранит. Все три акцента теперь —
     оттенки серого/белого, свечения убраны (glow-переменные близки к
     прозрачным, чтобы не ломать места, где они складываются в box-shadow). */
  --green:        #e8e8e8;
  --green-dim:    #b8b8b8;
  --green-dark:   #2a2a2a;
  --green-mid:    #e8e8e8;
  --green-glow:   rgba(232, 232, 232, 0.06);
  --green-faint:  rgba(232, 232, 232, 0.04);

  /* Secondary & accent */
  --blue:         #cfcfcf;
  --blue-glow:    rgba(207, 207, 207, 0.05);
  --purple:       #a8a8a8;
  --purple-glow:  rgba(168, 168, 168, 0.05);

  /* Premium gradients — приглушены до градаций серого, без цветных переливов */
  --grad-primary:   linear-gradient(135deg, #e8e8e8 0%, #cfcfcf 50%, #a8a8a8 100%);
  --grad-card:      linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  --grad-glow:      radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%);
  --grad-hero:      radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 50%, transparent 80%);

  /* Text — нейтральный тёплый серый, без цветных подтонов */
  --text:         #f0f0f0;
  --text-muted:   #8a8a8a;
  --text-dim:     #55555a;

  /* Borders */
  --border:       rgba(255, 255, 255, 0.06);
  --border-hl:    rgba(255, 255, 255, 0.2);
  --border-blue:  rgba(255, 255, 255, 0.14);

  /* Effects — тени остаются чисто чёрными (глубина), свечения убраны */
  --radius:       12px;
  --radius-sm:    8px;
  --radius-xs:    5px;
  --shadow:       0 8px 40px rgba(0,0,0,0.9);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.03);
  --shadow-glow:  0 0 0 rgba(0,0,0,0);

  --seal-color:   rgba(255, 255, 255, 0.02);

  /* Транзишны */
  --t-fast:  0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  0.4s  cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Премиальный ease-out для появления карточек (AniList/Linear/Apple-style) */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --t-reveal: 0.6s var(--ease-premium);

  /* Высота нижней мобильной навигации (.mobile-bottom-nav), без safe-area.
     Панель — "плавающий остров" с внешним отступом снизу 18px (см.
     .mobile-bottom-nav ниже) + сама капсула .mobile-nav-items: 10px
     (padding-top капсулы) + 10px (padding-top кнопки) + 24px (иконка,
     увеличена под более крупную панель) + 4px (gap) + 16px (строка
     текста) + 10px (padding-bottom кнопки) + 10px (padding-bottom
     капсулы) ≈ 84px + 18px внешнего отступа = ~102px round up к 104px
     с запасом. Раньше в mobileListsPopup/mobileSettingsPopup было
     захардкожено bottom:70px — число "на глаз", разошедшееся с реальной
     высотой навигации и оставлявшее пустую полосу под попапами (см.
     соответствующие правила ниже). Задаём высоту переменной один раз
     здесь и используем и в самой навигации (min-height, чтобы будущие
     правки размеров кнопки не разошлись с этим числом снова), и в
     bottom обоих попапов — так они гарантированно точно стыкуются с
     реальной навигацией, а не с приблизительной оценкой. */
  --mobile-nav-height: 104px;
}

html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100%;
  /* Subtle noise texture overlay — нейтральные серые пятна вместо цветных */
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgba(255,255,255,0.015) 0%, transparent 50%);
}

a { color: var(--green); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: #ffffff; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--green-dim);
  border-radius: 3px;
}
* { scrollbar-width: thin; scrollbar-color: var(--green-dim) transparent; }

/* ===== JUTSU SEALS DECO ===== */
.jutsu-seals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.seal {
  position: absolute;
  font-size: 120px;
  font-family: serif;
  color: var(--seal-color);
  animation: sealFloat 20s ease-in-out infinite;
  user-select: none;
}

.seal:nth-child(1) { top: 5%;  left: 3%;  animation-delay: 0s;    font-size: 140px; }
.seal:nth-child(2) { top: 20%; right: 4%; animation-delay: -4s;   font-size: 100px; }
.seal:nth-child(3) { top: 55%; left: 1%;  animation-delay: -8s;   font-size: 160px; }
.seal:nth-child(4) { top: 70%; right: 2%; animation-delay: -12s;  font-size: 90px; }
.seal:nth-child(5) { top: 85%; left: 40%; animation-delay: -6s;   font-size: 110px; }
.seal:nth-child(6) { top: 35%; left: 48%; animation-delay: -16s;  font-size: 80px; }

@keyframes sealFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
  50%       { transform: translateY(-20px) rotate(5deg); opacity: 1; }
}

/* ===== PARTICLE CANVAS ===== */
#particleCanvas { display: none; }

#cssParticles {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.css-particle {
  position: absolute;
  border-radius: 50%;
  animation: cssParticleFloat linear infinite;
  will-change: transform;
}

@keyframes cssParticleFloat {
  0%   { transform: translateY(0) translateX(0); }
  25%  { transform: translateY(-30px) translateX(15px); }
  50%  { transform: translateY(-15px) translateX(-10px); }
  75%  { transform: translateY(-40px) translateX(5px); }
  100% { transform: translateY(0) translateX(0); }
}

/* ===================================================================
   HEADER — Premium glassmorphism navbar
   =================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 7, 14, 0.92);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-bottom: 1px solid rgba(232,232,232,0.55);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 1px 16px rgba(232,232,232,0.35), 0 2px 28px rgba(232,232,232,0.18);
}

.header-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 32px;
  height: 84px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ── HEADER — two-row layout (nav variant 4) ──────────────
   Верхняя строка: лого + поиск + (spacer) + уведомления + аккаунт.
   Нижняя строка: вкладки навигации (Главная/Каталог/Расписание/Чат/
   Мои списки), отдельной полосой под верхней, разделены border-top.
   .header-inner остаётся общим контейнером ширины/паддингов для
   обеих строк — переопределяем только высоту и вертикальные отступы. */
.header-inner--top {
  height: 62px;
  gap: 20px;
}
.header-inner--bottom {
  height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 1px solid var(--border);
}
.header-top-spacer { flex: 1 1 auto; min-width: 12px; }
.header-top-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* В новой двухстрочной раскладке поиск больше не должен растягиваться
   на всю доступную ширину верхней строки (там уже есть spacer) —
   ограничиваем разумной шириной, как в остальных полях интерфейса. */
.header-inner--top .search-wrap { flex: 0 1 420px; }
/* Вкладки в нижней строке распределены по левому краю без обёртки
   .header-nav в pill-контейнер — сама строка уже визуально выделена
   border-top, поэтому убираем лишний фон/паддинг пилюли. Сама кнопка
   при этом растянута на всю высоту строки (для удобного клика), но
   визуальную заливку (hover/active) сажаем на компактную скруглённую
   "таблетку" по центру — единый радиус для обоих состояний, чтобы
   hover не выглядел острым прямоугольником рядом со скруглённым лого
   и активной вкладкой. */
.header-inner--bottom .header-nav {
  background: none;
  border: none;
  padding: 0;
  height: 100%;
  gap: 4px;
}
.header-inner--bottom .nav-tab {
  padding: 0 13px;
  height: 32px;
  align-self: center;
  border-radius: 8px;
}
.header-inner--bottom .nav-dropdown { height: 100%; display: flex; align-items: center; }

/* ── LOGO ── */
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.logo-icon-wrap {
  width: 64px;
  height: 64px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Квадратная карточка (фон/border/скругление) убрана — теперь это
     просто позиционирующий контейнер, силуэт кота держится на
     контурном drop-shadow из .logo-svg без всякой подложки под ним.
     Внешний размер (64px) и внутренний отступ (9px) оставлены как
     были, чтобы сам кот не изменился в размере — раньше он занимал
     64-9*2=46px внутри рамки, сейчас занимает те же ~46px, просто
     без рамки вокруг. */
  padding: 9px;
  box-sizing: border-box;
}

/* Прежний hover карточки (посветление фона) больше не применим —
   фона нет. Анимация перенесена на саму иконку — см. .logo:hover
   .logo-svg ниже. */

.logo-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* ВАРИАНТ 2: кот остаётся чёрным (как в оригинале), но получает
     тонкую белую обводку по контуру через слоёный drop-shadow —
     этого достаточно, чтобы силуэт отделился от тёмного фона шапки
     без всякой подложки-карточки под ним. */
  filter:
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff)
    drop-shadow(0 0 4px rgba(232,232,232,0.18));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter var(--t-med);
  transform-origin: 50% 85%;
}

/* Новая hover-анимация вместо посветления фона (фона больше нет):
   кот слегка "навостряется" — покачивается из стороны в сторону,
   как будто прислушался, с лёгким приседанием на итоге, и обводка
   на пике становится ярче. transform-origin смещён к низу силуэта
   (хвост/лапы), чтобы покачивание шло от опоры, а не от центра. */
.logo:hover .logo-svg {
  animation: logoEarPerk 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes logoEarPerk {
  0%   { transform: rotate(0deg)   scale(1); }
  30%  { transform: rotate(-7deg)  scale(1.05);
         filter:
           drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
           drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
           drop-shadow(0 0 10px rgba(232,232,232,0.5)); }
  60%  { transform: rotate(5deg)   scale(1.05);
         filter:
           drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
           drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
           drop-shadow(0 0 10px rgba(232,232,232,0.5)); }
  100% { transform: rotate(0deg)   scale(1.02);
         filter:
           drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
           drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
           drop-shadow(0 0 6px rgba(232,232,232,0.3)); }
}

/* Цвета самой иконки — привязаны к переменным темы, чтобы хексагон
   и буква "A" перекрашивались вместе с остальным интерфейсом. */
.logo-hex-outer { fill: var(--green-faint); stroke: var(--green); }
.logo-hex-inner { stroke: var(--green-dim); }
.logo-letter    { stroke: var(--green); }
.logo-dot       { fill: var(--green); }

.logo-text {
  font-family: 'Orbitron', monospace;
  font-size: 21px;
  font-weight: 900;
  background: var(--grad-primary);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: opacity var(--t-med);
}

.logo:hover .logo-text {
  opacity: 0.85;
}

.logo-text .char {
  display: inline-block;
}

/* ── SEARCH ── */
.search-wrap {
  flex: 1 1 0;
  min-width: 200px;
  max-width: 480px;
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  background: rgba(13, 13, 13, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  padding: 10px 52px 10px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  outline: none;
  transition: border-color var(--t-med), box-shadow var(--t-med), background var(--t-med);
  letter-spacing: 0.4px;
  backdrop-filter: blur(12px);
  height: 46px;
}

.search-input::placeholder { color: rgba(168,168,168,0.5); }

.search-input:focus {
  border-color: rgba(232,232,232,0.35);
  background: rgba(13, 13, 13, 0.95);
  box-shadow:
    0 0 0 3px rgba(232,232,232,0.08),
    0 0 24px rgba(232,232,232,0.06),
    inset 0 1px 0 rgba(232,232,232,0.05);
}

.search-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  width: 40px;
  background: transparent;
  border: none;
  color: rgba(168,168,168,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: color var(--t-fast), background var(--t-fast);
}
.search-btn:hover {
  color: var(--green);
  background: rgba(232,232,232,0.08);
}

/* ── Search history dropdown ──────────────────────────
   Всплывает под .search-input при фокусе на пустом поле,
   если есть сохранённые прошлые запросы. Визуально повторяет
   .genre-picker-popup (тот же фон/бордер/тень/blur), чтобы
   попапы в приложении выглядели единой системой. */
.search-history-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(13,13,13,0.97);
  border: 1px solid var(--border-hl);
  border-radius: var(--radius-sm);
  z-index: 500;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  backdrop-filter: blur(20px);
  overflow: hidden;
  animation: searchHistoryIn 0.15s ease;
}
@keyframes searchHistoryIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.search-history-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  transition: color var(--t-fast);
}
.search-history-clear:hover { color: var(--green); }
.search-history-list { max-height: 280px; overflow-y: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: var(--green-dim) transparent; }
.search-history-list::-webkit-scrollbar { width: 4px; }
.search-history-list::-webkit-scrollbar-thumb { background: var(--green-dim); border-radius: 4px; }
.search-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13.5px;
  transition: background var(--t-fast), color var(--t-fast);
}
.search-history-item:hover,
.search-history-item.is-active {
  background: rgba(232,232,232,0.07);
  color: var(--green);
}
.search-history-item-icon { flex-shrink: 0; opacity: 0.55; display: flex; }
.search-history-item:hover .search-history-item-icon { opacity: 0.9; }
.search-history-item-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-history-item-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  opacity: 0;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.search-history-item:hover .search-history-item-remove { opacity: 0.7; }
.search-history-item-remove:hover { opacity: 1 !important; color: var(--green); background: rgba(232,232,232,0.1); }

/* ══════════════════════════════════════════════════════
   NAV — redesigned for desktop
   ══════════════════════════════════════════════════════ */
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  /* Pill container background */
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 13px;
  padding: 3px;
}

.nav-tab {
  background: transparent;
  border: none;
  color: rgba(168,168,168,0.75);
  padding: 7px 13px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.8px;
  white-space: nowrap;
  transition:
    background var(--t-med),
    color var(--t-med),
    box-shadow var(--t-med);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Icon inside nav-tab */
.nav-tab-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: filter var(--t-med);
}

/* Hover state — мягкая заливка без рамки (вариант 1 из превью) */
.nav-tab:hover {
  color: #e8e8e8;
  background: rgba(255,255,255,0.06);
}

/* Нажатое состояние (в момент клика) — заливка чуть плотнее, без рамки,
   чтобы клик ощущался физически, но кнопка не "прыгала" (transform не
   трогаем, см. правило ниже про translateY/scale). */
.nav-tab:active {
  background: rgba(255,255,255,0.11);
}

.nav-tab:active,
.nav-dropdown-toggle:active,
.notif-bell-btn:active {
  transform: none;
  top: auto;
}

/* Active / selected state — заливка + тонкая акцентная линия по нижнему
   краю кнопки (не рамка-прямоугольник — она спорила со скруглённым
   лого/интерфейсом рядом, см. правку по фидбеку со скриншотом). */
.nav-tab.active {
  background: rgba(255,255,255,0.09);
  color: var(--green);
  font-weight: 800;
  box-shadow: inset 0 -2px 0 0 #e8e8e8;
}

.nav-tab.active:hover {
  background: rgba(255,255,255,0.12);
}

.nav-tab.active .nav-tab-icon {
  filter: drop-shadow(0 0 6px rgba(232,232,232,0.7));
}

/* ── NAV DROPDOWN ── */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-dropdown-arrow {
  transition: transform var(--t-fast);
  opacity: 0.5;
  margin-left: -2px;
}

.nav-dropdown-toggle.active .nav-dropdown-arrow,
.nav-dropdown:has(.nav-dropdown-menu:not(.hidden)) .nav-dropdown-arrow {
  transform: rotate(180deg);
  opacity: 0.9;
}

/* Account button special style */
.nav-account-btn {
  gap: 8px;
}
.nav-account-avatar {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(232,232,232,0.2), rgba(168,168,168,0.2));
  border: 1px solid rgba(232,232,232,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.nav-account-btn:hover .nav-account-avatar,
.nav-account-btn.active .nav-account-avatar {
  border-color: rgba(232,232,232,0.6);
  box-shadow: 0 0 10px rgba(232,232,232,0.25);
}
/* Вариант с загруженным фото профиля вместо иконки-заглушки —
   тот же кружок, но с реальной картинкой (object-fit:cover,
   чтобы не искажалась при непропорциональных фото). */
.nav-account-avatar--img {
  background: none;
  overflow: hidden;
}
.nav-account-avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── DROPDOWN MENU ──
   Оформление синхронизировано с .notif-dropdown (боксом истории
   уведомлений) — тот же полупрозрачный белый бордер, тот же радиус
   через var(--radius) и та же тень с лёгким white-glow, чтобы оба
   попапа выглядели как один и тот же компонент. */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: rgba(17, 17, 17, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.7),
    0 0 0 1px rgba(232,232,232,0.05) inset,
    0 0 30px rgba(232,232,232,0.06);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 200;
  backdrop-filter: blur(24px);
  animation: dropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nav-dropdown-menu.hidden { display: none; }

/* Section label inside dropdown */
.nav-dropdown-section-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(232,232,232,0.35);
  padding: 8px 14px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 4px;
}

.nav-dropdown-item {
  background: transparent;
  border: none;
  color: rgba(176,176,176,0.7);
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  width: 100%;
}

.ndi-label {
  flex: 1;
}

.nav-dropdown-item:hover {
  background: rgba(255,255,255,0.05);
  color: #e0e0e0;
}

.nav-dropdown-item.active {
  background: rgba(232,232,232,0.08);
  color: var(--green);
}

/* Count badge — right-aligned */
.nav-dropdown-item .tab-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  color: rgba(176,176,176,0.5);
  min-width: 18px;
  text-align: right;
}
.nav-dropdown-item.active .tab-count {
  color: rgba(232,232,232,0.7);
}
.nav-dropdown-item:hover .tab-count {
  color: rgba(212,212,212,0.7);
}

/* ===== MAIN ===== */
.main-content {
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 36px 24px 72px;
  position: relative;
  z-index: 1;
}

/* .hero-block, .hero-chakra-ring и связанный @keyframes chakraPulse
   удалены вместе с HTML-элементом #heroBlock (см. index.html —
   приветствие заменено полноэкранным hero-banner, см. секцию
   HERO BANNER в конце файла). @keyframes fadeUp ниже используется
   по всему сайту (.featured-block и др.) — её не трогаем. */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== FEATURED SECTION ===== */
.featured-block {
  margin-top: 48px;
  animation: fadeUp 0.7s ease 0.2s both;
}

.featured-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.featured-title {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}

.featured-title-icon { font-size: 16px; }

.featured-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-hl) 0%, transparent 100%);
  opacity: 0.6;
}

.featured-loader {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
  padding: 20px 0;
}
.featured-loader.hidden { display: none; }

.mini-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spinRing 0.8s linear infinite;
  flex-shrink: 0;
}

.featured-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--poster-min-width, 158px), 1fr));
}

/* ── Skeleton cards ── */
@keyframes skeletonShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  /* Лёгкое появление самого skeleton-блока, чтобы у пользователя не было
     ощущения "мгновенного скачка" интерфейса при входе в каталог/поиск */
  animation: skeletonFadeIn 0.3s ease-out both;
}

@keyframes skeletonFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.skeleton-poster {
  width: 100%;
  /* Совпадает с реальным .card-poster-wrap (padding-top: 143%) */
  aspect-ratio: 100 / 143;
  background: linear-gradient(90deg, #1a1a1a 25%, #262626 50%, #1a1a1a 75%);
  background-size: 400px 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius) var(--radius) 0 0;
}

.skeleton-title {
  height: 13px;
  margin: 11px 13px 7px;
  background: linear-gradient(90deg, #1a1a1a 25%, #262626 50%, #1a1a1a 75%);
  background-size: 400px 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-meta {
  height: 9px;
  margin: 0 13px 13px;
  width: 60%;
  background: linear-gradient(90deg, #1a1a1a 25%, #262626 50%, #1a1a1a 75%);
  background-size: 400px 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}

/* ===== LOADER ===== */
.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 100px 20px;
}
.loader.hidden { display: none; }

.spinner { width: 56px; height: 56px; position: relative; }

.spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: spinRing 1.2s linear infinite;
}
.spinner-ring:nth-child(1) { border-top-color: var(--green); animation-duration: 1.0s; }
.spinner-ring:nth-child(2) { inset: 8px; border-right-color: var(--blue); animation-duration: 1.4s; animation-direction: reverse; }
.spinner-ring:nth-child(3) { inset: 16px; border-bottom-color: var(--purple); animation-duration: 1.8s; }

@keyframes spinRing { to { transform: rotate(360deg); } }

.loader-text {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: pulse 1.5s ease infinite;
  font-family: 'Rajdhani', sans-serif;
}

@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ===== ERROR BANNER ===== */
.error-banner {
  background: rgba(11, 11, 11, 0.9);
  border: 1px solid rgba(255, 100, 100, 0.2);
  border-left: 3px solid #ff6060;
  color: #ff9999;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  animation: slideDown 0.3s ease;
  backdrop-filter: blur(8px);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.error-banner.hidden { display: none; }

.error-close {
  background: transparent;
  border: none;
  color: #ff6060;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
}

/* ===== SECTION TITLE ===== */
.section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
}
.section-title.hidden { display: none; }
.section-title span { color: var(--green); }

/* ===== LIST SECTION ===== */
.list-header {
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.list-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--grad-primary);
  border-radius: 2px;
}

.list-page-title {
  font-size: 22px;
  font-weight: 700;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Orbitron', monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.list-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
}

/* =====================================================
   ANIME GRID & CARDS — premium glassmorphism
   ===================================================== */
.anime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--poster-min-width, 178px), 1fr));
  gap: 20px;
  position: relative;
  z-index: 1;
}

/* ── ANIME CARD ── */
.anime-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: visible;
  cursor: pointer;
  /* Появление (opacity/transform) — премиальный ease-out без отскока.
     border-color/box-shadow используют свою длительность, она же
     применяется при выходе из :hover (см. .anime-card:hover ниже,
     где transition переопределён под пружинку только на время наведения).
     ВАЖНО: раньше сюда же входил переход filter: blur(6px)→blur(0).
     Пока этот blur-переход активен (~0.6s), браузер растеризует всю
     карточку как отдельный композитный слой на каждый кадр. Если в это
     же время постер внутри карточки ещё догружается по сети (постеры —
     внешние URL), на части кадров возникает рассинхрон между уже
     отрастрированным слоем карточки и реально поступившими пикселями
     картинки — видно как разноцветный "шум"/кайма по краю карточки,
     пропадающий через 1-2 сек сам по себе. Эффект появления карточки
     теперь держится только на opacity+transform, без filter — это не
     требует отдельного blur-слоя и артефакт не возникает. */
  transition:
    opacity var(--t-reveal),
    transform var(--t-reveal),
    border-color var(--t-med),
    box-shadow var(--t-med);
  position: relative;
  contain: layout style;
  will-change: transform, opacity;
  content-visibility: auto;
  contain-intrinsic-size: 178px 296px;
  opacity: 0;
  transform: translateY(32px) scale(0.94);
  /* Subtle gradient background */
  background-image: var(--grad-card);
}

.anime-card.card-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Одноразовая подсветка карточки при возврате «Назад» с детальной страницы
   аниме — общая для .anime-card (поиск/каталог/«Мои списки») и .season-card
   (список сезонов на странице тайтла), см. _restoreByCard в js/ui.js.
   Через box-shadow, а не background: постер обычно занимает почти всю
   площадь карточки, поэтому подсветка фона была бы почти не видна —
   светящаяся обводка поверх постера видна независимо от содержимого. */
[data-anime-id].card-return-highlight {
  animation: card-return-flash 2.2s ease-out;
}
@keyframes card-return-flash {
  0%   { box-shadow: 0 0 0 2px var(--green), 0 0 24px var(--green-glow); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  [data-anime-id].card-return-highlight { animation: none !important; }
}

/* Для избранных карточек — рамка/свечение убраны по просьбе
   пользователя (используется только .card-fav-caption ниже как
   текстовый индикатор статуса). */

@media (prefers-reduced-motion: reduce) {
  .anime-card,
  .anime-card.card-in,
  .anime-card:hover {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .card-poster {
    transition: none !important;
    opacity: 1 !important;
  }
  .skeleton-poster,
  .skeleton-title,
  .skeleton-meta {
    animation: none !important;
  }
  html.site-theme-switching,
  html.site-theme-switching *,
  html.site-theme-switching *::before,
  html.site-theme-switching *::after {
    transition: none !important;
  }
}

/* На мобильных — короче дистанция движения и быстрее транзишены,
   чтобы каскад из много карточек не "тормозил" восприятие на слабых
   GPU и не упирался в 60fps */
@media (max-width: 768px) {
  .anime-card {
    transform: translateY(14px) scale(0.97);
    transition:
      opacity 0.4s var(--ease-premium),
      transform 0.4s var(--ease-premium),
      border-color var(--t-med),
      box-shadow var(--t-med);
  }
  .anime-card:hover {
    transform: none;
  }
}


/* Gradient border glow on hover via ::before */
.anime-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(232,232,232,0) 0%, rgba(207,207,207,0) 50%, rgba(168,168,168,0) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background var(--t-med);
  pointer-events: none;
  z-index: 2;
}

/* Top shimmer line */
.anime-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity var(--t-med);
  z-index: 3;
}

.anime-card:hover {
  transition:
    border-color var(--t-med),
    box-shadow var(--t-med);
  border-color: rgba(232,232,232,0.18);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.7),
    0 0 30px rgba(232,232,232,0.1),
    0 0 0 1px rgba(232,232,232,0.06);
}

/* На тач-устройствах — :active при тапе даёт ту же анимацию что :hover на ПК */
@media (hover: none) {
  .anime-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.6);
  }
  .anime-card:hover .card-poster { transform: translateZ(0); }

  /* Градиентная рамка */
  .anime-card:active::before {
    background: linear-gradient(135deg, rgba(232,232,232,0.5), rgba(207,207,207,0.3), rgba(168,168,168,0.2));
  }
  /* Шиммер-линия сверху */
  .anime-card:not(.is-favorites2):active::after { opacity: 1; }
  /* Зелёный текст названия */
  .anime-card:active .card-title { color: var(--green); }
  /* Виньетка на постере */
  .anime-card:active .card-poster-wrap::after { opacity: 1; }
  /* Тень и рамка */
  .anime-card:active {
    border-color: rgba(232,232,232,0.18);
    box-shadow:
      0 20px 50px rgba(0,0,0,0.7),
      0 0 30px rgba(232,232,232,0.1),
      0 0 0 1px rgba(232,232,232,0.06);
    transform: none !important;
  }
}

.anime-card:hover::before {
  background: linear-gradient(135deg, rgba(232,232,232,0.5), rgba(207,207,207,0.3), rgba(168,168,168,0.2));
}

.anime-card:hover:not(.is-favorites2)::after { opacity: 1; }
.anime-card:hover .card-title { color: var(--green); }

/* ── Золотая обводка для любимых аниме ── */

/* Рамка рисуется через position:fixed-like элемент с отрицательным inset
   который не обрезается contain/overflow родителя */
.anime-card.is-favorite {
  --fav-active: 1;
}

/* Золотая рамка и свечение убраны по просьбе пользователя — статус
   "Любимое" на карточке теперь обозначает только .card-fav-caption
   (текстовая подпись под названием) и сердечко .card-fav-star на
   постере, без border/drop-shadow вокруг всей карточки. */

/* Золотая обводка слева — индикатор "Любимое". Внутри теперь сердечко
   (символ поменяли местами со звёздочкой "Избранного" по просьбе пользователя),
   позиция и цвет (золотой, левый угол) остались прежними. */
.card-fav-star {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 16px;
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255,185,0,1), 0 0 6px rgba(255,185,0,0.9), 0 1px 4px rgba(0,0,0,1);
  z-index: 4;
  pointer-events: none;
  line-height: 1;
  filter: drop-shadow(0 0 5px rgba(255,165,0,1));
}

/* ── Сиреневая обводка + сердечко для второй независимой метки
   "Избранное" (favorites2) — визуально отличается от золотого "Любимого",
   обе метки могут быть активны на одной карточке одновременно. ── */
/* Сиреневая рамка/свечение/анимация "Избранного" тоже убраны по той же
   просьбе — статус теперь обозначает только .card-fav-caption и
   сердечко .card-fav2-heart, без обводки вокруг карточки. */

/* Комбо-рамка (оба статуса сразу) тоже убрана — при одновременном
   "Любимое" + "Избранное" карточка больше не получает своей отдельной
   border/filter/animation; статус виден через оба сердечка на постере
   и объединённый каптион "Любимое · Избранное" ниже. */

/* keyframes fav2-card-pulse и combo-glow-pulse, которые раньше рисовали
   пульсацию для .anime-card в каталоге, .detail-meta/.poster-glow-wrap/
   .detail-widget-frame на странице аниме и .season-card в "Других
   сезонах" — везде убраны как часть одной и той же серии правок
   (обводка/свечение статуса заменена на текстовый каптион). Ни то, ни
   другое нигде больше не используется, поэтому сами декларации удалены
   вместе с последним применением, а не оставлены мёртвым кодом. */

/* Фиолетовая звёздочка для "Избранное" — стоит на той же позиции,
   что и золотое сердечко "Любимого" (bottom: 8px, left: 8px). */
.card-fav2-heart {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 16px;
  color: #c084fc;
  text-shadow: 0 0 8px rgba(255,185,0,0.9), 0 0 12px rgba(157,78,221,1), 0 0 6px rgba(157,78,221,0.9), 0 1px 4px rgba(0,0,0,1);
  z-index: 4;
  pointer-events: none;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255,185,0,0.8)) drop-shadow(0 0 5px rgba(157,78,221,1));
}

/* Когда на карточке активны оба значка (Любимое + Избранное),
   золотое сердечко сдвигается чуть правее фиолетовой звезды,
   чтобы они не перекрывали друг друга. */
.anime-card.is-favorite.is-favorites2 .card-fav-star {
  left: 26px;
}

/* ── Подпись-каптион под названием (вариант 5 из демо-подборки,
   fx-caption) — тонкая линия + мелкий капс-текст статуса под
   card-title. Не заменяет золотую/сиреневую обводку карточки выше,
   а дополняет её — обводка остаётся как есть, каптион просто даёт
   то же самое ещё и текстом, для доступности и на случай, когда
   человек листает список без цвета (например, дальтонизм). Три
   варианта текста/цвета — под каждое из трёх состояний карточки. ── */
.card-fav-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.card-fav-caption .fav-caption-line {
  width: 14px;
  height: 1.5px;
  flex: none;
}
.card-fav-caption .fav-caption-text {
  font-size: 9.5px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* «Любимое» — золотая версия, использует тот же #ffd700, что и
   рамка/сердечко is-favorite выше. */
.anime-card.is-favorite:not(.is-favorites2) .card-fav-caption .fav-caption-line {
  background: #ffd700;
}
.anime-card.is-favorite:not(.is-favorites2) .card-fav-caption .fav-caption-text {
  color: #ffd700;
}

/* «Избранное» — сиреневая версия, тот же #c084fc, что и рамка/звезда
   is-favorites2 выше. */
.anime-card.is-favorites2:not(.is-favorite) .card-fav-caption .fav-caption-line {
  background: #c084fc;
}
.anime-card.is-favorites2:not(.is-favorite) .card-fav-caption .fav-caption-text {
  color: #c084fc;
}

/* Комбо (оба статуса сразу) — линия и текст «Любимое · Избранное»
   получают тот же переливающийся золото↔фиолетовый градиент, что
   раньше использовался в обводке карточки (обводка теперь убрана,
   но палитра/анимация combo-border-spin осталась узнаваемой парой
   цветов «оба статуса сразу» и здесь, в каптионе). */
.anime-card.is-favorite.is-favorites2 .card-fav-caption .fav-caption-line {
  background: linear-gradient(90deg, #ffd700, #ff9d00, #9d4edd, #c084fc);
  background-size: 200% 100%;
  animation: combo-border-spin 2s linear infinite;
}
.anime-card.is-favorite.is-favorites2 .card-fav-caption .fav-caption-text {
  background: linear-gradient(90deg, #ffd700, #ff9d00, #9d4edd, #c084fc, #ffd700);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: combo-border-spin 2s linear infinite;
}

/* ── Poster ── */
.card-poster-wrap {
  position: relative;
  width: 100%;
  padding-top: 143%;
  overflow: hidden;
  background: var(--bg-card2);
  border-radius: var(--radius) var(--radius) 0 0;
  /* Изолируем композитинг постера от blur-слоя родительской .anime-card
     (та анимирует свой собственный filter:blur при появлении).
     Без изоляции два независимых blur-слоя на время перехода
     накладываются друг на друга и дают "рваную" цветную кайму
     по краю карточки в момент загрузки постера. */
  isolation: isolate;
  /* Принудительно выносим скруглённую маску (overflow:hidden +
     border-radius) на свой собственный GPU-композитный слой ЗАРАНЕЕ,
     отдельно от слоя самого <img>. Без этого, пока крупное изображение
     ещё декодируется/растеризуется, браузер периодически пересчитывает
     маску ВМЕСТЕ с недодекодированным содержимым — и на скруглённой
     кромке на 1-2 секунды виден "рваный" цветной шум (edge bleeding).
     translateZ(0) форсирует отдельный слой именно для маски, так что
     она стабильна независимо от состояния decode картинки внутри. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.card-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease-out;
  will-change: transform;
  /* Отдельный композитный слой для самой картинки — декодирование
     крупного постера больше не пересчитывает слой маски-обёртки. */
  transform: translateZ(0);
}

.anime-card:hover .card-poster { transform: translateZ(0); }

/* Виньетка при наведении — края темнеют, центр остаётся чётким.
   Реализована через ::after на обёртке постера, без scale и без
   артефактов качества изображения. */
.card-poster-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.55) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}
.anime-card:hover .card-poster-wrap::after { opacity: 1; }

/* Класс добавляется через JS (wireCardPosterLoad) сразу после
   фактической загрузки <img>, чтобы избежать "скачка"/мигания —
   постер плавно проявляется, когда реально готов к показу.
   (Раньше тут также был filter:blur(8px)→blur(0), но второй
   независимый blur-переход поверх blur-перехода самой .anime-card
   создавал артефакт цветных пикселей по контуру карточки на момент
   загрузки — поэтому теперь у постера только fade по opacity.) */
.card-poster.poster-loaded {
  opacity: 1;
}

.card-poster-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  font-size: 52px;
}

.card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.5) 60%, transparent 100%);
  pointer-events: none;
}

/* ── List badge ──
   Личный статус («Смотрю» / «Просмотрено» и т.п.) — сверху СЛЕВА,
   капсулой (полностью скруглённые края), с отступом от края постера
   (не растёт от самого края, как было в форме ленты-флажка раньше).
   Формат и позиция — по образцу референса пользователя: скруглённая
   таблетка, залитая цветом статуса. Рейтинг (.card-rating-badge ниже)
   теперь той же формы и на той же горизонтали (left), но СНИЗУ под
   этой капсулой, а не в противоположном углу. */
.card-list-badge {
  position: absolute;
  top: 14px; left: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--card-badge-font, 10px);
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: var(--card-badge-padding, 5px 14px);
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.6),
    0 4px 8px -2px rgba(0,0,0,0.55),
    0 9px 16px -6px rgba(0,0,0,0.5);
  z-index: 4;
  /* Страховка от переполнения на узкой/компактной карточке (уровень
     "Маленький" в настройках размера постера) при длинном статусе
     ("Просмотрено", "Избранное"…) — обрезаем многоточием вместо
     растягивания капсулы за пределы постера. */
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Плоская однотонная заливка цветом роли — один сплошной непрозрачный
   тон на капсулу, без градиента и без прозрачности. */
.badge-watching   { background: #f5afd7; color: #2c1224; }
.badge-watched    { background: #26c3ff; color: #071824; }
.badge-planned    { background: #f0b26e; color: #201502; }
.badge-favorite   { background: #f57896; color: #fff; }
.badge-favorites2 { background: #ca7edc; color: #fff; }
.badge-dropped    { background: #acaca4; color: #fff; }

/* ── Rating badge ──
   Оценка ★ — капсула той же формы, что и статус выше (.card-list-badge),
   на той же горизонтали (left: 14px), но НИЖЕ, вплотную под статусом —
   по образцу референса пользователя: два одинаковых по форме бейджа
   друг под другом в левом верхнем углу постера, а не в разных углах.
   Если статуса нет (у карточки без личного статуса), JS не выводит
   .card-list-badge вовсе — тогда рейтинг остаётся один, но CSS его
   top не переключает автоматически на верхнюю позицию: см. правило
   .card-poster-wrap:not(:has(.card-list-badge)) ниже, которое
   поднимает капсулу оценки к top статуса, когда статуса нет. */
.card-rating-badge {
  position: absolute;
  top: 50px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ffd23f;
  color: #241705;
  font-size: var(--card-badge-font, 11px);
  font-weight: 800;
  padding: var(--card-badge-padding, 5px 14px);
  border-radius: 999px;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.3px;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.6),
    0 4px 8px -2px rgba(0,0,0,0.55),
    0 9px 16px -6px rgba(0,0,0,0.5);
  z-index: 4;
  max-width: calc(100% - 28px);
}
/* Когда у карточки нет личного статуса, .card-list-badge не рендерится
   вовсе (см. buildCard() в js/search.js) — тогда рейтинг единственный
   бейдж на постере и должен встать на верхнюю позицию (top:14px), а
   не повиснуть в пустоте на top:50px. .card-poster/.card-overlay
   всегда идут раньше бейджей в разметке, поэтому проверка через
   :first-child не сработала бы — вместо неё :has() на родителе: если
   .card-poster-wrap НЕ содержит .card-list-badge, поднимаем рейтинг. */
.card-poster-wrap:not(:has(.card-list-badge)) .card-rating-badge {
  top: 14px;
}

/* ── Card body ── */
.card-body {
  padding: 11px 13px 13px;
  position: relative;
  z-index: 1;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg-card);
  background-image: var(--grad-card);
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  transition: color var(--t-fast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.2px;
  margin-bottom: 5px;
}

.card-meta-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

.card-meta-year {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  flex-shrink: 0;
  font-weight: 600;
}

.card-meta-type {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.card-meta-year + .card-meta-type::before {
  content: '·';
  margin-right: 6px;
  opacity: 0.4;
}

.card-meta-views {
  font-size: 11px;
  color: var(--text-dim);
  font-family: 'Rajdhani', sans-serif;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

/* =====================================================
   «STREAK GOLD» — стиль карточек блока «Продолжить просмотр»
   (.cw-card, вешается на .anime-card только в js/continue-watching.js).
   Отличия от обычной карточки: крупнее и контрастнее плашки
   статус+рейтинг поверх постера, и вместо простой строки
   "Серия N · время" — полноширинный прогресс-бар просмотра серии.
   Другие карточки (каталог, «Мои списки», История) используют
   .card-list-badge/.card-rating-badge/.history-card-meta как раньше
   и этим блоком не затрагиваются.
   ===================================================== */
.anime-card.cw-card .card-list-badge {
  top: 12px;
  left: 12px;
  font-size: 11px;
  padding: 6px 14px;
  box-shadow:
    0 2px 2px rgba(0,0,0,0.6),
    0 6px 14px -4px rgba(0,0,0,0.6);
}

.anime-card.cw-card .card-rating-badge {
  top: 52px;
  left: 12px;
  font-size: 11px;
  padding: 6px 14px;
  box-shadow:
    0 2px 2px rgba(0,0,0,0.6),
    0 6px 14px -4px rgba(0,0,0,0.6);
}
.anime-card.cw-card .card-poster-wrap:not(:has(.card-list-badge)) .card-rating-badge {
  top: 12px;
}

.cw-card-meta {
  margin-top: 6px;
}

.cw-progress-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-bottom: 6px;
}

/* Общее число серий тайтла неизвестно (ни в записи истории, ни после
   фоновой дозагрузки, см. _cwFetchEpisodesCount в continue-watching.js)
   — трек остаётся без .cw-progress-fill внутри. Едва заметная штриховка
   вместо пустой ровной полоски: иначе выглядит как "не отрисовался
   прогресс", хотя на самом деле процент посчитать не из чего. */
.cw-progress-track:empty {
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 3px,
    transparent 3px,
    transparent 6px
  );
}

.cw-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #f5afd7, #ffd23f);
  transition: width 0.4s ease;
}

.cw-ep-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}

.cw-ep {
  color: var(--green-dim);
  font-weight: 600;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

.cw-time {
  color: var(--text-muted);
  flex-shrink: 0;
  letter-spacing: 0.2px;
}

/* =====================================================
   ANIME CARD TOOLTIP (hover-превью при наведении на карточку)
   Тот же дизайн-язык, что и у самих карточек/детальной
   страницы — Rajdhani/Orbitron, бренд-зелёный --green,
   стеклянный фон --bg-glass, скругления --radius, пилюли
   жанров в духе .genre-tag.
   ===================================================== */
#animeCardTooltip {
  font-family: 'Rajdhani', sans-serif;
  color: var(--text);
  background: linear-gradient(145deg, var(--bg-glass) 0%, rgba(10,10,10,0.96) 100%);
  border: 1px solid var(--border-hl);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 0 1px rgba(232,232,232,0.04), var(--shadow-glow);
  backdrop-filter: blur(20px);
  overflow: hidden;
}

/* ── Золотая обводка тултипа для любимых аниме (тот же язык, что и .anime-card.is-favorite) ── */
#animeCardTooltip.is-favorite {
  border: 1px solid #ffd700;
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.5),
    0 0 14px rgba(255,185,0,0.55),
    0 0 32px rgba(255,185,0,0.25),
    var(--shadow);
}
#animeCardTooltip.is-favorite .tt-glowline {
  background: linear-gradient(90deg, #ffd700, #ffe566, #ffd700);
  opacity: 1;
}

/* ── Фиолетовый тултип для "Избранное" ── */
#animeCardTooltip.is-favorites2 {
  border: 1px solid #c084fc;
  box-shadow:
    0 0 3px #c084fc,
    0 0 14px rgba(157,78,221,0.55),
    0 0 32px rgba(157,78,221,0.25),
    var(--shadow);
  animation: none;
  position: relative;
}
#animeCardTooltip.is-favorites2::before {
  content: none;
}
#animeCardTooltip.is-favorites2 .tt-glowline {
  background: linear-gradient(90deg, #9d4edd, #c084fc, #b97bf0, #c084fc, #9d4edd);
  background-size: 200% 100%;
  animation: combo-border-spin 2s linear infinite;
  opacity: 1;
}

/* ── Комбо: Любимое + Избранное — тултип ── */
/* Переливающийся золото<->фиолетовый через box-shadow (overflow:hidden на тултипе
   обрезает ::before, поэтому используем анимацию box-shadow) */
@keyframes tooltip-combo-glow {
  0%   { box-shadow: 0 0 0 1.5px #ffd700, 0 0 10px rgba(255,185,0,0.6), 0 0 22px rgba(255,185,0,0.25), 0 0 6px rgba(157,78,221,0.4), 0 20px 60px rgba(0,0,0,0.7); }
  33%  { box-shadow: 0 0 0 1.5px #ffe566, 0 0 14px rgba(255,215,0,0.85), 0 0 30px rgba(255,215,0,0.3), 0 0 4px rgba(157,78,221,0.2), 0 20px 60px rgba(0,0,0,0.7); }
  66%  { box-shadow: 0 0 0 1.5px #c084fc, 0 0 4px rgba(255,185,0,0.3), 0 0 12px rgba(157,78,221,0.5), 0 0 26px rgba(157,78,221,0.7), 0 20px 60px rgba(0,0,0,0.7); }
  100% { box-shadow: 0 0 0 1.5px #ffd700, 0 0 10px rgba(255,185,0,0.6), 0 0 22px rgba(255,185,0,0.25), 0 0 6px rgba(157,78,221,0.4), 0 20px 60px rgba(0,0,0,0.7); }
}
#animeCardTooltip.is-favorite.is-favorites2 {
  border: 1.5px solid #ffd700;
  animation: tooltip-combo-glow 3s ease-in-out infinite;
}
#animeCardTooltip.is-favorite.is-favorites2 .tt-glowline {
  background: linear-gradient(90deg, #ffd700, #ff9d00, #c084fc, #9d4edd, #ffd700);
  background-size: 300% 100%;
  animation: combo-border-spin 2s linear infinite;
  opacity: 1;
}

.tt-glowline {
  height: 2px;
  border-radius: 2px;
  background: var(--grad-primary);
  opacity: 0.7;
}

.tt-body {
  padding: 14px 16px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.tt-poster {
  position: relative;
  flex-shrink: 0;
  width: 88px;
  height: 124px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.6);
  border: 1px solid var(--border);
}
.tt-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.5));
}

.tt-info { flex: 1; min-width: 0; }

.tt-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 7px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tt-score {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.tt-score-star { font-size: 20px; color: #ffd700; line-height: 1; }
.tt-score-num {
  font-size: 19px;
  font-weight: 800;
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.5px;
  color: var(--green);
}
.tt-score-num.is-mid  { color: #ffd700; }
.tt-score-num.is-low  { color: #ff7070; }

.tt-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.tt-meta-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
}
.tt-status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: 'Rajdhani', sans-serif;
  border-radius: 12px;
  padding: 2px 10px;
}
.tt-status-airing  { background: rgba(232,232,232,0.12); color: var(--green); border: 1px solid rgba(232,232,232,0.28); }
.tt-status-announce{ background: var(--blue-glow); color: var(--blue); border: 1px solid var(--border-blue); }
.tt-status-done    { background: rgba(232,232,232,0.1);  color: var(--green); border: 1px solid var(--border-hl); }

.tt-genres { display: flex; flex-wrap: wrap; gap: 5px; }
.tt-genre-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--green-dim);
  background: rgba(232,232,232,0.04);
  border: 1px solid rgba(232,232,232,0.15);
  border-radius: 20px;
  padding: 2px 11px;
}

.tt-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 100px 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 2.2;
  animation: fadeUp 0.4s ease both;
}
.empty-state.hidden { display: none; }
.empty-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.3; color: var(--green); }
.empty-state-img {
  display: block;
  margin: 0 auto;
  max-width: 220px;
  width: 100%;
  height: auto;
  opacity: 0.85;
  border-radius: 12px;
}

/* ===== DETAIL SECTION ===== */
#detailSection.hidden { display: none; }
#listsSection.hidden { display: none; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,232,232,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 9px 20px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 32px;
  transition: all var(--t-med);
  backdrop-filter: blur(4px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(232,232,232,0.12);
  position: relative;
  z-index: 2;
}

.back-btn:hover {
  color: var(--green);
  border-color: var(--border-hl);
  background: rgba(232,232,232,0.08);
  box-shadow: 0 4px 16px rgba(232,232,232,0.1);
}

.detail-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
  animation: fadeUp 0.45s ease both;
}

.detail-poster-col {
  position: sticky;
  top: 88px;
}

.poster-glow-wrap { position: relative; }

.poster-glow-wrap::after {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle at center, rgba(232,232,232,0.1) 0%, transparent 70%);
  pointer-events: none;
  border-radius: var(--radius);
  animation: posterPulse 4s ease infinite;
}

@keyframes posterPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.detail-poster {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border-hl);
  display: block;
  object-fit: cover;
  aspect-ratio: 2/3;
  background: var(--bg-card2);
  position: relative;
  z-index: 1;
  transition: box-shadow var(--t-med);
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}

.detail-poster:hover {
  box-shadow: 0 0 40px rgba(232,232,232,0.18), 0 8px 40px rgba(0,0,0,0.7);
}

/* =====================================================
   DETAIL POSTER FLIP — переворот фото тайтла на странице
   аниме (рядом с плеером): на обратной стороне — жанры,
   статус, краткое описание и просмотры.
   ===================================================== */
.poster-glow-wrap {
  perspective: 1600px;
}

.detail-poster-flip {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
  cursor: pointer;
  /* backface-visibility на самом контейнере не даёт промежуточным углам
     поворота (когда проекция элемента по ширине почти равна нулю)
     "терять" hover и тут же ловить его заново — именно это вызывало
     дёрганье на полпути переворота. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Триггер поворота управляется только через JS-класс is-flipped
   (с debounce 200мс), чтобы исключить дёрганье при быстром движении мыши.
   CSS :hover намеренно убран — вместо него mouseenter/mouseleave в detail.js */
.detail-poster-flip.is-flipped {
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .detail-poster-flip { transition: none !important; }
}

.detail-poster-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
}

.detail-poster-face-front {
  transform: rotateY(0deg);
  background: var(--bg-card2);
}

/* ── Poster flip hint ── */
.poster-flip-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.poster-flip-hint.pfh-hidden {
  opacity: 0;
  pointer-events: none;
}

.pfh-arrow {
  width: 36px;
  height: 36px;
  color: var(--green, #e8e8e8);
  filter: drop-shadow(0 0 8px rgba(232,232,232,0.7));
  animation: pfh-spin 1.8s ease-in-out infinite;
}

.pfh-arrow svg {
  width: 100%;
  height: 100%;
}

.pfh-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 8px rgba(232,232,232,0.8), 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(232,232,232,0.25);
  backdrop-filter: blur(4px);
}

@keyframes pfh-spin {
  0%   { transform: rotate(0deg) scale(1); }
  30%  { transform: rotate(15deg) scale(1.1); }
  60%  { transform: rotate(-10deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Hide hint on mobile (flip is disabled there) */
@media (max-width: 768px) {
  .poster-flip-hint { display: none; }
}



.detail-poster-face-front .detail-poster {
  width: 100%;
  height: 100%;
}

/* Бейдж статуса просмотра ("СМОТРЮ"/"ПРОСМОТРЕНО"/...) на постере
   detail-страницы — та же капсула, что и .card-list-badge на обычных
   карточках каталога/поиска (см. buildCard() в js/search.js), просто
   позиционирована относительно .detail-poster-face-front. "Любимое"/
   "Избранное" сюда намеренно НЕ попадают — на этой странице статус
   уже виден через активную кнопку "ЛЮБИМОЕ"/"ИЗБРАННОЕ" в левой панели
   (см. applyDetailFavoriteGlow в js/detail.js), а оценка не дублируется
   здесь вовсе — она уже показана в блоке .dpb-score под описанием. */
.detail-poster-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 6px 15px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.6),
    0 4px 8px -2px rgba(0,0,0,0.55),
    0 9px 16px -6px rgba(0,0,0,0.5);
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.detail-poster-badge.badge-watching { background: #f5afd7; color: #2c1224; }
.detail-poster-badge.badge-watched  { background: #26c3ff; color: #071824; }
.detail-poster-badge.badge-planned  { background: #f0b26e; color: #201502; }
.detail-poster-badge.badge-dropped  { background: #acaca4; color: #fff; }

.detail-poster-face-back {
  transform: rotateY(180deg);
  background: var(--bg-card2);
  background-image: var(--grad-card);
  border: 1px solid var(--border-hl);
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
  font-family: 'Rajdhani', sans-serif;
  gap: 12px;
}

/* ── Top: status badge ── */
.dpb-top {
  display: flex;
  align-items: center;
}

.dpb-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
}
.dpb-status.is-airing   { background: rgba(232,232,232,0.12); color: var(--green); border: 1px solid rgba(232,232,232,0.28); }
.dpb-status.is-announce { background: rgba(168,168,168,0.12); color: #a8a8a8;     border: 1px solid rgba(168,168,168,0.28); }
.dpb-status.is-done     { background: rgba(207,207,207,0.10); color: #cfcfcf;      border: 1px solid rgba(207,207,207,0.24); }

/* ── Score block ── */
.dpb-score-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
  padding: 12px 14px 14px;
  background: var(--scbg, rgba(232,232,232,0.06));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
}

.dpb-score-num {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--sc, #e8e8e8);
  line-height: 1;
  text-shadow: 0 0 20px color-mix(in srgb, var(--sc, #e8e8e8) 50%, transparent);
}

.dpb-score-outof {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
  padding-bottom: 2px;
}

/* thin accent line at bottom of score block */
.dpb-score-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  max-width: 100%;
  background: linear-gradient(90deg, var(--sc, #e8e8e8), transparent);
  border-radius: 0 2px 2px 0;
}

/* ── Divider ── */
.dpb-divider {
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Info rows ── */
.dpb-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.dpb-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.dpb-row-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.dpb-row-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
}

/* CSS :hover для poster flip убран — переворот управляется только через JS.
   Тач-устройства используют клик (см. wireDetailPosterFlip в detail.js) */

/* ── Золотая/сиреневая обводка постера и инфо-виджета для
   Любимого/Избранного убрана по просьбе пользователя — статус на
   странице аниме и так виден через активную кнопку "ЛЮБИМОЕ"/
   "ИЗБРАННОЕ" в левой панели (см. .list-btn.active ниже), отдельного
   свечения вокруг постера/виджетов больше нет. */

.detail-meta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 13px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: 'Rajdhani', sans-serif;
  backdrop-filter: blur(12px);
  transition: border-color var(--t-med), box-shadow var(--t-med);
}

/* Золотая/сиреневая/комбо обводка инфо-виджета убрана по той же
   просьбе — .detail-meta теперь всегда с обычной нейтральной рамкой
   (см. базовое правило .detail-meta выше), независимо от статуса. */

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.meta-row:last-child { border-bottom: none; }
.meta-row:hover { background: rgba(232,232,232,0.04); }

.meta-label { color: var(--text-muted); letter-spacing: 0.8px; font-weight: 700; text-transform: uppercase; font-size: 10px; }
.meta-value { color: var(--green); font-weight: 700; text-align: right; font-size: 12px; }

/* ── My list buttons ── */
.my-list-btns { margin-top: 18px; }

.my-list-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.my-list-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--grad-primary);
}

.my-list-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.list-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: left;
  text-transform: uppercase;
  transition: all var(--t-med);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 0;
  backdrop-filter: blur(8px);
}

.list-btn .btn-icon { font-size: 15px; flex-shrink: 0; line-height: 1; }
.list-btn .btn-label { position: relative; z-index: 1; }

.list-btn:hover {
  border-color: var(--border-hl);
  color: var(--green);
  background: rgba(232,232,232,0.07);
  box-shadow: 0 0 16px rgba(232,232,232,0.08);
}

.list-btn.active {
  background: rgba(232,232,232,0.1);
  border-color: rgba(232,232,232,0.4);
  color: var(--green);
  box-shadow: 0 0 0 1px rgba(232,232,232,0.15) inset, 0 0 20px rgba(232,232,232,0.06);
}

.list-btn.active .btn-check { display: flex; }

.btn-check {
  display: none;
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(232,232,232,0.5);
}

.btn-check::after {
  content: '✓';
  font-size: 10px;
  color: #000;
  font-weight: 900;
  line-height: 1;
}

/* ===== DETAIL INFO ===== */
.detail-info-col { min-width: 0; }

/* ── Общая карточка-виджет ──
   Обрамляет ВЕСЬ блок аниме единой плашкой: постер, таймер,
   кнопки списка слева + заголовок, жанры, описание и панель
   плеера справа — в общем стиле сайта (тот же фон/рамка/
   скругление, что у .detail-meta и .anime-card), вместо
   "голых" элементов прямо на фоне страницы. */
.detail-widget-frame {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(12px);
  transition: border-color var(--t-med), box-shadow var(--t-med);
}

/* Золотая/фиолетовая подсветка виджета плеера для Любимого/Избранного
   убрана по той же просьбе — .detail-widget-frame больше не получает
   свою рамку/свечение от статуса (applyDetailFavoriteGlow в
   js/detail.js по-прежнему навешивает классы is-favorite/is-favorites2
   на этот элемент, они просто ничего здесь не рисуют). */

/* Внутренний контейнер заголовка/жанров/описания — больше не
   несёт своей рамки/фона, эту роль теперь играет .detail-widget-frame
   целиком; оставлен только как смысловая группировка + отступ
   перед панелью плеера. */
.detail-info-card {
  margin-bottom: 28px;
}

.detail-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 14px;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1px;
}

.detail-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.genre-tag {
  background: rgba(232,232,232,0.04);
  border: 1px solid rgba(232,232,232,0.15);
  color: var(--green-dim);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
  transition: all var(--t-fast);
  backdrop-filter: blur(4px);
}
.genre-tag:hover {
  background: rgba(232,232,232,0.1);
  border-color: var(--green);
  color: var(--green);
  transform: translateY(-1px);
}

.detail-desc {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 0;
}

/* ── Галерея случайных кадров под описанием ─────────────── */
.detail-screenshots { margin-top: 18px; }
.detail-screenshots.hidden { display: none; }

.shot-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}

.shot-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  padding: 0;
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.shot-thumb:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,232,232,0.08);
}
.shot-thumb:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-ep-badge {
  position: absolute;
  right: 5px; bottom: 5px;
  background: rgba(10,10,10,0.82);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid rgba(232,232,232,0.2);
}

/* ── BB-code элементы в описании аниме ─────────────────── */
/* Имена персонажей/людей */
.desc-character {
  color: #b8b8b8;
  font-weight: 600;
  background: rgba(200,200,200,0.08);
  border-bottom: 1px solid rgba(200,200,200,0.35);
  padding: 0 3px;
  border-radius: 3px;
  cursor: default;
  transition: background .15s;
}
.desc-character:hover {
  background: rgba(200,200,200,0.16);
}
/* Названия аниме/манги в описании */
.desc-anime-link {
  color: #c0c0c0;
  font-weight: 600;
  border-bottom: 1px dashed rgba(192,192,192,0.4);
  padding: 0 2px;
  border-radius: 3px;
}
/* Ссылки */
.desc-link {
  color: #b8b8b8;
  text-decoration: none;
  border-bottom: 1px solid rgba(200,200,200,0.3);
}
.desc-link:hover { border-bottom-color: #b8b8b8; }
/* Спойлеры */
.desc-spoiler {
  display: inline-block;
  cursor: pointer;
  user-select: none;
}
.desc-spoiler-label {
  font-size: 11px;
  color: #b0b0b0;
  background: rgba(176,176,176,0.12);
  border: 1px solid rgba(176,176,176,0.3);
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.desc-spoiler-text {
  display: none;
  margin-left: 6px;
  color: var(--text-muted);
}
.desc-spoiler.open .desc-spoiler-text { display: inline; }
.desc-spoiler.open .desc-spoiler-label { color: #d0d0d0; }

/* ===== COUNTDOWN ===== */
.detail-countdown {
  background: linear-gradient(135deg, var(--green-faint) 0%, rgba(232,232,232,0.02) 100%);
  border: 1px solid rgba(232,232,232,0.2);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-top: 28px;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}
.countdown-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.countdown-timer { display: flex; align-items: flex-end; gap: 0; margin-bottom: 10px; }
.cd-unit { display: flex; flex-direction: column; align-items: center; width: 56px; }
.cd-num {
  font-size: 34px;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.cd-lbl { font-size: 9px; color: var(--text-muted); letter-spacing: 0.8px; text-transform: uppercase; margin-top: 5px; font-weight: 700; }
.cd-sep { font-size: 26px; font-weight: 700; color: rgba(232,232,232,0.3); line-height: 1; padding-bottom: 18px; width: 16px; text-align: center; }
.countdown-date { font-size: 12px; color: var(--text-muted); opacity: 0.6; }
.cd-already { font-size: 28px; font-weight: 800; color: var(--green); letter-spacing: 0.5px; }

/* ===== PLAYER ===== */
.player-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  transition: box-shadow var(--t-med);
}
.player-wrap:not(.hidden) { box-shadow: 0 0 40px rgba(232,232,232,0.05); }
.player-wrap.hidden { display: none; }

.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-card2);
}

.player-ep-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.player-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}

/* Nav btn */
.nav-btn {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all var(--t-fast);
}
.nav-btn:hover { border-color: var(--border-hl); color: var(--green); }

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none; /* FIX: не перехватываем клики под тостом */
}

.toast {
  pointer-events: auto; /* сами тосты можно кликать (если нужно) */
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  color: var(--text);
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 20px rgba(232,232,232,0.06);
  animation: toastIn 0.35s ease both;
  min-width: 230px;
  max-width: 340px;
  backdrop-filter: blur(16px);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.toast.fade-out { animation: toastOut 0.3s ease both; }

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

/* ===== EPISODES SECTION ===== */
.episodes-section { margin-top: 8px; }
.episodes-section.hidden { display: none; }

.episodes-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.episodes-grid { display: block; }

.video-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.dub-tab {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.dub-tab:hover { border-color: var(--border-hl); color: var(--green); }
.dub-tab.active { background: rgba(232,232,232,0.08); border-color: rgba(232,232,232,0.4); color: var(--green); }

.player-pill {
  background: var(--bg-card2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 14px;
  font-size: 11px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
}
.player-pill:hover { border-color: var(--border-hl); color: var(--green); }
.player-pill.active { background: var(--green); color: #000; border-color: var(--green); }

.player-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.player-row-label, .selector-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}

.episodes-grid-inner { position: relative; padding: 14px 0 6px; }
.ep-track-line { position: absolute; top: 27px; left: 14px; right: 14px; height: 2px; background: var(--border); border-radius: 2px; pointer-events: none; }
.ep-track-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--green); border-radius: 2px; opacity: 0.3; transition: width 0.35s cubic-bezier(0.34,1.56,0.64,1); }

.ep-dots-row { display: flex; flex-wrap: wrap; gap: 5px; position: relative; z-index: 1; }

.ep-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-card2);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  flex-shrink: 0;
}
.ep-btn:hover { border-color: var(--border-hl); color: var(--green); transform: scale(1.25); z-index: 2; }
.ep-btn.active { background: rgba(232,232,232,0.1); border-color: var(--green); color: var(--green); font-weight: 700; transform: scale(1.3); box-shadow: 0 0 0 3px rgba(232,232,232,0.1); z-index: 3; }
.ep-btn.ep-seen { background: rgba(232,232,232,0.03); border-color: rgba(232,232,232,0.1); }
.ep-btn.ep-seen::after { content: ''; position: absolute; bottom: 2px; right: 2px; width: 4px; height: 4px; background: var(--green); border-radius: 50%; opacity: 0.6; }

.ep-nav-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.ep-active-label { font-size: 10px; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.ep-active-num { font-size: 24px; font-weight: 700; color: var(--green); font-family: 'Rajdhani', sans-serif; line-height: 1; min-width: 32px; }
.ep-total { font-size: 11px; color: var(--text-muted); font-family: 'Rajdhani', sans-serif; font-weight: 600; opacity: 0.5; }
.ep-arrow { width: 28px; height: 28px; border-radius: var(--radius-xs); background: var(--bg-card2); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all var(--t-fast); margin-left: auto; font-family: monospace; }
.ep-arrow + .ep-arrow { margin-left: 4px; }
.ep-arrow:hover { border-color: var(--border-hl); color: var(--green); }
.ep-arrow:active { transform: scale(0.88); }
.ep-arrow:disabled { opacity: 0.2; cursor: default; }

.no-video-msg { padding: 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 14px; text-align: center; font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; }
.no-video-msg.hidden { display: none; }

/* ===== SEASONS ===== */
.seasons-section { margin-top: 28px; }
.seasons-section.hidden { display: none; }

.seasons-heading {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.seasons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }

.season-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: visible;
  cursor: pointer;
  transition: border-color var(--t-med), transform var(--t-spring), box-shadow var(--t-med);
  background-image: var(--grad-card);
  position: relative;
}

/* Gradient border glow on hover — как у главных карточек */
.season-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  padding: 1px;
  background: linear-gradient(135deg, rgba(232,232,232,0) 0%, rgba(207,207,207,0) 50%, rgba(168,168,168,0) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background var(--t-med);
  pointer-events: none;
  z-index: 2;
}

/* Top shimmer line on hover */
.season-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity var(--t-med);
  z-index: 3;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.season-card:hover {
  transition:
    border-color var(--t-med),
    box-shadow var(--t-med);
  border-color: rgba(232,232,232,0.18);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.7),
    0 0 30px rgba(232,232,232,0.1),
    0 0 0 1px rgba(232,232,232,0.06);
}
.season-card:hover::before {
  background: linear-gradient(135deg, rgba(232,232,232,0.5), rgba(207,207,207,0.3), rgba(168,168,168,0.2));
}
.season-card:hover::after { opacity: 1; }
.season-card:hover .season-name { color: var(--green); }

.season-poster-wrap { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; background: var(--bg-card2); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }

/* Виньетка при наведении — края темнеют, центр остаётся чётким.
   Без scale и без движения постера — точно как у главных карточек. */
.season-poster-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}
.season-card:hover .season-poster-wrap::after { opacity: 1; }

.season-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.season-poster-placeholder { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; color: var(--green-dim); opacity: 0.35; }
.season-info { padding: 9px 11px; }
.season-name { font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--t-med); }
.season-meta { font-size: 11px; color: var(--text-muted); font-family: 'Rajdhani', sans-serif; letter-spacing: 0.5px; }
.season-views { font-size: 11px; color: var(--text-muted); font-family: 'Rajdhani', sans-serif; margin-top: 3px; }
/* ===== Статус ("СМОТРЮ"/"ПРОСМОТРЕНО"/...) и оценка ★ — блок "Другие
   сезоны" =====
   Приведены к тому же формату, что и на обычных карточках каталога/поиска
   (см. .card-list-badge / .card-rating-badge выше): две одинаковые по
   форме скруглённые капсулы друг под другом в левом верхнем углу
   постера — статус сверху, оценка под ним. Раньше здесь была другая
   разметка (свисающая лента-закладка слева сверху для статуса и
   отдельная плашка с оценкой в правом нижнем углу) — теперь оба места
   сайта выглядят одинаково. */
.season-list-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 6;
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--card-badge-font, 10px);
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: var(--card-badge-padding, 5px 14px);
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.6),
    0 4px 8px -2px rgba(0,0,0,0.55),
    0 9px 16px -6px rgba(0,0,0,0.5);
  /* Страховка от переполнения на узкой/компактной карточке при длинном
     статусе ("ПРОСМОТРЕНО", "ИЗБРАННОЕ"…) — обрезаем многоточием вместо
     растягивания капсулы за пределы постера (см. .card-list-badge). */
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Плоская однотонная заливка цветом статуса — та же палитра, что и на
   обычных карточках каталога/поиска (.badge-watching и т.д.). */
.season-list-badge--watching   { background: #f5afd7; color: #2c1224; }
.season-list-badge--watched    { background: #26c3ff; color: #071824; }
.season-list-badge--planned    { background: #f0b26e; color: #201502; }
.season-list-badge--favorite   { background: #f57896; color: #fff; }
.season-list-badge--favorites2 { background: #ca7edc; color: #fff; }
.season-list-badge--dropped    { background: #acaca4; color: #fff; }

/* Оценка ★ — капсула той же формы, что и статус выше, той же горизонтали
   (left: 14px), вплотную под ним. Если статуса нет (у сезона без
   личного статуса), JS не выводит .season-list-badge вовсе — тогда
   правило ниже (:not(:has(...))) поднимает оценку на верхнюю позицию,
   как и на обычных карточках. */
.season-score {
  position: absolute;
  top: 50px; left: 14px;
  bottom: auto; right: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ffd23f;
  color: #241705;
  font-size: var(--card-badge-font, 11px);
  font-weight: 800;
  padding: var(--card-badge-padding, 5px 14px);
  border-radius: 999px;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.3px;
  backdrop-filter: none;
  border: none;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.6),
    0 4px 8px -2px rgba(0,0,0,0.55),
    0 9px 16px -6px rgba(0,0,0,0.5);
  z-index: 4;
  max-width: calc(100% - 28px);
}
.season-poster-wrap:not(:has(.season-list-badge)) .season-score {
  top: 14px;
}
/* Скрываем оценку только когда есть бейдж "Сейчас смотрите" — он внизу и перекрывается */
.season-poster-wrap:has(.season-current-badge) .season-score { display: none; }

/* На узких карточках (мобильный / компактный размер постера в настройках)
   капсулы остаются как есть — max-width + ellipsis уже страхуют от
   переполнения (см. .season-list-badge выше), отдельная урезанная
   раскладка (иконка без подписи) больше не нужна. */

/* Золотая/сиреневая/комбо обводка+пульсация для карточек сезона
   убраны по просьбе пользователя (аналогично .anime-card в каталоге
   и постеру/виджетам на странице аниме) — статус теперь показывает
   только .season-fav-caption ниже, без рамки вокруг всей карточки. */

/* ── Подпись-каптион под названием сезона — тот же приём и та же
   раскраска, что и .card-fav-caption у обычных карточек каталога/
   поиска (см. выше): тонкая линия + мелкий капс-текст статуса.
   У season-card никогда не было своей иконки-сердечка (в отличие от
   .card-fav-star/.card-fav2-heart на обычных карточках), поэтому
   здесь каптион — единственный индикатор статуса на карточке. ── */
.season-fav-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.season-fav-caption .season-fav-caption-line {
  width: 14px;
  height: 1.5px;
  flex: none;
}
.season-fav-caption .season-fav-caption-text {
  font-size: 9.5px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-card.is-favorite:not(.is-favorites2) .season-fav-caption .season-fav-caption-line {
  background: #ffd700;
}
.season-card.is-favorite:not(.is-favorites2) .season-fav-caption .season-fav-caption-text {
  color: #ffd700;
}

.season-card.is-favorites2:not(.is-favorite) .season-fav-caption .season-fav-caption-line {
  background: #c084fc;
}
.season-card.is-favorites2:not(.is-favorite) .season-fav-caption .season-fav-caption-text {
  color: #c084fc;
}

.season-card.is-favorite.is-favorites2 .season-fav-caption .season-fav-caption-line {
  background: linear-gradient(90deg, #ffd700, #ff9d00, #9d4edd, #c084fc);
  background-size: 200% 100%;
  animation: combo-border-spin 2s linear infinite;
}
.season-card.is-favorite.is-favorites2 .season-fav-caption .season-fav-caption-text {
  background: linear-gradient(90deg, #ffd700, #ff9d00, #9d4edd, #c084fc, #ffd700);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: combo-border-spin 2s linear infinite;
}

/* ===== ТЕКУЩИЙ СЕЗОН (выделение в блоке "Другие сезоны") ===== */
.season-card.is-current-season {
  border: 2px solid var(--green) !important;
  box-shadow: 0 0 0 3px rgba(232,232,232,0.18), 0 4px 16px rgba(0,0,0,0.5) !important;
}
.season-card.is-current-season:hover {
  border-color: var(--green) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.5),
    0 0 0 3px rgba(232,232,232,0.35),
    0 0 24px rgba(232,232,232,0.3) !important;
}
/* ===== СЕЙЧАС СМОТРИТЕ — нижняя полоса нового формата ===== */
.season-current-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 8, 6, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e8e8e8;
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--season-current-badge-font, 9px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-align: center;
  padding: var(--season-current-badge-padding, 7px 6px 6px);
  border-radius: 0 0 6px 6px;
  z-index: 4;
  border-top: 1px solid rgba(232,232,232,0.25);
  box-shadow: 0 -4px 16px rgba(232,232,232,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}

/* Живая точка-индикатор */
.season-current-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #e8e8e8;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px #e8e8e8, 0 0 12px rgba(232,232,232,0.6);
  animation: scb-dot-pulse 1.6s ease-in-out infinite;
}

/* Анимированная полоска-сканер */
.season-current-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(232,232,232,0.12), transparent);
  animation: scb-scan 2.4s linear infinite;
  pointer-events: none;
}

@keyframes scb-dot-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px #e8e8e8, 0 0 12px rgba(232,232,232,0.6); }
  50%       { opacity: 0.4; box-shadow: 0 0 2px #e8e8e8, 0 0 4px  rgba(232,232,232,0.2); }
}
@keyframes scb-scan {
  0%   { left: -60%; }
  100% { left: 140%; }
}
@keyframes current-badge-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}
/* Если карточка одновременно избранная — бейдж "сейчас смотрите" не должен
   перекрываться золотой/сиреневой обводкой по z-индексу, поэтому держим
   обычный поток разметки (без absolute top), он и так внизу постера. */
.season-order-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--green-dim);
  margin-bottom: 2px;
}

/* ===== SEASON CARD — тап-анимация на тач-устройствах ===== */
@media (hover: none) {
  /* Градиентная рамка */
  .season-card:active::before {
    background: linear-gradient(135deg, rgba(232,232,232,0.5), rgba(207,207,207,0.3), rgba(168,168,168,0.2));
  }
  /* Шиммер-линия сверху */
  .season-card:not(.is-favorites2):active::after { opacity: 1; }
  /* Зелёный текст */
  .season-card:active .season-name { color: var(--green); }
  /* Виньетка на постере */
  .season-card:active .season-poster-wrap::after { opacity: 1; }
  /* Тень и рамка */
  .season-card:active {
    border-color: rgba(232,232,232,0.18);
    box-shadow:
      0 20px 50px rgba(0,0,0,0.7),
      0 0 30px rgba(232,232,232,0.1),
      0 0 0 1px rgba(232,232,232,0.06);
    transform: none !important;
  }
}

/* ===== IMPORT NAV BUTTON ===== */
.nav-tab-import {
  border-color: rgba(232,232,232,0.2);
  color: var(--green-dim);
  background: rgba(232,232,232,0.04);
}
.nav-tab-import:hover {
  background: rgba(232,232,232,0.1);
  border-color: var(--border-hl);
  color: var(--green);
}

/* =====================================================
   MODAL — premium glassmorphism
   ===================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 12, 0.78);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(18px) saturate(1.2);
  animation: fadeIn 0.25s ease;
}
.modal-overlay.hidden { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== Flat card (вариант 6): без объёма и свечения,
   акцентный бордер слева вместо рамки со всех сторон ===== */
.modal-box {
  background: #131313;
  border: none;
  border-left: 3px solid rgba(255,255,255,0.7);
  border-radius: 4px;
  width: 100%;
  max-width: 480px;
  margin: 20px;
  box-shadow: none;
  animation: slideUp 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
  overflow: hidden;
  position: relative;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  position: relative;
}

.modal-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: var(--text);
  background-clip: initial;
  color: var(--text);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.modal-close {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  line-height: 1;
}
.modal-close:hover {
  color: var(--green);
  background: rgba(232,232,232,0.1);
  border-color: rgba(232,232,232,0.3);
}

/* Текстовая кнопка "Закрыть" — не круглая, не вращается на hover.
   Размеры жёстко зафиксированы (height/min-width), чтобы догрузка
   веб-шрифта или любой другой reflow не могли сдвинуть кнопку. */
.modal-close-text {
  position: static;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 0 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  width: auto;
  height: 38px;
  min-width: 96px;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.modal-close-text:hover {
  color: var(--green);
  background: rgba(232,232,232,0.1);
  border-color: rgba(232,232,232,0.3);
  transform: translateY(-2px);
}

.modal-body { padding: 24px 26px; }
.modal-desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 18px; }

.import-field { margin-bottom: 14px; }
.import-label {
  display: block;
  font-size: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.import-input {
  width: 100%;
  background: #0c0c0c;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  outline: none;
  transition: border-color var(--t-med), background var(--t-med);
}
.import-input:focus { border-color: rgba(232,232,232,0.4); background: #0e0e0e; }
.import-input::placeholder { color: var(--text-muted); }

.import-status {
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}
.import-status.hidden { display: none; }
.import-status--loading { background: rgba(207,207,207,0.07); border: 1px solid rgba(207,207,207,0.2); color: #cfcfcf; }
.import-status--success { background: rgba(232,232,232,0.07); border: 1px solid rgba(232,232,232,0.2); color: var(--green); }
.import-status--error   { background: rgba(255,60,60,0.07);  border: 1px solid rgba(255,60,60,0.2);  color: #ff6b6b; }
.import-status--info    { background: rgba(232,232,232,0.04); border: 1px solid var(--border); color: var(--text-muted); }

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

/* .import-btn — единая "первичная" кнопка (Сохранить / Импорт /
   Экспорт / Очистить данные и т.п.) по всему сайту: общий вид,
   тактильный отклик на нажатие (лёгкое сжатие) и мягко-зелёное
   подтверждение через класс .saved (см. showSavedFeedback() в
   js/utils.js) — как в согласованном демо "Variant 1 + Save button". */
.import-btn {
  flex: 1;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.9);
  color: #0c0c0c;
  padding: 12px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.import-btn:hover {
  background: #fff;
  border-color: #fff;
}
.import-btn:active { transform: scale(0.98); }
.import-btn.saved {
  background: #cdeecb;
  border-color: #cdeecb;
  color: #0c0c0c;
  box-shadow: 0 8px 24px rgba(160,230,150,0.25);
}
/* .cleared — тот же тактильный flash-паттерн, что .saved, но для
   разрушительных действий (удаление данных): нейтрально-красный
   вместо зелёного, чтобы не читаться как "успех/похвала". Используется
   только на кнопке "Очистить выбранные" (runClear в js/import-export.js). */
.import-btn.cleared {
  background: rgba(255,60,60,0.22) !important;
  border-color: rgba(255,60,60,0.45) !important;
  color: #ff8080 !important;
  box-shadow: 0 8px 24px rgba(255,60,60,0.18);
}

.import-cancel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  padding: 12px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all var(--t-fast);
}
.import-cancel:hover { border-color: rgba(232,232,232,0.25); color: var(--green); background: rgba(232,232,232,0.04); }

/* ===== FOOTER ===== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1px;
  background: rgba(6, 8, 15, 0.7);
  backdrop-filter: blur(10px);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-logo {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 900;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2.5px;
}

/* =====================================================
   FILTER PANEL
   ===================================================== */
.filter-wrap { margin: 0 0 28px 0; position: relative; z-index: 50; }

.filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(232,232,232,0.05);
  border: 1px solid var(--border);
  color: var(--green);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-med);
  backdrop-filter: blur(8px);
}
.filter-toggle-btn:hover { background: rgba(232,232,232,0.1); border-color: var(--border-hl); }

.filter-panel {
  margin-top: 14px;
  background: rgba(13, 13, 13, 0.95);
  border: 1px solid var(--border-hl);
  border-radius: var(--radius);
  padding: 22px 24px 18px;
  /* backdrop-filter убран: ломает нативный <select> popup внутри
     transformed stacking context (animation-fill-mode: both на родителе) */
  position: relative;
  z-index: 50;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px 20px;
}

.filter-field { display: flex; flex-direction: column; gap: 6px; }

.filter-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.filter-select {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast);
  outline: none;
  /* backdrop-filter убран: он ломает нативный <select> popup в Chromium
     внутри элемента с transform (stacking context от .page-section-enter) */
}
.filter-select:focus { border-color: var(--border-hl); }

.filter-year-row { display: flex; align-items: center; gap: 8px; }
.filter-year-input { width: 80px; background: var(--bg-glass); border: 1px solid var(--border); color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 13px; padding: 9px 10px; border-radius: var(--radius-sm); outline: none; transition: border-color var(--t-fast); }
.filter-year-input:focus { border-color: var(--border-hl); }
.filter-year-sep { color: var(--text-muted); font-size: 12px; }

.filter-tags-input { width: 100%; box-sizing: border-box; background: var(--bg-glass); border: 1px solid var(--border); color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 13px; padding: 9px 10px; border-radius: var(--radius-sm); outline: none; transition: border-color var(--t-fast); }
.filter-tags-input:focus { border-color: var(--border-hl); }

.filter-tags-selected { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.filter-tag { display: inline-flex; align-items: center; gap: 5px; background: rgba(232,232,232,0.08); border: 1px solid var(--border-hl); color: var(--green); font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.filter-tag-remove { background: none; border: none; color: var(--green); cursor: pointer; font-size: 10px; padding: 0; line-height: 1; opacity: 0.7; transition: opacity var(--t-fast); }
.filter-tag-remove:hover { opacity: 1; }

/* Genre picker */
.genre-picker { position: relative; }
.genre-picker-btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg-glass); border: 1px solid var(--border); color: var(--text-muted); font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: border-color var(--t-fast), color var(--t-fast); backdrop-filter: blur(8px); }
.genre-picker-btn:hover { border-color: var(--border-hl); color: var(--text); }
.genre-picker-btn.has-selection { border-color: var(--border-hl); color: var(--green); }
.genre-picker-btn.open { border-color: var(--green); }
.genre-picker-btn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.genre-picker-chevron { flex-shrink: 0; opacity: 0.7; transition: transform var(--t-fast); }
.genre-picker-btn.open .genre-picker-chevron { transform: rotate(180deg); }
.genre-picker-popup { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: rgba(13,13,13,0.97); border: 1px solid var(--border-hl); border-radius: var(--radius-sm); z-index: 500; box-shadow: 0 12px 40px rgba(0,0,0,0.7); overflow: hidden; display: flex; flex-direction: column; backdrop-filter: blur(20px); }
.genre-picker-search-wrap { padding: 8px; border-bottom: 1px solid var(--border); }
.genre-picker-search { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; color: var(--text); font-size: 12px; font-family: 'Rajdhani', sans-serif; outline: none; transition: border-color var(--t-fast); }
.genre-picker-search:focus { border-color: var(--border-hl); }
.genre-picker-list { max-height: 240px; overflow-y: auto; padding: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1px; scrollbar-width: thin; scrollbar-color: var(--green-dim) transparent; }
.genre-picker-list::-webkit-scrollbar { width: 4px; }
.genre-picker-list::-webkit-scrollbar-thumb { background: var(--green-dim); border-radius: 4px; }
.genre-picker-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; font-size: 12.5px; font-family: 'Rajdhani', sans-serif; color: var(--text); cursor: pointer; border-radius: 4px; user-select: none; transition: background var(--t-fast), color var(--t-fast); }
.genre-picker-item:hover { background: rgba(232,232,232,0.07); color: var(--green); }
.genre-picker-item.checked { color: var(--green); }
.genre-picker-checkbox { flex-shrink: 0; position: relative; width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 3px; background: rgba(255,255,255,0.04); transition: background var(--t-fast), border-color var(--t-fast); }
.genre-picker-item.checked .genre-picker-checkbox { background: var(--green); border-color: var(--green); }
.genre-picker-item.checked .genre-picker-checkbox::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.genre-picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.genre-picker-empty { grid-column: 1 / -1; padding: 16px 8px; text-align: center; font-size: 12px; font-family: 'Rajdhani', sans-serif; color: var(--text-muted); }
.genre-picker-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-top: 1px solid var(--border); }
.genre-picker-clear,
.genre-picker-done { font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 6px 12px; cursor: pointer; transition: all var(--t-fast); }
.genre-picker-clear { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.genre-picker-clear:hover { border-color: #ff6b6b; color: #ff6b6b; }
.genre-picker-done { background: rgba(232,232,232,0.08); border: 1px solid var(--border-hl); color: var(--green); }
.genre-picker-done:hover { background: rgba(232,232,232,0.15); }

@media (max-width: 600px) {
  .genre-picker-list { grid-template-columns: 1fr; }
}

/* Filter actions */
.filter-actions { display: flex; gap: 8px; margin-top: 20px; align-items: center; }

.filter-apply-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(232,232,232,0.1);
  border: 1px solid rgba(232,232,232,0.3);
  color: var(--green);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-med);
}
.filter-apply-btn:hover {
  background: rgba(232,232,232,0.18);
  box-shadow: 0 0 20px rgba(232,232,232,0.12);
  transform: translateY(-1px);
}

.filter-reset-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--t-fast);
}
.filter-reset-btn:hover { border-color: var(--border-hl); color: var(--green); }

@media (max-width: 600px) {
  .filter-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   SCHEDULE
   ===================================================== */
.schedule-days { display: flex; flex-direction: column; gap: 10px; }

.schedule-day-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  background-image: var(--grad-card);
  backdrop-filter: blur(8px);
  transition: border-color var(--t-fast);
}
.schedule-day-block:hover { border-color: rgba(232,232,232,0.1); }

.schedule-day-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 15px 20px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color var(--t-fast);
}
.schedule-day-header:hover { color: var(--green); }

.schedule-day-header .schedule-chevron {
  margin-left: 10px;
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  flex-shrink: 0;
}
.schedule-day-header.open .schedule-chevron { transform: rotate(180deg); color: var(--green); }
.schedule-day-header.schedule-day-today { border-left: 3px solid var(--green); padding-left: 17px; }

.schedule-today-badge {
  display: inline-block;
  margin-left: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--green);
  background: rgba(232,232,232,0.1);
  border: 1px solid rgba(232,232,232,0.3);
  border-radius: 5px;
  padding: 2px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

.schedule-day-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 12px;
}
.schedule-day-header.open .schedule-day-count { color: var(--green); border-color: rgba(232,232,232,0.25); }

.schedule-day-list {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  opacity: 0;
}
.schedule-day-list.open { max-height: 4000px; opacity: 1; }

.schedule-empty-day { padding: 16px 20px; color: var(--text-muted); font-size: 13px; font-family: 'Rajdhani', sans-serif; }

.schedule-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 20px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast);
}
.schedule-row:hover { background: rgba(232,232,232,0.04); }

/* Одноразовая подсветка строки при возврате «Назад» с детальной страницы
   аниме (см. _restoreScheduleDay в js/ui.js) — коротко вспыхивает и гаснет,
   помогая глазу найти именно тот тайтл, который только что был открыт. */
.schedule-row--return-highlight {
  animation: schedule-row-return-flash 2.2s ease-out;
}
@keyframes schedule-row-return-flash {
  0%   { background: rgba(232,232,232,0.16); }
  100% { background: transparent; }
}

.schedule-row-poster { width: 48px; height: 68px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--bg-input); border: 1px solid var(--border); position: relative; }
.schedule-row-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.schedule-row-poster-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 16px; }
.schedule-row-body { flex: 1; min-width: 0; }
.schedule-row-title { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.5px; }
.schedule-row-meta { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; font-weight: 700; font-family: 'Rajdhani', sans-serif; }
.schedule-row-views { color: var(--text-muted); }
.schedule-row-score { color: var(--green); }
.schedule-row-time { flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--green); font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; white-space: nowrap; }

@media (max-width: 600px) {
  .schedule-row-poster { width: 38px; height: 54px; }
  .schedule-row-title { font-size: 13px; }
  .schedule-day-header { font-size: 13px; padding: 12px 14px; }
  .schedule-row { padding: 8px 14px; gap: 10px; }
}

/* ── Статистика дня ─────────────────────────────────── */
.schedule-day-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.schedule-day-stat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: none;
  opacity: 0.8;
}

/* ── Бейджи эпизодов ─────────────────────────────────── */
.sched-ep-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 1px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.sched-badge-new {
  color: #1a1a1a;
  background: var(--green);
  animation: sched-pulse 2s ease-in-out infinite;
}
.sched-badge-soon {
  color: var(--green);
  background: rgba(232,232,232,0.12);
  border: 1px solid rgba(232,232,232,0.35);
}
@keyframes sched-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* ── Статус пользователя ─────────────────────────────── */
.sched-user-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--green);
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(232,232,232,0.08);
  border: 1px solid rgba(232,232,232,0.2);
  white-space: nowrap;
  vertical-align: middle;
}

.schedule-poster-preview {
  position: fixed;
  width: 160px;
  height: 226px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-hl);
  box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 30px rgba(232,232,232,0.2);
  background: var(--bg-input);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9999;
}
.schedule-poster-preview.visible { opacity: 1; transform: scale(1); }
.schedule-poster-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .schedule-poster-preview { display: none; } }

/* ──────────────────────────────────────────────────────
   NOTIF POSTER PREVIEW — popup при наведении на постер
   уведомления (аналог .schedule-poster-preview)
   ────────────────────────────────────────────────────── */
.notif-poster-preview {
  position: fixed;
  width: 160px;
  height: 226px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-hl);
  box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 30px rgba(232,232,232,0.2);
  background: var(--bg-input);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 99999;
}
.notif-poster-preview.visible { opacity: 1; transform: scale(1); }
.notif-poster-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .notif-poster-preview { display: none; } }

/* =====================================================
   БЛОКИРОВКА СКРОЛЛА СТРАНИЦЫ ПОД ОВЕРЛЕЯМИ/ПОПАПАМИ
   (см. js/utils.js: lockBodyScroll/unlockBodyScroll)
   ===================================================== */
/* position:fixed вместо простого overflow:hidden — на iOS Safari
   overflow:hidden на body тач-скролл не останавливает, если фон
   под попапом длиннее экрана (страница листается "сквозь" попап).
   width:100% обязателен: у fixed-элемента пропадает ширина body,
   вычислявшаяся раньше из нормального потока, из-за чего контент
   схлопнулся бы по горизонтали. top выставляется в JS (= -scrollY
   на момент блокировки), чтобы страница не прыгала к началу. */
.body-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* =====================================================
   AUTH GATE — premium
   ===================================================== */
/* Блокировка скролла теперь идёт через .body-scroll-locked (см. выше) —
   класс оставлен пустой заглушкой на случай старых ссылок на селектор. */
.auth-locked {}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(4, 6, 14, 0.9);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease;
}
.auth-gate.hidden { display: none; }

/* Крестик закрытия #authGate — модалка входа теперь необязательная
   (гость может её закрыть и остаться без аккаунта), см. closeAuthGate()
   в js/auth.js. .auth-box уже position:relative — просто кладём кнопку
   поверх неё в правый верхний угол, как обычный .modal-close, только
   абсолютно спозиционированный (у .auth-box нет .modal-header, в
   отличие от остальных модалок сайта, где .modal-close лежит внутри
   flex-хедера). Внутри .auth-box есть overflow:hidden, но т.к. крестик
   расположен в пределах видимой области (top/right с достаточным
   отступом от края), это его не обрезает. */
.auth-gate-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}
.auth-gate-close.hidden { display: none; }

.auth-box {
  background: linear-gradient(155deg, rgba(16,16,16,0.98) 0%, rgba(12,12,12,0.97) 100%);
  border: 1px solid rgba(232,232,232,0.18);
  border-radius: 28px;
  width: 100%;
  max-width: 420px;
  margin: 20px;
  padding: 36px 32px;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.95),
    0 0 0 1px rgba(232,232,232,0.05) inset,
    0 0 80px rgba(232,232,232,0.05),
    0 0 200px rgba(207,207,207,0.03);
  animation: slideUp 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
  text-align: center;
  backdrop-filter: blur(28px);
  position: relative;
  overflow: hidden;
}

/* Rainbow arc at top */
.auth-box::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,232,232,0.7) 25%, rgba(207,207,207,0.7) 75%, transparent);
  border-radius: 0 0 50% 50%;
}

/* Ambient glow */
.auth-box::after {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 360px; height: 260px;
  background: radial-gradient(ellipse, rgba(232,232,232,0.07) 0%, transparent 65%);
  pointer-events: none;
}

.auth-logo { display: flex; justify-content: center; margin-bottom: 16px; }
.auth-logo .logo-svg {
  width: 64px;
  height: 64px;
  filter:
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff);
}

.auth-tabs {
  display: flex;
  border: 1px solid rgba(232,232,232,0.12);
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 26px;
  background: rgba(0,0,0,0.2);
  padding: 3px;
  gap: 2px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 10px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all var(--t-med);
  border-radius: 50px;
}
.auth-tab:hover { color: var(--green); background: rgba(232,232,232,0.05); }
.auth-tab.active { color: var(--green); background: rgba(232,232,232,0.12); box-shadow: 0 0 16px rgba(232,232,232,0.1); }

.auth-title {
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  font-weight: 800;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.auth-subtitle { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }

.auth-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(232,232,232,0.12);
  border-radius: 14px;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
  transition: border-color var(--t-med), box-shadow var(--t-med), background var(--t-med);
  backdrop-filter: blur(8px);
}
.auth-input:focus { outline: none; border-color: rgba(232,232,232,0.4); box-shadow: 0 0 0 3px rgba(232,232,232,0.07), 0 0 20px rgba(232,232,232,0.05); background: rgba(232,232,232,0.03); }

.auth-error {
  font-size: 12.5px;
  color: #ff6b6b;
  background: rgba(255,60,60,0.07);
  border: 1px solid rgba(255,60,60,0.2);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  text-align: left;
}
.auth-error.hidden { display: none; }

.auth-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(232,232,232,0.14) 0%, rgba(207,207,207,0.10) 100%);
  border: 1px solid rgba(232,232,232,0.35);
  color: var(--green);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: all var(--t-med);
  position: relative;
  overflow: hidden;
}
.auth-submit-btn::before {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: skewX(-20deg);
  transition: left var(--t-slow);
}
.auth-submit-btn:hover {
  background: linear-gradient(135deg, rgba(232,232,232,0.18) 0%, rgba(207,207,207,0.14) 100%);
  box-shadow: 0 0 24px rgba(232,232,232,0.14);
  transform: translateY(-1px);
}
.auth-submit-btn:hover::before { left: 125%; }
.auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

#accountEmail {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* ===== CATALOG LOAD MORE ===== */
.catalog-more-wrap { display: flex; justify-content: center; padding: 36px 0 16px; }

.catalog-more-btn {
  padding: 13px 48px;
  background: rgba(232,232,232,0.05);
  border: 1px solid rgba(232,232,232,0.25);
  color: var(--green);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-med);
  backdrop-filter: blur(8px);
}
.catalog-more-btn:hover {
  background: rgba(232,232,232,0.12);
  box-shadow: 0 0 28px rgba(232,232,232,0.14);
  transform: translateY(-2px);
}

/* ===== BACKGROUND SETTINGS =====
   Вкладки Цвет/Картинка/Градиент — тот же sliding-pill компонент,
   что и приватность списков (см. .pill-toggle/.pill-btn выше).
   Класс .bg-tab-btn оставлен пустым как "мостик" на случай, если
   где-то в JS ещё встречается селектор '.bg-tab-btn' — сам вид и
   поведение теперь полностью определяются .pill-btn. */
.bg-tab-btn { min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: rgba(232,232,232,0.12); }

.bg-preset {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bg-preset:hover { border-color: var(--green); transform: scale(1.14); box-shadow: 0 0 10px rgba(232,232,232,0.2); }

/* ===== SITE THEMES (палитры цвета интерфейса) ===== */
/* Плавный переход цвета при переключении темы — вешается на <html>
   на короткое время в js/site-themes.js. Затрагивает переменные,
   от которых зависят фон/акценты/бордеры/тени по всему сайту, чтобы
   смена палитры не была резким "миганием". */
html.site-theme-switching,
html.site-theme-switching body,
html.site-theme-switching *,
html.site-theme-switching *::before,
html.site-theme-switching *::after {
  transition: background-color 0.35s ease, background-image 0.35s ease,
              border-color 0.35s ease, color 0.35s ease,
              box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important;
}

.site-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.site-theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  text-align: left;
  transition: all var(--t-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.site-theme-card:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.03);
  transform: translateY(-2px);
}
.site-theme-card.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 0 16px rgba(232,232,232,0.15);
}

.site-theme-swatch {
  display: flex;
  gap: 5px;
}
.site-theme-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.site-theme-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}

.site-theme-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #06080f;
  opacity: 0;
  transform: scale(0.6);
  transition: all var(--t-fast);
}
.site-theme-card.is-active .site-theme-check {
  opacity: 1;
  transform: scale(1);
}

/* =====================================================
   MODAL TABS (IMPORT/EXPORT/CLEAR)
   ===================================================== */
.modal-box--wide { max-width: 560px; }

/* .modal-tabs/.modal-tab — теперь используют общий .pill-toggle/
   .pill-btn (см. блок PILL TOGGLE ниже); классы остаются как
   разметочные хуки для margin/border-bottom страницы Импорт/Экспорт,
   без своих display/цвет/фон правил, чтобы не конфликтовать с
   .pill-toggle/.pill-btn. Full-width вариант — там же, вместе с
   .import-subtabs. */
.modal-tabs {
  margin: 0 20px 0;
  padding: 0 6px 6px;
  border-bottom: 1px solid rgba(232,232,232,0.07);
  background: rgba(0,0,0,0.15);
}

.modal-panel { }
.modal-panel.hidden { display: none; }

/* Import sub-tabs — теперь используют общий .pill-toggle/.pill-btn
   (см. блок PILL TOGGLE ниже); .import-subtabs/.import-subtab остаются
   как разметочные классы-хуки (без своих display/цвет/фон правил,
   чтобы не конфликтовать с .pill-toggle/.pill-btn), плюс full-width
   вариант ниже вместе с .modal-tabs. */

/* File drop zone */
.file-drop-zone {
  border: 2px dashed rgba(232,232,232,0.15);
  border-radius: 18px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t-med);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
}
.file-drop-zone:hover { border-color: rgba(232,232,232,0.4); background: rgba(232,232,232,0.04); color: var(--green); }
.file-drop-zone.drag-over { border-color: var(--green); background: rgba(232,232,232,0.08); color: var(--green); box-shadow: 0 0 30px rgba(232,232,232,0.1); }
.file-drop-zone.has-file { border-color: var(--green-dim); background: rgba(232,232,232,0.06); color: var(--green); }

/* Clear options */
.clear-list-options { display: flex; flex-direction: column; gap: 8px; }
.clear-option { display: flex; align-items: center; gap: 10px; font-size: 14px; font-family: 'Rajdhani', sans-serif; font-weight: 600; color: var(--text); cursor: pointer; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); transition: background var(--t-fast), border-color var(--t-fast); }
.clear-option:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.clear-option input[type="checkbox"] { accent-color: var(--green); width: 16px; height: 16px; cursor: pointer; }

/* Tab count badges */
.tab-count { font-size: 11px; font-weight: 700; color: var(--green-dim); margin-left: 3px; font-family: 'Rajdhani', sans-serif; vertical-align: middle; }
.nav-tab.active .tab-count { color: var(--green); }
.nav-dropdown-item.active .tab-count, .nav-dropdown-toggle.active .tab-count { color: var(--green); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
/* Вкладки нижней строки теперь в отдельном ряду под лого/поиском, а не
   стеснены с ними в одну линию — им хватает места гораздо дольше, чем в
   однострочной раскладке. Прячем только ближе к точке перехода на
   мобильную нижнюю панель (.mobile-bottom-nav берёт на себя роль
   навигации ниже 768px — см. @media(max-width:768px) ниже). */
@media (max-width: 860px) {
  .header-inner--bottom { display: none; }
}

@media (max-width: 860px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-poster-col { position: static; display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: start; }
  .poster-glow-wrap { width: 160px; }
  .detail-widget-frame { padding: 20px; }
}

@media (max-width: 560px) {
  .header-inner { gap: 12px; }
  .logo-text { font-size: 14px; letter-spacing: 1px; }
  .anime-grid { grid-template-columns: repeat(var(--mobile-poster-cols, 2), minmax(0, 1fr)); gap: 10px; }
  .seasons-grid { grid-template-columns: repeat(var(--mobile-poster-cols, 2), minmax(0, 1fr)); gap: 10px; }
  .detail-poster-col { grid-template-columns: 1fr; }
  .poster-glow-wrap { width: 100%; max-width: 210px; margin: 0 auto; }
  .detail-title { font-size: 22px; }
}

/* ===== UTIL ===== */
.hidden { display: none !important; }

/* =====================================================
   MOBILE BOTTOM NAV — "плавающий остров" (pill), iOS-стекло
   Обёртка .mobile-bottom-nav сама больше не рисует фон/бордер/тень —
   это делает внутренний .mobile-nav-items, оформленный как отдельная
   скруглённая капсула, отступающая от края экрана. Так высота и
   позиция обёртки (--mobile-nav-height, от которой считают bottom
   попапов "Списки"/"Ещё" чуть ниже) не меняются — снаружи ничего не
   разъезжается, меняется только то, что внутри неё нарисовано.

   Капсула сделана светлой полупрозрачной (в духе iOS UITabBar /
   Control Center — тонкое молочное стекло, а не тёмная плашка), с
   сильным blur+saturate, чтобы цвет реально брался из контента под
   панелью, а не был декоративной подкраской.

   .mobile-nav-indicator — скользящая "таблетка" активной вкладки.
   Она позиционируется через inline left/width, которые вычисляет
   JS в конце файла (по offsetLeft/offsetWidth активной кнопки), а
   CSS отвечает только за transition — тем самым исходная разметка
   и все 4 существующих обработчика (setMobileActive/toggleMobileLists/
   toggleMobileSettings/их close-варианты) остаются без изменений:
   индикатор следит за классом .active через MutationObserver, а не
   встраивается в каждую функцию переключения по отдельности. */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  min-height: var(--mobile-nav-height);
  padding: 8px 14px calc(env(safe-area-inset-bottom, 8px) + 8px);
  box-sizing: border-box;
  /* Мягкая затемняющая подложка вместо сплошного фона на всю ширину —
     капсула не "тонет" на светлых фонах контента под ней. */
  background: linear-gradient(180deg, transparent 0%, rgba(6,8,15,0.55) 45%, rgba(6,8,15,0.7) 100%);
}

.mobile-nav-items {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  /* Светлое полупрозрачное стекло вместо тёмной плашки — тот самый
     iOS-эффект "материала": цвет фона почти прозрачный, всю работу
     делает backdrop-filter, вытягивая яркость/цвет из контента позади. */
  background: rgba(240, 240, 245, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  padding: 8px 6px;
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: border-radius 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ── Слияние капсулы навигации с попапом "Ещё" (Вариант "полное
   слияние") ──
   Пока #mobileSettingsPopup открыт, .mobile-bottom-nav получает класс
   .settings-open (см. toggleMobileSettings/closeMobileSettings в
   index.html). Капсула теряет верхнее скругление и свою верхнюю тень/
   хайлайт (они бы легли поверх попапа и выдали шов), становясь нижней
   половиной той же стеклянной поверхности; попап сверху уже скруглён
   и отбрасывает тень сам — вместе они читаются как одна пластина.
   Тонкая внутренняя черта сверху капсулы — тот самый едва заметный
   "стык" двух половин одного материала, как в референсе.

   .lists-open — тот же модификатор для попапа "Мои списки"
   (#mobileListsPopup / .mobile-lists-popup ниже): оба попапа не могут
   быть открыты одновременно (toggleMobileLists/toggleMobileSettings
   закрывают друг друга), поэтому одно и то же правило безопасно
   применять по обоим классам сразу.

   .sheet-open — тот же модификатор для мобильных модалок из "Ещё"
   (Фон/Размер постеров/Темы/Приватность/Поддержка/Импорт-экспорт, см.
   .modal-overlay--sheet в @media(max-width:768px) блоке модалок ниже).
   Класс вешает/снимает initModalSheetMerge() в конце index.html — общий
   MutationObserver за .hidden всех .modal-overlay--sheet разом, а не
   ручная правка в каждой из open/close функций по шести разным файлам. */
.mobile-bottom-nav.settings-open .mobile-nav-items,
.mobile-bottom-nav.lists-open .mobile-nav-items,
.mobile-bottom-nav.sheet-open .mobile-nav-items {
  border-radius: 0 0 30px 30px;
  border-top-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Скользящий индикатор — теперь тоже стекло, а не сплошная заливка:
   полупрозрачная белая подложка + собственный blur/saturate поверх
   уже стеклянной панели ("двойное стекло", как хайлайт выбранной
   вкладки в iOS Control Center — светлее фона панели, но всё ещё
   просвечивает). z-index ниже контента кнопок (color/svg поверх). */
.mobile-nav-indicator {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: left 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.mobile-nav-indicator.ready { opacity: 1; }

.mobile-nav-btn {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  border-radius: 20px;
  color: rgba(240, 240, 245, 0.75);
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 9px 10px;
  cursor: pointer;
  transition: color 0.25s ease;
  min-width: 56px;
}
.mobile-nav-btn svg {
  width: 24px;
  height: 24px;
  transition: color 0.25s ease;
}
/* Активная вкладка теперь сидит на полупрозрачной (не сплошной)
   капсуле — тёмный var(--bg), который использовался при сплошной
   белой заливке, терял контраст на просвечивающем фоне. Чистый
   белый текст/иконка + мягкое свечение держат читаемость на любом
   фоне позади панели, сохраняя ощущение "стекла", а не закрашенной
   плашки. */
.mobile-nav-btn.active {
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.mobile-nav-btn.active svg {
  color: #ffffff;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.3));
}
.mobile-nav-btn:active { opacity: 0.7; }

/* ── Мобильный попап "Ещё" (#mobileSettingsPopup) ──
   Вариант "полное слияние" (тот же язык, что и Вариант 1 в референсе
   стеклянных попапов): попап и капсула нижней навигации — один и тот
   же стеклянный материал без видимого шва между ними. Попап растёт
   прямо из капсулы .mobile-nav-items: тот же полупрозрачный фон,
   тот же blur/saturate, та же ширина и боковые отступы (14px, как у
   .mobile-bottom-nav), только скруглены исключительно верхние углы —
   низ переходит в капсулу навигации без зазора. Стык отмечен только
   тонкой внутренней чертой сверху у самой навигации (см.
   .mobile-bottom-nav.settings-open .mobile-nav-items ниже), а не
   тенью или границей между двумя блоками.

   Раньше каждая группа пунктов была отдельной карточкой (фон + рамка +
   radius + padding:4px + margin-bottom:6px), из-за чего даже группа
   из одной кнопки ("Импорт / Экспорт") занимала столько же места по
   вертикали, сколько группа из четырёх — на невысоких экранах попап
   выходил за верх видимой области. Теперь все пункты живут в одном
   .msp-list без обёрток на каждую группу (только текстовые лейблы
   .msp-label как разделители), а сам .msp-list — со своим скроллом
   и max-height, так что попап физически не может вылезти за экран:
   при нехватке места скроллится список, а не съезжает контейнер. */
.mobile-settings-popup {
  position: fixed;
  /* Раньше отступ снизу совпадал с высотой навигации (попап сидел
     ровно над капсулой). Для слияния попап нужно подвести вплотную к
     верхнему краю капсулы .mobile-nav-items, а не всей обёртки
     .mobile-bottom-nav (у которой есть свой padding) — иначе между
     низом попапа и верхом капсулы остаётся видимая полоса фона. */
  bottom: calc(var(--mobile-nav-height) - 8px + env(safe-area-inset-bottom, 0px));
  left: 14px;
  right: 14px;
  z-index: 950;
  /* Тот же полупрозрачный "молочный" материал, что и .mobile-nav-items —
     без этого совпадения слияние не читается, даже если геометрия
     идеально стыкуется. */
  background: rgba(240, 240, 245, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: none;
  border-radius: 26px 26px 0 0;
  padding: 14px 10px 8px;
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  /* Тень и хайлайт только по открытым (верхним/боковым) граням — снизу
     попап визуально продолжается в капсулу, поэтому там тени нет. */
  box-shadow: 0 -6px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  box-sizing: border-box;
  /* Запас сверху (безопасная зона + немного воздуха), чтобы попап
     никогда не наезжал на шапку сайта на маленьких экранах — вместо
     этого начинает скроллиться внутренний .msp-list. 100vh — фолбэк
     для WebView без поддержки dvh, следующее правило её переопределяет
     там, где юнит доступен (актуальные iOS/Android). */
  max-height: calc(100vh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 24px);
  max-height: calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 24px);
  display: flex;
  flex-direction: column;
}
/* Текст/иконки внутри попапа переведены с --text-muted/--border (эти
   переменные расчитаны на контраст с почти непрозрачным тёмным фоном
   rgba(15,15,15,0.98), который был раньше) на фиксированные rgba(255..)
   — на светлом просвечивающем стекле .mobile-settings-popup они на
   некоторых фонах-подложках проседали по контрасту. Ровно те же тона,
   что использует стеклянная нижняя навигация для своих надписей. */
.msp-title {
  font-size: 10px;
  color: rgba(240, 240, 245, 0.55);
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
  flex-shrink: 0;
}
.msp-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0; /* позволяет flex-ребёнку сжиматься и реально скроллиться */
  padding: 2px 2px 4px;
}
.msp-label {
  font-size: 9px;
  color: rgba(240, 240, 245, 0.4);
  letter-spacing: 1px;
  font-weight: 700;
  padding: 8px 8px 3px;
}
.msp-label:first-child { padding-top: 2px; }
.msp-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 8px;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast);
}
.msp-item svg { flex-shrink: 0; color: rgba(240, 240, 245, 0.65); }
.msp-item:hover, .msp-item:active { background: rgba(255,255,255,0.08); }
.msp-item-label { display: flex; align-items: center; gap: 6px; }
/* Тонкий разделитель перед "Выйти из аккаунта" вместо отдельной
   карточки с фоном/рамкой — кнопка по-прежнему явно выделена цветом
   (.msp-danger) и своим hover-фоном. */
.msp-sep { height: 1px; background: rgba(255,255,255,0.14); margin: 6px 4px 4px; }
.msp-item.msp-danger { color: #ff8a8a; }
.msp-item.msp-danger svg { color: #ff8a8a; }
.msp-item.msp-danger:hover, .msp-item.msp-danger:active { background: rgba(255,80,80,0.12); }
.msp-close {
  flex-shrink: 0;
  width: 100%;
  margin-top: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(240, 240, 245, 0.7);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 9px;
  border-radius: 10px;
  cursor: pointer;
}
.msp-close:hover, .msp-close:active { background: rgba(255,255,255,0.14); }

/* =====================================================
   MOBILE "МОИ СПИСКИ" POPUP (#mobileListsPopup) — редизайн
   =====================================================
   Геометрия и материал popup'а — точная копия .mobile-settings-popup
   выше (тот же принцип "полного слияния" со стеклянной нижней
   навигацией: попап растёт из капсулы .mobile-nav-items без видимого
   шва, скруглены только верхние углы, снизу — без границы/тени,
   которая выдала бы стык). Раньше это был отдельный тёмный непрозрачный
   попап (rgba(15,15,15,0.98)), визуально никак не связанный с
   навигацией под ним — теперь оба мобильных попапа ("Списки" и "Ещё")
   говорят на одном языке материала. См. .mobile-bottom-nav.lists-open
   .mobile-nav-items выше — тот же модификатор, что снимает верхнее
   скругление капсулы, пока список открыт. */
.mobile-lists-popup {
  position: fixed;
  bottom: calc(var(--mobile-nav-height) - 8px + env(safe-area-inset-bottom, 0px));
  left: 14px;
  right: 14px;
  z-index: 950;
  background: rgba(240, 240, 245, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: none;
  border-radius: 26px 26px 0 0;
  padding: 14px 10px 8px;
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow: 0 -6px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  box-sizing: border-box;
  max-height: calc(100vh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 24px);
  max-height: calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 24px);
  display: flex;
  flex-direction: column;
}
/* Ряды-карточки и текст переведены с --text/--text-muted/--border (эти
   переменные рассчитаны на контраст с почти непрозрачным тёмным фоном,
   который был раньше) на фиксированные rgba(255..) — те же тона, что и
   в .mobile-settings-popup/.mobile-nav-items, чтобы оба попапа и
   навигация читались как один материал. */
.mlp-title {
  font-size: 10px;
  color: rgba(240, 240, 245, 0.55);
  letter-spacing: 1.5px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.mlp-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 4px;
}
.mlp-close {
  flex-shrink: 0;
  width: 100%;
  margin-top: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(240, 240, 245, 0.7);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 9px;
  border-radius: 10px;
  cursor: pointer;
}
.mlp-close:hover, .mlp-close:active { background: rgba(255,255,255,0.14); }

.mlp-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* =====================================================
   СЕТКА 2×N (мои списки)
   ===================================================== */
.mlp-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mlp-grid2-bottom { margin-top: 8px; }
.mlp-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 12px 12px 11px;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.mlp-tile:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.26); }
.mlp-tile:active { background: rgba(255,255,255,0.14); }
.mlp-tile-count {
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.mlp-tile-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(240,240,245,0.85);
  margin-top: 5px;
}
.mlp-tile-small {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
}
.mlp-tile-small .mlp-tile-name { margin-top: 0; }
.mlp-tile-count-inline {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 700;
  color: rgba(240,240,245,0.55);
}

/* ── Mobile header ── */
@media (max-width: 768px) {
  .mobile-bottom-nav { display: block; }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 800;
    backdrop-filter: blur(20px) saturate(180%);
    background: rgba(6, 8, 15, 0.94);
  }
  .header-inner { padding: 8px 14px; gap: 10px; height: 60px; }
  .header-inner--top { height: 60px; }
  .header-inner--bottom { display: none !important; }
  .logo-icon-wrap, .logo-svg { width: 44px; height: 44px; }
  .header-nav { display: none !important; }
  .logo-text { font-size: 15px; }
  .search-wrap { flex: 1; min-width: 0; }
  .header-inner--top .search-wrap { flex: 1; }
  .search-input { font-size: 14px; padding: 8px 12px; height: 38px; }

  /* На мобильном колокольчик уведомлений и кнопка аккаунта переезжают
     в нижнюю навигацию/попап "Ещё" (#mobileBottomNav, #notifBellBtnMobile
     в мобильном попапе настроек) — здесь, в верхней строке, они только
     отнимают ширину у поля поиска. Схлопываем блок до нулевого размера
     (а не display:none!) и прячем содержимое визуально — .notif-bell-wrapper
     должен ОСТАТЬСЯ в layout, а не выпасть из него: js/notifications.js
     монтирует #notifDropdown как её потомка (_ensureDropdown()), и хотя на
     мобильном сам дропдаун переключается на position:fixed (см. .notif-dropdown
     в @media max-width:768px ниже в файле), fixed-потомок всё равно не
     рендерится, если предок имеет display:none — тогда мобильная кнопка
     "Уведомления" в попапе "Ещё" переставала открывать список. */
  .header-top-spacer { display: none !important; }
  .header-top-right {
    width: 0;
    min-width: 0;
    max-width: 0;
    gap: 0;
    flex-shrink: 0;
  }
  .header-top-right > *:not(.notif-bell-wrapper) { display: none !important; }
  .notif-bell-btn { display: none !important; }
  .main-content { padding: 16px 12px 80px !important; overflow-x: clip; }

  /* Grid */
  .anime-grid { grid-template-columns: repeat(var(--mobile-poster-cols, 2), minmax(0, 1fr)); gap: 12px; width: 100%; box-sizing: border-box; }
  .featured-grid { grid-template-columns: repeat(var(--mobile-poster-cols, 2), minmax(0, 1fr)); width: 100%; box-sizing: border-box; }
  .seasons-grid { grid-template-columns: repeat(var(--mobile-poster-cols, 2), minmax(0, 1fr)); gap: 12px; width: 100%; box-sizing: border-box; }

  /* Cards */
  .anime-card { overflow: hidden; min-width: 0; max-width: 100%; }
  .card-title { font-size: 12px; }
  .card-body { padding: 8px 10px; }

  /* Section headers */
  .featured-block, .list-section { overflow-x: clip; max-width: 100%; }
  .featured-header, .list-header { padding: 0 12px; margin-bottom: 14px; }
  .featured-title, .section-title { font-size: 11px; white-space: normal; letter-spacing: 1px; line-height: 1.3; }
  .featured-line { flex-shrink: 1; min-width: 8px; }

  /* Modals */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box, .modal-box--wide { width: 100%; max-width: 100%; border-radius: 28px 28px 0 0; max-height: 90vh; overflow-y: auto; margin: 0; padding: 20px 16px 32px; }
  .modal-header { margin-bottom: 16px; }

  /* ── Мобильные окна из "Ещё" (.modal-overlay--sheet) — то же "полное
     слияние" со стеклянной нижней навигацией, что и у #mobileListsPopup/
     #mobileSettingsPopup (см. .mobile-lists-popup/.mobile-settings-popup
     выше). Класс .modal-overlay--sheet стоит только на тех 6 модалках,
     что открываются из пунктов попапа "Ещё" (Фон, Размер постеров, Темы
     сайта, Приватность, Поддержка, Импорт/Экспорт — см. index.html) —
     не на все .modal-overlay подряд: трейлер и лайтбокс картинок — это
     полноэкранный просмотр медиа с уже своей мобильной адаптацией
     (крестик скрыт и т.п.), а не карточка настроек, превращать их в
     "лист снизу" не нужно и визуально неверно.

     На десктопе класс ничего не меняет (сработает уже существующий
     общий .modal-box, отцентрированный) — этот блок целиком внутри
     @media(max-width:768px). Слияние даёт JS: пока любая такая модалка
     открыта, #mobileBottomNav получает класс .sheet-open (см.
     initModalSheetMerge в конце index.html) — тот же принцип, что и у
     .settings-open/.lists-open для двух других мобильных попапов, только
     общий на все 6 модалок разом (не пришлось бы дублировать вызов в
     каждой из ~15 open/close функций по всем файлам). */
  .modal-overlay--sheet .modal-box,
  .modal-overlay--sheet .modal-box--wide {
    background: rgba(240, 240, 245, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: none;
    border-radius: 26px 26px 0 0;
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    box-shadow: 0 -6px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
    /* Подтягиваем низ листа вплотную к верху капсулы .mobile-nav-items —
       тот же расчёт отступа, что и у .mobile-lists-popup/.mobile-settings-popup. */
    margin-bottom: calc(var(--mobile-nav-height) - 8px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 24px);
    max-height: calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 24px);
  }
  .modal-overlay--sheet .modal-header,
  .modal-overlay--sheet .modal-body {
    background: none;
    border-color: rgba(255, 255, 255, 0.14);
  }
  .modal-overlay--sheet .modal-title { color: #fff; }
  .modal-overlay--sheet .modal-close,
  .modal-overlay--sheet .modal-close-text {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(240, 240, 245, 0.75);
  }

  /* Лайтбокс скриншотов: на мобильном крестик закрытия скрыт — закрытие
     идёт по тапу на фон (closeImageLightboxOutside, уже навешан в
     разметке) или системным жестом "назад", как в остальных мобильных
     bottom-sheet модалках проекта. Сам .lightbox-close остаётся в DOM
     и в disk/desktop-раскладке работает как прежде — тут только
     мобильный @media его прячет. */
  .lightbox-close { display: none; }

  /* Detail page */
  .detail-widget-frame { padding: 14px; }
  .detail-layout { grid-template-columns: 1fr !important; gap: 18px; }
  .detail-poster-col { position: static; display: grid; grid-template-columns: 130px 1fr; grid-auto-rows: auto; gap: 12px 14px; align-items: start; }
  .poster-glow-wrap { grid-column: 1; grid-row: 1; width: 130px; }
  #detailMeta { display: none !important; }
  .mobile-detail-info { grid-column: 2; grid-row: 1; }
  #detail-countdown { grid-column: 1 / -1; margin-bottom: 4px; width: 100%; box-sizing: border-box; }
  #myListBtns { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
  .detail-title { font-size: 20px; }
  .detail-meta { font-size: 13px; }

  /* Флип на мобильном: задняя сторона скрыта, курсор обычный */
  .detail-poster-flip { cursor: default; }
  .detail-poster-face-back { display: none !important; }

  /* Мобильный инфо-блок рядом с постером */
  .mobile-detail-info {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'Rajdhani', sans-serif;
  }
  .mobile-detail-info .mdi-status {
    display: inline-block;
    align-self: flex-start;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 5px;
    margin-bottom: 2px;
  }
  .mobile-detail-info .mdi-status.is-airing   { background: rgba(232,232,232,0.12); color: var(--green); border: 1px solid rgba(232,232,232,0.28); }
  .mobile-detail-info .mdi-status.is-announce { background: rgba(168,168,168,0.12); color: #a8a8a8;     border: 1px solid rgba(168,168,168,0.28); }
  .mobile-detail-info .mdi-status.is-done     { background: rgba(207,207,207,0.10); color: #cfcfcf;      border: 1px solid rgba(207,207,207,0.24); }
  .mobile-detail-info .mdi-score {
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
  }
  .mobile-detail-info .mdi-score span { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-left: 2px; }
  .mobile-detail-info .mdi-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
  .mobile-detail-info .mdi-row { display: flex; justify-content: space-between; gap: 6px; }
  .mobile-detail-info .mdi-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); flex-shrink: 0; }
  .mobile-detail-info .mdi-value { font-size: 11px; font-weight: 600; color: var(--text-muted); text-align: right; }

  /* Schedule */
  .schedule-day-header { font-size: 13px; padding: 10px 14px; }
  .schedule-row { padding: 8px 14px; gap: 10px; }
  .schedule-row-poster { width: 36px; height: 52px; }

  /* Filters */
  .filter-grid { grid-template-columns: 1fr; gap: 12px; }
  .filter-panel { padding: 16px; }
  .filter-select { font-size: 14px; width: 100%; box-sizing: border-box; }
  .filter-actions { flex-wrap: wrap; }
  .filter-apply-btn { flex: 1; justify-content: center; }

  /* Player — на мобильных растягиваем на всю ширину экрана без боковых отступов */
  .player-wrap {
    border-radius: 0;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: 16px;
  }
  /* Новый плеер-блок (.npb) — внутри .detail-widget-frame (padding:14px) и .main-content (padding:12px) */
  .npb {
    border-radius: 0;
    margin-left: -26px;
    margin-right: -26px;
    margin-bottom: 16px;
  }

  /* BG modal */
  #bgModal .modal-box { padding-bottom: 40px; }
}

@media (max-width: 380px) {
  .anime-grid { grid-template-columns: repeat(var(--mobile-poster-cols, 2), minmax(0, 1fr)); gap: 8px; }
  .seasons-grid { grid-template-columns: repeat(var(--mobile-poster-cols, 2), minmax(0, 1fr)); gap: 8px; }
  .logo-text { display: none; }
  .mobile-nav-btn { font-size: 9px; padding: 6px 8px; min-width: 44px; }
}

@media (max-width: 768px) and (orientation: landscape) {
  .mobile-bottom-nav { display: none; }
  .header-nav { display: flex !important; }
  .main-content { padding: 12px 12px 0 !important; overflow-x: clip; }
  .player-wrap { margin-left: -12px; margin-right: -12px; }
  .npb { border-radius: 0; margin-left: -26px; margin-right: -26px; }
}

/* Mobile countdown */
@media (max-width: 768px) {
  .detail-countdown { padding: 8px 10px; margin-top: 0; margin-bottom: 10px; display: block; overflow: hidden; text-align: center; width: 100%; box-sizing: border-box; }
  .countdown-label { font-size: 9px; letter-spacing: 0.8px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .countdown-timer { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 0; justify-content: center; }
  .cd-unit { width: auto; min-width: 0; flex: 0 0 auto; }
  .cd-num { font-size: 18px; letter-spacing: -0.5px; }
  .cd-lbl { font-size: 8px; margin-top: 2px; letter-spacing: 0; }
  .cd-sep { font-size: 14px; width: 8px; padding-bottom: 10px; flex: 0 0 8px; text-align: center; }
  .countdown-date { font-size: 10px; line-height: 1.3; margin-top: 4px; opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cd-already { font-size: 16px !important; font-weight: 800; color: var(--green) !important; white-space: nowrap; }
}

/* Кнопка трейлера на узких экранах — оставляем только иконку, иначе
   вместе с двумя <select> она распирает .npb-selectors и текст обрезается. */
@media (max-width: 420px) {
  .npb-trailer-btn { padding: 0 12px; }
  .npb-trailer-btn span { display: none; }
}

/* =====================================================
   LOGO ANIMATIONS
   ===================================================== */
@keyframes logoEnter {
  0%   { transform: rotate(0deg) scale(1); }
  40%  { transform: rotate(18deg) scale(1.22); filter: drop-shadow(0 0 30px rgba(232,232,232,1)) drop-shadow(0 0 10px rgba(207,207,207,0.9)); }
  70%  { transform: rotate(12deg) scale(1.16); }
  100% { transform: rotate(15deg) scale(1.18); filter: drop-shadow(0 0 24px rgba(232,232,232,1)) drop-shadow(0 0 8px rgba(207,207,207,0.8)); }
}

@keyframes logoHoverSpin {
  0%   { transform: rotate(0deg)   scale(1.1);  filter: drop-shadow(0 0 16px rgba(232,232,232,0.8)); }
  25%  { transform: rotate(8deg)   scale(1.2);  filter: drop-shadow(0 0 32px rgba(232,232,232,1)) drop-shadow(0 0 10px rgba(207,207,207,0.9)); }
  50%  { transform: rotate(0deg)   scale(1.12); filter: drop-shadow(0 0 20px rgba(232,232,232,0.9)); }
  75%  { transform: rotate(-8deg)  scale(1.2);  filter: drop-shadow(0 0 32px rgba(232,232,232,1)) drop-shadow(0 0 10px rgba(207,207,207,0.9)); }
  100% { transform: rotate(0deg)   scale(1.1);  filter: drop-shadow(0 0 16px rgba(232,232,232,0.8)); }
}

/* =====================================================
   NEW PLAYER BLOCK (.npb-*)
   ===================================================== */
.npb {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 0 40px rgba(232,232,232,0.04);
  background-image: var(--grad-card);
}
.npb.hidden { display: none; }

.npb-tabs { display: flex; background: rgba(13, 13, 13, 0.8); border-bottom: 1px solid var(--border); }
.npb-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px;
  height: 46px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.npb-tab:hover { color: var(--green); background: rgba(232,232,232,0.04); }
.npb-tab.active { color: var(--green); border-bottom-color: var(--green); background: rgba(232,232,232,0.06); }

.npb-tab-content { display: none; }
.npb-tab-content.active { display: block; }

.npb-selectors { display: flex; align-items: stretch; gap: 0; background: rgba(16, 16, 16, 0.8); border-bottom: 1px solid var(--border); }
.npb-select-wrap { position: relative; display: flex; align-items: center; border-right: 1px solid var(--border); flex: 1; min-width: 0; }
.npb-select-wrap:last-child { border-right: none; }
.npb-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 36px 12px 16px;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.npb-select option { background: #161616; color: var(--text); }
.npb-select-wrap::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--text-muted); pointer-events: none; }
.npb-select-sub { flex: 0 0 auto; }
.npb-select-sub::after { display: none; }
.npb-sub-input { padding-right: 42px !important; color: var(--text-muted) !important; cursor: default !important; width: 130px; }
.npb-sub-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 40px; display: flex; align-items: center; justify-content: center; background: rgba(20, 20, 20, 0.8); border: none; border-left: 1px solid var(--border); color: var(--text-muted); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.npb-sub-btn:hover { background: rgba(232,232,232,0.08); color: var(--green); }

.npb-trailer-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: rgba(232,232,232,0.06);
  border: none;
  border-left: 1px solid var(--border);
  color: var(--green);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.npb-trailer-btn:hover { background: rgba(232,232,232,0.14); color: var(--text); }
.npb-trailer-btn.hidden { display: none; }
.npb-trailer-btn svg { flex: 0 0 auto; }

.npb-eps-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 12px 16px;
  background: rgba(13, 13, 13, 0.8);
  border-bottom: 1px solid var(--border);
  max-height: 140px;
  overflow-y: auto;
}
.npb-eps-row::-webkit-scrollbar { width: 4px; }
.npb-eps-row::-webkit-scrollbar-thumb { background: var(--border-hl); border-radius: 2px; }

.npb-ep {
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
}
.npb-ep:hover { border-color: var(--border-hl); color: var(--green); transform: scale(1.12); }
.npb-ep.active {
  background: linear-gradient(135deg, rgba(232,232,232,0.15), rgba(207,207,207,0.1));
  border-color: var(--green);
  color: var(--green);
  font-weight: 900;
  transform: scale(1.15);
  box-shadow: 0 0 14px rgba(232,232,232,0.3);
}
.npb-ep.ep-seen { background: rgba(232,232,232,0.04); border-color: rgba(232,232,232,0.15); }
.npb-ep.ep-seen::after { content: ''; position: absolute; bottom: 3px; right: 3px; width: 5px; height: 5px; background: var(--green); border-radius: 50%; opacity: 0.7; }

.npb-iframe-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.npb-iframe-wrap .video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.npb-empty-msg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--text-muted); font-family: 'Rajdhani', sans-serif; font-size: 14px; letter-spacing: 1px; }
.npb-similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 14px; padding: 18px; }

/* ── Модалка трейлера ─────────────────────────────────────
   Переиспользует .modal-overlay/.modal-box целиком (см. правила
   .modal-* выше) — здесь только то, что специфично для содержимого. */
.trailer-modal-box { max-width: 720px; }
.trailer-modal-body { padding: 16px 20px 20px; }
.trailer-picker-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.trailer-pill {
  padding: 7px 16px;
  border-radius: 20px;
  background: rgba(232,232,232,0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.trailer-pill:hover { border-color: rgba(232,232,232,0.3); color: var(--green); }
.trailer-pill.active {
  background: linear-gradient(135deg, rgba(232,232,232,0.15), rgba(207,207,207,0.08));
  border-color: var(--green);
  color: var(--green);
}
.trailer-iframe-wrap { border-radius: var(--radius-sm); overflow: hidden; }

/* ── Лайтбокс случайных кадров ────────────────────────────
   #imgLightboxModal переиспользует .modal-overlay для фона/центрирования,
   но .lightbox-box сам по себе (не .modal-box) — контент важнее рамки.

   ИСТОРИЯ ПРАВОК (важно для понимания текущего кода):
   1) Раньше картинка появлялась мгновенно на полный размер — резкий
      скачок отдельного "окна".
   2) Затем добавили fade+scale(0.94→1) по центру экрана — уже без
      скачка, но всё ещё "окно", просто плавно проявляющееся.
   3) Сейчас (текущая версия) — полноценный FLIP-переход: картинка
      стартует ТОЧНО в геометрии кликнутой миниатюры (.shot-thumb) и
      анимированно дорастает до финального положения по центру. Эффект
      "фото увеличилось на своём месте", а не "открылось окно".

   Геометрию (position:fixed + top/left/width/height) на старте и её
   снятие на "вырост" делает JS (см. openImageLightbox/closeImageLightbox
   в index.html) — тут только сам transition и его конечная точка.
   .lightbox-img получает position:fixed на всё время анимации (JS
   переключает inline top/left/width/height), поэтому центрирование
   через flex у .lightbox-box/.modal-overlay для самой картинки уже не
   участвует. .lightbox-caption получает ТУ ЖЕ обработку — JS ставит ей
   fixed top/left/width синхронно с картинкой (следует за нижним краем
   img на каждом шаге, не только в начале/конце), поэтому она тоже не
   зависит от статичного центрирования .lightbox-box. Раньше подпись
   стояла на финальной позиции с первого кадра и просто проявлялась
   через opacity — из-за этого читалось как "текст выскочил сам по
   себе" до того, как картинка туда долетела; теперь both летят вместе.
   .lightbox-close по-прежнему остаётся обычным fade-in по центру — он
   визуально мелкий и не создаёт того же эффекта "отдельного объекта". */
.lightbox-box {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Сама .lightbox-box ничего не анимирует и не имеет фона/рамки —
     остаётся просто якорем-контейнером для крестика (и для подписи —
     ТОЛЬКО в fallback-сценарии без anchorEl, см. JS: тогда position
     остаётся не выставленным и подпись живёт в обычном flow здесь).
     Картинка (.lightbox-img) и подпись (.lightbox-caption) на время
     FLIP-анимации живут в position:fixed поверх всего, независимо от
     этого контейнера (см. JS). */
}
.lightbox-img {
  display: block;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(232,232,232,0.15);
  box-shadow: 0 32px 90px rgba(0,0,0,0.85);
  /* transform-origin намеренно НЕ center — JS выставляет left/top как
     реальные фиксированные координаты, поэтому переход считается через
     сами left/top/width/height, а не transform:scale (тот требовал бы
     постоянного пересчёта origin относительно каждой стартовой позиции
     миниатюры — width/height/top/left проще и надёжнее для FLIP). */
  transition:
    top 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    left 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-radius 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: top, left, width, height;
}
/* Пока идёт анимация (класс навешан JS-ом на время transition) — не
   мешаем кликам сквозь неё долетать до фона/крестика раньше времени. */
.lightbox-img.lightbox-flip-animating,
.lightbox-caption.lightbox-flip-animating { pointer-events: none; }
.lightbox-caption {
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-align: center;
  opacity: 0;
  white-space: nowrap;
  /* Позиционный transition — тот же набор свойств/тайминг, что у
     .lightbox-img (см. выше), чтобы подпись летела ТОЧНО синхронно с
     картинкой, а не отдельным движением. Работает, только когда JS
     выставил position:fixed (см. openImageLightbox/closeImageLightbox);
     в fallback-сценарии без anchorEl position остаётся не тронутым
     (обычный document flow под картинкой), и transition на top/left/
     width просто не запускается, никакого вреда. */
  transition:
    top 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    left 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.16s ease; /* Fade-OUT (класс снят) — быстро, без задержки:
      гаснет сразу при закрытии, не дожидаясь конца полёта картинки. */
}
.lightbox-box.lightbox-anim-in .lightbox-caption {
  opacity: 1;
  /* Fade-IN унаследует top/left/width transition сверху (одно и то же
     правило действует всегда — сюда добавляется только своя длительность
     и задержка для opacity). Задержка нужна, чтобы подпись проявлялась
     ближе к концу геометрического перелёта, когда она уже фактически
     оказалась под картинкой, а не раньше. */
  transition:
    top 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    left 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.22s ease 0.2s;
}
.lightbox-close {
  position: absolute;
  top: -14px; right: -14px;
  background: rgba(14,14,14,0.95);
  border: 1px solid rgba(232,232,232,0.25);
  opacity: 0;
  transition: opacity 0.14s ease; /* fade-out: см. комментарий у .lightbox-caption выше */
}
.lightbox-box.lightbox-anim-in .lightbox-close {
  opacity: 1;
  transition: opacity 0.24s ease 0.1s; /* fade-in: та же логика с задержкой */
}
/* Фон самой модалки (#imgLightboxModal, через .modal-overlay) обычно
   проявляется через @keyframes fadeIn — для FLIP это подходит: тёмная
   подложка мягко наплывает, пока фото летит с места клика к центру,
   не конкурируя визуально с самим движением фото. Ничего переопределять
   тут не нужно, специально оставлено как в .modal-overlay. */
@media (prefers-reduced-motion: reduce) {
  /* Критично для .lightbox-caption: основной transition теперь включает
     top/left/width (геометрический перелёт синхронно с картинкой, см.
     комментарий у .lightbox-caption выше) — без этого !important-сброса
     подпись продолжала бы физически лететь по экрану даже с включённым
     системным "уменьшить анимацию". */
  .lightbox-img { transition: opacity 0.15s ease !important; }
  .lightbox-caption,
  .lightbox-close,
  .lightbox-box.lightbox-anim-in .lightbox-caption,
  .lightbox-box.lightbox-anim-in .lightbox-close {
    transition: opacity 0.15s ease !important;
  }
}

/* =====================================================
   COMMENTS (.cmts-*)
   ===================================================== */
.cmts-section {
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 24px;
  margin-top: 64px;
  position: relative;
}

.cmts-section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(232,232,232,0.4) 20%, rgba(232,232,232,0.6) 50%, rgba(232,232,232,0.4) 80%, transparent 100%);
  margin-bottom: 44px;
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(232,232,232,0.25), 0 0 30px rgba(232,232,232,0.08);
}
.cmts-section.hidden { display: none; }

/* ── Анимация раскрытия / закрытия блока комментариев ──
   Управляется через max-height + opacity + transform, чтобы переход был
   плавным "аккордеоном", а не резким display:none/block.
   .cmts-section больше не получает .hidden во время анимации — вместо
   этого JS навешивает .cmts-anim-open / .cmts-anim-closing (см. js/comments.js). */
.cmts-section {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.32s ease,
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    margin-top 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cmts-section.cmts-anim-open {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .cmts-section { transition: opacity 0.2s ease; transform: none !important; }
}

.cmts-toggle-wrap { max-width: 1200px; margin: 64px auto 0; padding: 0 24px; display: flex; justify-content: center; }
.cmts-toggle-wrap.hidden { display: none; }

.cmts-toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: rgba(232,232,232,0.04);
  border: 1px solid rgba(232,232,232,0.2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--t-med);
  width: 100%;
  max-width: 520px;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.cmts-toggle-btn:hover { background: rgba(232,232,232,0.08); border-color: rgba(232,232,232,0.4); box-shadow: 0 0 24px rgba(232,232,232,0.08); }
.cmts-toggle-btn svg { color: var(--green); flex-shrink: 0; }
.cmts-toggle-btn .cmts-toggle-chevron {
  margin-left: 2px;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  flex-shrink: 0;
}
.cmts-toggle-btn.is-open .cmts-toggle-chevron { transform: rotate(180deg); }
.cmts-toggle-count { font-size: 12px; font-weight: 800; background: rgba(232,232,232,0.1); color: var(--green); border-radius: 20px; padding: 2px 12px; }
.cmts-toggle-spoiler { font-size: 12px; color: #9a9a9a; opacity: 0.8; letter-spacing: 0.3px; }

#commentsToggleWrap + #commentsSection,
#commentsToggleWrap ~ #commentsSection { margin-top: 24px; }

.cmts-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(232,232,232,0.1); }
.cmts-title { display: flex; align-items: center; gap: 10px; font-family: 'Orbitron', monospace; font-size: 14px; font-weight: 700; color: var(--text); margin: 0; }
.cmts-title svg { color: var(--green); flex-shrink: 0; }
.cmts-count { font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 800; background: rgba(232,232,232,0.1); color: var(--green); border-radius: 20px; padding: 2px 12px; }
.cmts-source { font-family: 'Rajdhani', sans-serif; font-size: 12px; color: var(--text-muted); letter-spacing: 1px; opacity: 0.7; }

.cmts-list { display: flex; flex-direction: column; gap: 14px; }

.cmt-card {
  display: flex;
  gap: 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color var(--t-fast), background var(--t-fast);
  opacity: 0;
  transform: translateY(12px);
  animation: cmtIn 0.35s ease forwards;
  backdrop-filter: blur(8px);
}
@keyframes cmtIn { to { opacity: 1; transform: translateY(0); } }
.cmt-card:hover { border-color: rgba(232,232,232,0.1); background: rgba(232,232,232,0.02); }

.cmt-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #242424, #161616); border: 2px solid rgba(232,232,232,0.18); display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', monospace; font-size: 14px; font-weight: 700; color: var(--green); overflow: hidden; }
.cmt-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cmt-body { flex: 1; min-width: 0; }
.cmt-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cmt-name { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: var(--green); letter-spacing: 0.3px; }
.cmt-date { font-size: 11px; color: var(--text-muted); opacity: 0.7; }
.cmt-score { display: flex; align-items: center; gap: 3px; font-size: 11px; font-family: 'Rajdhani', sans-serif; font-weight: 700; color: #f9c74f; }
.cmt-score svg { width: 11px; height: 11px; }
.cmt-text { font-size: 14px; line-height: 1.7; color: #a8a8a8; word-break: break-word; }

.cmt-footer { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

.cmt-votes { display: flex; align-items: center; gap: 4px; }
.cmt-vote { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; cursor: default; user-select: none; transition: background var(--t-fast), color var(--t-fast); border: 1px solid transparent; }
.cmt-vote svg { width: 13px; height: 13px; flex-shrink: 0; }
.cmt-vote--like { color: rgba(232, 232, 232, 0.75); border-color: rgba(232, 232, 232, 0.15); background: rgba(232, 232, 232, 0.05); }
.cmt-vote--like:hover { background: rgba(232, 232, 232, 0.12); color: #e8e8e8; }
.cmt-vote--dislike { color: rgba(255, 80, 80, 0.65); border-color: rgba(255, 80, 80, 0.12); background: rgba(255, 80, 80, 0.04); }
.cmt-vote--dislike:hover { background: rgba(255, 80, 80, 0.1); color: #ff5050; }

.cmt-replies-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: rgba(232,232,232,0.5); font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; padding: 3px 0; transition: color var(--t-fast); }
.cmt-replies-btn:hover { color: var(--green); }

.cmt-replies { margin-top: 12px; padding-left: 14px; border-left: 2px solid rgba(232,232,232,0.08); display: flex; flex-direction: column; gap: 10px; }
.cmt-reply { display: flex; gap: 10px; opacity: 0; transform: translateX(-6px); animation: cmtReplyIn 0.25s ease forwards; }
@keyframes cmtReplyIn { to { opacity: 1; transform: translateX(0); } }
.cmt-avatar--sm { width: 30px !important; height: 30px !important; font-size: 11px !important; }
.cmt-reply .cmt-text { font-size: 13px; }

.cmt-mention { color: var(--green); font-weight: 600; opacity: 0.85; }

/* ── Спойлер внутри текста комментария ── [спойлер="..."]...[/спойлер] ──
   Рендерится как inline-блок: кнопка-переключатель + скрытый текст,
   который плавно раскрывается через max-height (см. js/comments.js). */
.cmt-spoiler {
  display: block;
  margin: 8px 0;
}
.cmt-spoiler-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(232,232,232,0.06);
  border: 1px solid rgba(232,232,232,0.22);
  border-radius: 20px;
  color: var(--green);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cmt-spoiler-toggle:hover { background: rgba(232,232,232,0.11); border-color: rgba(232,232,232,0.4); }
.cmt-spoiler-toggle .cmt-spoiler-chevron {
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cmt-spoiler[data-spoiler-open="1"] .cmt-spoiler-chevron { transform: rotate(180deg); }
.cmt-spoiler[data-spoiler-open="1"] .cmt-spoiler-toggle { background: rgba(232,232,232,0.1); border-color: rgba(232,232,232,0.35); }

.cmt-spoiler-body {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}
.cmt-spoiler-body--open { opacity: 1; }
.cmt-spoiler-body-inner {
  display: block;
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(232,232,232,0.03);
  border-left: 2px solid rgba(232,232,232,0.25);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: #a8a8a8;
}
@media (prefers-reduced-motion: reduce) {
  .cmt-spoiler-body { transition: opacity 0.2s ease; }
  .cmt-spoiler-toggle .cmt-spoiler-chevron { transition: none; }
}

@keyframes cmtSpin { to { transform: rotate(360deg); } }
.cmt-spin { animation: cmtSpin 0.8s linear infinite; display: inline-block; }

.cmts-loader { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 32px; color: var(--text-muted); font-family: 'Rajdhani', sans-serif; font-size: 14px; }
.cmts-loader.hidden { display: none; }
.cmts-spinner { width: 20px; height: 20px; border: 2px solid rgba(232,232,232,0.1); border-top-color: var(--green); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cmts-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px; color: var(--text-muted); font-family: 'Rajdhani', sans-serif; font-size: 14px; }
.cmts-empty.hidden { display: none; }

.cmts-load-more { display: block; margin: 24px auto 0; padding: 10px 36px; background: transparent; border: 1px solid rgba(232,232,232,0.2); border-radius: var(--radius-sm); color: var(--green); font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: all var(--t-fast); }
.cmts-load-more:hover { background: rgba(232,232,232,0.07); border-color: var(--green); }
.cmts-load-more.hidden { display: none; }

@media (max-width: 600px) {
  .cmts-section { padding: 0 12px; }
  .cmt-card { padding: 12px; gap: 10px; }
  .cmt-avatar { width: 32px; height: 32px; font-size: 12px; }
}
/* ═══════════════════════════════════════════════════
   ИСТОРИЯ ПРОСМОТРОВ
   ═══════════════════════════════════════════════════ */

/* Кнопка очистки истории */
.history-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.history-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: rgba(255, 80, 80, 0.08);
  border: 1px solid rgba(255, 80, 80, 0.28);
  border-radius: var(--radius-sm);
  color: #ff8888;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.history-clear-btn:hover {
  background: rgba(255, 80, 80, 0.16);
  border-color: rgba(255, 80, 80, 0.5);
  color: #ffaaaa;
}
.history-clear-btn svg { flex-shrink: 0; }

/* Мета-строка внутри карточки истории (время + серия) */
.history-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.history-ep {
  font-size: 12px;
  color: var(--green-dim);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.history-time {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}

/* Разделитель в выпадающем меню nav */
.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

/* Пункт «История» — немного выделяем цветом */
.nav-dropdown-item--history {
  color: var(--green-dim) !important;
}
.nav-dropdown-item--history:hover {
  color: var(--green) !important;
}

/* Пункты «Импорт» / «Настройки» в меню аккаунта */
.nav-dropdown-item--import,
.nav-dropdown-item--settings,
.nav-dropdown-item--support {
  justify-content: flex-start;
}

/* Адаптив */
@media (max-width: 600px) {
  .history-actions { margin-bottom: 12px; }
  .history-clear-btn { font-size: 12px; padding: 7px 14px; }
}

/* ════════════════════════════════════════════════════
   NOTIFICATIONS — кнопка в шапке + тост-уведомления
   ════════════════════════════════════════════════════ */

/* ── Кнопка «Проверить» в навбаре ── */
/* ── Кнопка-колокольчик ── */
.notif-bell-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: rgba(168,168,168,0.75);
  cursor: pointer;
  transition: background var(--t-med), color var(--t-med);
  flex-shrink: 0;
}
.notif-bell-btn:hover {
  background: rgba(255,255,255,0.07);
  color: #e8e8e8;
}
.notif-bell-btn.has-unread {
  color: var(--green);
}
.notif-bell-btn svg {
  display: block;
  flex-shrink: 0;
}

/* ── Бейдж непрочитанных ── */
.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: #e63946;
  border: 2px solid var(--bg, #0a0e1a);
  border-radius: 99px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* ── Обёртка кнопки-колокольчика ── */
.notif-bell-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* ── Дропдаун история уведомлений ──
   ФИКС мобильного бага: раньше жил внутри .notif-bell-wrapper и держался
   под колокольчиком через position:absolute от неё (position:relative).
   На мобильном .notif-dropdown переключается на position:fixed (см. @media
   ниже), но .notif-bell-wrapper лежит внутри .site-header, а у шапки на
   мобильном есть backdrop-filter (см. @media max-width:768px у
   .site-header) — backdrop-filter, как и transform, создаёт новый
   containing block для потомков с position:fixed. Из-за этого весь
   fixed-дропдаун позиционировался не от экрана, а от 60-пиксельной шапки:
   bottom:0 означало "низ шапки", а не "низ экрана", и лист улетал вверх и
   обрезался вместо того чтобы выехать снизу.
   Теперь элемент монтируется в document.body (js/notifications.js,
   _ensureDropdown()) — там нет ни transform, ни backdrop-filter, так что
   position:fixed считается от реального viewport на любой ширине экрана.
   На десктопе (>768px, где эта схема остаётся popup-ом под колокольчиком,
   а не нижним листом) координаты top/right взамен CSS от родителя теперь
   считает JS через getBoundingClientRect() — см. _positionDropdownDesktop()
   в js/notifications.js, вызывается при каждом открытии и при resize. */
.notif-dropdown {
  position: fixed;
  z-index: 200;
  width: 320px;
  max-height: 420px;
  background: rgba(17, 17, 17, 0.95);
  /* Было var(--border-hl) = rgba(255,255,255,0.2) — по hue уже белый,
     но такая низкая непрозрачность на тёмном фоне читалась серой.
     Подняли до 0.5, оставаясь тонкой линией, а не сплошной рамкой. */
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.7),
    0 0 0 1px rgba(232,232,232,0.05) inset,
    0 0 30px rgba(232,232,232,0.06);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.notif-dropdown--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Узкий 320px popup, растущий из точки клика, на телефоне неудобен и на
   самых маленьких экранах (320-360px) может вылезать за край даже с
   JS-коррекцией. Вместо этого превращаем его в нижний лист на весь
   экран — тот же приём, что уже использует .modal-box на мобильном
   (см. его правила в @media max-width:768px). inset здесь
   полностью перебивает top/right, выставленные в базовом правиле выше
   (и возможный инлайн top/right от _positionDropdownDesktop() —
   на мобильном она их сама сбрасывает в '', так что конфликта нет). */
@media (max-width: 768px) {
  .notif-dropdown {
    z-index: 99999;
    inset: auto 0 0 0;
    width: auto;
    max-height: min(78vh, calc(100vh - 24px));
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    /* Тот же приём "бесконечного box-shadow", что и у тур-спотлайта —
       рисует затемнение всего экрана позади листа одним свойством,
       без дополнительного DOM-узла под подложку-оверлей. */
    box-shadow:
      0 0 0 9999px rgba(2, 4, 12, 0.72),
      0 -8px 40px rgba(0,0,0,0.6);
  }
  .notif-dropdown--open {
    transform: translateY(0);
  }
  .notif-dropdown__header { padding: 16px 16px 12px; flex-shrink: 0; }
  .notif-dropdown__list { max-height: none; padding-bottom: env(safe-area-inset-bottom, 12px); }
}

.notif-dropdown__header {
  display: flex;
  align-items: center;
  padding: 13px 14px 11px;
  border-bottom: 1px solid rgba(232,232,232,0.10);
  flex-shrink: 0;
  gap: 0;
}
.notif-dropdown__title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--green);
  flex: 1;
}
.notif-dropdown__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.notif-dropdown__clear {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.notif-dropdown__clear:hover {
  color: #e63946;
  background: rgba(230,57,70,0.12);
}
.notif-dropdown__refresh {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.notif-dropdown__refresh:hover {
  color: var(--green);
  background: rgba(232,232,232,0.10);
}
.notif-dropdown__refresh:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.notif-dropdown__refresh svg {
  transition: transform 0.5s ease;
}
.notif-dropdown__refresh--spinning svg {
  animation: notif-spin 0.8s linear infinite;
}
@keyframes notif-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.notif-dropdown__list {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: 6px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,232,232,0.2) transparent;
}
.notif-dropdown__list::-webkit-scrollbar { width: 4px; }
.notif-dropdown__list::-webkit-scrollbar-thumb { background: rgba(232,232,232,0.2); border-radius: 2px; }

.notif-dropdown__empty {
  padding: 28px 16px;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: var(--text-dim);
  opacity: 0.6;
}

.notif-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
  animation: notifItemIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.notif-dropdown__item:last-child { border-bottom: none; }
.notif-dropdown__item:hover { background: rgba(255,255,255,0.03); }
.notif-dropdown__item--clickable:hover {
  background: rgba(232, 232, 232, 0.07);
  border-left: 2px solid #e8e8e8;
  padding-left: 10px;
  transition: all 0.15s ease;
}
.notif-dropdown__item--clickable { transition: all 0.15s ease; border-left: 2px solid transparent; padding-left: 10px; }
.notif-dropdown__item--removing {
  animation: notifItemOut 0.28s cubic-bezier(0.55, 0, 1, 0.45) both !important;
  pointer-events: none;
  overflow: hidden;
}

@keyframes notifItemIn {
  from {
    opacity: 0;
    transform: translateX(18px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateX(0);
    max-height: 120px;
  }
}
@keyframes notifItemOut {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 120px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  to {
    opacity: 0;
    transform: translateX(24px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.notif-dropdown__item-icon { display: none; }
.notif-dropdown__item-poster {
  width: 36px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}
.notif-dropdown__item-content { flex: 1; min-width: 0; }
.notif-dropdown__item-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 3px;
}
.notif-dropdown__item-label--premiere { color: #d8d8d8; }
.notif-dropdown__item-label--message { color: var(--blue); }
.notif-dropdown__item-label--friend { color: #a0a0a0; }
/* Аватар человека (сообщение/заявка в друзья) — круглый, в отличие от
   прямоугольного постера аниме, чтобы визуально не путать "это человек"
   с "это тайтл", как и везде в остальном UI (chat-convo-avatar и т.д.).
   ВАЖНО: .notif-dropdown__item-poster по умолчанию 36×50 (портретный
   постер аниме) — одного border-radius:50% на прямоугольнике недостаточно,
   он даёт растянутый по вертикали овал, а не круг. Явно переопределяем
   width/height в квадрат, чтобы получился настоящий круг, как у аватарок
   в остальном UI. */
.notif-dropdown__item--person .notif-dropdown__item-poster {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.notif-dropdown__item-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.notif-dropdown__item-body {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  /* Было var(--text-dim) — тёмно-серый (#55555a), читался почти
     нечитаемым на тёмном фоне панели. Белый, как заголовок записи. */
  color: var(--text);
  opacity: 0.75;
}
.notif-dropdown__item-ago {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  /* То же самое — было var(--text-dim) + opacity:0.55 (двойное
     затемнение), теперь белый с одной лёгкой opacity для иерархии. */
  color: var(--text);
  opacity: 0.6;
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 3px;
}

/* ── Контейнер тостов (фиксированный, снизу справа) ── */
#notifToastContainer {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

/* ── Один тост ── */
.notif-toast {
  pointer-events: all;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 340px;
  background: linear-gradient(145deg, rgba(14,14,14,0.97) 0%, rgba(10,10,10,0.99) 100%);
  border: 1px solid rgba(232,232,232,0.25);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(232,232,232,0.06), 0 0 20px rgba(232,232,232,0.08);
  backdrop-filter: blur(20px);
  padding: 14px 12px 14px 14px;
  opacity: 0;
  transform: translateX(30px) scale(0.96);
  transition: opacity 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.notif-toast::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-primary);
  border-radius: 12px 12px 0 0;
  opacity: 0.7;
}
.notif-toast--premiere::before {
  background: linear-gradient(90deg, #909090, #d8d8d8, #909090);
}
.notif-toast--message::before {
  background: linear-gradient(90deg, #c0c0c0, #cfcfcf, #c0c0c0);
}
.notif-toast--friend_request::before {
  background: linear-gradient(90deg, #888888, #a0a0a0, #888888);
}
.notif-toast--clickable { cursor: pointer; }
.notif-toast--clickable:hover { border-color: rgba(232,232,232,0.4); transform: translateX(0) scale(1.015); }
/* Аватар человека — круглый, тот же мотив что у .notif-dropdown__item--person выше.
   ВАЖНО: .notif-toast__poster по умолчанию 48×68 (портретный постер аниме) —
   как и в дропдауне, одного border-radius:50% на прямоугольнике недостаточно,
   получается растянутый по вертикали овал. Явно переопределяем width/height
   в квадрат 48×48 (совпадает с .chat-convo-avatar), чтобы вышел настоящий круг. */
.notif-toast--message .notif-toast__poster,
.notif-toast--friend_request .notif-toast__poster {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.notif-toast--in {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.notif-toast--out {
  opacity: 0;
  transform: translateX(30px) scale(0.96);
}

.notif-toast__icon {
  display: none;
}
.notif-toast__poster {
  width: 48px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(232,232,232,0.15);
}
.notif-toast__content {
  flex: 1;
  min-width: 0;
}
.notif-toast__label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
.notif-toast--premiere .notif-toast__label {
  color: #d8d8d8;
}
.notif-toast--message .notif-toast__label { color: var(--blue); }
.notif-toast--friend_request .notif-toast__label { color: #a0a0a0; }
.notif-toast__title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-toast__body {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.3;
}
.notif-toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
  margin-top: -2px;
  align-self: flex-start;
}
.notif-toast__close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
}

/* Мобильная адаптация */
@media (max-width: 600px) {
  /* ФИКС: bottom:12px без учёта отступа "домашней полоски" на iPhone
     (и аналогичных жестовых зон на Android) — тост упирался вплотную в
     неё. env(safe-area-inset-bottom) добавляет системный отступ снизу,
     когда он есть, и не занимает места на устройствах без такой зоны. */
  #notifToastContainer { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .notif-toast { width: calc(100vw - 24px); }
  /* .notif-dropdown на этой ширине уже полностью покрыт @media
     max-width:768px выше (inset:auto 0 0 0 растягивает лист на всю
     ширину экрана) — здесь больше не нужно отдельное right/width. */
}

/* ════════════════════════════════════════════════════════
   Анимация перехода между страницами/секциями
   (Главная / Каталог / Расписание / Мои списки / История / Деталка)
   ════════════════════════════════════════════════════════ */
@keyframes pageSectionIn {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.page-section-enter {
  animation: pageSectionIn 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .page-section-enter { animation: none; }
}

/* ── Бегущая полоса-индикатор перехода сверху (под хедером) ── */
.top-progress-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 101;
}

.top-progress-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 0 4px 4px 0;
  background: var(--grad-primary);
  box-shadow: 0 0 10px rgba(232,232,232,0.7), 0 0 2px rgba(232,232,232,0.9);
  transform: translateX(-100%);
}

.top-progress-bar.is-active {
  opacity: 1;
}

.top-progress-bar.is-active .top-progress-bar__fill {
  animation: topProgressRun 0.62s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes topProgressRun {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(130%); }
  100% { transform: translateX(280%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .top-progress-bar.is-active .top-progress-bar__fill { animation: none; }
}

/* ===== WATCHING-NOW BADGE: Сейчас смотрите — reduced motion fallback ===== */
@media (prefers-reduced-motion: reduce) {
  .season-current-badge::before { animation: none; opacity: 1; }
  .season-current-badge::after  { animation: none; display: none; }
}
/* ====================================================
   SUPPORT MODAL
   ==================================================== */

/* Кнопка поддержки в дропдауне */
.nav-dropdown-item--support {
  color: var(--text);
}
.nav-dropdown-item--support:hover {
  background: var(--green-faint);
}

/* ── Категории ── */
.sup-field { margin-bottom: 18px; }
.sup-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px; }
.sup-required { color: var(--green); }

.sup-category-row { display: flex; gap: 8px; flex-wrap: wrap; }

.sup-cat-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-hl);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
}
.sup-cat-btn:hover {
  color: var(--text);
  border-color: rgba(232,232,232,0.3);
  background: var(--green-faint);
}
.sup-cat-btn.active {
  color: var(--green);
  border-color: var(--green-dim);
  background: rgba(232,232,232,0.08);
}

/* ── Textarea ── */
.sup-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 220px;
  resize: vertical;
  background: var(--bg-input);
  border: 1px solid var(--border-hl);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  padding: 12px 14px;
  box-sizing: border-box;
  transition: border-color .18s;
  outline: none;
}
.sup-textarea:focus { border-color: var(--green-dim); }
.sup-textarea::placeholder { color: var(--text-muted); }

.sup-char-count {
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Drop zone ── */
.sup-drop-zone {
  border: 1.5px dashed var(--border-hl);
  border-radius: 10px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: var(--bg-input);
  transition: border-color .18s, background .18s;
  font-size: 13px;
  color: var(--text-muted);
}
.sup-drop-zone:hover, .sup-drop-zone.drag-over {
  border-color: var(--green-dim);
  background: var(--green-faint);
  color: var(--text);
}

/* ── File list ── */
.sup-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.sup-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
}
.sup-file-icon { color: var(--green-dim); flex-shrink: 0; }
.sup-file-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-file-size { color: var(--text-muted); flex-shrink: 0; }
.sup-file-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; padding: 0 2px;
  transition: color .15s;
}
.sup-file-remove:hover { color: #ff5c5c; }

/* ── Cooldown bar ── */
.sup-cooldown {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(168,168,168,0.07);
  border: 1px solid rgba(168,168,168,0.2);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  color: #a8a8a8;
  margin-bottom: 12px;
}
.sup-cooldown.hidden { display: none; }

/* ── Status ── */
.sup-status {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 10px;
}
.sup-status.hidden { display: none; }
.sup-status--ok    { background: rgba(232,232,232,0.06); border: 1px solid rgba(232,232,232,0.2); color: var(--green); }
.sup-status--error { background: rgba(255,70,70,0.07); border: 1px solid rgba(255,70,70,0.25); color: #ff6b6b; }

/* ── Submit button ── */
.sup-submit-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--green-dim), var(--green-mid));
  color: #06080f;
  font-weight: 700;
  font-size: 13px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity .18s, transform .12s;
}
.sup-submit-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.sup-submit-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ── Spinner inside button ── */
.sup-spinner {
  width: 13px; height: 13px;
  border: 2px solid rgba(10,10,10,0.25);
  border-top-color: #06080f;
  border-radius: 50%;
  display: inline-block;
  animation: supSpin .7s linear infinite;
}
@keyframes supSpin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   NAV HOVER ANIMATIONS — красивые эффекты на навбар
   ═══════════════════════════════════════════════════════════ */

/* ── Общий контейнер: тонкое свечение при наведении внутри ── */
.header-nav {
  transition: box-shadow 0.3s ease;
}
.header-nav:hover {
  box-shadow: 0 0 0 1px rgba(232,232,232,0.08), 0 4px 24px rgba(0,0,0,0.4);
}

/* ── nav-tab: ripple-слой + плавный slide иконки ── */
.nav-tab {
  transition:
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* Псевдоэлемент-полоска снизу убран — подсветка активной/наведённой
   вкладки теперь идёт рамкой (inset box-shadow, см. .nav-tab:hover /
   .nav-tab.active в основном блоке), а не подчёркиванием. */
.nav-tab::after { display: none; }

/* Наведение теперь меняет только цвет/фон/тень (см. правило .nav-tab:hover
   в основном блоке выше) — без translateY и без letter-spacing, чтобы
   ни ширина, ни позиция кнопки не менялись и панель не «дёргалась» */

/* Иконка: spin при hover на активной + scale на обычной */
.nav-tab:hover .nav-tab-icon {
  filter: drop-shadow(0 0 4px rgba(232,232,232,0.5));
  transform: scale(1.15);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), filter 0.22s ease;
}
.nav-tab-icon {
  transition: transform 0.22s ease, filter 0.22s ease;
}

/* ── Кнопки «Главная» / «Каталог» / «Расписание» ── */
#tabHome:hover       { color: #e8e8e8; }
#tabCatalog:hover    { color: #cfcfcf; }
#tabSchedule:hover   { color: #cfcfcf; }

#tabHome:hover::after       { background: linear-gradient(90deg, rgba(232,232,232,0), #e8e8e8, rgba(232,232,232,0)); }
#tabCatalog:hover::after    { background: linear-gradient(90deg, rgba(207,207,207,0), #cfcfcf, rgba(207,207,207,0)); }
#tabSchedule:hover::after   { background: linear-gradient(90deg, rgba(207,207,207,0), #cfcfcf, rgba(207,207,207,0)); }

/* ── Мои списки: toggle ── */
#tabLists:hover { color: #e0e0e0; }
#tabLists:hover::after { background: linear-gradient(90deg, rgba(224,224,224,0), #e0e0e0, rgba(224,224,224,0)); }

/* стрелка дропдауна плавно */
.nav-dropdown-arrow {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease !important;
}

/* ── Dropdown menu: красивые item-анимации ── */

/* Каждый item получает slide + fade при появлении.
   ВАЖНО: раньше задержки считались через :nth-child(N) от ВСЕХ детей
   .nav-dropdown-menu — а среди них вперемешку лежат ещё <div class=
   "nav-dropdown-divider"> (разделители) и пункты, скрытые гостю/юзеру
   через class="hidden" (tabProfile, tabFriends, tabImport и т.д., см.
   updateGuestUI() в js/auth.js). Эти элементы всё равно физически
   остаются в DOM и занимают номера в общем счёте nth-child, поэтому
   реальная позиция «Поддержки»/«Инструкция/FAQ» у гостя — 11-я и 12-я,
   а правил animation-delay было задано только до :nth-child(10) —
   дальше анимация появления пропадала (и заодно съезжала у «Выйти»,
   14-й по счёту).
   Чиним через :nth-child(N of .nav-dropdown-item) — этот синтаксис
   (селектор уровня 4) считает позицию ТОЛЬКО среди элементов с классом
   .nav-dropdown-item, полностью игнорируя разделители-<div> и не
   завязываясь на то, кто из пунктов сейчас скрыт. Работает в
   Chrome/Edge 111+, Safari 9+, Firefox 113+. */
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item {
  animation: dropItemIn 0.22s cubic-bezier(0.16,1,0.3,1) both;
}
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(1 of .nav-dropdown-item)  { animation-delay: 0.02s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(2 of .nav-dropdown-item)  { animation-delay: 0.05s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(3 of .nav-dropdown-item)  { animation-delay: 0.08s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(4 of .nav-dropdown-item)  { animation-delay: 0.11s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(5 of .nav-dropdown-item)  { animation-delay: 0.14s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(6 of .nav-dropdown-item)  { animation-delay: 0.17s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(7 of .nav-dropdown-item)  { animation-delay: 0.20s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(8 of .nav-dropdown-item)  { animation-delay: 0.23s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(9 of .nav-dropdown-item)  { animation-delay: 0.26s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(10 of .nav-dropdown-item) { animation-delay: 0.29s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(11 of .nav-dropdown-item) { animation-delay: 0.32s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(12 of .nav-dropdown-item) { animation-delay: 0.35s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(13 of .nav-dropdown-item) { animation-delay: 0.38s; }
.nav-dropdown-menu:not(.hidden) .nav-dropdown-item:nth-child(14 of .nav-dropdown-item) { animation-delay: 0.41s; }

@keyframes dropItemIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Hover на пункте дропдауна: бирюзовая полоска слева + slide счётчика */
.nav-dropdown-item {
  position: relative;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
    padding-left 0.18s ease !important;
}

.nav-dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  border-radius: 2px;
  background: #e8e8e8;
  opacity: 0;
  transform: scaleY(0);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.nav-dropdown-item:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.nav-dropdown-item:hover {
  padding-left: 16px;
}

/* Счётчик: pop-анимация при hover */
.nav-dropdown-item .tab-count {
  transition: color 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), background 0.18s ease !important;
  display: inline-block;
}
.nav-dropdown-item:hover .tab-count {
  transform: scale(1.1);
  color: #e8e8e8!important;
}

/* История — особый цвет полоски */
.nav-dropdown-item--history::before { background: #cfcfcf; }
.nav-dropdown-item--history:hover { color: #cfcfcf!important; }

/* Настройки */
.nav-dropdown-item--settings::before { background: #b8b8b8; }
.nav-dropdown-item--settings:hover { color: #b8b8b8!important; }

/* Поддержка / FAQ */
.nav-dropdown-item--support::before { background: #e0e0e0; }
.nav-dropdown-item--support:hover { color: #e0e0e0!important; }

/* Импорт */
.nav-dropdown-item--import::before { background: #a0a0a0; }
.nav-dropdown-item--import:hover { color: #a0a0a0!important; }

/* Выйти */
.nav-dropdown-item:last-of-type::before { background: #f87171; }

/* ── Колокольчик уведомлений ── */
.notif-bell-btn {
  transition: background 0.2s ease, color 0.2s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.notif-bell-btn:hover {
  transform: scale(1.1);
}
/* Анимация звонка при наведении */
.notif-bell-btn:hover svg {
  animation: bellRing 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both;
}
@keyframes bellRing {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-18deg); }
  30%  { transform: rotate(14deg); }
  45%  { transform: rotate(-10deg); }
  60%  { transform: rotate(7deg); }
  75%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/* ── Аккаунт: аватар светится при hover ── */
.nav-account-btn {
  transition:
    background 0.22s ease,
    color 0.22s ease !important;
}
.nav-account-avatar {
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.nav-account-btn:hover .nav-account-avatar {
  transform: rotate(8deg) scale(1.1);
  border-color: rgba(232,232,232,0.7);
  box-shadow: 0 0 14px rgba(232,232,232,0.35);
}

/* ── Счётчик «Мои списки» в toggle — pop при hover ── */
.nav-dropdown-toggle .tab-count {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), color 0.18s ease !important;
}
.nav-dropdown-toggle:hover .tab-count {
  transform: scale(1.2);
  color: var(--green);
}

/* ===== СТРАНИЦА СТАТИСТИКИ ===== */

.stats-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 0 60px;
}

/* Главные числа */
.stats-hero-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
@media (max-width: 600px) {
  .stats-hero-row { grid-template-columns: repeat(2, 1fr); }
}
.stats-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.stats-hero-card:hover {
  border-color: var(--border-hl);
  box-shadow: 0 0 18px rgba(232,232,232,0.06);
}
.stats-hero-num {
  font-family: 'Orbitron', 'Rajdhani', monospace;
  font-size: 32px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.stats-hero-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Подзаголовок блока */
.stats-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  margin-bottom: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

/* Строка списков */
.stats-lists-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.stats-list-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px 7px 14px;
  font-size: 13px;
  color: var(--text-muted);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.stats-list-pill:hover {
  border-color: var(--border-hl);
  color: var(--text);
}
.stats-list-name { font-weight: 600; font-family: 'Rajdhani', sans-serif; }
.stats-list-count {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  color: var(--green);
  margin-left: 2px;
}

/* Двухколоночный блок */
.stats-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .stats-two-col { grid-template-columns: 1fr; }
}

/* Карточка */
.stats-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.stats-card--full { grid-column: 1 / -1; }
.stats-card-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  margin-bottom: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}
.stats-card canvas { width: 100% !important; display: block; }

/* Факты — SVG иконки */
.stats-facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stats-fact {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stats-fact-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(232,232,232,0.06);
  border: 1px solid rgba(232,232,232,0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}
.stats-fact-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.2;
}
.stats-fact-key {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Активность по дням */
.stats-activity-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
}
.stats-act-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  height: 100%;
}
.stats-act-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 4px;
}
.stats-act-bar {
  width: 100%;
  background: linear-gradient(180deg, #e8e8e8 0%, #cfcfcf 100%);
  border-radius: 4px 4px 0 0;
  opacity: 0.7;
  min-height: 4px;
  transition: opacity var(--t-fast);
}
.stats-act-bar-wrap:hover .stats-act-bar { opacity: 1; }
.stats-act-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-family: 'Rajdhani', sans-serif;
}
.stats-act-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Стрик просмотров */
.stats-streak-card {
  /* Лёгкий акцентный подсвет фона — отличает карточку-достижение от
     обычных карточек данных (.stats-card), тем же токеном, что уже
     использует .stats-fact-ico для акцентных фонов. */
  background: linear-gradient(180deg, var(--green-faint) 0%, var(--bg-card) 60%);
}
.stats-streak-card--broken {
  /* Стрик прерван — приглушаем акцентный подсвет, оставляя обычный фон
     карточки, чтобы состояние явно читалось как «не активно». */
  background: var(--bg-card);
}
.stats-streak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.stats-streak-main {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stats-streak-flame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--green-faint);
  border: 1px solid var(--border-hl);
  color: var(--green);
}
.stats-streak-flame--dim {
  background: rgba(110, 110, 110, 0.08);
  border-color: var(--border);
  color: var(--text-muted);
}
.stats-streak-main > div { display: flex; flex-direction: column; }
.stats-streak-num {
  font-family: 'Orbitron', 'Rajdhani', monospace;
  font-size: 30px;
  font-weight: 700;
  color: var(--green);
  line-height: 1.15;
}
.stats-streak-num--dim { color: var(--text-muted); }
.stats-streak-unit {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.stats-streak-main--dim .stats-streak-unit {
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  max-width: 220px;
}
.stats-streak-best {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.stats-streak-best-val {
  font-family: 'Orbitron', 'Rajdhani', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.stats-streak-best-key {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .stats-streak-best {
    border-left: none;
    padding-left: 0;
    align-items: flex-start;
    text-align: left;
  }
}

/* Пустое состояние */
.stats-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Пункт меню Статистика */
.nav-dropdown-item--stats {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ══════════════════════════════════════════════════════
   ДРУЗЬЯ — поиск людей + браузинг случайных профилей
   ══════════════════════════════════════════════════════ */

/* Никнейм при первом входе показывается ПОВЕРХ auth-gate (z-index:5000
   у .auth-gate) — стандартный .modal-overlay (z-index:1000) для этого
   недостаточен, иначе модалка оказалась бы невидимой под экраном входа. */
#nicknameModal { z-index: 5100; }

.friends-search-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  max-width: 420px;
}
.friends-search-icon {
  position: absolute;
  left: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.friends-search-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(232,232,232,0.12);
  color: var(--text);
  padding: 12px 16px 12px 42px;
  border-radius: 14px;
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  outline: none;
  transition: border-color var(--t-med), box-shadow var(--t-med), background var(--t-med);
  backdrop-filter: blur(8px);
}
.friends-search-input:focus {
  border-color: rgba(232,232,232,0.4);
  box-shadow: 0 0 0 3px rgba(232,232,232,0.07);
  background: rgba(232,232,232,0.02);
}
.friends-search-input::placeholder { color: var(--text-muted); }

/* Затемнение блока браузинга, пока активен поиск — фокус на результатах */
.friends-dimmed { opacity: 0.28; pointer-events: none; filter: blur(1px); transition: opacity var(--t-med), filter var(--t-med); }
#friendsBrowseBlock { transition: opacity var(--t-med), filter var(--t-med); }

.friend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  position: relative;
  z-index: 1;
}

.friend-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%),
    var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
/* Тонкое сияние сверху карточки — перекликается с .profile-header::before */
.friend-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-glow);
  pointer-events: none;
}
.friend-card:hover {
  border-color: var(--border-hl);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(232,232,232,0.1);
}

/* Кольцевая рамка вокруг аватара — как .profile-avatar-wrap в профиле */
.friend-card-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 50%;
  background: var(--grad-primary);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  z-index: 1;
}

.friend-card-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  font-weight: 700;
  color: #051018;
  flex-shrink: 0;
}
.friend-card-avatar--img { padding: 0; overflow: hidden; box-shadow: none; border: 2px solid var(--bg-card); }
.friend-card-avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.friend-card-body { z-index: 1; }

.friend-card-nickname {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
  word-break: break-word;
  line-height: 1.3;
  text-shadow: 0 0 18px rgba(232,232,232,0.1);
}

.friend-card-joined {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  margin-top: 4px;
}

.friend-card-you-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: var(--grad-primary);
  color: #0c0c0c;
  border: 1px solid rgba(232,232,232,0.4);
  box-shadow: 0 2px 10px rgba(232,232,232,0.18);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 8px;
  border-radius: 999px;
}

.friend-card-skel {
  cursor: default;
  pointer-events: none;
}
.friend-card-skel::before,
.friend-card-skel::after { content: ''; display: block; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: skelShimmer 1.4s ease-in-out infinite; }
.friend-card-skel::before { width: 58px; height: 58px; }
.friend-card-skel::after  { width: 70%; height: 12px; margin-top: 4px; }
@keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.friends-more-wrap { display: flex; justify-content: center; margin-top: 24px; }

/* ── Саб-табы "Люди / Мои друзья" (js/friends.js) ── */
.friends-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.friends-subtab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 10px 4px 12px;
  margin-bottom: -1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.friends-subtab:hover { color: var(--text); }
.friends-subtab.active { color: var(--green); border-bottom-color: var(--green); }
.friends-subtab-badge {
  background: var(--green);
  color: #051018;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  font-family: 'Orbitron', monospace;
}
.friends-subtab-badge.hidden { display: none; }

/* ── Grid skeleton-состояние (первичная загрузка) ── */
.friend-grid--loading { pointer-events: none; }

/* ── Кнопки статуса дружбы на карточке (добавить / заявка / друзья) ── */
.friend-card-action { width: 100%; margin-top: 2px; }
.friend-action-row { display: flex; gap: 8px; width: 100%; }

.friend-action-btn {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-glass2);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-action-btn:hover { transform: translateY(-1px); }
.friend-action-btn:active { transform: translateY(0); }

.friend-action-btn--add {
  border-color: rgba(232,232,232,0.3);
  background: rgba(232,232,232,0.06);
  color: var(--green);
}
.friend-action-btn--add:hover { background: rgba(232,232,232,0.12); border-color: var(--green); }

.friend-action-btn--pending {
  color: var(--text-muted);
  cursor: pointer;
}
.friend-action-btn--pending:hover { border-color: rgba(255,120,120,0.3); color: #ff9b9b; }

.friend-action-btn--friends {
  border-color: rgba(232,232,232,0.18);
  color: var(--green-dim);
  cursor: pointer;
}
.friend-action-btn--friends:hover { border-color: rgba(255,120,120,0.35); color: #ff9b9b; background: rgba(255,80,80,0.06); }

.friend-action-btn--accept {
  border-color: rgba(232,232,232,0.35);
  background: rgba(232,232,232,0.1);
  color: var(--green);
  flex: 1;
}
.friend-action-btn--accept:hover { background: rgba(232,232,232,0.18); }

.friend-action-btn--decline {
  flex: 0 0 auto;
  width: 38px;
  color: var(--text-muted);
}
.friend-action-btn--decline:hover { border-color: rgba(255,90,90,0.4); color: #ff8080; background: rgba(255,80,80,0.08); }

.friend-action-btn--skel {
  display: block;
  height: 34px;
  border-radius: var(--radius-sm);
  border: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
  cursor: default;
  pointer-events: none;
}

/* ── Мобильная версия карточки — горизонтальная плашка ──
   На узких экранах вертикальная карточка-сетка (как в профиле)
   тратит много места впустую и заставляет много скроллить.
   На мобильном карточка становится строкой: аватар слева, ник +
   дата посередине, кнопка действия справа — тот же список
   помещается компактнее и читается быстрее одним столбцом. */
@media (max-width: 768px) {
  .friend-grid { grid-template-columns: 1fr; gap: 10px; }

  .friend-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .friend-card-avatar-wrap { padding: 2.5px; }
  .friend-card-avatar { width: 46px; height: 46px; font-size: 16px; }

  .friend-card-body { flex: 1; min-width: 0; }
  .friend-card-nickname { font-size: 13.5px; }
  .friend-card-joined { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .friend-card-action {
    width: auto;
    flex-shrink: 0;
    margin-top: 0;
    min-width: 128px;
    max-width: 138px;
  }
  .friend-action-btn { padding: 8px 8px; font-size: 11px; white-space: normal; line-height: 1.25; }
  .friend-action-row { gap: 6px; }

  .friend-card-you-badge {
    position: static;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    flex-shrink: 0;
  }
  .friend-card-nickname { display: flex; align-items: center; flex-wrap: wrap; }

  .friend-card-skel {
    flex-direction: row;
    align-items: center;
    padding: 12px 14px;
    gap: 12px;
  }
  .friend-card-skel::before { width: 46px; height: 46px; flex-shrink: 0; }
  .friend-card-skel::after { margin-top: 0; width: 50%; }
}

/* ══════════════════════════════════════════════════════
   ЧАТ — личные сообщения между друзьями (js/chat.js)
   ══════════════════════════════════════════════════════ */

/* ── Список диалогов — "Telegram Classic": строки-полоски с тонким
   разделителем, начинающимся от края аватара (не от края экрана),
   без карточных рамок/теней. ── */
.chat-convo-list {
  display: flex;
  flex-direction: column;
}

.chat-convo-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 6px;
  margin: 0 -6px;
  cursor: pointer;
  position: relative;
  transition: background var(--t-fast);
  border-radius: var(--radius-sm);
}
.chat-convo-row:hover { background: rgba(255,255,255,0.04); }
.chat-convo-row:active { background: rgba(255,255,255,0.07); }

/* Разделитель между строками — начинается после аватара (50px + gap 13px
   + отступ строки 6px = 69px), как классическая линия списка чатов в
   Telegram, а не полноширинная граница карточки. */
.chat-convo-row::after {
  content: '';
  position: absolute;
  left: 69px;
  right: -6px;
  bottom: 0;
  height: 1px;
  background: var(--border);
}
.chat-convo-row:last-child::after { display: none; }

/* Аватар — без кольцевой рамки-градиента вокруг (в отличие от карточного
   стиля друзей/профиля): в списке чатов Telegram сам круг аватара несёт
   цвет, без дополнительной оправы. */
.chat-convo-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.chat-convo-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  font-weight: 800;
  color: #0a0a0a;
  flex-shrink: 0;
}
.chat-convo-avatar--img { padding: 0; overflow: hidden; }
.chat-convo-avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.chat-convo-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-convo-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.chat-convo-nickname {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-convo-row--unread .chat-convo-nickname { color: var(--text); }
.chat-convo-time {
  font-size: 11.5px;
  color: var(--text-dim);
  flex-shrink: 0;
  font-family: 'Rajdhani', sans-serif;
}
.chat-convo-row--unread .chat-convo-time { color: var(--green); font-weight: 700; }

.chat-convo-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chat-convo-preview {
  font-size: 13.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.chat-convo-row--unread .chat-convo-preview { color: #d6d6d6; }
.chat-convo-preview-prefix { color: var(--text-dim); }

.chat-convo-unread-badge {
  flex-shrink: 0;
  background: var(--green);
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', monospace;
}

/* Skeleton-строки при первичной загрузке списка диалогов */
.chat-convo-row--skel {
  height: 74px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
}
.chat-convo-row--skel::after { display: none; }

/* ── Открытая переписка ── */
.chat-thread {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: var(--radius);
  overflow: hidden;
}

.chat-thread-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%),
    var(--bg-glass);
  backdrop-filter: blur(14px);
  flex-shrink: 0;
}

.chat-back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  margin-left: -8px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.chat-back-btn:hover { color: var(--green); background: rgba(232,232,232,0.06); }

.chat-thread-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 4px 10px 4px 4px;
  margin-left: 4px;
  border-radius: 999px;
  transition: background var(--t-fast);
  min-width: 0;
}
.chat-thread-header-info:hover { background: rgba(232,232,232,0.05); }

/* Аватар собеседника в шапке переписки — чистый цветной круг без оправы,
   тот же язык, что .chat-convo-avatar в списке диалогов. */
.chat-thread-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.chat-thread-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 800;
  color: #0a0a0a;
  flex-shrink: 0;
}
.chat-thread-avatar--img { padding: 0; overflow: hidden; }
.chat-thread-avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.chat-thread-nickname {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-thread-header-skel {
  width: 140px;
  height: 20px;
  margin-left: 12px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
}

/* Прокручиваемая область сообщений. Раньше здесь стоял отдельный
   max-height в vh — но этот блок и так сидит внутри уже жёстко
   ограниченного flex-родителя: .chat-page-shell (height в vh/dvh,
   см. выше) → #chatBody → .chat-thread (flex:1) — каждое звено
   min-height:0, чтобы flex мог сжиматься, а не растягивать страницу.
   Задавать здесь ЕЩЁ и свой max-height в vh было ошибкой: vh считается
   от высоты всего окна браузера, а не от уже отмеренного доступного
   пространства внутри .chat-page-shell, поэтому на большинстве экранов
   эти два числа не совпадали, и .chat-thread-messages останавливался
   раньше, чем родитель реально мог ему выделить — снизу, перед формой
   ввода, оставался пустой зазор (тот же эффект отдельно чинили на
   мобильном, см. @media 640px ниже). flex:1 без max-height сам заполняет
   ровно то, что дал родитель — min-height остаётся низом на случай
   совсем маленького окна. */
.chat-thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  scroll-behavior: smooth;
}
.chat-thread-messages::-webkit-scrollbar { width: 6px; }
.chat-thread-messages::-webkit-scrollbar-track { background: transparent; }
.chat-thread-messages::-webkit-scrollbar-thumb { background: rgba(232,232,232,0.15); border-radius: 999px; }
.chat-thread-messages::-webkit-scrollbar-thumb:hover { background: rgba(232,232,232,0.3); }

/* Сами пузыри (.chat-msg-row) рендерятся не прямым потомком
   .chat-thread-messages, а лежат во вложенном #chatMessagesInner
   (см. js/chat.js: _buildChatThreadHTML) — это нужно, чтобы вставлять
   сообщения через insertAdjacentHTML('beforeend', ...) в конец истории,
   не трогая при этом #chatLoadMoreWrap, который в разметке идёт перед
   ним. Поэтому flex-контейнер должен быть именно здесь: align-self на
   .chat-msg-row--mine/--theirs действует только у ПРЯМОГО flex-ребёнка,
   а без этого блока #chatMessagesInner был обычным block-контейнером,
   и все сообщения растягивались на всю ширину независимо от автора. */
#chatMessagesInner {
  display: flex;
  flex-direction: column;
}

.chat-thread-empty {
  margin: auto;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

.chat-load-more-wrap { display: flex; justify-content: center; padding-bottom: 14px; }

.chat-date-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0 14px;
}
.chat-date-divider:first-child { margin-top: 0; }
.chat-date-divider span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  background: var(--bg-glass2);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: capitalize;
}

/* ── Сообщения ── */
.chat-msg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  max-width: 78%;
  animation: chatMsgIn 0.2s var(--ease-premium) both;
}
@keyframes chatMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.chat-msg-row--grouped { margin-top: -6px; }

.chat-msg-row--theirs { align-self: flex-start; }
.chat-msg-row--mine { align-self: flex-end; margin-left: auto; }

.chat-msg-bubble {
  padding: 9px 13px 8px;
  border-radius: 16px;
  position: relative;
  word-break: break-word;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.chat-msg-row--theirs .chat-msg-bubble {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%),
    var(--bg-glass2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-msg-row--theirs.chat-msg-row--grouped .chat-msg-bubble { border-bottom-left-radius: 16px; }

.chat-msg-row--mine .chat-msg-bubble {
  background: var(--grad-primary);
  border: 1px solid rgba(232,232,232,0.3);
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 14px rgba(232,232,232,0.1);
}
.chat-msg-row--mine.chat-msg-row--grouped .chat-msg-bubble { border-bottom-right-radius: 16px; }

.chat-msg-row--failed .chat-msg-bubble {
  background: rgba(255,80,80,0.08);
  border-color: rgba(255,90,90,0.35);
}

.chat-msg-row--mine .chat-msg-text { color: #101010; }
.chat-msg-row--mine .chat-msg-time { color: rgba(16,16,16,0.6); }
.chat-msg-row--mine .chat-msg-link { color: #0a3d5c; }
.chat-msg-row--mine .chat-msg-link:hover { color: #051018; }

.chat-msg-text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  white-space: pre-wrap;
}
.chat-msg-link { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.chat-msg-link:hover { color: var(--green); }

.chat-msg-time {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: auto;
  font-family: 'Rajdhani', sans-serif;
}

/* ── Ответ на сообщение (reply) ── */

/* Кнопка "Ответить" рядом с пузырём — для "чужих" сообщений идёт справа
   от пузыря (к центру экрана), для "моих" — слева от пузыря (тоже к
   центру, а не к правому краю экрана, где ей было бы тесно). Порядок
   в разметке одинаковый (кнопка всегда после .chat-msg-bubble), поэтому
   сторона регулируется через order, а не дублированием HTML-шаблона. */
.chat-msg-row--mine .chat-msg-reply-btn { order: -1; }

.chat-msg-reply-btn {
  align-self: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-glass2);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chat-msg-row:hover .chat-msg-reply-btn {
  opacity: 1;
  transform: scale(1);
}
.chat-msg-reply-btn:hover { color: var(--green); border-color: rgba(232,232,232,0.35); }

/* Тач-устройства не имеют надёжного :hover — там кнопка видна всегда,
   иначе на телефоне до неё было бы вообще не добраться. */
@media (hover: none), (pointer: coarse) {
  .chat-msg-reply-btn { opacity: 1; transform: scale(1); }
}

/* Плашка-цитата ВНУТРИ пузыря (сверху текста сообщения) — своя цветовая
   полоска слева, кликабельна (переход к оригиналу), кроме варианта
   --missing (оригинал удалён/недоступен — не кликабельна). */
.chat-msg-reply-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 5px 9px;
  margin-bottom: 2px;
  border-left: 2px solid var(--green);
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background var(--t-fast);
}
.chat-msg-reply-quote:hover { background: rgba(255,255,255,0.09); }
.chat-msg-row--mine .chat-msg-reply-quote { border-left-color: rgba(232,232,232,0.55); background: rgba(0,0,0,0.18); }
.chat-msg-row--mine .chat-msg-reply-quote:hover { background: rgba(0,0,0,0.26); }

.chat-msg-reply-quote--missing {
  cursor: default;
  border-left-color: var(--text-muted);
  font-style: italic;
}
.chat-msg-reply-quote--missing:hover { background: rgba(255,255,255,0.05); }

.chat-msg-reply-quote-author {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green);
  font-family: 'Rajdhani', sans-serif;
}
.chat-msg-row--mine .chat-msg-reply-quote-author { color: var(--green); opacity: 0.9; }
.chat-msg-reply-quote-text {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-msg-row--mine .chat-msg-reply-quote-text { color: rgba(232,232,232,0.75); }
.chat-msg-reply-quote--missing .chat-msg-reply-quote-text { color: var(--text-muted); font-style: italic; }

/* Кратковременная подсветка сообщения, к которому проскроллили по клику
   на цитату (см. _chatScrollToMessage) — чтобы было видно, что именно
   нашлось, а не просто "экран куда-то дёрнулся". */
.chat-msg-row--highlight .chat-msg-bubble {
  animation: chatReplyHighlight 1.4s ease;
}
@keyframes chatReplyHighlight {
  0%   { box-shadow: 0 0 0 2px var(--green); }
  70%  { box-shadow: 0 0 0 2px var(--green); }
  100% { box-shadow: 0 0 0 0px transparent; }
}

/* Плашка-цитата НАД полем ввода — показывает, на что сейчас отвечают,
   пока сообщение ещё не отправлено. */
.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 14px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--bg-glass2);
  animation: fadeUp 0.15s ease both;
}
.chat-reply-bar-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 2px solid var(--green);
  padding-left: 9px;
}
.chat-reply-bar-author {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  font-family: 'Rajdhani', sans-serif;
}
.chat-reply-bar-text {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-reply-bar-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), background var(--t-fast);
}
.chat-reply-bar-close:hover { color: #ff9b9b; background: rgba(255,80,80,0.08); }

/* Skeleton-баблы во время загрузки истории */
.chat-thread-messages--loading { justify-content: flex-start; gap: 10px; }
.chat-msg-skel {
  height: 38px;
  border-radius: 16px;
  max-width: 55%;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
}
.chat-msg-skel--theirs { align-self: flex-start; width: 52%; }
.chat-msg-skel--mine { align-self: flex-end; width: 38%; }

/* ── Форма отправки ──
   align-items: center — кнопка отправки всегда выровнена по вертикальному
   центру textarea, а не прижата к его нижнему краю. При однострочном
   тексте (самый частый случай) высота textarea и кнопки почти совпадают,
   но не точь-в-точь (border/padding textarea против фиксированных
   width/height кнопки) — на flex-end эта небольшая разница читалась как
   заметный сдвиг самолётика вверх относительно поля ввода. При росте
   textarea на несколько строк (см. автовысота в js/chat.js) center держит
   кнопку по центру всего блока — привычное поведение мессенджеров,
   вместо приклеивания к нижней кромке. */
.chat-thread-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%),
    var(--bg-glass);
  flex-shrink: 0;
}

.chat-thread-input {
  flex: 1;
  resize: none;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(232,232,232,0.12);
  border-radius: 18px;
  padding: 10px 16px;
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  color: var(--text);
  outline: none;
  max-height: 120px;
  line-height: 1.4;
  backdrop-filter: blur(8px);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.chat-thread-input:focus {
  border-color: rgba(232,232,232,0.4);
  box-shadow: 0 0 0 3px rgba(232,232,232,0.07);
  background: rgba(232,232,232,0.02);
}
.chat-thread-input::placeholder { color: var(--text-muted); }

/* Кнопка отправки — без фона, видна только сама иконка-стрелка. Кликабельная
   область (width/height) намеренно больше самой иконки внутри неё (26px
   иконка в 40px кнопке) — без круглого фона глазу не за что зацепиться,
   чтобы понять реальные границы хитбокса, поэтому оставляем прежний размер
   зоны клика/тапа, просто он больше не отрисован визуально. Свечение теперь
   висит на самой SVG через drop-shadow (а не на ::before вокруг круга,
   которого больше нет) — так glow повторяет силуэт стрелки, а не пустой
   прозрачный квадрат кнопки. */
.chat-send-btn {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--green);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast), opacity var(--t-fast), color var(--t-med);
}
.chat-send-btn svg {
  position: relative;
  width: 26px;
  height: 26px;
  transform: rotate(-40deg);
  filter: drop-shadow(0 0 6px var(--green-glow));
  transition: transform var(--t-med), filter var(--t-med);
  animation: sendIconGlowPulse 2.6s ease-in-out infinite;
}
.chat-send-btn:hover {
  color: var(--blue);
  transform: scale(1.1);
}
.chat-send-btn:hover svg {
  transform: rotate(-25deg) scale(1.05);
  filter: drop-shadow(0 0 10px var(--blue-glow));
}
.chat-send-btn:active { transform: scale(0.92); }
.chat-send-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.chat-send-btn:disabled svg { animation-play-state: paused; filter: none; }
/* Проигрывается на #chatSendBtn через JS в момент отправки (см.
   _chatSendMessage: sendBtn.classList.add('chat-send-btn--sent')) — сама
   кнопка тут же становится disabled, так что класс безопасно снять по
   концу анимации, не заботясь о повторном клике поверх неё. Базовый
   rotate(-40deg) сохраняется как стартовая точка полёта, а не сбрасывается
   в 0 — иначе стрелка "дёрнулась" бы обратно в горизонталь на кадре 0%. */
.chat-send-btn--sent svg { animation: chatSendFly 0.45s cubic-bezier(0.34, 1.3, 0.64, 1); }

@keyframes sendIconGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 6px var(--green-glow)); }
  50%      { filter: drop-shadow(0 0 11px var(--green-glow)); }
}
@keyframes chatSendFly {
  0%   { transform: rotate(-40deg) translate(0, 0) scale(1);         opacity: 1; }
  40%  { transform: rotate(-40deg) translate(9px, -9px) scale(0.75); opacity: 0; }
  41%  { transform: rotate(-40deg) translate(-9px, 9px) scale(0.75); opacity: 0; }
  100% { transform: rotate(-40deg) translate(0, 0) scale(1);         opacity: 1; }
}

@media (max-width: 640px) {
  /* Область сообщений — flex:1 из базового правила (см. выше), без
     собственного max-height: она заполняет ровно то пространство, что
     ей выделяет родительская flex-цепочка (.chat-page-shell → #chatBody
     → .chat-thread), от шапки до формы ввода. На мобильном страница
     чата к тому же занимает почти весь экран (см. .chat-page-shell в
     @media 768px выше), так что здесь это единственный растягиваемый
     блок между двумя фиксированными по высоте элементами — если бы он
     останавливался раньше их границы, под последним сообщением был бы
     пустой зазор перед формой. min-height оставляем как подстраховку на
     случай очень маленького вьюпорта. */
  .chat-thread-messages { min-height: 280px; padding: 14px 12px; }
  .chat-msg-row { max-width: 88%; }
  .chat-thread-header { padding: 10px 12px; }
  /* Нижний паддинг формы учитывает системную safe-area (домашний индикатор
     на iPhone и т.п.) тем же приёмом, что и .mobile-bottom-nav выше —
     иначе фон формы обрывается раньше системной области, оставляя под
     полем ввода пустую полосу до самого края экрана. */
  .chat-thread-form { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .chat-convo-row { padding: 9px 6px; gap: 11px; }
  .chat-convo-row::after { left: 61px; }
  .chat-convo-avatar { width: 44px; height: 44px; font-size: 15px; }
}

/* ══════════════════════════════════════════════════════
   ЧАТ — #chatSection как отдельная страница (открывается через
   switchTab('chat'), тем же способом, что #profileSection/
   #friendsSection выше, см. js/ui.js: switchTab). Само содержимое
   (.chat-convo-*, .chat-thread-*, .chat-msg-*) уже стилизовано выше —
   этот блок задаёт только высоту самой страницы и внутреннюю
   структуру, чтобы список диалогов/сообщений скроллился сам, а не
   растягивал всю страницу сайта вниз.

   Раньше эта высота бралась "бесплатно" от .chat-overlay-panel
   (модалка с max-height:840px, position:fixed на весь экран) —
   теперь #chatSection лежит в обычном потоке <main class="main-content">
   вместе с остальными страницами, поэтому высоту нужно задавать явно:
   calc(100vh - ...) с вычетом header'а и внешних отступов страницы
   (см. .main-content: padding 36px 24px 72px). На мобильном вместо
   header'а внизу экрана — .mobile-bottom-nav (--mobile-nav-height),
   поэтому вычитается она, а не header. */
.chat-page-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  height: calc(100dvh - 200px);
  min-height: 420px;
  max-height: 780px;
  background: linear-gradient(155deg, rgba(16,16,16,0.98) 0%, rgba(12,12,12,0.97) 100%);
  border-radius: 24px;
  box-shadow: 0 32px 90px rgba(0,0,0,0.92);
  overflow: hidden;
  position: relative;
}
/* Тонкое сияние сверху панели — тот же приём, что у .profile-header::before,
   чтобы чат визуально был частью того же дизайн-языка, что профиль/друзья. */
.chat-page-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-glow);
  pointer-events: none;
  z-index: 0;
}
.chat-page-shell > * { position: relative; z-index: 1; }

/* #chatSection/#chatBody заполняют .chat-page-shell по высоте.
   #chatBody — сам скроллящийся контейнер для экрана "список диалогов"
   (.chat-convo-list + блок "Начать новый диалог" вместе, как единое
   целое). Экран "открытая переписка" (.chat-thread) вместо этого сам
   управляет собственным скроллом через свой дочерний
   .chat-thread-messages (flex:1, min-height:0) — шапка переписки и
   форма ввода снизу должны оставаться на месте, а не уезжать вместе
   с историей сообщений, поэтому у .chat-thread здесь принудительно
   overflow:hidden, а не auto. */
#chatSection,
#chatBody {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#chatBody { overflow-y: auto; padding: 0 28px 24px; }
.chat-page-shell .chat-thread { flex: 1; min-height: 0; overflow: hidden; margin: 0 -28px; }
.chat-page-shell .list-header { padding: 24px 28px 18px; flex-shrink: 0; }

@media (max-width: 768px) {
  .chat-page-shell {
    height: calc(100vh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 96px);
    height: calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 96px);
    border-radius: 18px;
  }
  #chatBody { padding: 0 16px 18px; }
  .chat-page-shell .chat-thread { margin: 0 -16px; }
  .chat-page-shell .list-header { padding: 18px 16px 14px; }
}

/* ══════════════════════════════════════════════════════
   ПРОФИЛЬ — свой и чужой
   ══════════════════════════════════════════════════════ */
.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  position: relative;
  padding: 22px 24px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%),
    var(--bg-glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
/* Тонкое сияние сверху карточки — перекликается с --grad-glow сайта */
.profile-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-glow);
  pointer-events: none;
}

.profile-avatar-lg {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', monospace;
  font-size: 28px;
  font-weight: 700;
  color: #051018;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(232,232,232,0.15);
}

.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 50%;
  background: var(--grad-primary);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.profile-avatar-lg--img { padding: 0; overflow: hidden; box-shadow: none; border: 2px solid var(--bg-card); }
.profile-avatar-lg--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.profile-avatar-edit-btn {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-hl);
  color: var(--green);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  transition: background var(--t-fast), transform var(--t-fast);
}
.profile-avatar-edit-btn:hover { background: rgba(232,232,232,0.1); transform: scale(1.08); }

.profile-bio {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  margin-top: 9px;
  max-width: 46ch;
  white-space: pre-wrap;
  word-break: break-word;
}
.profile-bio--empty { color: var(--text-muted); font-style: italic; }

.profile-header-info { flex: 1; min-width: 160px; position: relative; }

.profile-nickname {
  font-family: 'Orbitron', monospace;
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-shadow: 0 0 24px rgba(232,232,232,0.12);
}

.profile-you-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #0c0c0c;
  background: var(--grad-primary);
  border: 1px solid rgba(232,232,232,0.4);
  padding: 3px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(232,232,232,0.18);
}

.profile-joined {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.profile-joined::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-dim);
  opacity: 0.6;
  flex-shrink: 0;
}

.profile-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(232,232,232,0.05);
  border: 1px solid rgba(232,232,232,0.16);
  color: var(--text);
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 9px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  position: relative;
}
.profile-back-btn:hover { color: var(--green); background: rgba(232,232,232,0.12); border-color: rgba(232,232,232,0.4); transform: translateY(-1px); }
.profile-back-btn:active { transform: translateY(0); }

/* ── Действия в шапке чужого профиля (написать / добавить в друзья / заявка) ── */
.profile-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-msg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(232,232,232,0.3);
  background: rgba(232,232,232,0.06);
  color: var(--green);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 9px 16px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.profile-msg-btn:hover { background: rgba(232,232,232,0.14); border-color: var(--green); transform: translateY(-1px); }
.profile-msg-btn:active { transform: translateY(0); }
.profile-msg-btn svg { flex-shrink: 0; }

.profile-hero-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 700px) {
  .profile-hero-row { grid-template-columns: repeat(2, 1fr); }
}

.profile-hero-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px 10px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
/* Тонкая акцентная полоска сверху — перекликается с .nav-tab.active */
.profile-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-primary);
  opacity: 0.55;
}
.profile-hero-card:hover {
  border-color: var(--border-hl);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.profile-hero-num {
  font-family: 'Orbitron', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.profile-hero-label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.profile-top-genre {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.profile-top-genre b { color: var(--text); font-weight: 600; }

.profile-lists-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 22px;
  /* Pill container background — как у .header-nav */
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 13px;
  padding: 3px;
  width: fit-content;
  max-width: 100%;
}

.profile-list-tab {
  background: transparent;
  border: none;
  color: rgba(168,168,168,0.75);
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-med),
    color var(--t-med),
    box-shadow var(--t-med);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Hover state — мягкая заливка без рамки, как у .nav-tab:hover */
.profile-list-tab:hover { color: #e8e8e8; background: rgba(255,255,255,0.06); }

.profile-list-tab:active {
  background: rgba(255,255,255,0.11);
  transform: none;
}

/* Active / selected state — заливка + акцентная линия по нижнему краю,
   как у .nav-tab.active */
.profile-list-tab.active {
  background: rgba(255,255,255,0.09);
  color: var(--green);
  font-weight: 800;
  box-shadow: inset 0 -2px 0 0 #e8e8e8;
}
.profile-list-tab.active:hover { background: rgba(255,255,255,0.12); }

.profile-list-tab-count {
  font-family: 'Orbitron', monospace;
  font-size: 10.5px;
  opacity: 0.75;
}
.profile-list-tab.active .profile-list-tab-count { color: var(--green); opacity: 1; }

/* Вкладка скрытого приватностью списка — замочек вместо счётчика,
   приглушённый цвет, но всё ещё кликабельна (показывает пояснение) */
.profile-list-tab--locked { color: rgba(168,168,168,0.5); }
.profile-list-tab--locked:hover { color: rgba(168,168,168,0.75); background: rgba(255,255,255,0.04); }
.profile-list-tab--locked.active {
  color: rgba(168,168,168,0.75);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 -2px 0 0 rgba(168,168,168,0.4);
}
.profile-list-tab-lock { opacity: 0.8; flex-shrink: 0; }

/* Экран "список скрыт настройками приватности" внутри профиля —
   переиспользует .empty-state, добавляет только компактный отступ
   (замочек-иконка внутри уже задаёт вертикальный ритм через margin) */
.empty-state--locked { padding: 60px 20px; }

/* Skeleton-заглушка на время первого запроса профиля */
.profile-header--skel { pointer-events: none; }
.profile-skel-block,
.profile-skel-line {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}
.profile-skel-line { border-radius: 6px; }

/* Пункт меню "Мой профиль" в дропдауне аккаунта */
.nav-dropdown-item--profile {
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
.nav-dropdown-item--profile.active,
.nav-dropdown-item--profile:hover { color: var(--green); }

/* Бейдж числа входящих заявок в друзья на пункте "Друзья" в дропдауне
   аккаунта (десктоп: #friendsAccountBadge) и в мобильном попапе "Ещё"
   (#friendsAccountBadgeM) — та же акцентная "пилюля", что и
   .friends-subtab-badge внутри самой вкладки "Друзья" (см. выше), чтобы
   новая заявка была заметна ещё до открытия вкладки. */
.nav-dropdown-item-friends-badge {
  background: var(--green);
  color: #051018;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  font-family: 'Orbitron', monospace;
}
.nav-dropdown-item-friends-badge.hidden { display: none; }

@media (max-width: 640px) {
  .profile-header { gap: 14px; padding: 16px 16px; border-radius: 16px; }
  .profile-avatar-lg { width: 60px; height: 60px; font-size: 22px; }
  .profile-nickname { font-size: 17px; }
}
.nav-dropdown-item--stats.active,
.nav-dropdown-item--stats:hover { color: var(--green); }

/* ══════════════════════════════════════════════════════
   ФИКС: промахи кликов из-за hover-анимаций на тач-устройствах
   ══════════════════════════════════════════════════════
   На мобильных/планшетах браузер симулирует :hover в момент тапа.
   Если у элемента на :hover меняется transform (сдвиг/масштаб),
   кнопка визуально "уезжает" из-под пальца ещё до того, как палец
   поднят — из-за этого тап срабатывает мимо неё (эффект тот же, что
   и с translateX на .back-btn/.list-btn/.nav-dropdown-item выше,
   только там сдвиг убран совсем, а здесь — только для touch).
   (hover: none) — у устройства нет настоящего mouse-hover (телефон,
   планшет). На обычной мыши правило не действует, весь визуал
   ховера остаётся как был. */
@media (hover: none), (pointer: coarse) {
  .genre-tag:hover,
  .ep-btn:hover,
  .bg-preset:hover,
  .npb-ep:hover,
  .modal-close:hover,
  .modal-close-text:hover,
  .import-btn:hover,
  .filter-apply-btn:hover,
  .auth-submit-btn:hover,
  .catalog-more-btn:hover,
  .sup-submit-btn:hover:not(:disabled),
  .nav-tab:hover,
  .notif-bell-btn:hover,
  .nav-account-btn:hover,
  .nav-account-btn:hover .nav-account-avatar,
  .friend-card:hover,
  .profile-avatar-edit-btn:hover,
  .profile-back-btn:hover,
  .profile-msg-btn:hover,
  .chat-anime-card:hover,
  .chat-anime-card:focus-visible {
    transform: none !important;
  }
}

/* ── Карточка аниме в сообщении чата ──────────────────────
   Дорисовывается асинхронно в .chat-anime-card-slot (см.
   js/chat.js: _chatEnrichBubbleWithAnimeMention), когда в тексте
   сообщения распознано название аниме. Слот — прямой flex-ребёнок
   .chat-msg-bubble (flex-wrap: wrap, см. выше), поэтому карточка
   получает flex-basis: 100%, чтобы гарантированно уйти на новую
   строку под текстом и временем, а не втиснуться в свободное место
   рядом с ними. */
.chat-anime-card-slot {
  flex-basis: 100%;
  order: 99;
}
.chat-anime-card-slot:empty { display: none; }

.chat-anime-card {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 2px;
  padding: 7px;
  border-radius: 10px;
  border: 1px solid var(--border-hl);
  background: var(--grad-card), var(--bg-glass2);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.chat-anime-card:hover,
.chat-anime-card:focus-visible {
  border-color: var(--green);
  background: var(--grad-card), rgba(232,232,232,0.08);
  transform: translateY(-1px);
}
.chat-anime-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.chat-msg-row--mine .chat-anime-card { border-color: rgba(232,232,232,0.3); background: var(--grad-card), rgba(0,0,0,0.16); }
.chat-msg-row--mine .chat-anime-card:hover { background: var(--grad-card), rgba(0,0,0,0.24); }

.chat-anime-card-poster {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-input);
}
.chat-anime-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-anime-card-poster-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 15px;
}
.chat-anime-card-score {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.02em;
  color: #06080f;
  background: var(--green);
  line-height: 1.5;
}

.chat-anime-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.chat-anime-card-tag {
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green);
  background: var(--green-faint);
  border: 1px solid var(--border);
}
.chat-anime-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-anime-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
}

@media (max-width: 560px) {
  .chat-anime-card-poster { width: 40px; height: 56px; }
  .chat-anime-card-title { font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════
   SWIPE ACTIONS — свайп влево на карточке в "Моих списках"
   (см. js/swipe-actions.js). Только там: обработчик навешан
   делегированием на #listGrid, каталог/поиск/continue-watching
   не задействованы.

   Структура при активации (создаётся лениво в JS при первом
   взаимодействии с конкретной карточкой, не для всех сразу):
     .anime-card                      ← overflow:hidden добавляется
       .card-swipe-actions             только этому классу-модификатору
         .card-swipe-btn--watched      (см. .anime-card.has-swipe ниже),
         .card-swipe-btn--remove       чтобы карточки без свайпа (каталог,
       .card-swipe-content             поиск, continue-watching) сохраняли
         (весь исходный контент         свой исходный overflow:visible —
         .card-poster-wrap + .card-body он им нужен для drop-shadow
         из buildCard, без изменений)   избранного и градиентной рамки.

   .card-swipe-content — единственный слой, который двигается по X
   (translateX через инлайн style, ставится JS). Сама .anime-card
   продолжает свободно анимировать СВОЙ собственный transform
   (translateY/scale при появлении, см. .card-in выше) — двух
   независимых transform на разных уровнях вложенности достаточно,
   конфликта нет.
   ══════════════════════════════════════════════════════ */

.anime-card.has-swipe {
  overflow: hidden;
}

/* touch-action обязан быть на карточке С САМОГО НАЧАЛА, а не только на
   .card-swipe-content (см. ниже) — та создаётся лениво в JS внутри
   _ensureSwipeStructure(), которая вызывается из pointermove ТОЛЬКО
   когда жест уже подтверждён горизонтальным (js/swipe-actions.js).
   Браузер решает, кому достанется жест — нативному скроллу страницы
   или JS/preventDefault — в момент touchstart, по touch-action узла,
   которого палец коснулся В ЭТОТ МОМЕНТ. До первого горизонтального
   движения этот узел — обычный .card-poster-wrap/.card-body без
   каких-либо ограничений, и браузер может тут же забрать жест под
   нативный скролл; выставить touch-action позже, уже во время жеста,
   это решение не переигрывает. Дублируем pan-y здесь, на #listGrid
   .anime-card, которая существует всегда, — тогда браузер с первого
   кадра знает, что горизонталь нужно отдавать на откуп JS, а
   вертикальный скролл страницы продолжает работать как обычно. */
#listGrid .anime-card {
  touch-action: pan-y;
}

.card-swipe-actions {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: stretch;
  z-index: 0;
}

.card-swipe-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 84px;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 0 6px;
  text-align: center;
  transition: filter var(--t-fast);
}
.card-swipe-btn svg { flex-shrink: 0; }
.card-swipe-btn:hover { filter: brightness(1.12); }
.card-swipe-btn:active { filter: brightness(0.92); }

.card-swipe-btn--watched {
  background: linear-gradient(160deg, var(--green-mid), var(--green-dim));
}
.card-swipe-btn--remove {
  background: linear-gradient(160deg, #ff6060, #d63c3c);
}

/* Ширина панели = кол-во кнопок × 84px — используется JS-модулем как
   константа при расчёте порога свайпа (SWIPE_BTN_WIDTH в js/swipe-actions.js
   должна совпадать с этим значением). Одна кнопка (списки "Просмотрено",
   где отмечать просмотренным нечем) — 84px, две — 168px. */
.card-swipe-content {
  position: relative;
  z-index: 1;
  /* .anime-grid растягивает каждую .anime-card в строке до высоты самой
     высокой карточки этой строки (обычный grid-стретч по умолчанию — align-
     items не переопределён). .card-poster-wrap имеет фиксированную высоту
     (padding-top:143%), а .card-body — высоту по своему тексту (короче у
     карточек с однострочным названием, как "Сердца Пандоры", чем у соседей
     с двухстрочным). Без height:100% .card-swipe-content как обычный блок
     в потоке занимал бы только свой натуральный контент, оставляя внизу
     зазор до реальной (растянутой) высоты .anime-card — и в этом зазоре
     просвечивала бы .card-swipe-actions, которая лежит позади и всегда
     размером inset:0 = полная высота .anime-card. Баг проявлялся уже после
     одного частичного (не до конца доведённого) касания карточки — ровно
     тогда лениво создаётся структура свайпа (_ensureSwipeStructure), а не
     только после полного открытия панели. */
  height: 100%;
  background: var(--bg-card);
  /* Плавный "снап" при отпускании пальца — во время самого перетаскивания
     JS временно снимает transition инлайном (иначе палец будет "отставать"
     от анимации), возвращает его только на доводку/возврат в конце жеста. */
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
  touch-action: pan-y;
}

/* На самой узкой сетке (3 колонки, режим "Маленький" в настройках размера
   постеров) подпись под иконкой заняла бы больше места, чем сама карточка —
   оставляем только иконку, ширину кнопки уменьшаем вдвое. */
@media (max-width: 480px) {
  .card-swipe-btn { width: 56px; font-size: 0; gap: 0; }
  .card-swipe-btn svg { width: 20px; height: 20px; }
}

/* TOP BANNER (статичная картинка над шапкой) и HERO-приветствие
   удалены — их роль теперь играет полноэкранный HERO BANNER ниже
   (герой-слайдер «Сейчас выходит», см. секцию HERO BANNER дальше
   по файлу и js/now-airing.js). */

/* =====================================================
   HERO BANNER — полноэкранный герой на главной («Сейчас выходит»)
   Заменяет собой старый статичный .top-banner и приветственный
   .hero-block. Контент — карусель онгоингов из расписания выхода
   серий (см. js/now-airing.js: loadNowAiring), рендерится в
   #airingTrack тем же движком навигации, что и раньше был у
   компактного .airing-block (стрелки/точки/автоплей/свайп не
   менялись — см. now-airing.js).
   ===================================================== */
.hero-banner {
  position: relative;
  width: 100%;
  margin: 0 0 32px;
  /* Выходит на всю ширину окна, а не только колонки контента —
     .page-content обычно имеет max-width/padding, здесь их компенсируем. */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

.hero-banner-slider {
  position: relative;
  width: 100%;
  height: 440px;
  overflow: hidden;
  background: var(--bg);
}

.hero-banner-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--ease-premium);
  will-change: transform;
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: default;
}

.hero-slide-bg {
  position: absolute;
  inset: 0;
  /* Фирменный градиент-заглушка вместо плоского цвета: если постер
     реально не загрузится ни по одному из URL-кандидатов (см.
     wirePosterImgFallback в js/now-airing.js — при полном провале
     .hero-slide-bg-blur получает opacity:0, и тогда становится виден
     именно этот фон), баннер не превращается в голый тёмный
     прямоугольник без единого акцента, а сохраняет узнаваемый вид
     сайта — тот же розовый акцент (var(--green)), что и подсветка
     шапки/кнопок, просто в приглушённом виде. */
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(232,232,232,0.28) 0%, transparent 62%),
    radial-gradient(ellipse 70% 55% at 90% 85%, rgba(207,207,207,0.1) 0%, transparent 60%),
    linear-gradient(160deg, var(--bg-card) 0%, var(--bg) 75%);
  overflow: hidden;
}

/* Почему тут два разных <img>, а не один растянутый на всю ширину:
   постеры, которые сюда подставляются (js/now-airing.js →
   posterUrls(anime, 'full')), — это карточные постеры аниме (обычно
   ~225–600px по высоте), а не отдельные широкоформатные backdrop-арты
   — у API их нет ни в каком размере (см. комментарий у posterUrl() в
   js/utils.js: набор size-ключей — fullsize/big/huge/medium/small/mega,
   все варианты ОДНОГО И ТОГО ЖЕ вертикального постера, без исключения).
   Раньше единственный <img class="hero-slide-bg-img"> с object-fit:
   cover растягивал эту узкую картинку на всю ширину блока (обычно
   ~1600–1920px) при высоте всего 440px — апскейл на ~1.1–1.4× по
   каждой оси, из-за которого на плавных заливках (кожа, небо, вода)
   становится заметна мягкость/мыло: физически не хватает исходных
   пикселей, чтобы прорисовать такую площадь резко.
   Решение — не пытаться замаскировать растяжение (фильтрами/шумом),
   а честно развести две роли по разным слоям:
   1) .hero-slide-bg-blur — та же картинка, тоже растянута на всю
      ширину, но с задачей быть РАЗМЫТЫМ атмосферным фоном, а не
      резким изображением — blur(48px) полностью скрывает апскейл-
      артефакты, потому что этот слой сознательно не претендует на
      чёткость (тот же приём, что blurred album art в Spotify/Apple
      Music или backdrop в Apple TV);
   2) .hero-slide-poster-frame — тот же постер ЕЩЁ РАЗ, но уже как
      компактная карточка в натуральных для постера пропорциях
      (aspect-ratio: 2/3), которая никогда не растягивается шире
      своего реального разрешения — там же, где раньше картинка была
      единственным (и единственно мыльным) источником резкости. */
.hero-slide-bg-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  filter: blur(48px) saturate(1.25) brightness(0.6);
  transform: scale(1.18);
  transition: opacity 0.4s var(--t-med);
}

/* Компактная резкая карточка постера — natural aspect-ratio, никогда
   не растягивается. Скрыта на мобильных (см. медиа-запросы ниже): при
   высоте баннера 310–370px и тексте на всю ширину экрана карточке
   попросту негде поместиться, не перекрыв заголовок/жанры. */
.hero-slide-poster-frame {
  position: absolute;
  top: 50%;
  right: clamp(24px, 5vw, 80px);
  transform: translateY(-50%);
  height: 82%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.07);
  background: var(--bg-card);
}

.hero-slide-poster-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s var(--t-med);
}

/* Горизонтальный градиент слева направо — под текстом плотный тёмный
   фон, справа картинка открывается почти полностью. Плюс лёгкая
   тень снизу, чтобы бейджи/кнопки не терялись на светлых кадрах.
   Средняя точка градиента сдвинута чуть левее (было 48%/72%, стало
   42%/64%) — карточка постера справа уже сама по себе тёмная рамка с
   тенью, ей не нужно дополнительное затемнение от fade поверх, а тексту
   слева нужен чуть больший запас плотного фона, раз теперь справа
   есть ещё один заметный визуальный объект (карточка), с которым
   заголовок должен не конкурировать за внимание. */
.hero-slide-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(10,10,10,0.92) 22%, rgba(10,10,10,0.6) 42%, rgba(10,10,10,0.15) 64%, transparent 80%),
    linear-gradient(to top, rgba(10,10,10,0.75) 0%, transparent 30%, transparent 70%, rgba(10,10,10,0.3) 100%);
  pointer-events: none;
}

.hero-slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  height: 100%;
  max-width: min(640px, 54%);
  padding: 0 0 0 clamp(24px, 6vw, 96px);
}

.hero-slide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--green);
  text-transform: uppercase;
}

.hero-slide-title {
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-slide-title:hover { color: var(--green); }

.hero-slide-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-genre-chip {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 4px 12px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}

/* Ряд бейджей-пилюль: ★ рейтинг / год / тип / эпизод — единый
   формат показа оценки, согласованный с .card-rating-badge на
   карточках каталога (см. секцию ANIME CARD ниже). */
.hero-slide-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: rgba(20,20,20,0.72);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 14px;
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.hero-badge-score {
  color: #1a1000;
  background: linear-gradient(135deg, #ffd76a, #ffc83c);
  border-color: transparent;
  font-weight: 800;
}

.hero-slide-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.hero-slide-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #1a1a1a;
  background: var(--grad-primary);
  border: none;
  padding: 14px 30px;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}

.hero-slide-btn-play:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.hero-slide-btn-play svg { flex-shrink: 0; }

.hero-slide-btn-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.hero-slide-btn-info:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}

/* ── Точки + стрелки в нижнем углу (не по краям экрана) ── */
.hero-banner-controls {
  position: absolute;
  right: clamp(24px, 6vw, 96px);
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-banner-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.airing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.32);
  cursor: pointer;
  padding: 0;
  transition: width var(--t-fast), background var(--t-fast), border-radius var(--t-fast);
}

.airing-dot:hover { background: rgba(255,255,255,0.55); }

.airing-dot.active {
  width: 22px;
  border-radius: 4px;
  background: var(--grad-primary);
}

.hero-banner-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-banner-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(20,20,20,0.6);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.hero-banner-arrow:hover {
  background: rgba(232,232,232,0.16);
  border-color: var(--border-hl);
  transform: translateY(-1px);
}

/* ── Адаптив: планшет ── */
@media (max-width: 860px) {
  .hero-banner-slider { height: 370px; }
  /* Раньше 88% — почти вся ширина баннера, карточке справа было негде
     поместиться. Сужаем до 68%, освобождая полосу под уменьшенную
     карточку постера (см. .hero-slide-poster-frame ниже) вместо того,
     чтобы полностью убирать картинку из этого брейкпоинта — тот же баг
     "на телефоне виден только смытый фон", просто на чуть более широком
     экране (телефон в горизонтальной ориентации, фаблет и т.п.). */
  .hero-slide-content { max-width: 68%; padding-left: clamp(20px, 5vw, 48px); }
  .hero-slide-title { font-size: clamp(24px, 4.4vw, 34px); }
  /* Раньше здесь стоял display:none. Возвращаем карточку, но заметно
     компактнее десктопной версии (82% высоты блока → фиксированные
     220px) — на 370px высоты блока такая карточка помещается в правой
     трети без наложения на текст, который выше сужен до 68%. */
  .hero-slide-poster-frame {
    right: clamp(16px, 4vw, 32px);
    height: 220px;
  }
  .hero-slide-fade {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(10,10,10,0.92) 30%, rgba(10,10,10,0.5) 60%, rgba(10,10,10,0.15) 85%, transparent 100%),
      linear-gradient(to top, rgba(10,10,10,0.75) 0%, transparent 30%, transparent 70%, rgba(10,10,10,0.3) 100%);
  }
}

/* ── Адаптив: мобильный ── */
@media (max-width: 768px) {
  .hero-banner { margin-bottom: 28px; }
  .hero-banner-slider { height: 400px; }
  /* Раньше здесь была маленькая карточка (132px) в углу сверху справа,
     а весь остальной баннер занимал только размытый .hero-slide-bg-blur
     — по факту получалось "чёткий кусочек в углу + смытое пятно вокруг".
     Вместо этого сам постер теперь и есть фон блока целиком: та же
     .hero-slide-poster-frame растягивается на весь .hero-slide-bg через
     position: absolute; inset: 0 (перекрывая исходные top/right/height/
     aspect-ratio из базовых стилей — object-fit: cover на img ниже не
     даёт картинке искажаться при любых пропорциях баннера). Десктопных
     стилей это не касается: правило живёт только внутри ≤768px. */
  .hero-slide-poster-frame {
    display: block;
    position: absolute;
    inset: 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    z-index: 0;
  }
  .hero-slide-poster-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Та же логика кадрирования лица/верха постера, что и у блюр-слоя
       (.hero-slide-bg-blur ниже: object-position: center 22%) — большинство
       обложек аниме держат самое важное (лица персонажей) в верхней трети,
       а не по центру кадра. */
    object-position: center 22%;
  }
  /* Раньше единственным видимым слоем картинки был размытый фон, теперь
     его роль занял сам чёткий постер (см. .hero-slide-poster-frame выше,
     z-index: 0), а блюр-слой прячем — он оставался бы виден краями под/
     вокруг растянутого постера, если бы их пропорции не совпали ровно
     1-в-1, и тогда получилась бы двойная картинка (чёткая поверх смытой).
     Полностью не убираем через display:none, а через opacity — тот же
     wirePosterImgFallback в js/now-airing.js уже трогает opacity этого
     img при ошибке загрузки (img.style.opacity = '0'), инлайновый стиль
     иначе конфликтовал бы с display в другом свойстве. */
  .hero-slide-bg-blur { opacity: 0; }
  /* Текст был поднят и прижат к верху под маленькую карточку в углу
     (padding-top: 172px) — теперь, когда постер во весь баннер, такой
     верхний отступ уже ничем не оправдан. Но и унаследованный с десктопа
     justify-content: center (см. базовые стили .hero-slide-content) тоже
     не годится: при центрировании текст попадает примерно на 32-68%
     высоты блока, а плотная (читаемая) часть градиента ниже начинается
     только с ~68% — верхние строки (эйброу+заголовок) оказались бы на
     почти незатемнённом постере. Прижимаем блок к низу (flex-end) — так
     весь текст сосредоточен в нижней трети, там же, где градиент даёт
     максимальное затемнение, а верхние ~2/3 постера остаются открыты и
     нетронуты затемнением. */
  .hero-slide-content {
    max-width: 100%;
    padding: 0 18px 28px;
    justify-content: flex-end;
    gap: 10px;
  }
  /* Раньше градиент был ослаблен наверху специально для того, чтобы
     смытый .hero-slide-bg-blur вообще проступал сквозь затемнение (см.
     старый комментарий) — теперь фон не размыт, а чёткий постер во весь
     кадр, и цель ровно противоположная: верх постера (где обычно лицо
     персонажа) должен остаться максимально нетронутым и читаемым как
     картинка, а плотное затемнение нужно ТОЛЬКО в нижней части блока —
     там, где сидит текст (эйброу/заголовок/бейджи), иначе он потеряется
     на светлом или пёстром кадре. Поэтому верхние ~55% почти прозрачны
     (лёгкая дымка для однородности), а к низу градиент быстро уходит в
     var(--bg) — та же сплошная заливка, что и общий фон сайта вокруг
     баннера, чтобы низ блока визуально сливался со страницей. */
  .hero-slide-fade {
    background: linear-gradient(180deg,
      rgba(10,10,10,0.05) 0%,
      rgba(10,10,10,0.18) 35%,
      rgba(10,10,10,0.62) 55%,
      rgba(10,10,10,0.92) 78%,
      var(--bg) 100%);
  }
  .hero-slide-title { font-size: 22px; -webkit-line-clamp: 2; }
  .hero-badge { font-size: 12px; padding: 5px 11px; }
  .hero-slide-btn-play { padding: 12px 24px; font-size: 14px; }
  .hero-slide-btn-info { width: 42px; height: 42px; }
  .hero-banner-controls { right: 18px; bottom: 16px; }
  .hero-banner-arrows { display: none; }
}

@media (max-width: 480px) {
  .hero-banner-slider { height: 380px; }
  .hero-slide-genres { display: none; }
  .hero-slide-badges { gap: 7px; }
  .hero-badge { font-size: 11px; padding: 4px 10px; }
}

/* ===== ПРИВАТНОСТЬ СПИСКОВ (js/privacy-settings.js) ===== */
.privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.privacy-row:last-child { border-bottom: none; }

.privacy-row-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}

.privacy-row-options {
  /* .pill-toggle делает display:inline-flex сам — обёртка только
     позиционирует блок внутри строки. */
}

@media (max-width: 520px) {
  .privacy-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .privacy-row-options { width: 100%; }
  .privacy-row-options.pill-toggle { display: flex; }
  .privacy-row-options .pill-btn { flex: 1; text-align: center; }
}

/* =====================================================
   PILL TOGGLE — единый sliding-pill сегментированный
   переключатель (2+ кнопок-вариантов на одну группу).

   Используется везде, где раньше были свои варианты
   ("privacy-option-btn", "bg-tab-btn" и т.п.): приватность
   списков, вкладки настройки фона (Цвет/Картинка/Градиент)
   и любые новые подобные переключатели — чтобы вид и
   анимация были одинаковыми по всему сайту.

   Разметка:
     <div class="pill-toggle" data-pill-group>
       <div class="pill-thumb"></div>
       <button class="pill-btn active" data-value="...">Label</button>
       <button class="pill-btn" data-value="...">Label</button>
     </div>
   Логика скольжения — общая функция initPillToggle() в js/ui.js.
   ===================================================== */
.pill-toggle {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  flex-wrap: nowrap;
}
.pill-toggle::-webkit-scrollbar { display: none; }
.pill-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  background: var(--green);
  border-radius: 7px;
  transition: transform 0.32s cubic-bezier(.22,1,.36,1), width 0.32s cubic-bezier(.22,1,.36,1);
  z-index: 0;
  pointer-events: none;
}
.pill-btn {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.pill-btn:hover { color: var(--text); }
.pill-btn.active { color: var(--bg-card); }

/* Full-width вариант — вкладки на всю ширину страницы (не строка
   лейбл+пилл, как приватность списков): подвкладки импорта и
   ИМПОРТ/ЭКСПОРТ/ОЧИСТКА на странице Импорт/Экспорт. Кнопки делят
   ширину поровну через flex:1, сам .pill-toggle растягивается на всю
   ширину вместо inline-flex по контенту. */
.import-subtabs.pill-toggle,
.modal-tabs.pill-toggle {
  display: flex;
  width: 100%;
}
.import-subtabs.pill-toggle .pill-btn,
.modal-tabs.pill-toggle .pill-btn {
  flex: 1;
  text-align: center;
  justify-content: center;
}
.modal-tabs.pill-toggle .pill-btn {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 11px 10px;
}


/* =====================================================
   BACKGROUND SETTINGS — VARIANT 1 / LARGE PREVIEW TILES
   Scoped to #bgModal so other dialogs keep their existing UI.
   ===================================================== */
#bgModal .bg-settings-modal {
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}

#bgModal .bg-settings-body {
  padding: 22px 22px 20px;
}

/* #bgModal больше не существует в разметке (заменена страницей
   #bgSection, см. ниже) — блок ниже мёртвый CSS, оставлен только
   для истории и не влияет на вид сайта. */
#bgModal .bg-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

#bgModal .bg-settings-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

#bgModal .bg-color-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
#bgModal #bgColorPicker {
  width: 56px;
  height: 42px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  flex: 0 0 auto;
}
#bgModal .bg-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#bgModal .v1-dropzone {
  border: 2px dashed rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t-fast);
  background: rgba(255,255,255,0.015);
  margin-bottom: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#bgModal .v1-dropzone:hover,
#bgModal .v1-dropzone.is-dragover {
  border-color: rgba(232,232,232,0.4);
  background-color: rgba(255,255,255,0.03);
}
#bgModal .v1-dropzone svg {
  width: 30px;
  height: 30px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
#bgModal .v1-dropzone .main {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}
#bgModal .v1-dropzone .sub {
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: .5px;
}
#bgModal .v1-dropzone .selected-file {
  display: inline-block;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 4px #000;
  padding: 6px 12px;
  background: rgba(0,0,0,.55);
  border-radius: 6px;
  font-weight: 700;
}

#bgModal .section-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

#bgModal .v1-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
#bgModal .v1-preset-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t-fast);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#bgModal .v1-preset-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(232,232,232,0.4);
}
#bgModal .v1-preset-tile.selected {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 8px 20px rgba(0,0,0,0.4);
}
#bgModal .v1-preset-tile .tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  padding: 16px 8px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  color: #fff;
}
#bgModal .v1-preset-tile .check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: #0c0c0c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transform: scale(.6);
  transition: all var(--t-fast);
}
#bgModal .v1-preset-tile.selected .check {
  opacity: 1;
  transform: scale(1);
}

#bgModal .v1-url-row {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
#bgModal .v1-url-row input {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
  transition: all var(--t-fast);
}
#bgModal .v1-url-row input:focus {
  outline: none;
  border-color: rgba(232,232,232,0.35);
  background: rgba(255,255,255,0.03);
}
#bgModal .v1-url-row input::placeholder { color: var(--text-dim); }
#bgModal .v1-url-row button {
  background: var(--green);
  border: 1px solid var(--green);
  color: #0c0c0c;
  padding: 0 22px;
  border-radius: 10px;
  font-weight: 800;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1px;
  font-size: 12.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
}
#bgModal .v1-url-row button:hover {
  background: #fff;
  border-color: #fff;
}

#bgModal .v1-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#bgModal .v1-chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#bgModal .v1-chip-row > span {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 70px;
  font-weight: 600;
}
#bgModal .v1-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#bgModal .v1-chip {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
#bgModal .v1-chip:hover {
  border-color: rgba(255,255,255,0.25);
  color: var(--text);
}
#bgModal .v1-chip.selected {
  background: var(--green);
  border-color: var(--green);
  color: #0c0c0c;
}

#bgModal .v1-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#bgModal .v1-slider-row > span:first-child {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 70px;
  font-weight: 600;
}
#bgModal .v1-slider-track {
  flex: 1;
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  min-width: 80px;
}
#bgModal .v1-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--green);
  border-radius: 4px;
  pointer-events: none;
}
#bgModal .v1-slider-track input[type="range"] {
  position: absolute;
  inset: -8px 0;
  width: 100%;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
#bgModal .v1-slider-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(232,232,232,0.15);
  pointer-events: none;
  transition: left .08s ease;
}
#bgModal .v1-slider-val {
  font-size: 12px;
  color: var(--text);
  font-weight: 700;
  min-width: 34px;
  text-align: right;
}

#bgModal .v1-gradient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
#bgModal .v1-gradient-grid > div {
  min-height: 60px;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  align-items: flex-end;
  padding: 6px;
  background-clip: padding-box;
}
#bgModal .v1-gradient-grid > div:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
#bgModal .v1-gradient-grid > div span {
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  font-weight: 600;
}

#bgModal .bg-settings-footer {
  border-top: 1px solid var(--border);
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#bgModal .bg-settings-footer .btn-reset {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  padding: 11px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}
#bgModal .bg-settings-footer .btn-reset:hover {
  border-color: rgba(232,232,232,0.25);
  color: var(--green);
  background: rgba(232,232,232,0.04);
}
#bgModal .bg-settings-footer .btn-close-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--green);
  border: 1px solid var(--green);
  color: #0c0c0c;
  height: 40px;
  min-width: 96px;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all var(--t-fast);
}
#bgModal .bg-settings-footer .btn-close-text:hover {
  background: #fff;
  border-color: #fff;
}

@media (max-width: 520px) {
  #bgModal .v1-presets { grid-template-columns: repeat(2, 1fr); }
  #bgModal .v1-gradient-grid { grid-template-columns: repeat(2, 1fr); }
  #bgModal .v1-chip-row { align-items: flex-start; }
}

/* =====================================================
   ОТДЕЛЬНАЯ СТРАНИЦА «НАСТРОЙКИ» (#settingsSection)
   =====================================================
   Открывается по нажатию «Настройки» в мобильном попапе «Ещё»
   (см. #mobileSettingsPopup) — полноценная вкладка switchTab('settings'),
   а не ещё один попап. Вариант «Классический»: тот же язык, что и
   у .msp-list/.msp-item (см. mobile popup выше) — компактные строки
   с лейблами-разделителями групп вместо отдельных карточек на
   каждую группу, без лишнего воздуха. Токены (--bg-card, --border,
   --radius-*, --text-muted и т.д.) — те же переменные :root, что
   использует остальной сайт, новых не вводится.

   На десктопе вкладка не нужна (там настройки живут в выпадающем
   меню «Аккаунт» и открывают модалки напрямую) — .settings-page
   ограничена max-width и центрируется, чтобы не расползаться на
   широком экране, но по умолчанию открывается только с мобильной
   нижней навигации. */

.settings-page {
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 24px;
}

/* ── Верхняя панель: «Назад» + заголовок ──
   Тот же паттерн, что у .list-header (см. #listsSection) — но с
   кнопкой назад слева, т.к. это отдельная страница, а не подраздел
   с фильтрами. Без лишних элементов, как просили: ни поиска, ни
   счётчиков, ни экшенов справа. */
.settings-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 20px;
}
.settings-back {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.settings-back:hover { background: rgba(255,255,255,0.08); border-color: var(--border-hl); }
.settings-back svg { width: 17px; height: 17px; }
.settings-topbar h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text);
}

/* ── Список настроек — компактные строки, разделённые тонкой
   линией, без отдельной рамки/фона на каждую (см. .v1-row в
   исходном сравнении вариантов). Группы разделены только текстовым
   лейблом .settings-group-label, как у .msp-label в попапе «Ещё». ── */
.settings-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--text-dim);
  padding: 18px 6px 8px;
}
.settings-group-label:first-child { padding-top: 4px; }

.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 6px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background var(--t-fast);
}
.settings-group-label + .settings-row { border-top: none; }
.settings-row:hover { background: rgba(255,255,255,0.035); }
.settings-row:active { background: rgba(255,255,255,0.06); }

.settings-row-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.settings-row-icon svg { width: 16px; height: 16px; }

.settings-row-text { flex: 1; min-width: 0; }
.settings-row-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.settings-row-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.settings-row-value {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.settings-row-chevron {
  color: var(--text-dim);
  flex-shrink: 0;
  display: flex;
}
.settings-row-chevron svg { width: 16px; height: 16px; }

/* ── Переключатель (toggle) ──
   Единственный элемент управления, для которого в существующей
   дизайн-системе не было готового компонента (только native
   input[type=checkbox] с accent-color в .clear-option). Построен
   из тех же токенов: --green как «включено», rgba(255,255,255,*)
   как нейтральный трек — тот же язык, что и остальные акценты сайта. */
.settings-switch {
  position: relative;
  width: 42px; height: 25px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-hl);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  padding: 0;
}
.settings-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  transition: transform var(--t-fast), background var(--t-fast);
}
.settings-switch.on {
  background: var(--green);
  border-color: var(--green);
}
.settings-switch.on::after {
  transform: translateX(17px);
  background: #0e0e0e;
}
.settings-switch:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .settings-page { padding-left: 4px; padding-right: 4px; }
}

/* =====================================================
   ПРЕДПОЧТЕНИЯ СО СТРАНИЦЫ «НАСТРОЙКИ» (js/settings-page.js)
   =====================================================
   Два переключателя ("Анимации", "Компактный режим") применяются
   глобально через класс на <html>, проставляемый/снимаемый из
   _applySettingsPrefs() — тот же принцип, что системный
   prefers-reduced-motion чуть выше по файлу, только под ручным
   управлением пользователя, а не настройками ОС. Это позволяет любому
   месту сайта, использующему .page-section-enter/карточные отступы,
   учитывать настройку "бесплатно", без точечных правок в каждом файле. */

/* «Анимации» выключены — то же самое, что делает системный
   prefers-reduced-motion для .page-section-enter (см. правило выше),
   плюс отключаем ключевые hover/переходные transition по сайту,
   которые могли бы ощущаться как «анимация», а не просто моментальная
   реакция на клик.

   ВАЖНО: раньше здесь стояло transition-duration/animation-duration:
   0.001ms !important — это НЕ отключает анимацию, а только сжимает её
   длительность почти до нуля. Анимация физически продолжает
   проигрываться (со всеми промежуточными кадрами transform/opacity),
   просто очень быстро — на мобильных, где кадр рендерится медленнее,
   чем 0.001ms, браузер физически не успевает отрисовать все кадры
   к сроку и на глаз это выглядит как "всё резко дёргается/ускоряется",
   а не как отсутствие анимации. Плюс transition-duration/
   animation-duration не действуют на CSS scroll-driven анимации и на
   некоторые JS-анимации, управляемые напрямую через requestAnimationFrame
   (тем не менее используем ту же стратегию, что и системный
   prefers-reduced-motion выше по файлу — animation: none / transition:
   none — это реально убирает анимацию, а не проигрывает её без остатка
   времени). */
html.settings-no-animations .page-section-enter { animation: none !important; }
html.settings-no-animations,
html.settings-no-animations * {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
/* Побочный эффект (ожидаемый, не баг): кольцо-таймер обратного отсчёта
   у баннера "Далее — серия" (.tor-ring-fg, см. index.html) визуально
   стягивается через inline transition на stroke-dashoffset — при
   включённой настройке "Без анимаций" transition: none !important выше
   переопределяет и этот inline-transition тоже, поэтому кольцо перестаёт
   двигаться (сразу показывает пустое состояние вместо плавного
   заполнения). Секундный счётчик рядом (· 5с) продолжает тикать как
   обычно — он на setInterval, а не на CSS-анимации — и автопереход на
   следующую серию срабатывает по расписанию как всегда. Это тот же
   компромисс, что и у спиннеров загрузки (.spinner-ring/.cmts-spinner)
   чуть выше по файлу: сама функция не ломается, просто теряется
   визуальное движение — что и является целью этой настройки. */

/* «Компактный режим» — сжимает вертикальные/горизонтальные отступы по
   ВСЕМУ сайту (не только каталогу/настройкам, как было раньше — прежняя
   версия трогала всего 5 узких селекторов, из-за чего режим ощущался
   как "работает не везде": карточки на большинстве экранов, шапка,
   секции контента, детальная страница, списки, модалки и т.д. оставались
   с обычными отступами). Не трогает размер постеров (за это отвечает
   отдельная настройка «Размер постов») и не трогает шрифты — только
   «воздух»: gap, padding, margin. Правила ниже не заменяют базовые
   значения (в т.ч. мобильные @media (max-width:768px) чуть выше по
   файлу) целиком, а уменьшают их — специфичность класса на <html>
   (0-2-0 у всех правил ниже) выше, чем у голых селекторов внутри
   @media (0-1-0), поэтому это работает и поверх мобильной раскладки. */

/* ── Сетки карточек — везде, где на сайте есть anime-grid/featured-grid/
   seasons-grid (главная, каталог, поиск, список, сезоны на детальной
   странице), а не только на двух местах, как было раньше. */
html.settings-compact .anime-grid,
html.settings-compact .featured-grid,
html.settings-compact .seasons-grid {
  gap: 10px;
}

/* ── Карточка аниме — внутренние отступы текста, не сам постер. */
html.settings-compact .card-body {
  padding: 7px 9px 9px;
}
html.settings-compact .card-title {
  margin-bottom: 2px;
}

/* ── Шапка сайта — чуть ниже и без лишнего воздуха вокруг лого/поиска.
   Desktop и mobile — РАЗНЫЕ базовые высоты (84px / 60px, см. .header-inner
   и его мобильный @media(max-width:768px) override выше по файлу),
   поэтому компактные значения тоже заданы раздельно: единое число здесь
   либо не сжало бы десктоп заметно, либо — что хуже — увеличило бы уже
   сжатую мобильную шапку вместо того чтобы уменьшить её ещё. */
html.settings-compact .header-inner {
  height: 64px;
}
html.settings-compact .header-inner--top {
  height: 50px;
}
html.settings-compact .header-inner--bottom {
  height: 38px;
}
@media (max-width: 768px) {
  html.settings-compact .header-inner,
  html.settings-compact .header-inner--top {
    height: 50px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ── Основной контент и секции — заголовки блоков ("Продолжить
   просмотр", "Новинки" и т.п.) ближе к контенту под ними, сами секции
   с меньшим отступом друг от друга. */
html.settings-compact .main-content {
  padding-top: 12px !important;
}
html.settings-compact .featured-header,
html.settings-compact .list-header {
  margin-bottom: 8px;
}
html.settings-compact .featured-block,
html.settings-compact .list-section {
  margin-bottom: 20px;
}

/* ── Детальная страница тайтла — карточка плеера/описания и общая
   раскладка чуть плотнее. */
html.settings-compact .detail-widget-frame {
  padding: 10px;
}
html.settings-compact .detail-layout {
  gap: 14px;
}
html.settings-compact .detail-poster-col {
  gap: 8px 10px;
}

/* ── Списки (Мои списки / попап "Ещё") и настройки — уже было, оставлено
   как есть, просто теперь часть куда более широкого набора правил. */
html.settings-compact .settings-row {
  padding-top: 8px;
  padding-bottom: 8px;
}
html.settings-compact .settings-group-label {
  padding-top: 12px;
  padding-bottom: 5px;
}
html.settings-compact .msp-item {
  padding: 6px 8px;
}

/* ── Расписание — построчный список серий по дням. */
html.settings-compact .schedule-day-header {
  padding-top: 6px;
  padding-bottom: 6px;
}
html.settings-compact .schedule-row {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* ── Фильтры каталога/поиска. */
html.settings-compact .filter-panel {
  padding: 10px;
}
html.settings-compact .filter-grid {
  gap: 8px;
}

/* ── Модальные окна (в т.ч. мобильные bottom-sheet) — чуть меньше
   внутренних отступов сверху/снизу, сама модалка не сжимается по
   ширине/контенту, чтобы не терять читаемость. */
html.settings-compact .modal-box,
html.settings-compact .modal-box--wide {
  padding-top: 14px;
  padding-bottom: 18px;
}
html.settings-compact .modal-header {
  margin-bottom: 10px;
}

/* =====================================================
   ОТДЕЛЬНАЯ СТРАНИЦА «ФОН ПРИЛОЖЕНИЯ» (#bgSection)
   =====================================================
   Внутренняя разметка (.bg-tabs/.v1-dropzone/.v1-presets/.v1-chips/
   .v1-slider-*/.v1-gradient-grid) — теми же классами и вёрсткой, что
   раньше жили в #bgModal .bg-settings-modal. Правила ниже — точная
   копия прежних #bgModal-скоупнутых стилей, просто под #bgSection
   вместо #bgModal (сам модальный оверлей и его футер с "Закрыть"
   больше не нужны — это отдельная вкладка с кнопкой "Назад" наверху,
   как и у #settingsSection). */

#bgSection .bg-page-body {
  padding: 4px 6px 28px;
}

#bgSection .bg-tabs {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
/* Вид и анимация вкладок теперь полностью в .pill-toggle/.pill-thumb/
   .pill-btn (см. общий блок PILL TOGGLE выше) — .bg-tab-btn ниже
   только чуть увеличивает тач-зону под мобильный формат страницы. */
#bgSection .bg-tab-btn { min-height: 40px; }

#bgSection .bg-settings-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

#bgSection .bg-color-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
#bgSection #bgColorPicker {
  width: 56px;
  height: 42px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  flex: 0 0 auto;
}
#bgSection .bg-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#bgSection .v1-dropzone {
  border: 2px dashed rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t-fast);
  background: rgba(255,255,255,0.015);
  margin-bottom: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#bgSection .v1-dropzone:hover,
#bgSection .v1-dropzone.is-dragover {
  border-color: rgba(232,232,232,0.4);
  background-color: rgba(255,255,255,0.03);
}
#bgSection .v1-dropzone svg {
  width: 30px;
  height: 30px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
#bgSection .v1-dropzone .main {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}
#bgSection .v1-dropzone .sub {
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: .5px;
}
#bgSection .v1-dropzone .selected-file {
  display: inline-block;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 4px #000;
  padding: 6px 12px;
  background: rgba(0,0,0,.55);
  border-radius: 6px;
  font-weight: 700;
}

#bgSection .section-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

#bgSection .v1-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
#bgSection .v1-preset-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t-fast);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#bgSection .v1-preset-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(232,232,232,0.4);
}
#bgSection .v1-preset-tile.selected {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 8px 20px rgba(0,0,0,0.4);
}
#bgSection .v1-preset-tile .tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  padding: 16px 8px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  color: #fff;
}
#bgSection .v1-preset-tile .check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: #0c0c0c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transform: scale(.6);
  transition: all var(--t-fast);
}
#bgSection .v1-preset-tile.selected .check {
  opacity: 1;
  transform: scale(1);
}

#bgSection .v1-url-row {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
#bgSection .v1-url-row input {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
  transition: all var(--t-fast);
}
#bgSection .v1-url-row input:focus {
  outline: none;
  border-color: rgba(232,232,232,0.35);
  background: rgba(255,255,255,0.03);
}
#bgSection .v1-url-row input::placeholder { color: var(--text-dim); }
#bgSection .v1-url-row button {
  background: var(--green);
  border: 1px solid var(--green);
  color: #0c0c0c;
  padding: 0 22px;
  border-radius: 10px;
  font-weight: 800;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1px;
  font-size: 12.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast);
}
#bgSection .v1-url-row button:hover {
  background: #fff;
  border-color: #fff;
}

#bgSection .v1-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#bgSection .v1-chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#bgSection .v1-chip-row > span {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 70px;
  font-weight: 600;
}
/* Вид и sliding-анимация самих кнопок (.v1-chips) теперь полностью
   в .pill-toggle/.pill-thumb/.pill-btn (см. общий блок PILL TOGGLE) —
   тот же компонент, что и вкладки Цвет/Картинка/Градиент выше и
   строки приватности списков, чтобы все переключатели на сайте
   выглядели и анимировались одинаково. */
#bgSection .v1-chips.pill-toggle { flex-wrap: nowrap; }

#bgSection .v1-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#bgSection .v1-slider-row > span:first-child {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 70px;
  font-weight: 600;
}
#bgSection .v1-slider-track {
  flex: 1;
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  min-width: 80px;
}
#bgSection .v1-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--green);
  border-radius: 4px;
  pointer-events: none;
}
#bgSection .v1-slider-track input[type="range"] {
  position: absolute;
  inset: -8px 0;
  width: 100%;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
#bgSection .v1-slider-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(232,232,232,0.15);
  pointer-events: none;
  transition: left .08s ease;
}
#bgSection .v1-slider-val {
  font-size: 12px;
  color: var(--text);
  font-weight: 700;
  min-width: 34px;
  text-align: right;
}

#bgSection .v1-gradient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
#bgSection .v1-gradient-grid > div {
  min-height: 60px;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  align-items: flex-end;
  padding: 6px;
  background-clip: padding-box;
}
#bgSection .v1-gradient-grid > div:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
#bgSection .v1-gradient-grid > div span {
  font-size: 10px;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  font-weight: 600;
}

/* Кнопка "Сбросить фон" — вместо футера модалки, простая полноширинная
   строка внизу страницы в том же duotone-стиле, что .btn-reset раньше.
   .settings-page-reset — тот же класс без привязки к #bgSection, чтобы
   его могли использовать и остальные отдельные страницы настроек
   (размер постов, темы сайта) — см. .settings-page-reset ниже. */
#bgSection .bg-page-reset,
.settings-page-reset {
  width: 100%;
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  padding: 13px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all var(--t-fast);
}
#bgSection .bg-page-reset svg,
.settings-page-reset svg { width: 15px; height: 15px; }
#bgSection .bg-page-reset:hover,
.settings-page-reset:hover {
  border-color: rgba(232,232,232,0.25);
  color: var(--green);
  background: rgba(232,232,232,0.04);
}

@media (max-width: 520px) {
  #bgSection .v1-presets { grid-template-columns: repeat(2, 1fr); }
  #bgSection .v1-gradient-grid { grid-template-columns: repeat(2, 1fr); }
  #bgSection .v1-chip-row { align-items: flex-start; }
}

/* =====================================================
   ОТДЕЛЬНЫЕ СТРАНИЦЫ: РАЗМЕР ПОСТОВ / ТЕМЫ САЙТА /
   ПРИВАТНОСТЬ / ИМПОРТ-ЭКСПОРТ
   =====================================================
   Те же самые контролы, что раньше жили в соответствующих модалках
   (.import-*, .site-theme-*, .privacy-row-*, слайдер размера постов) —
   разметка и id перенесены без изменений, поэтому вся логика в
   poster-settings.js/site-themes.js/privacy-settings.js/import-export.js
   работает без единой правки. Ниже — только вёрстка "тела страницы"
   вместо тела модалки (без .modal-box/.modal-header/футера). */

.settings-page-section {
  padding: 4px 6px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.settings-page-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  background: rgba(0,255,220,0.04);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-dim);
  padding: 10px 14px;
  border-radius: 4px;
}
.settings-page-desc.warn {
  background: rgba(255,60,60,0.05);
  border: 1px solid rgba(255,60,60,0.2);
  border-left: 3px solid #ff6b6b;
  color: #ff9999;
}

/* Размер постов — тот же слайдер, что был в модалке */
.poster-size-row { display: flex; flex-direction: column; gap: 10px; }
.poster-size-row-top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.poster-size-row-top span:first-child {
  font-size: 12px; color: var(--text-muted); letter-spacing: 0.5px;
}
#posterSizeLabel {
  font-size: 14px; color: var(--green); font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}
#posterSizeSlider { width: 100%; accent-color: var(--green); cursor: pointer; }
.poster-size-row-bottom {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-muted);
}
.poster-size-row-bottom span:last-child { text-align: right; }

/* Импорт/экспорт-страница переиспользует .modal-tabs/.modal-panel и
   т.д. из старой модалки — им не нужен .modal-box вокруг, чтобы
   работать, эти классы уже не зависят от родителя-оверлея. */
#importExportSection .modal-tabs { margin-bottom: 4px; }
#importExportSection .modal-panel { padding: 0; }
#importExportSection .modal-body { padding: 0; }