MediaWiki:Common.css

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

/* Размещённый здесь CSS будет применяться ко всем темам оформления */

/*
 * Zet+Compan Archive — Тёмная тема для MediaWiki Vector 2022
 * MediaWiki:Common.css
 */

/* ===========================
   ZET+COMPAN EPISODE CHRONOLOGY — CLEAN VERSION
   =========================== */

.zc-episode-chronology {
    padding: 0 !important;
    background: #0b0b0b !important;
}

.zc-episode-chronology-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    background: #0b0b0b;
}

.zc-episode-chronology-cell {
    min-height: 74px;
    padding: 12px 10px;
    text-align: center;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.zc-episode-chronology-cell:last-child {
    border-right: none !important;
}

.zc-episode-chronology-label {
    margin-bottom: 7px;
    color: #f2cf00;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zc-episode-chronology-link {
    color: #dcdcdc;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}

/* Ссылки внутри хронологии */
.zc-episode-chronology-link a {
    color: #ffe14a !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

.zc-episode-chronology-link a:hover {
    color: #fff2a0 !important;
    text-decoration: none !important;
}

/* Только текущая серия подсвечена */
.zc-episode-current {
    background:
        radial-gradient(circle at top, rgba(242, 207, 0, 0.16), transparent 65%),
        linear-gradient(180deg, rgba(242, 207, 0, 0.08), rgba(0, 0, 0, 0)) !important;
}

.zc-episode-current .zc-episode-chronology-link {
    color: #ffe14a;
}

/* Боковые серии без подсветки */
.zc-episode-previous,
.zc-episode-next {
    background: transparent !important;
    box-shadow: none !important;
}

/* Если ссылка красная, потому что страницы ещё нет */
.zc-episode-chronology-link a.new {
    color: #e55a4f !important;
}

/* Мобильная версия */
@media (max-width: 720px) {
    .zc-episode-chronology-grid {
        grid-template-columns: 1fr;
    }

    .zc-episode-chronology-cell {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    .zc-episode-chronology-cell:last-child {
        border-bottom: none !important;
    }
}

/* Инфобокс серии сериала */



.zc-infobox-title {
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
  color: #f3d27a;
}

.zc-infobox-subtitle {
  text-align: center;
  font-size: 13px;
  color: #bdb7a5;
  margin-bottom: 12px;
  font-style: italic;
}



.zc-infobox-caption {
  text-align: center;
  font-size: 12px;
  color: #aaa;
  margin-top: 6px;
}

.zc-infobox-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.zc-infobox-table th,
.zc-infobox-table td {
  padding: 7px 4px;
  vertical-align: top;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.zc-infobox-table th {
  width: 42%;
  text-align: left;
  color: #d6b25e;
  font-weight: 600;
}

.zc-infobox-table td {
  color: #e8e8e8;
}

@media (max-width: 720px) {
  .zc-infobox {
    float: none;
    width: auto;
    margin: 0 0 18px 0;
  }
}

/* Скрыть заголовок только на главной странице */
.page-Заглавная_страница .firstHeading {
    display: none !important;
}

/* ===== Zet+Compan Custom Logo ===== */

/* Скрываем стандартную иконку */
.mw-logo-icon {
    display: none !important;
}

/* Контейнер логотипа */
.mw-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Подставляем свой логотип */
.mw-logo::before {
    content: "";
    display: inline-block;
    width: 48px;
    height: 48px;

    background-image: url("/images/logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    filter: drop-shadow(0 0 6px rgba(242, 207, 0, 0.25));
}

/* ===========================
   ИНФОБОКС — ПОЛНОМЕТРАЖНЫЕ ФИЛЬМЫ
   =========================== */
.pi-europa .pi-border-color,
.pi-theme-film .pi-border-color {
    border-color: var(--zc-border-light) !important;
}

/* Основной контейнер */
.pi-europa .pi-background,
.pi-theme-film .pi-background {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 14px !important;
    overflow: hidden;
}

/* Заголовок (название фильма) */
.pi-europa .pi-title,
.pi-theme-film .pi-title {
    background: linear-gradient(135deg, var(--zc-dark-3), var(--zc-dark-2)) !important;
    color: var(--zc-yellow) !important;
    font-family: var(--font-family-heading) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--zc-border-light) !important;
    letter-spacing: -0.01em !important;
}

/* Изображение (постер) */
.pi-europa .pi-image,
.pi-theme-film .pi-image {
    background-color: var(--zc-dark-3) !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--zc-border) !important;
}

.pi-europa .pi-image-thumbnail,
.pi-theme-film .pi-image-thumbnail {
    border-radius: 8px !important;
    border: 1px solid var(--zc-border) !important;
}

.pi-europa .pi-image-caption,
.pi-theme-film .pi-image-caption {
    color: var(--color-muted) !important;
    font-size: 0.78rem !important;
    text-align: center !important;
    margin-top: 6px !important;
}

/* Заголовки секций (Жанр, Создатели и т.д.) */
.pi-europa .pi-header,
.pi-theme-film .pi-header {
    background-color: var(--zc-dark-3) !important;
    color: var(--zc-yellow) !important;
    font-family: var(--font-family-heading) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--zc-border) !important;
    border-top: 1px solid var(--zc-border) !important;
}

.pi-europa .pi-header:first-of-type,
.pi-theme-film .pi-header:first-of-type {
    border-top: none !important;
}

/* Строки данных */
.pi-europa .pi-data,
.pi-theme-film .pi-data {
    border-bottom: 1px solid var(--zc-border) !important;
    padding: 0 !important;
}

.pi-europa .pi-data:last-child,
.pi-theme-film .pi-data:last-child {
    border-bottom: none !important;
}

/* Ярлык (Название поля слева) */
.pi-europa .pi-data-label,
.pi-theme-film .pi-data-label {
    background-color: var(--zc-dark-3) !important;
    color: var(--color-subtle) !important;
    font-family: var(--font-family-base) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    flex-basis: 35% !important;
    border-right: 1px solid var(--zc-border) !important;
}

/* Значение (Текст поля справа) */
.pi-europa .pi-data-value,
.pi-theme-film .pi-data-value {
    color: var(--color-base--subtle) !important;
    font-size: 0.88rem !important;
    padding: 10px 14px !important;
    line-height: 1.5 !important;
}

/* Ссылки внутри значений */
.pi-europa .pi-data-value a,
.pi-theme-film .pi-data-value a {
    color: var(--zc-yellow) !important;
}

.pi-europa .pi-data-value a:hover,
.pi-theme-film .pi-data-value a:hover {
    color: var(--zc-yellow-soft) !important;
    text-decoration: none !important;
}

/* Списки внутри инфобокса */
.pi-europa .pi-data-value ul,
.pi-theme-film .pi-data-value ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.pi-europa .pi-data-value ul li,
.pi-theme-film .pi-data-value ul li {
    padding: 2px 0 !important;
    position: relative;
}

.pi-europa .pi-data-value ul li::before,
.pi-theme-film .pi-data-value ul li::before {
    content: '•';
    color: var(--zc-yellow-dim);
    margin-right: 8px;
    font-weight: bold;
}

/* Навигационная нижняя панель */
.pi-europa .pi-navigation,
.pi-theme-film .pi-navigation {
    background-color: var(--zc-dark-3) !important;
    border-top: 1px solid var(--zc-border-light) !important;
    text-align: center !important;
    padding: 10px !important;
}

.pi-europa .pi-navigation a,
.pi-theme-film .pi-navigation a {
    color: var(--zc-yellow) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

/* Мобильная адаптация (stacked) */
@media (max-width: 720px) {
    .pi-europa .pi-data-label,
    .pi-theme-film .pi-data-label {
        flex-basis: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--zc-border) !important;
        padding: 8px 14px 4px !important;
    }
    
    .pi-europa .pi-data-value,
    .pi-theme-film .pi-data-value {
        padding: 4px 14px 10px !important;
    }
}

/* ===========================
   ИМПОРТ ШРИФТОВ
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ===========================
   CSS-ПЕРЕМЕННЫЕ MEDIAWIKI
   =========================== */
:root {
    /* Основные цвета */
    --background-color-base: #0a0a0a;
    --background-color-base-fixed: #0a0a0a;
    --background-color-neutral: #111111;
    --background-color-neutral-subtle: #161616;
    --background-color-interactive: #1a1a1a;
    --background-color-interactive-subtle: #161616;
    --background-color-interactive-subtle--hover: #222222;
    --background-color-interactive-subtle--active: #1a1a1a;
    --background-color-disabled: #1e1e1e;
    --background-color-disabled-subtle: #141414;
    --background-color-progressive: #f2cf00;
    --background-color-progressive-subtle: rgba(242, 207, 0, 0.1);
    --background-color-progressive-subtle--hover: rgba(242, 207, 0, 0.18);
    --background-color-progressive-subtle--active: rgba(242, 207, 0, 0.25);
    --background-color-progressive--hover: #ffe14a;
    --background-color-progressive--active: #b89e00;
    --background-color-destructive: #bf3c2c;
    --background-color-destructive-subtle: rgba(191, 60, 44, 0.15);
    --background-color-destructive-subtle--hover: rgba(191, 60, 44, 0.25);
    --background-color-destructive-subtle--active: rgba(191, 60, 44, 0.35);
    --background-color-destructive--hover: #9f3526;
    --background-color-destructive--active: #612419;
    --background-color-backdrop-light: rgba(0, 0, 0, 0.65);
    --background-color-error-subtle: rgba(191, 60, 44, 0.15);
    --background-color-error-subtle--hover: rgba(191, 60, 44, 0.25);
    --background-color-success: #177860;
    --background-color-success-subtle: rgba(23, 120, 96, 0.15);
    --background-color-notice: #202122;
    --background-color-notice-subtle: rgba(23, 120, 96, 0.15);

    /* Текст */
    --color-base: #e8e8e8;
    --color-base--subtle: #c0c0c0;
    --color-base--emphasized: #f5f5f5;
    --color-base--disabled: #555555;
    --color-base--inverted: #0a0a0a;
    --color-base--inverted--subtle: #333333;
    --color-base--placeholder: #666666;
    --color-base--readable: #e8e8e8;
    --color-inverted: #e8e8e8;
    --color-inverted--subtle: #a0a0a0;
    --color-inverted-fixed: #000000;
    --color-subtle: #888888;
    --color-muted: #5a5a5a;
    --color-disabled: #555555;
    --color-disabled-emphasized: #666666;
    --color-placeholder: #666666;
    --color-progressive: #f2cf00;
    --color-progressive--hover: #ffe14a;
    --color-progressive--active: #b89e00;
    --color-progressive--focus: #f2cf00;
    --color-destructive: #e55a4f;
    --color-destructive--hover: #ff7a6e;
    --color-destructive--active: #bf3c2c;
    --color-destructive--focus: #e55a4f;
    --color-error: #e55a4f;
    --color-error--hover: #ff7a6e;
    --color-success: #4aba8a;
    --color-success--hover: #5fd4a0;
    --color-warning: #f2cf00;

    /* Рамки */
    --border-color-base: rgba(255, 255, 255, 0.08);
    --border-color-subtle: rgba(255, 255, 255, 0.06);
    --border-color-muted: rgba(255, 255, 255, 0.12);
    --border-color-interactive: rgba(255, 255, 255, 0.15);
    --border-color-interactive--hover: rgba(255, 255, 255, 0.25);
    --border-color-interactive--active: rgba(255, 255, 255, 0.35);
    --border-color-progressive: rgba(242, 207, 0, 0.5);
    --border-color-progressive--hover: #f2cf00;
    --border-color-progressive--active: #b89e00;
    --border-color-progressive--focus: #f2cf00;
    --border-color-destructive: rgba(191, 60, 44, 0.5);
    --border-color-destructive--hover: #e55a4f;
    --border-color-destructive--active: #bf3c2c;
    --border-color-destructive--focus: #e55a4f;
    --border-color-error: #e55a4f;
    --border-color-error--hover: #ff7a6e;
    --border-color-transparent: transparent;
    --border-color-disabled: rgba(255, 255, 255, 0.05);

    /* Фокус и тени */
    --box-shadow-color-progressive--focus: #f2cf00;
    --box-shadow-color-destructive--focus: #e55a4f;
    --box-shadow-color-inverted: rgba(0, 0, 0, 0.8);
    --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.35);
    --box-shadow-color-transparent: transparent;

    /* Иконки */
    --filter-invert-icon: 1;
    --opacity-icon-base: 0.7;
    --opacity-icon-base--disabled: 0.35;
    --opacity-icon-placeholder: 0.45;

    /* Zet+Compan кастомные переменные */
    --zc-yellow: #f2cf00;
    --zc-yellow-soft: #ffe14a;
    --zc-yellow-dim: #b89e00;
    --zc-yellow-glow: rgba(242, 207, 0, 0.12);
    --zc-black: #050505;
    --zc-dark: #0a0a0a;
    --zc-dark-2: #111111;
    --zc-dark-3: #181818;
    --zc-dark-4: #1e1e1e;
    --zc-border: rgba(255, 255, 255, 0.07);
    --zc-border-light: rgba(255, 255, 255, 0.12);

    /* Шрифты */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: 'Space Grotesk', 'Inter', sans-serif;
    --font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
    --font-size-small: 0.8125rem;
    --font-size-medium: 0.875rem;
    --font-size-large: 1rem;
    --font-size-x-large: 1.25rem;
    --font-size-xx-large: 1.5625rem;
    --line-height-content: 1.65;
    --line-height-heading: 1.3;
}

/* ===========================
   БАЗОВЫЕ ЭЛЕМЕНТЫ
   =========================== */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--zc-black) !important;
    color: var(--color-base);
    font-family: var(--font-family-base);
}

/* Шум-оверлей для текстуры */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

a {
    color: var(--zc-yellow);
    text-decoration: none;
}

a:hover {
    color: var(--zc-yellow-soft);
    text-decoration: underline;
}

a:visited {
    color: var(--zc-yellow-dim);
}

a:visited:hover {
    color: var(--zc-yellow-soft);
}

a.new,
a.new:visited {
    color: #e55a4f;
}

a.new:hover {
    color: #ff7a6e;
}

/* ===========================
   ХЕДЕР
   =========================== */
.vector-header-container {
    background-color: rgba(5, 5, 5, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--zc-border) !important;
}

.mw-header {
    background-color: transparent !important;
}

/* Логотип */
.mw-logo {
    gap: 10px !important;
}

.mw-logo-wordmark {
    font-family: var(--font-family-heading) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--zc-yellow) !important;
}

.mw-logo-icon {
    border-radius: 8px !important;
}

/* Стик-хедер */
.vector-sticky-header-container {
    background-color: rgba(5, 5, 5, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--zc-border-light) !important;
}

.vector-sticky-header {
    border-bottom-color: transparent !important;
}

.vector-sticky-header-context-bar-primary {
    font-family: var(--font-family-heading) !important;
    color: var(--color-base--emphasized) !important;
}

/* ===========================
   ПОИСК
   =========================== */
.vector-search-box-vue .cdx-typeahead-search__form {
    background-color: var(--zc-dark-3) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.vector-search-box-vue .cdx-search-input__input-wrapper .cdx-text-input {
    border-radius: 0 !important;
    border: none !important;
}

.vector-search-box-vue .cdx-text-input__input {
    background-color: transparent !important;
    color: var(--color-base) !important;
    border: none !important;
    box-shadow: none !important;
    font-family: var(--font-family-base) !important;
}

.vector-search-box-vue .cdx-text-input__input::placeholder {
    color: var(--color-muted) !important;
}

.vector-search-box-vue .cdx-text-input__input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.vector-search-box-vue .cdx-search-input__end-button {
    background-color: var(--zc-yellow) !important;
    color: #000 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
}

.vector-search-box-vue .cdx-search-input__end-button:hover {
    background-color: var(--zc-yellow-soft) !important;
}

/* Меню поиска (dropdown результатов) */
.cdx-typeahead-search__menu {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.cdx-menu-item--enabled {
    color: var(--color-base) !important;
}

.cdx-menu-item--enabled.cdx-menu-item--highlighted {
    background-color: var(--zc-dark-3) !important;
}

.cdx-menu-item--enabled.cdx-menu-item--selected {
    background-color: var(--zc-yellow-glow) !important;
    color: var(--zc-yellow) !important;
}

.cdx-menu-item__text__description {
    color: var(--color-subtle) !important;
}

.cdx-typeahead-search__search-footer {
    color: var(--color-subtle) !important;
}

.cdx-typeahead-search__search-footer__icon {
    color: var(--color-muted) !important;
}

/* ===========================
   НАВИГАЦИЯ И ДРОПДАУНЫ
   =========================== */
.vector-dropdown-content {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.vector-main-menu-dropdown .vector-dropdown-content {
    border-radius: 0 0 10px 10px !important;
}

.vector-dropdown-label {
    color: var(--color-inverted--subtle) !important;
    border-radius: 8px !important;
}

.vector-dropdown-label:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--color-base--emphasized) !important;
}

/* Меню навигации (боковая панель) */
.vector-main-menu,
.vector-page-tools {
    background-color: transparent !important;
    padding: 0 !important;
}

.vector-menu-heading {
    font-family: var(--font-family-heading) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--zc-yellow) !important;
    padding: 16px 12px 6px !important;
    border-bottom: none !important;
}

.vector-menu-content-list li a {
    color: var(--color-base--subtle) !important;
    font-size: 0.88rem !important;
    padding: 7px 12px !important;
    border-radius: 6px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.vector-menu-content-list li a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-base--emphasized) !important;
    text-decoration: none !important;
}

.vector-menu-content-list li a .vector-icon {
    color: inherit !important;
}

.vector-menu-content-list li.selected a,
.vector-menu-content-list li.selected a:visited {
    color: var(--zc-yellow) !important;
    background-color: var(--zc-yellow-glow) !important;
}

/* Pinnable заголовки */
.vector-pinnable-header {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
}

.vector-pinnable-header-label {
    font-family: var(--font-family-heading) !important;
    font-weight: 600 !important;
    color: var(--color-base--subtle) !important;
}

.vector-pinnable-header-toggle-button {
    color: var(--zc-yellow) !important;
    font-size: 0.8rem !important;
}

.vector-pinnable-header-toggle-button:hover {
    color: var(--zc-yellow-soft) !important;
}

/* ===========================
   ВКЛАДКИ (ТАБЫ)
   =========================== */
.vector-menu-tabs {
    background-color: transparent !important;
}

.vector-menu-tabs .vector-menu-content-list {
    gap: 4px !important;
}

.vector-tab-noicon a {
    color: var(--color-subtle) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: none !important;
    transition: all 0.15s ease !important;
}

.vector-tab-noicon a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-base--emphasized) !important;
    text-decoration: none !important;
}

.vector-tab-noicon.selected a {
    color: var(--zc-yellow) !important;
    background-color: var(--zc-yellow-glow) !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

.vector-tab-noicon.selected a:visited {
    color: var(--zc-yellow) !important;
}

/* ===========================
   КНОПКИ (CDX)
   =========================== */
.cdx-button:enabled,
.cdx-button.cdx-button--fake-button--enabled {
    background-color: var(--zc-dark-3);
    color: var(--color-base--subtle);
    border-color: var(--zc-border-light);
    border-radius: 6px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-medium);
}

.cdx-button:enabled:hover,
.cdx-button.cdx-button--fake-button--enabled:hover {
    background-color: var(--zc-dark-4);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-base--emphasized);
}

.cdx-button:enabled:active,
.cdx-button.cdx-button--fake-button--enabled:active {
    background-color: #252525;
}

.cdx-button:enabled.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive {
    background-color: var(--zc-yellow-glow);
    color: var(--zc-yellow);
    border-color: rgba(242, 207, 0, 0.3);
}

.cdx-button:enabled.cdx-button--action-progressive:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--action-progressive:hover {
    background-color: rgba(242, 207, 0, 0.2);
    color: var(--zc-yellow-soft);
    border-color: var(--zc-yellow);
}

.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive {
    background-color: var(--zc-yellow);
    color: #000;
    border-color: transparent;
}

.cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-primary.cdx-button--action-progressive:hover {
    background-color: var(--zc-yellow-soft);
}

.cdx-button:enabled.cdx-button--weight-quiet,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-subtle);
}

.cdx-button:enabled.cdx-button--weight-quiet:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-base--emphasized);
}

.cdx-button:disabled,
.cdx-button.cdx-button--fake-button--disabled {
    background-color: var(--zc-dark-3);
    color: var(--color-disabled);
    border-color: transparent;
}

.cdx-button:enabled:focus:not(:active),
.cdx-button.cdx-button--fake-button--enabled:focus:not(:active) {
    border-color: var(--zc-yellow);
    box-shadow: inset 0 0 0 1px var(--zc-yellow);
}

/* ===========================
   ZET+COMPAN WIDER CONTENT
   =========================== */

/* Расширяем общий контейнер страницы */
.mw-page-container {
    max-width: none !important;
}

/* Расширяем внутреннюю сетку Vector 2022 */
.mw-page-container-inner {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Расширяем область статьи */
.mw-content-container {
    max-width: none !important;
}

/* Расширяем саму карточку статьи */
.mw-body {
    max-width: none !important;
}

/* Расширяем текстовый блок */
#mw-content-text {
    max-width: none !important;
}

/* Заголовок страницы */
.firstHeading {
    font-family: var(--font-family-heading) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--color-base--emphasized) !important;
    letter-spacing: -0.02em !important;
    line-height: var(--line-height-heading) !important;
    border-bottom: 1px solid var(--zc-border-light) !important;
    padding-bottom: 12px !important;
    margin-bottom: 24px !important;
}

.vector-page-titlebar {
    background-color: transparent !important;
}

/* Подпись "Материал из..." */
#siteSub {
    color: var(--color-muted) !important;
    font-size: 0.78rem !important;
    margin-bottom: 16px !important;
}

/* ===========================
   КОНТЕНТ ВИКИ-СТРАНИЦ
   =========================== */
.mw-body-content {
    color: var(--color-base) !important;
}

.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
    font-family: var(--font-family-heading) !important;
    color: var(--color-base--emphasized) !important;
    letter-spacing: -0.01em !important;
    line-height: var(--line-height-heading) !important;
    border-bottom-color: var(--zc-border-light) !important;
}

.mw-body-content h1 {
    font-size: 1.75rem !important;
    border-bottom: 1px solid var(--zc-border-light) !important;
    padding-bottom: 8px !important;
}

.mw-body-content h2 {
    font-size: 1.4rem !important;
    border-bottom: 1px solid var(--zc-border) !important;
    padding-bottom: 6px !important;
    margin-top: 1.5em !important;
}

.mw-body-content h3 {
    font-size: 1.15rem !important;
    margin-top: 1.3em !important;
}

.mw-body-content h4 {
    font-size: 1.05rem !important;
}

.mw-body-content p {
    color: var(--color-base--subtle) !important;
    line-height: 1.75 !important;
    margin-bottom: 1em !important;
}

.mw-body-content ul,
.mw-body-content ol {
    color: var(--color-base--subtle) !important;
    margin-bottom: 1em !important;
}

.mw-body-content li {
    margin-bottom: 4px !important;
}

.mw-body-content li::marker {
    color: var(--zc-yellow-dim) !important;
}

/* Ссылки внутри контента */
.mw-body-content a {
    color: var(--zc-yellow) !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: border-color 0.15s ease !important;
}

.mw-body-content a:hover {
    border-bottom-color: var(--zc-yellow) !important;
    text-decoration: none !important;
}

.mw-body-content a:visited {
    color: var(--zc-yellow-dim) !important;
}

.mw-body-content a:visited:hover {
    border-bottom-color: var(--zc-yellow-dim) !important;
}

.mw-body-content a.new {
    color: #e55a4f !important;
}

.mw-body-content a.new:visited {
    color: #c0403a !important;
}

/* Внешние ссылки */
.mw-body-content a.external {
    color: var(--zc-yellow) !important;
}

.mw-body-content a.external::after {
    filter: invert(1) brightness(0.7) !important;
}

/* ===========================
   ТАБЛИЦЫ
   =========================== */
.mw-body-content table {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 10px !important;
    overflow: hidden;
    color: var(--color-base--subtle) !important;
    margin-bottom: 1.5em !important;
}

.mw-body-content table th {
    background-color: var(--zc-dark-3) !important;
    color: var(--color-base--emphasized) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    border-bottom: 1px solid var(--zc-border-light) !important;
    padding: 10px 14px !important;
}

.mw-body-content table td {
    border-bottom: 1px solid var(--zc-border) !important;
    padding: 8px 14px !important;
}

.mw-body-content table tr:last-child td {
    border-bottom: none !important;
}

.mw-body-content table.wikitable {
    background-color: var(--zc-dark-2) !important;
    border-color: var(--zc-border-light) !important;
}

.mw-body-content table.wikitable > tr > th,
.mw-body-content table.wikitable > * > tr > th {
    background-color: var(--zc-dark-3) !important;
    border-color: var(--zc-border-light) !important;
}

.mw-body-content table.wikitable > tr > td,
.mw-body-content table.wikitable > * > tr > td {
    border-color: var(--zc-border) !important;
}

/* ===========================
   INFOBOX И ПЛАВАЮЩИЕ БЛОКИ
   =========================== */
.infobox,
.mw-body-content .infobox {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 12px !important;
    color: var(--color-base--subtle) !important;
    overflow: hidden;
}

.infobox-title,
.infobox-header,
.mw-body-content .infobox-title,
.mw-body-content .infobox-header {
    background-color: var(--zc-dark-3) !important;
    color: var(--zc-yellow) !important;
    font-family: var(--font-family-heading) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--zc-border-light) !important;
}

.infobox-above,
.infobox-below,
.infobox-image,
.infobox-full-data,
.mw-body-content .infobox-above,
.mw-body-content .infobox-below,
.mw-body-content .infobox-image,
.mw-body-content .infobox-full-data {
    border-bottom-color: var(--zc-border) !important;
}

.infobox-label {
    background-color: var(--zc-dark-3) !important;
    color: var(--color-base--subtle) !important;
    font-weight: 600 !important;
    border-color: var(--zc-border) !important;
}

.infobox-data {
    background-color: var(--zc-dark-2) !important;
    color: var(--color-base--subtle) !important;
    border-color: var(--zc-border) !important;
}

/* ===========================
   КОД И ПРЕФОРМАТИРОВАНИЕ
   =========================== */
.mw-body-content code {
    background-color: var(--zc-dark-3) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 4px !important;
    color: var(--zc-yellow-soft) !important;
    padding: 1px 6px !important;
    font-size: 0.9em !important;
}

.mw-body-content pre,
.mw-body-content .mw-code {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 10px !important;
    color: var(--color-base--subtle) !important;
    padding: 16px !important;
    overflow-x: auto;
}

.mw-body-content pre code,
.mw-body-content .mw-code code {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
}

/* ===========================
   ЦИТАТЫ
   =========================== */
.mw-body-content blockquote {
    border-left: 3px solid var(--zc-yellow-dim) !important;
    background-color: var(--zc-dark-3) !important;
    color: var(--color-base--subtle) !important;
    padding: 12px 20px !important;
    margin: 1em 0 !important;
    border-radius: 0 8px 8px 0 !important;
}

/* ===========================
   HR РАЗДЕЛИТЕЛЬ
   =========================== */
.mw-body-content hr {
    border-color: var(--zc-border-light) !important;
    border-style: solid !important;
    border-width: 0 0 1px 0 !important;
    margin: 1.5em 0 !important;
}

/* ===========================
   КАТЕГОРИИ
   =========================== */
#catlinks {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-top: 24px !important;
}

#catlinks .mw-normal-catlinks {
    color: var(--color-subtle) !important;
}

#catlinks .mw-normal-catlinks a {
    color: var(--zc-yellow) !important;
}

.catlinks-allhidden {
    display: none !important;
}

/* ===========================
   СООБЩЕНИЯ / ПРЕДУПРЕЖДЕНИЯ
   =========================== */
.mw-message-box,
.errorbox,
.warningbox,
.successbox,
.infobox {
    border-radius: 10px !important;
    font-size: var(--font-size-medium) !important;
}

.errorbox {
    background-color: var(--background-color-destructive-subtle) !important;
    border-color: rgba(191, 60, 44, 0.4) !important;
    color: var(--color-destructive) !important;
}

.warningbox {
    background-color: rgba(242, 207, 0, 0.08) !important;
    border-color: rgba(242, 207, 0, 0.3) !important;
    color: var(--zc-yellow-soft) !important;
}

.successbox {
    background-color: var(--background-color-success-subtle) !important;
    border-color: rgba(23, 120, 96, 0.4) !important;
    color: var(--color-success) !important;
}

.infobox {
    background-color: var(--zc-dark-3) !important;
    border-color: var(--zc-border-light) !important;
    color: var(--color-base--subtle) !important;
}

.noarticletext {
    color: var(--color-subtle) !important;
    padding: 20px !important;
}

/* ===========================
   ТОК (ОГЛАВЛЕНИЕ)
   =========================== */
.vector-toc {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

.vector-toc .vector-toc-heading {
    font-family: var(--font-family-heading) !important;
    font-weight: 700 !important;
    color: var(--zc-yellow) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.vector-toc .vector-toc-list-item a {
    color: var(--color-base--subtle) !important;
    font-size: 0.88rem !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    transition: all 0.15s ease !important;
    border-bottom: none !important;
}

.vector-toc .vector-toc-list-item a:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--color-base--emphasized) !important;
}

.vector-toc .vector-toc-list-item.vector-toc-level-1-active > a {
    color: var(--zc-yellow) !important;
    font-weight: 600 !important;
}

.vector-toc .vector-toc-list-item .vector-toc-list-item {
    margin-left: 16px !important;
}

/* ===========================
   ИСТОРИЯ / ДИФФ
   =========================== */
.mw-diff-wrapper,
.diff {
    background-color: var(--zc-dark) !important;
    border-color: var(--zc-border-light) !important;
    border-radius: 10px !important;
}

.diff-header,
.diff-otitle,
.diff-ntitle {
    background-color: var(--zc-dark-3) !important;
    border-bottom-color: var(--zc-border) !important;
    color: var(--color-base--subtle) !important;
}

.diff-addedline {
    background-color: rgba(23, 120, 96, 0.1) !important;
    border-color: rgba(23, 120, 96, 0.25) !important;
    color: var(--color-success) !important;
}

.diff-deletedline {
    background-color: rgba(191, 60, 44, 0.1) !important;
    border-color: rgba(191, 60, 44, 0.25) !important;
    color: var(--color-destructive) !important;
}

.diff-context {
    background-color: var(--zc-dark-2) !important;
    border-color: var(--zc-border) !important;
    color: var(--color-subtle) !important;
}

/* ===========================
   РЕДАКТОР
   =========================== */
.ve-init-mw-desktopArticleTarget-toolbarPlaceholder-bar,
.ve-init-mw-desktopArticleTarget-toolbar .ve-ui-toolbar > .oo-ui-toolbar-bar {
    background-color: var(--zc-dark-2) !important;
    border-bottom-color: var(--zc-border-light) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.editOptions {
    background-color: var(--zc-dark-2) !important;
    border-color: var(--zc-border-light) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    color: var(--color-base--subtle) !important;
}

#wpTextbox1 {
    background-color: var(--zc-dark-3) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 8px !important;
    color: var(--color-base) !important;
    font-family: 'Fira Code', 'Consolas', monospace !important;
    font-size: 0.875rem !important;
    padding: 16px !important;
}

#wpTextbox1:focus {
    border-color: var(--zc-yellow) !important;
    box-shadow: inset 0 0 0 1px var(--zc-yellow) !important;
    outline: none !important;
}

#wpSummary {
    background-color: var(--zc-dark-3) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 6px !important;
    color: var(--color-base) !important;
    padding: 8px 12px !important;
}

#wpSummary:focus {
    border-color: var(--zc-yellow) !important;
    box-shadow: inset 0 0 0 1px var(--zc-yellow) !important;
    outline: none !important;
}

/* ===========================
   СПЕЦИАЛЬНЫЕ СТРАНИЦЫ
   =========================== */
.mw-specialpages-table td,
.mw-specialpages-table th {
    background-color: var(--zc-dark-2) !important;
    border-color: var(--zc-border) !important;
    color: var(--color-base--subtle) !important;
}

.mw-specialpages-group {
    color: var(--zc-yellow) !important;
    font-family: var(--font-family-heading) !important;
    border-bottom-color: var(--zc-border-light) !important;
}

/* ===========================
   ФОРМЫ И ИНПУТЫ
   =========================== */
.cdx-text-input__input:enabled {
    background-color: var(--zc-dark-3) !important;
    color: var(--color-base) !important;
    border-color: var(--zc-border-light) !important;
    border-radius: 6px !important;
}

.cdx-text-input__input:enabled:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.cdx-text-input__input:enabled:focus {
    border-color: var(--zc-yellow) !important;
    box-shadow: inset 0 0 0 1px var(--zc-yellow) !important;
}

.cdx-text-input__input::placeholder {
    color: var(--color-muted) !important;
}

.cdx-text-input__input:disabled {
    background-color: var(--zc-dark-3) !important;
    color: var(--color-disabled) !important;
    border-color: var(--zc-border) !important;
}

/* Radio кнопки */
.cdx-radio__label {
    color: var(--color-base--subtle) !important;
}

/* ===========================
   ДИАЛОГИ / МОДАЛКИ
   =========================== */
.cdx-dialog {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6) !important;
    color: var(--color-base) !important;
}

.cdx-dialog-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.cdx-dialog__header .cdx-dialog__header__title {
    font-family: var(--font-family-heading) !important;
    color: var(--color-base--emphasized) !important;
}

.cdx-dialog__header .cdx-dialog__header__subtitle {
    color: var(--color-subtle) !important;
}

.cdx-dialog__body {
    color: var(--color-base--subtle) !important;
}

.cdx-dialog--dividers .cdx-dialog__header,
.cdx-dialog--dividers .cdx-dialog__footer {
    border-color: var(--zc-border) !important;
}

.cdx-dialog__footer .cdx-dialog__footer__text {
    color: var(--color-subtle) !important;
}

.skin-dialog-search .cdx-dialog__header {
    background-color: var(--zc-dark-3) !important;
}

/* ===========================
   ПРОГРЕСС-БАР
   =========================== */
.cdx-progress-bar:not(.cdx-progress-bar--disabled) .cdx-progress-bar__bar {
    background-color: var(--zc-yellow) !important;
}

.cdx-progress-bar:not(.cdx-progress-bar--inline) {
    background-color: var(--zc-dark-3) !important;
    box-shadow: 0 0 0 1px var(--zc-border-light) !important;
}

/* ===========================
   THUMBNAIL (Миниатюры)
   =========================== */
.thumb {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border) !important;
    border-radius: 10px !important;
    overflow: hidden;
    margin: 0 0 1em 0 !important;
}

.thumbinner {
    background-color: var(--zc-dark-2) !important;
    border: none !important;
    border-radius: 10px !important;
}

.thumbcaption {
    color: var(--color-subtle) !important;
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
}

.thumbcaption a {
    color: var(--zc-yellow) !important;
}

.thumbborder {
    border-color: var(--zc-border-light) !important;
}

/* ===========================
   ГАЛЕРЕЯ
   =========================== */
.mw-body-content .gallery {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border) !important;
    border-radius: 10px !important;
}

.mw-body-content .gallery .gallerybox {
    border-color: var(--zc-border) !important;
}

.mw-body-content .gallery .gallerytext {
    color: var(--color-subtle) !important;
}

.mw-body-content .gallery .gallerytext a {
    color: var(--zc-yellow) !important;
}

/* ===========================
   ФУТЕР
   =========================== */
.mw-footer-container {
    background-color: var(--zc-dark) !important;
    border-top: 1px solid var(--zc-border) !important;
}

.mw-footer {
    color: var(--color-muted) !important;
    font-size: 0.82rem !important;
}

#footer-places a {
    color: var(--color-subtle) !important;
    transition: color 0.15s ease !important;
}

#footer-places a:hover {
    color: var(--zc-yellow) !important;
    text-decoration: none !important;
}

#footer-poweredbyico .cdx-button {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

#footer-poweredbyico .cdx-button:hover {
    opacity: 0.8;
}

#footer-poweredbyico img {
    filter: invert(1) brightness(0.7);
}

/* ===========================
   УВЕДОМЛЕНИЯ
   =========================== */
.mw-notification-area {
    background-color: transparent !important;
}

.mw-notification {
    background-color: var(--zc-dark-2) !important;
    border: 1px solid var(--zc-border-light) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    color: var(--color-base--subtle) !important;
}

/* ===========================
   ПЕРЕНАПРАВЛЕНИЯ
   =========================== */
.mw-redirectedfrom {
    color: var(--color-muted) !important;
    font-size: 0.85rem !important;
}

.mw-redirectedfrom a {
    color: var(--color-subtle) !important;
}

/* ===========================
   PRINT FOOTER
   =========================== */
.printfooter {
    color: var(--color-muted) !important;
    font-size: 0.8rem !important;
    border-top: 1px solid var(--zc-border) !important;
    padding-top: 12px !important;
    margin-top: 24px !important;
}

.printfooter a {
    color: var(--color-subtle) !important;
    word-break: break-all;
}

/* ===========================
   SCROLLBAR (веб-специфичный)
   =========================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--zc-black);
}

::-webkit-scrollbar-thumb {
    background: var(--zc-dark-4);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #333;
}

/* ===========================
   СЕЛЕКЦИЯ ТЕКСТА
   =========================== */
::selection {
    background-color: rgba(242, 207, 0, 0.25);
    color: var(--color-base--emphasized);
}

::-moz-selection {
    background-color: rgba(242, 207, 0, 0.25);
    color: var(--color-base--emphasized);
}

/* ===========================
   АДАПТИВНОСТЬ
   =========================== */
@media (max-width: 720px) {
    .mw-body {
        border-radius: 12px !important;
        padding: 20px !important;
    }

    .firstHeading {
        font-size: 1.5rem !important;
    }

    .vector-dropdown-content {
        border-radius: 0 0 10px 10px !important;
    }
}

/* ===========================
   ТЁМНАЯ ТЕМА ОФОРМЛЕНИЯ
   (перекрытие для皮肤 темы)
   =========================== */
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-night body {
    --background-color-base: #0a0a0a;
    --color-base: #e8e8e8;
}

/* ===========================
   SPЕЦИАЛЬНЫЕ ИСПРАВЛЕНИЯ
   =========================== */

/* Убрать белые артефакты вокруг вект-элементов */
.vector-icon {
    transition: color 0.15s ease;
}

/* Исправление прозрачных иконок на тёмном фоне */
.vector-icon.mw-ui-icon-wikimedia-search,
.vector-icon.mw-ui-icon-wikimedia-menu,
.vector-icon.mw-ui-icon-wikimedia-appearance,
.vector-icon.mw-ui-icon-userAvatar,
.vector-icon.mw-ui-icon-wikimedia-userAvatar,
.vector-icon.mw-ui-icon-wikimedia-star,
.vector-icon.mw-ui-icon-wikimedia-wikimedia-star,
.vector-icon.mw-ui-icon-wikimedia-speechBubbles,
.vector-icon.mw-ui-icon-wikimedia-edit,
.vector-icon.mw-ui-icon-wikimedia-wikiText,
.vector-icon.mw-ui-icon-wikimedia-watchlist,
.vector-icon.mw-ui-icon-wikimedia-userTalk,
.vector-icon.mw-ui-icon-wikimedia-settings,
.vector-icon.mw-ui-icon-wikimedia-userContributions,
.vector-icon.mw-ui-icon-wikimedia-logOut,
.vector-icon.mw-ui-icon-wikimedia-history {
    filter: invert(1) brightness(0.75) !important;
}

.vector-tab-noicon.selected a .vector-icon,
.vector-menu-content-list li.selected a .vector-icon,
.cdx-button--action-progressive .vector-icon {
    filter: invert(0.6) sepia(1) saturate(5) hue-rotate(10deg) brightness(1.1) !important;
}

/* Список наблюдения — жёлтая звезда */
#ca-watch .vector-icon,
#ca-watchstar-sticky-header .vector-icon,
.mw-watchlink .vector-icon {
    filter: invert(0.6) sepia(1) saturate(5) hue-rotate(10deg) brightness(1.1) !important;
}

/* Индикатор "нет статьи" */
.noarticletext p {
    color: var(--color-subtle) !important;
    line-height: 1.7 !important;
}

/* Скролл-паддинг для sticky header */
.client-js.vector-sticky-header-enabled {
    scroll-padding-top: 3.125rem;
}

/* Скрыть стандартный подложечный фон */
.vector-column-start,
.vector-column-end {
    background-color: transparent !important;
}

/* Fix: content area spacing */
.vector-body-before-content {
    margin-bottom: 0 !important;
}

/* ===========================
   ZET+COMPAN FILM INFOBOX
   =========================== */

.zc-infobox {
    float: right;
    clear: right;
    width: 340px;

    margin: 0 0 20px 0 !important; /* ← убрали правый отступ */

    background: linear-gradient(180deg, #141414, #0d0d0d) !important;
    border: 1px solid rgba(242, 207, 0, 0.35) !important;
    border-radius: 16px !important;
    color: #d8d8d8 !important;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.zc-infobox-title {
    background: linear-gradient(135deg, #f2cf00, #b89e00) !important;
    color: #050505 !important;
    font-family: var(--font-family-heading, sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    letter-spacing: -0.02em;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35) !important;
}

.zc-infobox-image {
    background: #080808 !important;
    text-align: center !important;
    padding: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.zc-infobox-image img {
    border-radius: 12px;
    width: 100%;          /* растягиваем */
    max-width: 100%;
    height: auto;
}

.zc-infobox-caption {
    color: #9f9f9f !important;
    font-size: 0.8rem !important;
    text-align: center !important;
    padding: 8px 14px !important;
    background: #101010 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.zc-infobox th {
    width: 38%;
    background: rgba(255, 255, 255, 0.035) !important;
    color: #f2cf00 !important;
    font-weight: 700 !important;
    text-align: left !important;
    vertical-align: top !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.zc-infobox td {
    background: rgba(0, 0, 0, 0.12) !important;
    color: #d0d0d0 !important;
    vertical-align: top !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.zc-infobox-section {
    background: #1b1b1b !important;
    color: #ffe14a !important;
    text-align: center !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem !important;
    padding: 10px 12px !important;
}

.zc-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(242, 207, 0, 0.12);
    border: 1px solid rgba(242, 207, 0, 0.35);
    color: #ffe14a;
    font-weight: 700;
    font-size: 0.82rem;
}

.zc-infobox code {
    background: #050505 !important;
    color: #ffe14a !important;
    border: 1px solid rgba(242, 207, 0, 0.25) !important;
    border-radius: 5px !important;
    padding: 2px 5px !important;
    word-break: break-all;
}

@media (max-width: 720px) {
    .zc-infobox {
        float: none;
        width: 100%;
        margin: 0 0 22px 0;
    }
}


/* ===========================
   ZET+COMPAN MAIN PAGE
   =========================== */

.page-Main_Page .firstHeading,
.page-Заглавная_страница .firstHeading,
.page-Главная_страница .firstHeading {
    display: none !important;
}

.zc-mainpage {
    max-width: 1180px;
    margin: 0 auto;
}

.zc-hero {
    position: relative;
    margin-bottom: 28px;
    border: 1px solid rgba(242, 207, 0, 0.35);
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(242, 207, 0, 0.18), transparent 32%),
        linear-gradient(135deg, #171717, #070707);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.45);
}

.zc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(120deg, rgba(242, 207, 0, 0.08), transparent 45%),
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 12px
        );
    pointer-events: none;
}

.zc-hero-inner {
    position: relative;
    padding: 44px 42px;
}

.zc-hero-kicker {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(242, 207, 0, 0.12);
    border: 1px solid rgba(242, 207, 0, 0.35);
    color: #ffe14a;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.zc-hero-title {
    margin-bottom: 14px;
    color: #f2cf00;
    font-family: var(--font-family-heading, sans-serif);
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    text-shadow: 0 0 28px rgba(242, 207, 0, 0.16);
}

.zc-hero-text {
    max-width: 820px;
    color: #d6d6d6;
    font-size: 1.08rem;
    line-height: 1.75;
}

.zc-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.zc-button {
    display: inline-block;
    padding: 11px 16px;
    border-radius: 12px;
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f0f0f0;
    font-weight: 800;
    transition: 0.18s ease;
}

.zc-button:hover {
    background: #222;
    border-color: rgba(242, 207, 0, 0.55);
    color: #ffe14a;
    text-decoration: none;
    transform: translateY(-1px);
}

.zc-button-primary {
    background: #f2cf00;
    color: #050505;
    border-color: #f2cf00;
}

.zc-button-primary:hover {
    background: #ffe14a;
    color: #050505;
}

.zc-section-title {
    margin: 28px 0 16px;
    color: #f2cf00;
    font-family: var(--font-family-heading, sans-serif);
    font-size: 1.35rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zc-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.zc-card {
    min-height: 190px;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, #171717, #0f0f0f);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
    transition: 0.18s ease;
}

.zc-card:hover {
    transform: translateY(-3px);
    border-color: rgba(242, 207, 0, 0.42);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

.zc-card-title {
    margin-bottom: 10px;
    color: #f2cf00;
    font-family: var(--font-family-heading, sans-serif);
    font-size: 1.18rem;
    font-weight: 800;
}

.zc-card-text {
    color: #bfbfbf;
    line-height: 1.65;
    font-size: 0.94rem;
}

.zc-card-link {
    margin-top: 16px;
    font-weight: 800;
}

.zc-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 24px;
}

.zc-panel {
    padding: 22px;
    border-radius: 18px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cfcfcf;
}

.zc-panel-title {
    margin-bottom: 12px;
    color: #ffe14a;
    font-family: var(--font-family-heading, sans-serif);
    font-size: 1.08rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zc-panel ul {
    margin-bottom: 0 !important;
}

.zc-wide-panel {
    margin-top: 18px;
    border-left: 4px solid #f2cf00;
}

.zc-footer-note {
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(242, 207, 0, 0.08);
    border: 1px solid rgba(242, 207, 0, 0.25);
    color: #d8d8d8;
}

@media (max-width: 980px) {
    .zc-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .zc-hero-inner {
        padding: 30px 22px;
    }

    .zc-card-grid,
    .zc-two-column {
        grid-template-columns: 1fr;
    }

    .zc-card {
        min-height: auto;
    }
}

/* ===========================
   ZET+COMPAN INFOBOX POSITION FIX
   =========================== */

.mw-body-content .zc-infobox {
    float: right !important;
    clear: right !important;
    width: 380px !important;
    max-width: 380px !important;
    margin: 0 0 24px 28px !important;
}

/* Увеличенное изображение внутри инфобокса */
.mw-body-content .zc-infobox-image img {
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
}

/* На мобильных — во всю ширину */
@media (max-width: 720px) {
    .mw-body-content .zc-infobox {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 22px 0 !important;
    }

    .mw-body-content .zc-infobox-image img {
        max-width: 100% !important;
    }
}