MediaWiki:Common.css: различия между версиями

Версия от 03:27, 27 апреля 2026

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

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

/* ===========================
   ИНФОБОКС — ПОЛНОМЕТРАЖНЫЕ ФИЛЬМЫ
   =========================== */
.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);
}

/* ===========================
   ОСНОВНОЙ КОНТЕНТ
   =========================== */
.mw-page-container {
    background-color: var(--zc-black) !important;
}

.mw-page-container-inner {
    background-color: transparent !important;
}

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

.mw-body {
    background-color: var(--zc-dark) !important;
    border: 1px solid var(--zc-border) !important;
    border-radius: 16px !important;
    color: var(--color-base) !important;
    padding: 32px !important;
    font-size: var(--font-size-large) !important;
    line-height: var(--line-height-content) !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;
}