spirzen/it-knowledge-base: Огромная энциклопедия по информационным технологиям. Компьютерная, цифровая, сетевая грамотность, языки, данные, структуры, интеграции, архитектура, микросервисы, контейнеризация, оркестрация и всё такое.

src/css/custom.css
1 829 строк48 KB
Spirzen
Big design rework
03 июн 2026, 00:53
03 июн 2026, 00:5347730ce
@import './it-demo-shell.css';
@import './it-design-themes.css';
@import './it-design-bridge.css';
@import './it-design-compat.css';
@import './it-design-effects.css';
@import './doc-search-theme.css';
@import './navbar-layout.css';
@import './sidebar-explorer.css';
@import './sidebar-cosmic-explorer.css';
@import './article-docs-prime.css';
@import './site-chrome.css';

/* ============================================================================
   1. ПЕРЕМЕННЫЕ (CSS VARIABLES)
   ============================================================================ */

:root {
  /* Основной текст статьи */
  --ifm-font-size-base: 85%;
  
    /* Заголовки всех уровней */
  --ifm-h1-font-size: 1.9rem;
  --ifm-h2-font-size: 1.7rem;
  --ifm-h3-font-size: 1.4rem;
  --ifm-h4-font-size: 1.2rem;
  --ifm-h5-font-size: 1.05rem;
  --ifm-h6-font-size: 1rem;
	
  /* Цветовая палитра Primary (Фиолетовый/Синий) */
  --ifm-color-primary: #7B68EE;
  --ifm-color-primary-dark: #6A5ACD;
  --ifm-color-primary-darker: #5D4EBA;
  --ifm-color-primary-darkest: #4B3A8A;
  --ifm-color-primary-light: #9370DB;
  --ifm-color-primary-lighter: #B19CD9;
  --ifm-color-primary-lightest: #D8BFD8;

  /* Базовые цвета фона и текста */
  --ifm-background-color: #FFFFFF;
  --ifm-background-surface-color: #FAFAFA;
  --ifm-color-content: #2C3E50;
  --ifm-color-content-secondary: #5A6C7D;

  /* Навигация */
  --ifm-navbar-background-color: #FFFFFF;
  --ifm-navbar-link-color: #2C3E50;
  --ifm-navbar-link-hover-color: #7B68EE;

  /* Сайдбар */
  --ifm-sidebar-background-color: #F8F9FA;
  --ifm-menu-color: #2C3E50;
  --ifm-menu-color-active: #7B68EE;
  --ifm-menu-color-background-hover: color-mix(in srgb, var(--ifm-color-primary) 14%, var(--ifm-sidebar-background-color));
  --ifm-menu-color-background-active: #F0F0FF;

  /* Футер */
  --ifm-footer-background-color: #2C3E50;
  --ifm-footer-color: #FFFFFF;
  --ifm-footer-link-color: #B0C4DE;

  /* Интерактивные элементы */
  --ifm-link-color: #7B68EE;
  --ifm-link-hover-color: #6A5ACD;
  --ifm-button-background-color: #7B68EE;
  --ifm-button-color: #FFFFFF;

  /* Карточки и тени */
  --ifm-card-background-color: #FFFFFF;
  --ifm-card-border-radius: 12px;
  --ifm-global-shadow-lw: 0 2px 8px rgba(123, 104, 238, 0.1);
  --ifm-global-shadow-md: 0 4px 16px rgba(123, 104, 238, 0.15);

  /* Код */
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(123, 104, 238, 0.15);

  /* Документация: доля центра и правого оглавления */
  --it-doc-toc-width: clamp(11rem, 18vw, 20rem);
  --it-doc-article-gap: 1rem;

  /* Чипы статуса и аудитории статей */
  --it-tag-chip-radius: 999px;
  --it-tag-chip-padding: 0.35rem 0.85rem;
  --it-tag-chip-font-size: 0.8rem;
  --it-tag-chip-weight: 600;
  --it-tag-chip-gap: 0.4rem;

  --it-tag-required-bg: #ffebee;
  --it-tag-required-fg: #b71c1c;
  --it-tag-required-border: #ef9a9a;

  --it-tag-warn-bg: #fff8e1;
  --it-tag-warn-fg: #e65100;
  --it-tag-warn-border: #ffcc80;

  --it-tag-beginner-bg: #e8f5e9;
  --it-tag-beginner-fg: #2e7d32;
  --it-tag-beginner-border: #a5d6a7;

  --it-tag-advanced-bg: #ede7f6;
  --it-tag-advanced-fg: #512da8;
  --it-tag-advanced-border: #b39ddb;

  --it-tag-notrequired-bg: #f5f5f5;
  --it-tag-notrequired-fg: #546e7a;
  --it-tag-notrequired-border: #cfd8dc;

  --it-meta-panel-bg: color-mix(in srgb, var(--ifm-color-primary) 3%, var(--ifm-card-background-color));
  --it-meta-panel-border: color-mix(in srgb, var(--ifm-color-primary) 12%, var(--ifm-color-emphasis-300));
  --it-meta-label-fg: var(--ifm-color-content-secondary);

  /* Docs Prime — типографика статей */
  --it-doc-h1-fg: var(--ifm-color-content);
  --it-doc-heading-fg: var(--ifm-color-content);
  --it-doc-hero-bg: color-mix(in srgb, var(--ifm-color-primary) 8%, var(--ifm-card-background-color));
  --it-doc-hero-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ifm-color-primary) 8%, var(--ifm-card-background-color)),
    color-mix(in srgb, var(--ifm-color-primary) 2%, var(--ifm-card-background-color))
  );
  --it-doc-hero-border: color-mix(in srgb, var(--ifm-color-primary) 15%, var(--ifm-color-emphasis-300));
  --it-doc-section-bg: color-mix(in srgb, var(--ifm-color-primary) 3%, var(--ifm-card-background-color));
  --it-doc-section-h2-bg: color-mix(in srgb, var(--ifm-color-primary) 6%, var(--ifm-card-background-color));
  --it-doc-h2-header-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ifm-color-primary) 6%, var(--ifm-card-background-color)),
    transparent 55%
  );
  --it-doc-h3-header-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ifm-color-primary) 5%, var(--ifm-card-background-color)),
    transparent 42%
  );
  --it-doc-section-border: var(--ifm-color-emphasis-300);
  --it-doc-heading-underline: color-mix(in srgb, #a2a9b1 70%, var(--ifm-color-emphasis-300));
  --it-doc-rail-color: var(--ifm-color-primary);
  --it-doc-rail-muted: color-mix(in srgb, var(--ifm-color-primary) 45%, transparent);
  --it-doc-lead-fg: var(--ifm-color-content-secondary);
  --it-doc-inline-code-bg: color-mix(in srgb, var(--ifm-color-primary) 10%, var(--ifm-code-background));
  --it-doc-inline-code-fg: var(--ifm-color-primary-darkest);
  --it-doc-inline-code-border: color-mix(in srgb, var(--ifm-color-primary) 18%, var(--ifm-color-emphasis-200));
  --it-doc-code-bg: #1a1b26;
  --it-doc-code-border: #2f334d;
  --it-doc-code-fg: #c8d3f5;
  --it-doc-code-inset: rgba(255, 255, 255, 0.04);

  --it-audience-developer-bg: color-mix(in srgb, #5c6bc0 14%, var(--ifm-card-background-color));
  --it-audience-developer-fg: #3949ab;
  --it-audience-developer-border: color-mix(in srgb, #5c6bc0 35%, var(--ifm-color-emphasis-300));

  --it-audience-analytic-bg: color-mix(in srgb, #00897b 12%, var(--ifm-card-background-color));
  --it-audience-analytic-fg: #00695c;
  --it-audience-analytic-border: color-mix(in srgb, #00897b 32%, var(--ifm-color-emphasis-300));

  --it-audience-tester-bg: color-mix(in srgb, #fb8c00 12%, var(--ifm-card-background-color));
  --it-audience-tester-fg: #e65100;
  --it-audience-tester-border: color-mix(in srgb, #fb8c00 30%, var(--ifm-color-emphasis-300));

  --it-audience-architector-bg: color-mix(in srgb, #8e24aa 12%, var(--ifm-card-background-color));
  --it-audience-architector-fg: #6a1b9a;
  --it-audience-architector-border: color-mix(in srgb, #8e24aa 30%, var(--ifm-color-emphasis-300));

  --it-audience-manager-bg: color-mix(in srgb, #d81b60 10%, var(--ifm-card-background-color));
  --it-audience-manager-fg: #ad1457;
  --it-audience-manager-border: color-mix(in srgb, #d81b60 28%, var(--ifm-color-emphasis-300));

  --it-audience-engineer-bg: color-mix(in srgb, #546e7a 12%, var(--ifm-card-background-color));
  --it-audience-engineer-fg: #37474f;
  --it-audience-engineer-border: color-mix(in srgb, #546e7a 30%, var(--ifm-color-emphasis-300));

  --it-audience-all-bg: color-mix(in srgb, var(--ifm-color-primary) 10%, var(--ifm-card-background-color));
  --it-audience-all-fg: var(--ifm-color-primary-darkest);
  --it-audience-all-border: color-mix(in srgb, var(--ifm-color-primary) 28%, var(--ifm-color-emphasis-300));

  --it-audience-technical-writer-bg: color-mix(in srgb, #5e35b1 10%, var(--ifm-card-background-color));
  --it-audience-technical-writer-fg: #4527a0;
  --it-audience-technical-writer-border: color-mix(in srgb, #5e35b1 26%, var(--ifm-color-emphasis-300));

  --it-audience-family-bg: color-mix(in srgb, #f06292 10%, var(--ifm-card-background-color));
  --it-audience-family-fg: #c2185b;
  --it-audience-family-border: color-mix(in srgb, #f06292 26%, var(--ifm-color-emphasis-300));

  --it-audience-power-user-bg: color-mix(in srgb, #6d4c41 10%, var(--ifm-card-background-color));
  --it-audience-power-user-fg: #4e342e;
  --it-audience-power-user-border: color-mix(in srgb, #6d4c41 26%, var(--ifm-color-emphasis-300));

  --it-audience-other-bg: var(--ifm-background-surface-color);
  --it-audience-other-fg: var(--ifm-color-content-secondary);
  --it-audience-other-border: var(--ifm-color-emphasis-300);
}

[data-theme='dark'] {
	
  --ifm-font-size-base: 85%;
  
  --ifm-h1-font-size: 1.9rem;
  --ifm-h2-font-size: 1.7rem;
  --ifm-h3-font-size: 1.4rem;
  --ifm-h4-font-size: 1.2rem;
  --ifm-h5-font-size: 1.05rem;
  --ifm-h6-font-size: 1rem;
	
  --ifm-color-primary: #9370DB;
  --ifm-color-primary-dark: #7B68EE;
  --ifm-color-primary-darker: #6A5ACD;
  --ifm-color-primary-darkest: #5D4EBA;
  --ifm-color-primary-light: #B19CD9;
  --ifm-color-primary-lighter: #CBB8E8;
  --ifm-color-primary-lightest: #D8BFD8;

  --ifm-background-color: #1A1A1A;
  --ifm-background-surface-color: #2A2A2A;
  --ifm-color-content: #E8E8E8;
  --ifm-color-content-secondary: #B0B0B0;

  --ifm-navbar-background-color: #1A1A1A;
  --ifm-navbar-link-color: #E8E8E8;
  --ifm-navbar-link-hover-color: #9370DB;

  --ifm-sidebar-background-color: #2A2A2A;
  --ifm-menu-color: #E8E8E8;
  --ifm-menu-color-active: #9370DB;
  --ifm-menu-color-background-hover: color-mix(in srgb, var(--ifm-color-primary) 22%, var(--ifm-sidebar-background-color));
  --ifm-menu-color-background-active: #3A2A5A;

  --docusaurus-highlighted-code-line-bg: rgba(147, 112, 219, 0.25);

  --ifm-footer-background-color: #0A0A0A;
  --ifm-footer-color: #E8E8E8;
  --ifm-footer-link-color: #B0C4DE;

  --ifm-link-color: #9370DB;
  --ifm-link-hover-color: #B19CD9;
  --ifm-button-background-color: #9370DB;
  --ifm-button-color: #FFFFFF;

  --ifm-card-background-color: #2A2A2A;

  --it-tag-required-bg: color-mix(in srgb, #ef5350 22%, var(--ifm-card-background-color));
  --it-tag-required-fg: #ffcdd2;
  --it-tag-required-border: color-mix(in srgb, #ef5350 45%, #444);

  --it-tag-warn-bg: color-mix(in srgb, #ffb74d 18%, var(--ifm-card-background-color));
  --it-tag-warn-fg: #ffe0b2;
  --it-tag-warn-border: color-mix(in srgb, #ffb74d 40%, #444);

  --it-tag-beginner-bg: color-mix(in srgb, #66bb6a 18%, var(--ifm-card-background-color));
  --it-tag-beginner-fg: #c8e6c9;
  --it-tag-beginner-border: color-mix(in srgb, #66bb6a 38%, #444);

  --it-tag-advanced-bg: color-mix(in srgb, #ab47bc 18%, var(--ifm-card-background-color));
  --it-tag-advanced-fg: #e1bee7;
  --it-tag-advanced-border: color-mix(in srgb, #ab47bc 38%, #444);

  --it-tag-notrequired-bg: color-mix(in srgb, #78909c 16%, var(--ifm-card-background-color));
  --it-tag-notrequired-fg: #cfd8dc;
  --it-tag-notrequired-border: color-mix(in srgb, #78909c 35%, #444);

  --it-meta-panel-bg: color-mix(in srgb, var(--ifm-color-primary) 5%, var(--ifm-card-background-color));
  --it-meta-panel-border: color-mix(in srgb, var(--ifm-color-primary) 14%, #444);

  --it-doc-h1-fg: var(--ifm-heading-color);
  --it-doc-heading-fg: var(--ifm-heading-color);
  --it-doc-hero-bg: color-mix(in srgb, var(--ifm-color-primary) 12%, var(--ifm-card-background-color));
  --it-doc-hero-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ifm-color-primary) 14%, var(--ifm-card-background-color)),
    color-mix(in srgb, var(--ifm-color-primary) 4%, var(--ifm-card-background-color))
  );
  --it-doc-hero-border: color-mix(in srgb, var(--ifm-color-primary) 22%, #444);
  --it-doc-section-bg: color-mix(in srgb, var(--ifm-color-primary) 5%, var(--ifm-card-background-color));
  --it-doc-section-h2-bg: color-mix(in srgb, var(--ifm-color-primary) 10%, var(--ifm-card-background-color));
  --it-doc-h2-header-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ifm-color-primary) 10%, var(--ifm-card-background-color)),
    transparent 55%
  );
  --it-doc-h3-header-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ifm-color-primary) 8%, var(--ifm-card-background-color)),
    transparent 42%
  );
  --it-doc-section-border: color-mix(in srgb, var(--ifm-color-primary) 12%, #444);
  --it-doc-heading-underline: color-mix(in srgb, var(--ifm-color-primary) 20%, #555);
  --it-doc-rail-color: var(--ifm-color-primary-light);
  --it-doc-rail-muted: color-mix(in srgb, var(--ifm-color-primary) 35%, transparent);
  --it-doc-lead-fg: var(--ifm-color-content-secondary);
  --it-doc-inline-code-bg: color-mix(in srgb, var(--ifm-color-primary) 18%, var(--ifm-code-background));
  --it-doc-inline-code-fg: var(--ifm-color-primary-lighter);
  --it-doc-inline-code-border: color-mix(in srgb, var(--ifm-color-primary) 28%, #444);
  --it-doc-code-bg: #12121a;
  --it-doc-code-border: color-mix(in srgb, var(--ifm-color-primary) 25%, #333);
  --it-doc-code-fg: #c8d3f5;
  --it-doc-code-inset: rgba(255, 255, 255, 0.03);

  --it-audience-developer-fg: #9fa8da;
  --it-audience-analytic-fg: #80cbc4;
  --it-audience-tester-fg: #ffcc80;
  --it-audience-architector-fg: #ce93d8;
  --it-audience-manager-fg: #f48fb1;
  --it-audience-engineer-fg: #b0bec5;
  --it-audience-all-fg: var(--ifm-color-primary-lighter);
  --it-audience-technical-writer-fg: #b39ddb;
  --it-audience-family-fg: #f48fb1;
  --it-audience-power-user-fg: #bcaaa4;
  --it-audience-other-fg: var(--ifm-color-content-secondary);
}

/* ============================================================================
   2. ГЛОБАЛЬНЫЕ НАСТРОЙКИ И ТИПОГРАФИКА
   ============================================================================ */

html {
  overflow-x: clip;
}

body,
#main-wrapper,
.main-wrapper,
#__docusaurus {
  max-width: 100%;
  overflow-x: clip;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  loading: lazy;
}

/* ============================================================================
   3. HERO SECTION И КНОПКИ
   ============================================================================ */

.hero {
  padding: 4rem 0;
  background: transparent !important;
}

.hero__title {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--ifm-color-content);
  margin-bottom: 1rem;
}

.hero__subtitle {
  font-size: 1.25rem;
  color: var(--ifm-color-content-secondary);
  max-width: 800px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.button--primary {
  background-color: var(--ifm-button-background-color);
  border-color: var(--ifm-button-background-color);
  color: var(--ifm-button-color);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.button--primary:hover {
  background-color: var(--ifm-color-primary-dark);
  border-color: var(--ifm-color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(123, 104, 238, 0.3);
}

/* ============================================================================
   4. НАВИГАЦИЯ И САЙДБАР
   ============================================================================ */

/* Navbar — см. site-chrome.css */

.menu__list > .menu__list-item:first-of-type {
  border-top: 1px solid var(--ifm-color-emphasis-300);
  margin-top: 12px;
  padding-top: 10px;
}

.menu__list > .menu__list-item:last-of-type {
  border-bottom: 1px solid var(--ifm-color-emphasis-300);
  margin-bottom: 16px;
  padding-bottom: 10px;
}

.menu__link {
  border-radius: 6px;
  margin: 2px 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.menu__link:hover:not(.menu__link--active) {
  background-color: var(--ifm-menu-color-background-hover);
  color: var(--ifm-menu-color-active);
}

.menu__link--active {
  background-color: var(--ifm-menu-color-background-active);
  color: var(--ifm-menu-color-active);
  font-weight: 600;
}

/* Локальный поиск (it-doc-search-trigger) — в духе прежнего DocSearch-Button */
.it-doc-search-trigger {
  transition: all 0.25s ease;
}

[data-theme='dark'] .it-doc-search-trigger {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Документация: сайдбар и контент в одной flex-строке — без min-width: 0 статья наезжает на меню */
.docRoot {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.docMainContainer {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

@media screen and (min-width: 997px) {
  html.it-docs-page main.docMainContainer .container,
  html.it-docs-page .docItemWrapper {
    max-width: 100% !important;
    width: 100%;
  }

  html.it-docs-page.it-doc-toc-collapsed .docItemRow .docItemCol {
    flex: 1 1 auto;
    width: auto;
  }
}

.theme-doc-sidebar-container:not([class*='docSidebarContainerHidden']) {
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  overflow: visible;
  width: auto;
  min-width: clamp(
    11rem,
    calc(10rem + var(--doc-sidebar-nest-depth, 1) * 1.1rem),
    20rem
  ) !important;
  max-width: min(26rem, 42vw) !important;
}

@media screen and (min-width: 997px) and (max-width: 1199px) {
  .theme-doc-sidebar-container:not([class*='docSidebarContainerHidden']) {
    min-width: clamp(
      12rem,
      calc(11rem + var(--doc-sidebar-nest-depth, 1) * 1.25rem),
      22rem
    ) !important;
    max-width: min(24rem, 44vw) !important;
  }
}

@media screen and (min-width: 1200px) {
  .theme-doc-sidebar-container:not([class*='docSidebarContainerHidden']) {
    min-width: clamp(
      14rem,
      calc(12rem + var(--doc-sidebar-nest-depth, 1) * 1.15rem),
      22rem
    ) !important;
    max-width: min(28rem, 32vw) !important;
  }
}

/* Скрытый сайдбар: узкая полоска «развернуть», не ширина авто-подбора */
@media screen and (min-width: 997px) {
  :root {
    --it-doc-sidebar-hidden-width: 2.25rem;
  }

  .theme-doc-sidebar-container[class*='docSidebarContainerHidden'] {
    width: var(--it-doc-sidebar-hidden-width) !important;
    min-width: var(--it-doc-sidebar-hidden-width) !important;
    max-width: var(--it-doc-sidebar-hidden-width) !important;
    flex: 0 0 var(--it-doc-sidebar-hidden-width) !important;
    overflow: hidden;
  }

  .theme-doc-sidebar-container[class*='docSidebarContainerHidden'] button[class*='expandButton'] {
    top: calc(var(--ifm-navbar-height) + 0.35rem) !important;
    right: 0 !important;
    left: auto !important;
    width: 100% !important;
    height: 2.5rem !important;
    min-height: 0 !important;
    max-height: 2.5rem !important;
    padding: 0 !important;
    border: none;
    border-right: 1px solid var(--ifm-toc-border-color);
    border-radius: 0 8px 8px 0;
  }

  .theme-doc-sidebar-container[class*='docSidebarContainerHidden'] [class*='expandButtonIcon'] {
    width: 0.9rem;
    height: 0.9rem;
  }
}

@media screen and (max-width: 996px) {
  .theme-doc-sidebar-container {
    min-width: 0 !important;
    max-width: none !important;
  }

  .docMainContainer > .container {
    max-width: 100%;
  }

  .theme-doc-markdown > article {
    padding: 1.25rem 1rem !important;
  }

  .navbar-sidebar .menu__link {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    height: auto !important;
    line-height: 1.35 !important;
  }

  .navbar-sidebar .menu__list .menu__list {
    padding-left: 0.65rem !important;
  }
}

@media screen and (max-width: 768px) {
  .navbar-sidebar__backdrop {
    display: none !important;
  }
}

/* Документация: бургер всегда на desktop — запасной доступ к меню, если левый сайдбар пропал */
@media screen and (min-width: 997px) {
  html.it-docs-page .navbar__toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  html.it-doc-mobile-sidebar-open .navbar-sidebar__backdrop {
    display: block !important;
  }

  html.it-doc-mobile-sidebar-open.navbar-sidebar--show .navbar-sidebar,
  html.it-doc-mobile-sidebar-open .navbar-sidebar {
    visibility: visible;
  }
}

.menu__link {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  margin-bottom: 0.2rem !important;
  border-radius: 4px !important;
}

.theme-doc-sidebar-menu .menu__list .menu__list {
  content-visibility: auto;
  contain-intrinsic-size: auto 12rem;
}

.theme-doc-sidebar-menu .menu__link {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
  height: auto !important;
  min-height: 1.85rem;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.theme-doc-sidebar-menu.compact .menu__link {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  margin-bottom: 0.2rem !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.menu__list .menu__list {
  padding-left: 0.75rem !important;
  margin-top: 0.2rem !important;
  margin-bottom: 0.2rem !important;
}

.theme-doc-sidebar-menu .menu__list .menu__list {
  padding-left: 0.65rem !important;
}

.menu__list-item-collapsible {
  border-top: 1px solid var(--ifm-color-emphasis-200) !important;
  border-bottom: 1px solid var(--ifm-color-emphasis-200) !important;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
}

.menu__list-item-collapsible:first-child {
  border-top: none !important;
}

.menu__list-item-collapsible:last-child {
  border-bottom: none !important;
}

.menu__link {
  transition: background-color 0.2s ease, 
              color 0.2s ease, 
              transform 0.2s ease !important;
}

.menu__link--active {
  animation: activeLinkPulse 2s ease-in-out infinite alternate !important;
}

@keyframes activeLinkPulse {
  0% {
    box-shadow: inset 2px 0 0 var(--ifm-color-primary) !important;
  }
  50% {
    box-shadow: inset 2px 0 8px rgba(123, 104, 238, 0.3) !important;
  }
  100% {
    box-shadow: inset 2px 0 0 var(--ifm-color-primary) !important;
  }
}

.menu__link:focus {
  outline: 2px dashed var(--ifm-color-primary-lightest) !important;
  outline-offset: 2px !important;
}

/* Один компактный шаг отступа на каждый уровень вложенности (без накопления 1+1.5+2+2.5rem) */
.theme-doc-sidebar-menu > .menu__list {
  padding-left: 0.35rem !important;
  border-left: none !important;
}

.theme-doc-sidebar-menu .menu__list .menu__list {
  margin-top: 0.15rem !important;
  margin-bottom: 0.15rem !important;
  padding-left: 0.65rem !important;
  border-left: 1px dashed var(--ifm-color-emphasis-300) !important;
  background: linear-gradient(
    to right,
    rgba(123, 104, 238, 0.05),
    transparent 2px
  );
}

/* ============================================================================
   5. КОНТЕНТ СТАТЬИ И ТЕГИ
   ============================================================================ */

.theme-doc-markdown > article {
  background: var(--ifm-card-background-color) !important;
  border-radius: var(--ifm-card-border-radius);
  padding: 2rem !important;
  box-shadow: var(--ifm-global-shadow-md) !important;
  margin: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.markdown {
  font-feature-settings: "liga" 1;
  hyphens: auto;
  background: var(--ifm-card-background-color);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--ifm-global-shadow-md);
}

.markdown p + p {
  margin-top: 1em;
}

/* --- Метаданные статьи (статус + аудитория) --- */

.article-meta {
  margin: 0.75rem 0 1.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--it-meta-panel-border);
  background: var(--it-meta-panel-bg);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article-meta .tag,
.article-meta .complexity-badge {
  --it-tag-chip-padding: 0.2rem 0.55rem;
  --it-tag-chip-font-size: 0.72rem;
  --it-tag-chip-weight: 500;
}

.article-meta .tag-inprogress {
  animation: none;
}

.article-meta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
}

.article-meta__label {
  flex: 0 0 auto;
  min-width: 4.5rem;
  padding-top: 0.22rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--it-meta-label-fg);
  line-height: 1.2;
}

.article-meta__chips {
  flex: 1 1 12rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--it-tag-chip-gap);
  min-width: 0;
}

.article-meta__audience {
  margin: 0;
}

.article-tags {
  margin: 0;
  display: flex;
  gap: var(--it-tag-chip-gap);
  flex-wrap: wrap;
}

.theme-doc-markdown > .article-tags,
.theme-doc-markdown > p > .article-tags:only-child {
  margin: 1rem 0 1.25rem;
}

.tag,
.complexity-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--it-tag-chip-padding);
  font-size: var(--it-tag-chip-font-size);
  font-weight: var(--it-tag-chip-weight);
  border-radius: var(--it-tag-chip-radius);
  line-height: 1.35;
  border: 1px solid transparent;
  white-space: nowrap;
}

.tag-required {
  background-color: var(--it-tag-required-bg);
  color: var(--it-tag-required-fg);
  border-color: var(--it-tag-required-border);
}

.tag-inprogress {
  background-color: var(--it-tag-warn-bg);
  color: var(--it-tag-warn-fg);
  border-color: var(--it-tag-warn-border);
  cursor: default;
  animation: it-tag-inprogress-pulse 2.5s ease-in-out infinite;
}

@keyframes it-tag-inprogress-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--it-tag-warn-border) 0%, transparent);
  }

  50% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--it-tag-warn-border) 45%, transparent);
  }
}

.tag-beginner,
.tag-human {
  background-color: var(--it-tag-beginner-bg);
  color: var(--it-tag-beginner-fg);
  border-color: var(--it-tag-beginner-border);
}

.tag-advanced {
  background-color: var(--it-tag-advanced-bg);
  color: var(--it-tag-advanced-fg);
  border-color: var(--it-tag-advanced-border);
}

.tag-notrequired {
  background-color: var(--it-tag-notrequired-bg);
  color: var(--it-tag-notrequired-fg);
  border-color: var(--it-tag-notrequired-border);
}

.complexity-badge {
  background: var(--it-audience-other-bg);
  color: var(--it-audience-other-fg);
  border-color: var(--it-audience-other-border);
  margin: 0;
}

.complexity-badge--developer {
  background: var(--it-audience-developer-bg);
  color: var(--it-audience-developer-fg);
  border-color: var(--it-audience-developer-border);
}

.complexity-badge--analytic {
  background: var(--it-audience-analytic-bg);
  color: var(--it-audience-analytic-fg);
  border-color: var(--it-audience-analytic-border);
}

.complexity-badge--tester {
  background: var(--it-audience-tester-bg);
  color: var(--it-audience-tester-fg);
  border-color: var(--it-audience-tester-border);
}

.complexity-badge--architector {
  background: var(--it-audience-architector-bg);
  color: var(--it-audience-architector-fg);
  border-color: var(--it-audience-architector-border);
}

.complexity-badge--manager {
  background: var(--it-audience-manager-bg);
  color: var(--it-audience-manager-fg);
  border-color: var(--it-audience-manager-border);
}

.complexity-badge--engineer {
  background: var(--it-audience-engineer-bg);
  color: var(--it-audience-engineer-fg);
  border-color: var(--it-audience-engineer-border);
}

.complexity-badge--all {
  background: var(--it-audience-all-bg);
  color: var(--it-audience-all-fg);
  border-color: var(--it-audience-all-border);
}

.complexity-badge--technical-writer {
  background: var(--it-audience-technical-writer-bg);
  color: var(--it-audience-technical-writer-fg);
  border-color: var(--it-audience-technical-writer-border);
}

.complexity-badge--family {
  background: var(--it-audience-family-bg);
  color: var(--it-audience-family-fg);
  border-color: var(--it-audience-family-border);
}

.complexity-badge--power-user {
  background: var(--it-audience-power-user-bg);
  color: var(--it-audience-power-user-fg);
  border-color: var(--it-audience-power-user-border);
}

.complexity-badge--other {
  background: var(--it-audience-other-bg);
  color: var(--it-audience-other-fg);
  border-color: var(--it-audience-other-border);
}

/* Выноски (Callouts) */
.callout {
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  border-left: 4px solid;
  background-color: #f8f9fa;
}

.callout--note {
  border-left-color: #7B68EE;
  background-color: #f5f3ff;
}

.callout--warning {
  border-left-color: #ff8f00;
  background-color: #fff8e1;
}

.callout--caution {
  border-left-color: #f57c00;
  background-color: #fff3e0;
}

.callout--danger {
  border-left-color: #d32f2f;
  background-color: #ffebee;
}

.callout--info {
  border-left-color: #0288d1;
  background-color: #e1f5fe;
}

.callout--tip {
  border-left-color: #1976d2;
  background-color: #e3f2fd;
}

.callout-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #2C3E50;
}

.callout,
.callout p,
.callout li {
  color: #2C3E50 !important;
}

/* Блоки кода внутри callout — не перекрашивать (Prism-токены и plain-текст) */
.callout .theme-code-block,
.callout .theme-code-block *,
.callout pre,
.callout pre * {
  color: inherit;
}

/* FAQ (вопрос — ответ) */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
}

.faq-item {
  padding: 1rem 1.25rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--ifm-color-emphasis-300);
  background: var(--ifm-background-surface-color);
}

.faq-q,
.faq-a {
  margin: 0;
  line-height: 1.55;
}

.faq-q {
  font-weight: 600;
  color: var(--ifm-heading-color);
  margin-bottom: 0.65rem;
}

.faq-a {
  color: var(--ifm-color-content-secondary);
}

.faq-label {
  font-weight: 700;
  color: var(--ifm-color-primary);
  margin-right: 0.15em;
}

.faq-a .faq-label {
  color: var(--ifm-color-content);
}

/* Аккордеоны (Details) */
details summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

details summary::marker,
details summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  content: "🔷";
  display: inline-block;
  transition: transform 0.2s;
  flex-shrink: 0;
}

details[open] summary::before {
  transform: rotate(90deg);
}

.details_lb9f > summary::before,
.details_b_Ee > summary::before {
  content: "🔷" !important;
  position: static !important;
  border: none !important;
  margin-right: 0.5rem !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  transform: none !important;
  transition: transform 0.2s !important;
  vertical-align: middle !important;
}

.details_lb9f[open] > summary::before,
.details_b_Ee[open] > summary::before {
  transform: rotate(90deg) !important;
}

/* Разделительная линия между всеми ссылками */
.theme-doc-sidebar-item-link,
.theme-doc-sidebar-item-category > div {
  border-bottom: 1px solid rgba(123, 104, 238, 0.1);
}

/* Удаление линии у последнего элемента каждой группы */
.theme-doc-sidebar-item-last > *,
.theme-doc-sidebar-item-category > div:last-child {
  border-bottom: none !important;
}

/* Стили для активного пункта — без нижней границы */
.menu__link--active {
  border-bottom: none !important;
  background-color: rgba(123, 104, 238, 0.1) !important;
  border-radius: 6px !important;
}

/* ============================================================================
   6. ТАБЛИЦЫ
   ============================================================================ */

table,
.table {
  table-layout: auto;
  width: 100%;
  font-size: var(--ifm-font-size-base) !important;
}

table td,
table th,
.table td,
.table th {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  vertical-align: top;
}

table code,
.table code {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  display: inline-block;
  max-width: 100%;
  line-height: 1.5;
  background-color: rgba(123, 104, 238, 0.12);
  color: #6A5ACD;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: var(--ifm-font-family-monospace);
  font-size: 85%;
}

[data-theme='dark'] table code,
[data-theme='dark'] .table code {
  background-color: rgba(147, 112, 219, 0.15);
  color: #B19CD9;
}

table pre code,
.table pre code {
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============================================================================
   7. КОД И ПОДСВЕТКА СИНТАКСИСА
   ============================================================================ */

code {
  background-color: rgba(123, 104, 238, 0.12);
  color: #6A5ACD;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: var(--ifm-font-family-monospace);
  font-size: 95%;
  white-space: nowrap;
}

code.language-plaintext,
code[class=""] {
  background-color: rgba(123, 104, 238, 0.12);
  color: #6A5ACD;
}

code:hover {
  background-color: rgba(123, 104, 238, 0.2);
}

[data-theme='dark'] code {
  background-color: rgba(147, 112, 219, 0.15);
  color: #B19CD9;
}

/* В fenced-блоках — наследовать цвет pre, не инлайн-стили */
pre code,
.prism-code code,
.theme-code-block code,
[class*='codeBlockLines_'] code,
pre code.language-plaintext,
pre code[class=''],
.prism-code code[class*='language-'],
[class*='codeBlockLines_'] code.language-plaintext {
  background-color: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
  white-space: inherit !important;
}

pre code:hover,
.prism-code code:hover {
  background-color: transparent !important;
}

[data-theme='dark'] pre code,
[data-theme='dark'] .prism-code code,
[data-theme='dark'] .theme-code-block code {
  background-color: transparent !important;
  color: inherit !important;
}

.prism-code,
pre[class*='language-'] {
  position: relative;
  background-color: #282c34 !important;
  border: 5px solid #5d4eba !important;
  border-radius: 8px !important;
  overflow: auto;
  box-shadow: 0 4px 16px rgba(123, 104, 238, 0.15) !important;
  color: #abb2bf !important;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
  font-size: var(--ifm-code-font-size) !important;
  line-height: 1.5 !important;
  tab-size: 2 !important;
  padding: 1rem !important;
  margin: 1.25rem 0 !important;
  white-space: pre;
  overflow-x: auto;
  overflow-wrap: anywhere;
  word-break: normal;
}

.prism-code .token {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  background: transparent !important;
}

.prism-code .token.comment,
.prism-code .token.prolog,
.prism-code .token.doctype,
.prism-code .token.cdata {
  color: #8ea17d !important;
  font-style: italic;
}

.prism-code .token.punctuation {
  color: #abb2bf !important;
}

.prism-code .token.namespace,
.prism-code .token.deleted {
  color: #e06c75 !important;
}

.prism-code .token.operator,
.prism-code .token.entity,
.prism-code .token.url,
.prism-code .token.variable {
  color: #abb2bf !important;
}

.prism-code .token.atrule,
.prism-code .token.attr-value,
.prism-code .token.keyword,
.prism-code .token.keyword.control-flow,
.prism-code .token.control,
.prism-code .token.directive,
.prism-code .token.unit {
  color: #c678dd !important;
}

.prism-code .token.property,
.prism-code .token.tag,
.prism-code .token.boolean,
.prism-code .token.number,
.prism-code .token.constant,
.prism-code .token.symbol,
.prism-code .token.builtin,
.prism-code .token.char,
.prism-code .token.selector,
.prism-code .token.attr-name,
.prism-code .token.string,
.prism-code .token.bullet,
.prism-code .token.inserted {
  color: var(--ifm-color-primary) !important;
}

.prism-code .token.function,
.prism-code .token.class-name,
.prism-code .token.maybe-class-name {
  color: #61afef !important;
}

.prism-code.language-csharp .token.preprocessor,
.prism-code.language-csharp .token.keyword.control-flow.null,
.prism-code.language-csharp .token.keyword.control-flow.boolean {
  color: #d19a66 !important;
}

.prism-code.language-sql .token.keyword {
  color: var(--ifm-color-primary) !important;
}

.prism-code.language-bash .token.variable,
.prism-code.language-bash .token.builtin {
  color: #61afef !important;
}

.prism-code.language-rust .token.macro,
.prism-code.language-rust .token.lifetime {
  color: #e06c75 !important;
}

.prism-code .highlighted-code-line {
  background-color: rgba(123, 104, 238, 0.2) !important;
}

/* Специфичные стили для XML/HTML тегов в коде */
.language-xml .token.punctuation,
.language-html .token.punctuation,
.language-xml .token.tag,
.language-html .token.tag,
.language-xml .token.attr-name,
.language-html .token.attr-name,
.language-xml .token.attr-value,
.language-html .token.attr-value,
.language-xml .token.operator,
.language-html .token.operator {
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  display: inline !important;
}

[data-theme='dark'] .language-xml .token,
[data-theme='dark'] .language-html .token {
  background: transparent !important;
}

[data-theme='dark'] .language-xml .token.punctuation,
[data-theme='dark'] .language-html .token.punctuation,
[data-theme='dark'] .language-xml .token.tag,
[data-theme='dark'] .language-html .token.tag {
  color: #ffffff !important;
}

/* Строки кода */
[class*='codeBlockLines_'] {
  text-align: start !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  white-space: pre !important;
  tab-size: 2 !important;
  -moz-tab-size: 2 !important;
}

[class*='codeBlockLines_'] > code {
  text-align: start !important;
  white-space: inherit !important;
  display: block !important;
  unicode-bidi: embed !important;
}

[data-theme='dark'] [class*='codeBlockLines_'] {
  text-align: start !important;
  hyphens: none !important;
}

/* Стилизация конкретных языков */
.language-csharp pre {
  border-left: 4px solid #a1260d !important;
}

.language-python pre {
  border-left: 4px solid #3776ab !important;
}

.language-java pre {
  border-left: 4px solid #b07219 !important;
}

.language-javascript pre {
  border-left: 4px solid #f7df1e !important;
}

.language-html pre {
  border-left: 4px solid #e34c26 !important;
}

.language-css pre {
  border-left: 4px solid #264de4 !important;
}

.language-sql pre {
  border-left: 4px solid #2b5797 !important;
}

/* Специальные цвета для каждого языка */
.language-csharp .token.keyword {
  color: #569cd6 !important;
}

.language-python .token.keyword {
  color: #c678dd !important;
}

.language-java .token.keyword {
  color: #c586c0 !important;
}

.language-javascript .token.keyword {
  color: #c586c0 !important;
}

/* Линия под блоком кода (якорь — сам pre, иначе ::after уезжает на всю ширину layout) */
pre[class*='language-']::after,
.prism-code[class*='language-']::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--ifm-color-primary) 50%, 
    transparent 100%) !important;
  border-radius: 3px;
}

/* Для мобильных устройств */
@media screen and (max-width: 768px) {
  pre[class*='language-']::after {
    height: 2px;
    bottom: -4px;
  }
}

/* ============================================================================
   8. КАРТОЧКИ (CARDS)
   ============================================================================ */

.card {
  background-color: var(--ifm-card-background-color);
  border-radius: var(--ifm-card-border-radius);
  box-shadow: var(--ifm-global-shadow-lw);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100px;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ifm-global-shadow-md);
  border-color: rgba(123, 104, 238, 0.2);
}

.card__header {
  margin-bottom: 0.75rem;
  padding: 0 1rem 0.5rem 1rem;
}

.card__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ifm-color-content);
  line-height: 1.4;
  text-decoration: none !important;
  display: block;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  max-height: none
}

.card__title:hover {
  color: var(--ifm-color-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.card__description {
  font-size: 0.9rem;
  color: var(--ifm-color-content-secondary);
  line-height: 1.5;
  margin-bottom: 1rem;
  padding: 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__icon {
  font-size: 1.5rem;
  color: var(--ifm-color-primary);
  margin-bottom: 0.5rem;
  display: block;
  text-align: center;
}

.card__link {
  margin-top: auto;
  padding: 0.75rem 1rem;
  text-align: center;
  background-color: rgba(123, 104, 238, 0.05);
  color: var(--ifm-color-primary);
  font-weight: 600;
  font-size: 0.85rem;
  border-top: 1px solid rgba(123, 104, 238, 0.1);
  transition: background-color 0.2s ease;
  text-decoration: none !important;
}

.card__link:hover {
  background-color: rgba(123, 104, 238, 0.15);
  color: var(--ifm-color-primary-dark);
}

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.card .card__body .text--truncate,
.card__header .text--truncate,
.card .text--truncate {
  overflow: visible !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-overflow: clip !important;
  display: block !important;
}



.row > .col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Колонки статьи: min-width: 0 — в module DocItem/Layout; здесь только общий overflow */
.theme-doc-markdown,
.docItemContainer,
.docItemContainer article {
  min-width: 0;
  max-width: 100%;
}

@media screen and (min-width: 1200px) {
  :root {
    --it-doc-toc-width: clamp(12rem, 16vw, 22rem);
  }
}

.col--span-3, .col--span-4, .col--span-6 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* ============================================================================
   9. АДАПТИВНОСТЬ
   ============================================================================ */

@media (max-width: 996px) {
  .hero__title {
    font-size: 2.5rem;
  }
  
  .hero__subtitle {
    font-size: 1.1rem;
  }

  .card-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 2rem 0;
  }
  
  .hero__title {
    font-size: 2rem;
  }
  
  .feature-card {
    padding: 1.5rem;
  }

  .card {
    border-radius: 10px;
  }
  
  .card__title {
    font-size: 1.05rem;
  }
  
  .card__description {
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 576px) {
  .card-list {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ============================================================================
   10. ФУТЕР И ДРУГИЕ ЭЛЕМЕНТЫ
   ============================================================================ */

/* Footer — см. site-chrome.css */

.theme-admonition,
details,
.theme-doc-footer,
.theme-last-updated {
  background: var(--ifm-card-background-color) !important;
}

.docMainContainer,
.theme-doc-markdown,
.theme-doc-sidebar-container,
.theme-doc-sidebar-menu,
.theme-doc-sidebar-item-link,
.theme-doc-breadcrumb,
.row,
.col {
  background: transparent !important;
}

.theme-doc-sidebar-container,
.theme-doc-sidebar-menu,
.theme-doc-sidebar-item-category > div,
.theme-doc-sidebar-item-link,
.theme-doc-toc-desktop,
.theme-doc-toc-mobile {
  background: var(--ifm-sidebar-background-color) !important;
}

/* ============================================================================
   СТАТЬИ · Docs Prime (см. article-docs-prime.css)
   ============================================================================ */

/* Блоки кода в статьях — тонкая рамка вместо legacy 5px */
.theme-doc-markdown .prism-code,
.theme-doc-markdown pre[class*='language-'] {
  border-width: 1px !important;
}

/* ============================================================================
   PDF-экспорт и печать статей
   ============================================================================ */

/* Контейнер для PDF: полная непрозрачность обязательна для html2canvas */
.article-pdf-export-root {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100001;
  box-sizing: border-box;
  width: 794px;
  max-width: 100vw;
  min-height: 200px;
  max-height: 95vh;
  padding: 24px 32px 48px;
  overflow: auto;
  background: #ffffff !important;
  color: #1a1a1a !important;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 11pt;
  line-height: 1.55;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

body.pdf-export-busy::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.pdf-export-snapshot,
.pdf-export-snapshot * {
  opacity: 1 !important;
  visibility: visible !important;
}

.pdf-export-snapshot *::before,
.pdf-export-snapshot *::after {
  display: none !important;
  content: none !important;
}

.article-pdf-export-root * {
  box-sizing: border-box;
}

.pdf-export-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #7b68ee;
}

.pdf-export-title {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2c3e50;
}

.pdf-export-meta {
  margin: 0;
  font-size: 0.75rem;
  color: #5a6c7d;
  word-break: break-all;
}

.pdf-export-body {
  width: 100%;
}

.pdf-export-body img,
.pdf-export-body svg {
  max-width: 100% !important;
  height: auto !important;
}

.pdf-export-body h1,
.pdf-export-body h2,
.pdf-export-body h3,
.pdf-export-body h4,
.pdf-export-body p,
.pdf-export-body li,
.pdf-export-body td,
.pdf-export-body th {
  color: #2c3e50 !important;
}

.pdf-export-body pre,
.pdf-export-body code {
  white-space: pre-wrap !important;
  word-break: break-word;
}

.pdf-export-demo-placeholder {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-style: italic;
  color: #5a6c7d;
  border-left: 3px solid #7b68ee;
  background: #f5f3ff;
}

@media print {
  .navbar,
  .theme-doc-sidebar-container,
  .theme-doc-toc-desktop,
  .theme-doc-toc-mobile,
  .pagination-nav,
  .theme-doc-footer,
  .theme-back-to-top-button,
  .chapterProgress,
  .docSidebarCol,
  .article-pdf-toolbar,
  .it-demo,
  footer.footer {
    display: none !important;
  }

  .main-wrapper,
  .container,
  .row,
  .col,
  .docItemCol,
  .docItemContainer,
  .theme-doc-markdown {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .theme-doc-markdown {
    font-size: 11pt;
  }

  .theme-doc-markdown h1 {
    font-size: 18pt;
    page-break-after: avoid;
  }

  .theme-doc-markdown h2,
  .theme-doc-markdown h3 {
    page-break-after: avoid;
  }

  .theme-doc-markdown pre,
  .theme-doc-markdown table,
  .theme-doc-markdown img {
    page-break-inside: avoid;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }

  a[href^='#']::after {
    content: '';
  }
}

/* Перекрёстные ссылки [[термин]] в статьях */
.theme-doc-markdown a.wiki-link {
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
}

.theme-doc-markdown a.wiki-link--glossary {
  color: #2e7d6e;
}

.theme-doc-markdown a.wiki-link--encyclopedia {
  color: var(--ifm-color-primary);
}

[data-theme='dark'] .theme-doc-markdown a.wiki-link--glossary {
  color: #6ecfba;
}