/* ============================================
   УНИВЕРСАЛЬНЫЕ КОМПОНЕНТЫ
   Кнопки, ярлыки, бейджи, табы
   Используют CSS-переменные для тем
   ============================================ */

/* ============================================
   ICONS (Font Awesome) — стабильное отображение
   Консолидация: раньше было в css/core/fixes.css
   ============================================ */
.fa,
.fas,
.far,
.fal,
.fab,
.fad {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Иконка поиска */
.header-search-box .anime-btn i,
.input-group .anime-btn i,
.mobile-search-toggle i,
.mobile-search-form .anime-btn i {
    display: inline-block !important;
    font-size: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--color-grey-light) !important;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
}

/* Иконки переключения вида (плитка/список) */
.view-switcher-link i {
    display: inline-block !important;
    font-size: 22px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
}

/* Стрелки в фильтрах */
.filter-block .anime-btn i.fa-chevron-down,
.filter-block .anime-btn span i.fa-chevron-down {
    display: inline-block !important;
    font-size: 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
}

/* Иконки в dropdown (Буду смотреть, В избранное) */
.dropdown-item i {
    display: inline-block !important;
    font-size: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
    margin-right: 8px !important;
}

/* ============================================
   ACTION BUTTONS (бывший css/core/action-buttons.css)
   ============================================ */
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 120px;
  background: rgba(50, 184, 198, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  font-family: inherit;
}

.action-btn i {
  font-size: 1rem;
  line-height: 1;
}

.action-btn span {
  font-size: 0.875rem;
  line-height: 1;
}

.action-btn.edit {
  background: rgba(50, 184, 198, 0.9);
  border: 1px solid rgba(50, 184, 198, 0.3);
}

.action-btn.edit:hover {
  background: rgba(50, 184, 198, 1);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(50, 184, 198, 0.6);
}

.action-btn.delete {
  background: rgba(220, 53, 69, 0.9);
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.action-btn.delete:hover {
  background: rgba(220, 53, 69, 1);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.6);
}

.action-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.catalog-actions .action-btn {
  min-width: 140px;
}

.catalog-card .action-btn.edit {
  background: var(--admin-primary, rgba(50, 184, 198, 0.9));
  border-color: var(--admin-primary-solid, rgba(50, 184, 198, 0.3));
}

.catalog-card .action-btn.edit:hover {
  background: var(--admin-primary-solid, rgba(50, 184, 198, 1));
}

.table .action-btn {
  min-width: auto;
  padding: 6px 12px;
  font-size: 0.75rem;
}

.post-actions .action-btn,
.post-item .action-btn {
  min-width: 100px;
  padding: 8px 14px;
}

/* Убираем обводку вокруг контейнеров с кнопками статуса и озвучки */
.tags,
.detail,
.list-voice-row,
.anime-blog .tags,
.anime-blog .detail,
.anime-blog .detail > div,
.anime-blog .tags > div,
.anime-blog .detail > div:first-child,
.anime-blog .detail > div:first-child > div,
div[style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:6px"],
div[style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:5px"],
div[style*="display:flex"][style*="align-items:center"][style*="gap:6px"],
div[style*="display:flex"][style*="align-items:center"][style*="gap:5px"],
div[style*="display:flex"][style*="flex-wrap:wrap"][style*="align-items:center"][style*="gap:6px"],
div[style*="display:flex"][style*="flex-wrap:wrap"][style*="align-items:center"][style*="gap:5px"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ============================================
   БАЗОВЫЕ ПЕРЕМЕННЫЕ ДЛЯ КОМПОНЕНТОВ
   (переопределяются в темах)
   ============================================ */
:root {
  /* Кнопки основных действий */
  --btn-main-bg: transparent;
  --btn-main-border: var(--color-primary);
  --btn-main-text: var(--color-primary);
  --btn-main-bg-hover: var(--color-primary);
  --btn-main-text-hover: #000;
  
  /* Кнопки-таги (озвучки, плееры, типы) */
  --btn-tag-bg: transparent;
  --btn-tag-border: rgba(255, 255, 255, 0.3);
  --btn-tag-text: rgba(255, 255, 255, 0.8);
  --btn-tag-bg-hover: rgba(255, 255, 255, 0.1);
  --btn-tag-border-hover: rgba(255, 255, 255, 0.5);
  --btn-tag-text-hover: #fff;
  --btn-tag-bg-active: var(--color-primary);
  --btn-tag-border-active: var(--color-primary);
  --btn-tag-text-active: #000;
  
  /* Кнопки-переключатели (статусы) */
  --btn-toggle-bg: transparent;
  --btn-toggle-border: rgba(255, 255, 255, 0.3);
  --btn-toggle-text: rgba(255, 255, 255, 0.8);
  --btn-toggle-bg-active: var(--color-primary);
  --btn-toggle-border-active: var(--color-primary);
  --btn-toggle-text-active: #000;
  
  /* Бейджи */
  --badge-bg: var(--color-primary);
  --badge-text: #000;
  --badge-border: transparent;
  
  /* Унифицированные бейджи согласно ТЗ UI_POLISH 1.1 */
  --badge-status-ongoing-bg: var(--color-accent);
  --badge-status-ongoing-text: #000;
  --badge-status-finished-bg: #ff4c4c;
  --badge-status-finished-text: #fff;
  
  /* Карточки */
  --card-hover-bg: rgba(0, 0, 0, 0.2);
  --card-overlay-bg: rgba(0, 0, 0, 0.45);
}

/* ============================================
   .btn-main - Крупные основные кнопки
   (Смотреть, Продолжить просмотр и т.п.)
   ============================================ */
.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 8px;
  border: 2px solid var(--btn-main-border);
  background: var(--btn-main-bg);
  color: var(--btn-main-text);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-sec, "Poppins", sans-serif);
}

.btn-main:hover {
  background: var(--btn-main-bg-hover);
  color: var(--btn-main-text-hover);
  border-color: var(--btn-main-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-main:active {
  transform: translateY(0);
}

.btn-header-main {
  padding: 14px 24px !important;
  font-size: 17px !important; /* Увеличенный размер текста для кнопки Профиль */
  border-radius: 12px !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Кнопки в шапке: профиль / админка / выход */
/* Высокая специфичность для переопределения общих стилей тем */
.right-nav .anime-btn2.light.btn-header-main,
.right-nav .anime-btn2.dark.btn-header-main,
.mobile-header .anime-btn2.light.btn-header-main,
.mobile-header .anime-btn2.dark.btn-header-main {
  border: 1px solid !important;
  background: var(--header-btn-secondary-bg, transparent) !important;
  color: var(--header-btn-secondary-text, currentColor) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  font-weight: 700 !important;  /* насыщенный текст */
  text-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.right-nav .anime-btn2.light.btn-header-main,
.mobile-header .anime-btn2.light.btn-header-main,
a.anime-btn2.light.btn-header-main {
  background: var(--header-btn-primary-bg, var(--color-primary, #00f0ff)) !important;
  color: var(--header-btn-primary-text, #ffffff) !important;
  border-color: var(--header-btn-primary-bg, var(--color-primary, #00f0ff)) !important;
  font-weight: 700 !important;  /* насыщенный текст */
  font-size: 17px !important;  /* Увеличенный размер текста */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;  /* легкая тень для лучшей читаемости */
  opacity: 1 !important; /* Полная яркость */
}

.right-nav .anime-btn2.dark.btn-header-main,
.mobile-header .anime-btn2.dark.btn-header-main {
  background: var(--header-btn-secondary-bg, transparent) !important;
  color: var(--header-btn-secondary-text, var(--color-primary, #00f0ff)) !important;
  border-color: var(--header-btn-secondary-border, var(--color-primary, #00f0ff)) !important;
  font-weight: 700 !important;  /* насыщенный текст */
}

.right-nav .anime-btn2.light.btn-header-main:hover,
.right-nav .anime-btn2.dark.btn-header-main:hover,
.mobile-header .anime-btn2.light.btn-header-main:hover,
.mobile-header .anime-btn2.dark.btn-header-main:hover {
  background: var(--header-btn-hover-bg, var(--header-btn-primary-bg, var(--color-primary, #00f0ff))) !important;
  color: #ffffff !important; /* Белый текст при hover - всегда, переопределяем все переменные */
  border-color: var(--header-btn-hover-bg, var(--header-btn-primary-bg, var(--color-primary, #00f0ff))) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 20px var(--header-btn-hover-bg, rgba(0,0,0,0.2)) !important;  /* более яркая тень */
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.03) !important;  /* более заметный подъем при hover */
  font-weight: 700 !important;  /* насыщенный текст */
  font-size: 17px !important;  /* Увеличенный размер текста */
}

/* Специфично для кнопки Профиль - стилизованный цветной текст при hover во всех темах */
/* Переопределяем общие стили .anime-btn2.light:hover из тем */
/* ВАЖНО: Используем максимально специфичные селекторы для гарантии применения правил */
html .right-nav .anime-btn2.light.btn-header-main:hover,
html .right-nav .anime-btn2.light.btn-header-main:hover *,
html .mobile-header .anime-btn2.light.btn-header-main:hover,
html .mobile-header .anime-btn2.light.btn-header-main:hover *,
html a.anime-btn2.light.btn-header-main:hover,
html a.anime-btn2.light.btn-header-main:hover *,
.right-nav .anime-btn2.light.btn-header-main:hover,
.right-nav .anime-btn2.light.btn-header-main:hover *,
.mobile-header .anime-btn2.light.btn-header-main:hover,
.mobile-header .anime-btn2.light.btn-header-main:hover *,
a.anime-btn2.light.btn-header-main:hover,
a.anime-btn2.light.btn-header-main:hover * {
  color: #ffffff !important; /* Белый текст при hover - ВСЕГДА белый, переопределяет все другие правила */
  opacity: 1 !important; /* Полная яркость */
  /* Стилизованная цветная подсветка текста при hover - используем готовые rgba переменные из тем */
  text-shadow: 
    0 1px 3px rgba(0,0,0,0.8),
    0 2px 10px var(--header-btn-text-shadow-color-strong, rgba(155, 92, 255, 0.9)),
    0 0 25px var(--header-btn-text-shadow-color-medium, rgba(155, 92, 255, 0.8)),
    0 0 40px var(--header-btn-text-shadow-color-weak, rgba(155, 92, 255, 0.6)) !important;
  filter: drop-shadow(0 0 12px var(--header-btn-filter-shadow-color, rgba(155, 92, 255, 0.7))) !important; /* Дополнительная цветная подсветка */
}

/* Активное состояние кнопки Профиль - когда пользователь на странице профиля */
/* Кнопка должна "гореть" с цветной подсветкой во всех темах */
.right-nav .anime-btn2.light.btn-header-main.active,
.right-nav .anime-btn2.light.btn-header-main.is-active,
.right-nav .anime-btn2.light.btn-header-main[aria-current="page"],
.mobile-header .anime-btn2.light.btn-header-main.active,
.mobile-header .anime-btn2.light.btn-header-main.is-active,
.mobile-header .anime-btn2.light.btn-header-main[aria-current="page"],
a.anime-btn2.light.btn-header-main.active,
a.anime-btn2.light.btn-header-main.is-active,
a.anime-btn2.light.btn-header-main[aria-current="page"],
body.profile-page .right-nav .anime-btn2.light.btn-header-main,
body.profile-page .mobile-header .anime-btn2.light.btn-header-main,
body[data-page="profile"] .right-nav .anime-btn2.light.btn-header-main,
body[data-page="profile"] .mobile-header .anime-btn2.light.btn-header-main,
body.profile-page a.anime-btn2.light.btn-header-main[href*="profile"],
body[data-page="profile"] a.anime-btn2.light.btn-header-main[href*="profile"] {
  background: var(--header-btn-active-bg, var(--header-btn-hover-bg, var(--header-btn-primary-bg, var(--color-primary)))) !important;
  border-color: var(--header-btn-active-bg, var(--header-btn-hover-bg, var(--header-btn-primary-bg, var(--color-primary)))) !important;
  color: #ffffff !important; /* Белый текст */
  font-weight: 700 !important;
  font-size: 17px !important;
  /* Стилизованная цветная подсветка активной кнопки - используем готовые rgba переменные из тем */
  text-shadow: 
    0 1px 3px rgba(0,0,0,0.8),
    0 2px 10px var(--header-btn-text-shadow-color-strong, rgba(155, 92, 255, 0.9)),
    0 0 25px var(--header-btn-text-shadow-color-medium, rgba(155, 92, 255, 0.8)),
    0 0 40px var(--header-btn-text-shadow-color-weak, rgba(155, 92, 255, 0.6)) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 30px var(--header-btn-box-shadow-color, rgba(155, 92, 255, 0.5)) !important;  /* Подсветка активной кнопки */
  opacity: 1 !important;
  transform: scale(1.02) !important; /* Легкое увеличение для активной кнопки */
  filter: drop-shadow(0 0 12px var(--header-btn-filter-shadow-color, rgba(155, 92, 255, 0.7))) !important; /* Дополнительная цветная подсветка активной кнопки */
}

/* Убираем псевдоэлемент ::before для кнопок хедера */
.right-nav .anime-btn2.light.btn-header-main::before,
.right-nav .anime-btn2.dark.btn-header-main::before,
.mobile-header .anime-btn2.light.btn-header-main::before,
.mobile-header .anime-btn2.dark.btn-header-main::before {
  display: none !important;
}

/* ============================================
   .btn-ghost - Прозрачные кнопки с рамкой
   ============================================ */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--btn-tag-border);
  background: transparent;
  color: var(--btn-tag-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-ghost:hover {
  background: var(--btn-tag-bg-hover);
  border-color: var(--btn-tag-border-hover);
  color: var(--btn-tag-text-hover);
}

/* ============================================
   .btn-tag - Мелкие "таблетки"
   (озвучки, плееры, типы контента)
   ============================================ */
.btn-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--btn-tag-border);
  background: var(--btn-tag-bg);
  color: var(--btn-tag-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-sec, "Poppins", sans-serif);
  line-height: 1.4;
  margin: 0;
  opacity: 0.7; /* Тусклые неактивные кнопки */
}

.btn-tag:hover {
  background: var(--btn-tag-bg-hover);
  border-color: var(--btn-tag-border-hover);
  color: var(--btn-tag-text-hover);
  transform: translateY(-1px);
}

.btn-tag.is-active,
.btn-tag.active {
  opacity: 1 !important; /* Полная яркость для активных */
  background: var(--btn-tag-bg-active) !important;
  border-color: var(--btn-tag-border-active) !important;
  color: var(--btn-tag-text-active) !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
  font-weight: 700; /* Жирный шрифт для активных */
  transform: scale(1.08); /* Немного увеличенные активные кнопки */
}

/* Модификаторы для разных типов тагов */
.btn-tag--voice {
  /* Озвучки - могут иметь свой цвет в темах */
}

.btn-tag--player {
  /* Плееры - могут иметь свой цвет в темах */
}

.btn-tag--content-type {
  /* Типы контента - могут иметь свой цвет в темах */
}

/* Модификаторы для переключателей */
.btn-toggle--content-type {
  /* Типы контента - могут иметь свой цвет в темах */
}

/* ============================================
   .btn-toggle - Переключатели on/off
   (статусы: онгоинг/завершён)
   ЕДИНАЯ СИСТЕМА - все размеры и расположение здесь
   DESKTOP ONLY - мобильные размеры в секции MOBILE - COMPACT BUTTONS
   ============================================ */
@media (min-width: 769px) {
  .btn-toggle,
  a.btn-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    border: 2px solid var(--btn-toggle-border, var(--color-primary)) !important;
    background: var(--btn-toggle-bg, transparent) !important;
    color: var(--btn-toggle-text, var(--color-primary)) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    font-family: var(--font-sec, "Poppins", sans-serif) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
  }
}

.btn-toggle:hover,
a.btn-toggle:hover {
  background: var(--btn-toggle-bg-hover, var(--btn-toggle-bg-active, var(--color-primary))) !important;
  border-color: var(--btn-toggle-border-hover, var(--btn-toggle-border-active, var(--color-primary))) !important;
  color: var(--btn-toggle-text-hover, var(--btn-toggle-text-active, #fff)) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 15px var(--btn-toggle-border-active, var(--color-primary)) !important;
}

.btn-toggle.is-active,
.btn-toggle.active,
a.btn-toggle.is-active,
a.btn-toggle.active {
  background: var(--btn-toggle-bg-active, var(--color-primary)) !important;
  border-color: var(--btn-toggle-border-active, var(--color-primary)) !important;
  color: var(--btn-toggle-text-active, #fff) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

/* Кнопки статусов - более яркие и презентабельные - DESKTOP */
@media (min-width: 769px) {
  .btn-toggle--status,
  a.btn-toggle--status {
    background: var(--btn-toggle-status-bg, var(--badge-status-ongoing-bg, var(--color-accent))) !important;
    border-color: var(--btn-toggle-status-border, var(--badge-status-ongoing-bg, var(--color-accent))) !important;
    color: var(--btn-toggle-status-text, var(--badge-status-ongoing-text, #000)) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  }

  .btn-toggle--status:hover,
  a.btn-toggle--status:hover {
    background: var(--btn-toggle-status-hover-bg, var(--badge-status-ongoing-hover-bg, var(--color-accent-alt))) !important;
    border-color: var(--btn-toggle-status-hover-border, var(--badge-status-ongoing-hover-bg, var(--color-accent-alt))) !important;
    color: var(--btn-toggle-status-hover-text, var(--badge-status-ongoing-hover-text, #fff)) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px var(--btn-toggle-status-hover-bg, var(--badge-status-ongoing-hover-bg, rgba(0, 240, 255, 0.5))) !important;
    opacity: 1 !important;
  }
}

/* ============================================
   MOBILE - COMPACT BUTTONS
   ============================================ */
@media (max-width: 768px) {
  .btn-toggle,
  a.btn-toggle,
  .btn-toggle--status,
  a.btn-toggle--status,
  .btn-tag,
  a.btn-tag,
  .btn-tag--voice,
  a.btn-tag--voice,
  .status-button,
  a.status-button,
  .voiceover-button,
  a.voiceover-button {
    padding: 3px 6px !important;
    font-size: 9px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
  }
}

/* ============================================
   LEGACY COMPAT (бывший css/core/buttons.css)
   Старые классы ещё встречаются в шаблонах, поэтому держим их здесь,
   но без “супер-наворотов” — базово и стабильно.
   ============================================ */

/* DESKTOP ONLY - мобильные стили выше в секции MOBILE - COMPACT BUTTONS */
@media (min-width: 769px) {
  .status-button,
  a.status-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    border: 2px solid var(--btn-toggle-border, var(--color-primary)) !important;
    background: var(--btn-toggle-bg, transparent) !important;
    color: var(--btn-toggle-text, var(--color-primary)) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  .status-button:hover,
  a.status-button:hover {
    background: var(--btn-toggle-bg-hover, var(--btn-toggle-bg-active, var(--color-primary))) !important;
    border-color: var(--btn-toggle-border-hover, var(--btn-toggle-border-active, var(--color-primary))) !important;
    color: var(--btn-toggle-text-hover, var(--btn-toggle-text-active, #fff)) !important;
  }

  .voiceover-button,
  a.voiceover-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    border: 1px solid var(--btn-tag-border, rgba(255, 255, 255, 0.3)) !important;
    background: var(--btn-tag-bg, transparent) !important;
    color: var(--btn-tag-text, rgba(255, 255, 255, 0.8)) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  .voiceover-button:hover,
  a.voiceover-button:hover {
    background: var(--btn-tag-bg-hover, rgba(255, 255, 255, 0.1)) !important;
    border-color: var(--btn-tag-border-hover, rgba(255, 255, 255, 0.5)) !important;
    color: var(--btn-tag-text-hover, #fff) !important;
  }
} /* end @media (min-width: 769px) */

.type-button,
a.type-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  border: 2px solid var(--btn-toggle-border, rgba(255, 255, 255, 0.3)) !important;
  background: transparent !important;
  color: var(--btn-toggle-text, rgba(255, 255, 255, 0.85)) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.type-button:hover,
a.type-button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Кнопки в расписании (страница) */
.schedule-page-button.status-button,
.schedule-page-button.type-button,
.schedule-page-button.voiceover-button {
  padding: 8px 16px !important;
  font-size: 14px !important;
}

/* Размеры legacy-кнопок под превью (.anime-blog) */
.anime-blog .voiceover-button,
.anime-blog a.voiceover-button {
  padding: 5px 12px !important;
  font-size: 11px !important;
  margin-right: 6px !important;
}

.anime-blog .status-button,
.anime-blog a.status-button {
  padding: 6px 14px !important;
  font-size: 12px !important;
}

/* ============================================
   ЗАГОЛОВОК СЕКЦИИ С КНОПКОЙ "ВСЕ"
   Кнопка должна быть НАПРОТИВ заголовка, не прилипать к карточкам
   ============================================ */
.heading.style-1.d-flex {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  gap: 15px !important;
  flex-wrap: nowrap !important;
}

.heading.style-1.d-flex h2 {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Кнопки "Все" в заголовках секций (home) */
.catalog-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  border: 1px solid var(--catalog-link-border, var(--color-primary)) !important;
  background: transparent !important;
  color: var(--catalog-link-text, #ffffff) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.catalog-link-btn:hover {
  background: var(--catalog-link-hover-bg, var(--color-primary)) !important;
  border-color: var(--catalog-link-hover-bg, var(--color-primary)) !important;
  color: var(--catalog-link-hover-text, #ffffff) !important;
}

/* Ensure inner elements (span/icon) keep the same hover color */
.catalog-link-btn:hover span,
.catalog-link-btn:hover i {
  color: var(--catalog-link-hover-text, #ffffff) !important;
}

.catalog-link-btn--schedule {
  padding: 8px 14px !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}

/* ============================================
   УНИФИЦИРОВАННЫЕ БЕЙДЖИ СТАТУСОВ И ТЕГОВ
   ЕДИНАЯ СИСТЕМА - все размеры и расположение здесь
   Цвета определяются в темах
   ============================================ */
.badge-status,
a.badge-status {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 4px !important; /* Более прямоугольная форма, минимальное закругление */
  font-size: 13px !important; /* Увеличенный размер текста */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

/* Статус ONGOING - цвета определяются в темах */
.badge-status--ongoing,
a.badge-status--ongoing {
  background: var(--badge-status-ongoing-bg, var(--color-accent)) !important;
  color: var(--badge-status-ongoing-text, #000) !important;
}

.badge-status--ongoing:hover,
a.badge-status--ongoing:hover {
  background: var(--badge-status-ongoing-hover-bg, var(--color-accent-alt)) !important;
  color: var(--badge-status-ongoing-hover-text, #fff) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Статус FINISHED/COMPLETED - уникальные цвета для каждой темы */
.badge-status--finished,
.badge-status--completed,
a.badge-status--finished,
a.badge-status--completed {
  background: var(--badge-status-finished-bg, #ff4c4c) !important;
  color: var(--badge-status-finished-text, #fff) !important;
}

.badge-status--finished:hover,
.badge-status--completed:hover,
a.badge-status--finished:hover,
a.badge-status--completed:hover {
  background: var(--badge-status-finished-hover-bg, #ff3333) !important;
  color: var(--badge-status-finished-hover-text, #fff) !important;
  transform: translateY(-2px) scale(1.05) !important; /* Увеличенная подсветка при hover */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px var(--badge-status-finished-hover-bg, rgba(255, 76, 76, 0.5)) !important; /* Усиленная подсветка */
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--btn-tag-border);
  background: var(--btn-tag-bg);
  color: var(--btn-tag-text);
}

/* ============================================
   .badge - Маленькие бейджики
   (NEW, HD, 18+, и т.п.)
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--badge-border);
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-family: var(--font-sec, "Poppins", sans-serif);
}

/* ============================================
   ОБРАТНАЯ СОВМЕСТИМОСТЬ
   Старые классы как алиасы
   ============================================ */
/* Кнопки озвучки */
.voiceover-button,
a.voiceover-button {
  /* Используем стили .btn-tag */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--btn-tag-border);
  background: var(--btn-tag-bg);
  color: var(--btn-tag-text);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
}

.voiceover-button:hover,
a.voiceover-button:hover {
  background: var(--btn-tag-bg-hover);
  border-color: var(--btn-tag-border-hover);
  color: var(--btn-tag-text-hover);
  transform: translateY(-1px);
}

.voiceover-button.active,
a.voiceover-button.active {
  background: var(--btn-tag-bg-active);
  border-color: var(--btn-tag-border-active);
  color: var(--btn-tag-text-active);
}

/* Кнопки статуса */
.status-button,
a.status-button {
  /* Используем стили .btn-toggle */
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  border: 2px solid var(--btn-toggle-border);
  background: var(--btn-toggle-bg);
  color: var(--btn-toggle-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
}

.status-button:hover,
a.status-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.status-button.active,
a.status-button.active {
  background: var(--btn-toggle-bg-active);
  border-color: var(--btn-toggle-border-active);
  color: var(--btn-toggle-text-active);
}

/* Кнопки типа контента */
.type-button,
a.type-button {
  /* Используем стили .btn-toggle */
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  border: 2px solid var(--btn-toggle-border);
  background: var(--btn-toggle-bg);
  color: var(--btn-toggle-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
}

.type-button:hover,
a.type-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.type-button.active,
a.type-button.active {
  background: var(--btn-toggle-bg-active);
  border-color: var(--btn-toggle-border-active);
  color: var(--btn-toggle-text-active);
}

/* Кнопки плееров */
.host-btn,
a.host-btn {
  /* Используем стили .btn-tag */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--btn-tag-border);
  background: var(--btn-tag-bg);
  color: var(--btn-tag-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
  margin: 0;
}

.host-btn:hover,
a.host-btn:hover {
  background: var(--btn-tag-bg-hover);
  border-color: var(--btn-tag-border-hover);
  color: var(--btn-tag-text-hover);
  transform: translateY(-1px);
}

.host-btn.active,
a.host-btn.active {
  background: var(--btn-tag-bg-active);
  border-color: var(--btn-tag-border-active);
  color: var(--btn-tag-text-active);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* ============================================
   ТИПОГРАФИКА (UI_POLISH 6)
   ============================================ */
.hero-title {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.anime-title {
  font-size: 16px;
  font-weight: 600;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-icon svg,
.btn-icon i {
  vertical-align: middle;
}

/* ============================================
   ВЫРАВНИВАНИЕ КНОПОК В ЗАГОЛОВКАХ СЕКЦИЙ
   Правила перенесены в buttons.css для единой системы
   Здесь только дополнительные переопределения если нужно
   ============================================ */

/* ============================================
   ВЫРАВНИВАНИЕ КНОПКИ И ПОЛЯ ПОИСКА
   ============================================ */
.header-search-box {
  display: flex !important;
  align-items: stretch !important;
}

.header-search-box .input-group-text.anime-btn,
.header-search-box .input-group-text {
  height: auto !important;
  min-height: 38px !important;
  padding: 10px 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px 0 0 8px !important;
  border-right: none !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border: 1px solid !important;
  border-right: none !important;
}

.header-search-box #liveSearchInput,
.header-search-box .form-control {
  height: auto !important;
  min-height: 38px !important;
  padding: 10px 15px !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border: 1px solid !important;
  border-left: none !important;
  line-height: 1.5 !important;
}

/* Убеждаемся, что границы и цвета совпадают */
.header-search-box .input-group-text.anime-btn,
.header-search-box .input-group-text,
.header-search-box #liveSearchInput,
.header-search-box .form-control {
  border-color: var(--color-grey-light, rgba(255, 255, 255, 0.3)) !important;
}

/* Выпадающие action-меню (Буду смотреть / В избранное) – базовые цвета */
.dropdown-menu.action-menu .dropdown-item,
.dropdown-menu.action-menu a.dropdown-item,
.dropdown-menu.action-menu li a.dropdown-item {
  background: transparent !important;
  color: var(--color-text, #fff) !important;
  border: none !important;
  box-shadow: none !important;
}

.dropdown-menu.action-menu .dropdown-item:hover,
.dropdown-menu.action-menu a.dropdown-item:hover,
.dropdown-menu.action-menu li a.dropdown-item:hover {
  background: var(--color-primary) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Специфичные стили для темной темы - красный hover */
html[data-theme="hard_japan"] .dropdown-menu.action-menu .dropdown-item:hover,
html[data-theme="hard_japan"] .dropdown-menu.action-menu a.dropdown-item:hover,
html[data-theme="hard_japan"] .dropdown-menu.action-menu li a.dropdown-item:hover {
  background: #d45c4c !important;  /* более яркий красный при hover */
  color: #ffffff !important;
}


.badge-status--ongoing,
a.badge-status--ongoing {
  background: var(--badge-status-ongoing-bg, var(--color-accent)) !important;
  color: var(--badge-status-ongoing-text, #000) !important;
}

.badge-status--ongoing:hover,
a.badge-status--ongoing:hover {
  background: var(--badge-status-ongoing-hover-bg, var(--color-accent-alt)) !important;
  color: var(--badge-status-ongoing-hover-text, #fff) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Статус FINISHED/COMPLETED - уникальные цвета для каждой темы */
.badge-status--finished,
.badge-status--completed,
a.badge-status--finished,
a.badge-status--completed {
  background: var(--badge-status-finished-bg, #ff4c4c) !important;
  color: var(--badge-status-finished-text, #fff) !important;
}

.badge-status--finished:hover,
.badge-status--completed:hover,
a.badge-status--finished:hover,
a.badge-status--completed:hover {
  background: var(--badge-status-finished-hover-bg, #ff3333) !important;
  color: var(--badge-status-finished-hover-text, #fff) !important;
  transform: translateY(-2px) scale(1.05) !important; /* Увеличенная подсветка при hover */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px var(--badge-status-finished-hover-bg, rgba(255, 76, 76, 0.5)) !important; /* Усиленная подсветка */
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--btn-tag-border);
  background: var(--btn-tag-bg);
  color: var(--btn-tag-text);
}

/* ============================================
   .badge - Маленькие бейджики
   (NEW, HD, 18+, и т.п.)
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--badge-border);
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-family: var(--font-sec, "Poppins", sans-serif);
}

/* ============================================
   ОБРАТНАЯ СОВМЕСТИМОСТЬ
   Старые классы как алиасы
   ============================================ */
/* Кнопки озвучки */
.voiceover-button,
a.voiceover-button {
  /* Используем стили .btn-tag */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--btn-tag-border);
  background: var(--btn-tag-bg);
  color: var(--btn-tag-text);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
}

.voiceover-button:hover,
a.voiceover-button:hover {
  background: var(--btn-tag-bg-hover);
  border-color: var(--btn-tag-border-hover);
  color: var(--btn-tag-text-hover);
  transform: translateY(-1px);
}

.voiceover-button.active,
a.voiceover-button.active {
  background: var(--btn-tag-bg-active);
  border-color: var(--btn-tag-border-active);
  color: var(--btn-tag-text-active);
}

/* Кнопки статуса */
.status-button,
a.status-button {
  /* Используем стили .btn-toggle */
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  border: 2px solid var(--btn-toggle-border);
  background: var(--btn-toggle-bg);
  color: var(--btn-toggle-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
}

.status-button:hover,
a.status-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.status-button.active,
a.status-button.active {
  background: var(--btn-toggle-bg-active);
  border-color: var(--btn-toggle-border-active);
  color: var(--btn-toggle-text-active);
}

/* Кнопки типа контента */
.type-button,
a.type-button {
  /* Используем стили .btn-toggle */
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  border: 2px solid var(--btn-toggle-border);
  background: var(--btn-toggle-bg);
  color: var(--btn-toggle-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
}

.type-button:hover,
a.type-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.type-button.active,
a.type-button.active {
  background: var(--btn-toggle-bg-active);
  border-color: var(--btn-toggle-border-active);
  color: var(--btn-toggle-text-active);
}

/* Кнопки плееров */
.host-btn,
a.host-btn {
  /* Используем стили .btn-tag */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--btn-tag-border);
  background: var(--btn-tag-bg);
  color: var(--btn-tag-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
  margin: 0;
}

.host-btn:hover,
a.host-btn:hover {
  background: var(--btn-tag-bg-hover);
  border-color: var(--btn-tag-border-hover);
  color: var(--btn-tag-text-hover);
  transform: translateY(-1px);
}

.host-btn.active,
a.host-btn.active {
  background: var(--btn-tag-bg-active);
  border-color: var(--btn-tag-border-active);
  color: var(--btn-tag-text-active);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* ============================================
   ТИПОГРАФИКА (UI_POLISH 6)
   ============================================ */
.hero-title {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.anime-title {
  font-size: 16px;
  font-weight: 600;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-icon svg,
.btn-icon i {
  vertical-align: middle;
}

/* ============================================
   ВЫРАВНИВАНИЕ КНОПОК В ЗАГОЛОВКАХ СЕКЦИЙ
   Правила перенесены в buttons.css для единой системы
   Здесь только дополнительные переопределения если нужно
   ============================================ */

/* ============================================
   ВЫРАВНИВАНИЕ КНОПКИ И ПОЛЯ ПОИСКА
   ============================================ */
.header-search-box {
  display: flex !important;
  align-items: stretch !important;
}

.header-search-box .input-group-text.anime-btn,
.header-search-box .input-group-text {
  height: auto !important;
  min-height: 38px !important;
  padding: 10px 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px 0 0 8px !important;
  border-right: none !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border: 1px solid !important;
  border-right: none !important;
}

.header-search-box #liveSearchInput,
.header-search-box .form-control {
  height: auto !important;
  min-height: 38px !important;
  padding: 10px 15px !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border: 1px solid !important;
  border-left: none !important;
  line-height: 1.5 !important;
}

/* Убеждаемся, что границы и цвета совпадают */
.header-search-box .input-group-text.anime-btn,
.header-search-box .input-group-text,
.header-search-box #liveSearchInput,
.header-search-box .form-control {
  border-color: var(--color-grey-light, rgba(255, 255, 255, 0.3)) !important;
}

/* Выпадающие action-меню (Буду смотреть / В избранное) – базовые цвета */
.dropdown-menu.action-menu .dropdown-item,
.dropdown-menu.action-menu a.dropdown-item,
.dropdown-menu.action-menu li a.dropdown-item {
  background: transparent !important;
  color: var(--color-text, #fff) !important;
  border: none !important;
  box-shadow: none !important;
}

.dropdown-menu.action-menu .dropdown-item:hover,
.dropdown-menu.action-menu a.dropdown-item:hover,
.dropdown-menu.action-menu li a.dropdown-item:hover {
  background: var(--color-primary) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Специфичные стили для темной темы - красный hover */
html[data-theme="hard_japan"] .dropdown-menu.action-menu .dropdown-item:hover,
html[data-theme="hard_japan"] .dropdown-menu.action-menu a.dropdown-item:hover,
html[data-theme="hard_japan"] .dropdown-menu.action-menu li a.dropdown-item:hover {
  background: #d45c4c !important;  /* более яркий красный при hover */
  color: #ffffff !important;
}