/* ========== ТЕМА 1: ТЁМНАЯ (КОНСОЛЬ) - ПО УМОЛЧАНИЮ ========== */
:root {
  --bg-color: #000000;
  --text-color: #00c800;
  --heading-color: #008802;
  --link-color: #e0af00;
  --border-color: #00c800;
  --spoiler-header-bg: #000000;
  --spoiler-header-hover: #111111;
  --spoiler-content-bg: #050505;
  --tooltip-bg: #000000;
  --tooltip-border: #00c800;
  --tooltip-close: #e0af00;
  --table-header-bg: #0a0a0a;
  --table-header-color: #e0af00;
  --table-row-alt: #0a0a0a;
  --marker-color: #00c800;
  --marker-ol: #e0af00;
}

/* ========== ТЕМА 2: СВЕТЛАЯ (ПЕРГАМЕНТ) ========== */
body.theme-light {
  --bg-color: #f0efdc;
  --text-color: #0e2018;
  --heading-color: #2a5a3a;
  --link-color: #b25b00;
  --border-color: #8ba88b;
  --spoiler-header-bg: #e8e6d0;
  --spoiler-header-hover: #dddac0;
  --spoiler-content-bg: #f5f4e4;
  --tooltip-bg: #f9f8ec;
  --tooltip-border: #8ba88b;
  --tooltip-close: #b25b00;
  --table-header-bg: #e0ddc0;
  --table-header-color: #1a3b2b;
  --table-row-alt: #e8e6d0;
  --marker-color: #2a5a3a;
  --marker-ol: #b25b00;
}

/* ========== ТЕМА 3: ЯНТАРНАЯ (СТАРЫЙ ТЕРМИНАЛ) ========== */
body.theme-amber {
  --bg-color: #212121;
  --text-color: #e7deb1;
  --heading-color: #c59700;
  --link-color: #e0af00;
  --border-color: #e0af00;
  --spoiler-header-bg: #000000;
  --spoiler-header-hover: #111111;
  --spoiler-content-bg: #050505;
  --tooltip-bg: #000000;
  --tooltip-border: #e0af00;
  --tooltip-close: #e0af00;
  --table-header-bg: #0a0a0a;
  --table-header-color: #e0af00;
  --table-row-alt: #0a0a0a;
  --marker-color: #e0af00;
  --marker-ol: #e0af00;
}

body.theme-tzinch {
  --bg-color:             #060d1c;
  --text-color:           #d8d8cb;
  --heading-color:        #c8961e;
  --link-color:           #f0c040;
  --border-color:         #7a5a10;
  --spoiler-header-bg:    #08111f;
  --spoiler-header-hover: #0e1e3a;
  --spoiler-content-bg:   #05090f;
  --tooltip-bg:           #080f1e;
  --tooltip-border:       #c8961e;
  --tooltip-close:        #f0c040;
  --table-header-bg:      #0a1628;
  --table-header-color:   #f0c040;
  --table-row-alt:        #08111f;
  --marker-color:         #2e60b8;
  --marker-ol:            #c8961e;
  --text-main:    #d4c07a;
  --text-dim:     #7a6830;
  --main-color:         #c8961e;
  --second-color:   #1c3a70;
  --second-bright:  #2e60b8;
  --main-bright:  #f0c040;
  --second-glow:    rgba(46,96,184,0.55);
  --second-glow-s:  rgba(46,96,184,0.18);
  --main-glow:    rgba(200,150,30,0.55);
  --main-glow-s:  rgba(200,150,30,0.18);
}

body.theme-slaanesh {
  --bg-color:           #120D12;
  --text-color:         #D8CBD3;
  --heading-color:      #8E1F4F;
  --link-color:         #B03366;
  --border-color:       #452035;
  --spoiler-header-bg:  #19121A;
  --spoiler-header-hover: #241925;
  --spoiler-content-bg: #0E090F;
  --tooltip-bg:         #171017;
  --tooltip-border:     #5E2949;
  --tooltip-close:      #B03366;
  --table-header-bg:    #1B141D;
  --table-header-color: #C2487C;
  --table-row-alt:      #140F15;
  --marker-color:       #7A123D;
  --marker-ol:          #C2487C;
  --text-main:          #e8d0e0;
  --text-dim:           #7a4a6a;
  --main-color:         #8E1F4F;
  --main-bright:        #C2487C;
  --main-glow:          rgba(194,72,124,0.55);
  --main-glow-s:        rgba(194,72,124,0.18);
  --second-color:       #3d1a5c; 
  --second-bright:      #7a38b8;
  --second-glow:        rgba(122,56,184,0.55);
  --second-glow-s:      rgba(122,56,184,0.18);
}

body.theme-mechanicus {
  --bg-color: #1a0f0c;
  --text-color: #c9b997;
  --heading-color: #941313;
  --link-color: #d43f1a;
  --border-color: #8b3a2b;
  --spoiler-header-bg: #120c0a;
  --spoiler-header-hover: #1f1310;
  --spoiler-content-bg: #0f0a08;
  --tooltip-bg: #0d0808;
  --tooltip-border: #b54a2a;
  --tooltip-close: #d43f1a;
  --table-header-bg: #1a0f0c;
  --table-header-color: #e35f21;
  --table-row-alt: #120b09;
  --marker-color: #c97142;
  --marker-ol: #d43f1a;
}

/* ========== ТЕМА 7: МАЛАЛ (ЧЁРНО-БЕЛЫЙ РАСКОЛ) ========== */
body.theme-malal {
  --bg-color: #070809;
  --text-color: #E8E6DF;
  --heading-color: #F7F7F3;
  --link-color: #A8323A;
  --border-color: #555B5F;
  --spoiler-header-bg: #151719;
  --spoiler-header-hover: #353A3D;
  --spoiler-content-bg: #151719;
  --tooltip-bg: #151719;
  --tooltip-border: #57171A;
  --tooltip-close: #F7F7F3;
  --table-header-bg: #151719;
  --table-header-color: #F7F7F3;
  --table-row-alt: #151719;
  --marker-color: #B8BAB7;
  --marker-ol: #E8E6DF;
}

body.theme-malal .content h1 {
  text-decoration: underline;
  text-decoration-color: #57171A;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
}
/* ----- ОБЩИЕ СТИЛИ (используем переменные) ----- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Courier New', monospace;
  font-size: 18px;
  line-height: 1.5;
  transition: background-color 0.2s, color 0.2s;
}

.content {
  margin-left: 260px;
  padding: 10vh 10vw;
  border-left: 2px solid var(--border-color);
  min-height: 100vh;
  min-width: 0;
  text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  font-weight: bold;
  text-align: left;
}
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }

.content h1,
.content h2,
.content h3 {
  scroll-margin-top: 20px;
}

a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
.term:focus-visible,
.table-scroll:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

/* ----- НАВИГАЦИОННАЯ ПАНЕЛЬ ----- */
.nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background-color: var(--bg-color);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  padding: 20px 10px;
  font-size: 14px;
  z-index: 100;
  transition: transform 0.3s ease, background-color 0.2s, border-color 0.2s;
}
.nav-panel h3 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
  color: var(--heading-color);
}
.toc-list { list-style: none; padding-left: 0; }
.toc-list li { margin: 8px 0; line-height: 1.3; }
.toc-list .toc-h2 { padding-left: 20px; }
.toc-list .toc-h3 { padding-left: 40px; }
.toc-list a { color: var(--text-color); display: inline-block; }
.toc-list a:hover { color: var(--link-color); }
.toc-list a.active { color: var(--link-color); font-weight: bold; }

/* ----- КНОПКИ В БОКОВОЙ ПАНЕЛИ ----- */
.buttons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 0 5px;
}
.theme-toggle { text-align: center; }
.theme-toggle button,
.home-button {
  display: block;
  width: 100%;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
}
.theme-toggle button:hover,
.home-button:hover {
  background-color: var(--border-color);
  color: var(--bg-color);
  text-decoration: none;
}

/* ----- ПОИСК ----- */
input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
  display: none;
}
input[type="search"]::-ms-clear {
  display: none;
}
.search-clear-field {
  position: relative;
  display: block;
  min-width: 0;
}
.search-clear-field > input[type="search"] {
  padding-right: 2.8rem;
}
.search-clear-button {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  padding: 0;
  transform: translateY(-50%);
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--link-color);
  font: 700 1.65rem/1 sans-serif;
  cursor: pointer;
}
.search-clear-button[hidden] {
  display: none;
}
.search-clear-button:hover {
  color: var(--heading-color);
}
.search-clear-button:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: -2px;
}
.search-box {
  margin-top: 20px;
  margin-bottom: 30px;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
}
.search-box input {
  width: 100%;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-family: 'Courier New', monospace;
  padding: 6px;
  font-size: 14px;
}
.search-box input:focus {
  outline: none;
  border-color: var(--link-color);
}
.search-results {
  margin-top: 10px;
  font-size: 12px;
  max-height: 200px;
  overflow-y: auto;
}
.search-results a {
  display: block;
  color: var(--text-color);
  padding: 4px 0;
}
.search-error { color: #c80000; }

/* ----- СПОЙЛЕРЫ ----- */
.spoiler-container {
  margin: 16px 0;
  border-left: 2px solid var(--border-color);
  background-color: var(--bg-color);
}
.spoiler-header {
  display: block;
  width: 100%;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  background-color: var(--spoiler-header-bg);
  color: var(--link-color);
  font-family: 'Courier New', monospace;
  font-size: inherit;
  font-weight: bold;
  text-align: left;
  user-select: none;
}
.spoiler-header:hover { background-color: var(--spoiler-header-hover); }
.spoiler-header::before {
  content: '[>] ';
  color: var(--text-color);
}
.spoiler-container.open .spoiler-header::before { content: '[v] '; }
.spoiler-content {
  display: none;
  padding: 12px;
  border-top: 1px solid var(--border-color);
  background-color: var(--spoiler-content-bg);
}
.spoiler-container.open .spoiler-content { display: block; }

/* ----- ПОДСКАЗКИ ----- */
.term {
  display: inline-block;
  margin: 1px 0;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--link-color) 58%, var(--border-color));
  background: color-mix(in srgb, var(--link-color) 7%, var(--bg-color));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--link-color) 5%, transparent);
  cursor: pointer;
  color: var(--link-color);
  font-size: 0.94em;
  line-height: 1.35;
  text-decoration: none;
  vertical-align: baseline;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.term:hover,
.term:focus-visible,
.term.is-active {
  color: var(--bg-color);
  border-color: var(--link-color);
  background: var(--link-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--link-color) 28%, transparent);
  outline: none;
}
.custom-tooltip {
  --tooltip-arrow-left: 24px;
  position: fixed;
  background-color: var(--tooltip-bg);
  border: 1px solid var(--tooltip-border);
  border-left-width: 3px;
  max-width: min(440px, calc(100vw - 24px));
  min-width: min(260px, calc(100vw - 24px));
  max-height: min(58vh, 460px);
  z-index: 2000;
  font-size: 14px;
  color: var(--text-color);
  box-shadow: 0 16px 42px rgba(0,0,0,0.46), 0 0 18px color-mix(in srgb, var(--tooltip-border) 15%, transparent);
  font-family: 'Courier New', monospace;
  overflow: visible;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(4px) scale(0.985);
  transform-origin: center top;
  transition: opacity 110ms ease, transform 110ms ease;
}
.custom-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.custom-tooltip[data-placement="top"] {
  transform-origin: center bottom;
}
.tooltip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--tooltip-border) 55%, transparent);
  background: color-mix(in srgb, var(--tooltip-border) 8%, var(--tooltip-bg));
}
.tooltip-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.tooltip-eyebrow {
  color: var(--tooltip-border);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.18em;
  line-height: 1.2;
}
.tooltip-eyebrow::before {
  content: '\25C6';
  margin-right: 6px;
}
.tooltip-title {
  color: var(--link-color);
  font-size: 15px;
  line-height: 1.25;
}
.tooltip-text {
  padding: 11px 13px 13px;
  max-height: min(44vh, 360px);
  overflow: auto;
  line-height: 1.5;
  text-align: justify;
  text-wrap: pretty;
  white-space: normal;
  hyphens: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tooltip-border) color-mix(in srgb, var(--tooltip-border) 8%, var(--tooltip-bg));
}
.tooltip-text.is-preformatted {
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.3;
  text-align: left;
  text-wrap: nowrap;
}
.tooltip-text::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
.tooltip-text::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--tooltip-border) 8%, var(--tooltip-bg));
  border-left: 1px solid color-mix(in srgb, var(--tooltip-border) 45%, transparent);
}
.tooltip-text::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 3px solid var(--tooltip-bg);
  background: var(--tooltip-border);
}
.tooltip-text::-webkit-scrollbar-thumb:hover {
  background: var(--link-color);
}
.tooltip-text::-webkit-scrollbar-corner {
  background: var(--tooltip-bg);
}
.tooltip-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--tooltip-border) 55%, transparent);
  background: transparent;
  cursor: pointer;
  color: var(--tooltip-close);
  font-weight: bold;
  font: 20px/1 'Courier New', monospace;
}
.tooltip-close:hover,
.tooltip-close:focus-visible {
  color: var(--tooltip-bg);
  background: var(--tooltip-close);
  outline: none;
}
.custom-tooltip::before {
  content: '';
  position: absolute;
  left: var(--tooltip-arrow-left);
  width: 9px;
  height: 9px;
  background: var(--tooltip-bg);
  border: solid var(--tooltip-border);
  transform: translateX(-50%) rotate(45deg);
}
.custom-tooltip[data-placement="top"]::before {
  bottom: -6px;
  border-width: 0 1px 1px 0;
}
.custom-tooltip[data-placement="bottom"]::before {
  top: -6px;
  border-width: 1px 0 0 1px;
}
@media (max-width: 640px), (pointer: coarse) {
  .custom-tooltip {
    left: 10px !important;
    right: 10px;
    bottom: 10px;
    top: auto !important;
    width: auto;
    max-width: none;
    max-height: 48vh;
    transform-origin: center bottom;
  }
  .custom-tooltip::before { display: none; }
  .custom-tooltip .tooltip-text { max-height: calc(48vh - 58px); }
  .term { padding: 2px 6px; }
}

/* ----- СПИСКИ И ТАБЛИЦЫ (с использованием переменных) ----- */
.content ul, .content ol {
  margin: 12px 0 12px 24px;
  padding-left: 0;
  list-style: none;
}
.content li {
  margin: 6px 0;
  line-height: 1.5;
  position: relative;
  padding-left: 20px;
  word-wrap: break-word;
  white-space: normal;
  text-align: justify;
}
.content ul > li::before {
  content: '|';
  position: absolute;
  left: 0;
  color: var(--marker-color);
}
.content ol {
  counter-reset: list-counter;
}
.content ol > li {
  counter-increment: list-counter;
  padding-left: 28px;
}
.content ol > li::before {
  content: counter(list-counter) '.';
  position: absolute;
  left: 0;
  color: var(--marker-ol);
}
.content ul ul > li::before { content: '>'; color: var(--marker-ol); }
.content ol ol > li::before { content: counter(list-counter) ')'; }

/* ----- АДАПТИВНЫЙ ИНДЕКС ССЫЛОК ----- */
.content.index-page {
  padding-inline: clamp(24px, 5vw, 80px);
}
.index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
  align-items: start;
}
.index-section {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  background-color: var(--spoiler-content-bg);
}
.index-section h2 {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  font-size: 1.2em;
}
.index-section ul {
  margin: 12px 0 0;
}
.index-section li {
  text-align: left;
}
.index-section-wide {
  grid-column: 1 / -1;
}
.index-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 28px;
  margin-top: 16px;
}
.index-subgroup {
  min-width: 0;
}
.index-subgroup h3 {
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--border-color);
  font-size: 1em;
}
.index-subgroup ul {
  margin-top: 8px;
}

.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: 'Courier New', monospace;
  font-size: 0.85em;
}
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--link-color) var(--table-header-bg);
}
.table-scroll > table { min-width: 720px; }

/* Горизонтальная полоса прокрутки широких таблиц */
.table-scroll::-webkit-scrollbar {
  height: 10px;
}
.table-scroll::-webkit-scrollbar-track {
  background-color: var(--table-header-bg);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.table-scroll::-webkit-scrollbar-thumb {
  background-color: var(--link-color);
  border: 2px solid var(--table-header-bg);
  border-radius: 0;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-color);
}
.table-scroll::-webkit-scrollbar-corner {
  background-color: var(--table-header-bg);
}
.content th, .content td {
  border: 1px solid var(--border-color);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
}
.content th {
  background-color: var(--table-header-bg);
  color: var(--table-header-color);
  font-weight: normal;
}
.content tr:nth-child(even) {
  background-color: var(--table-row-alt);
}
.content caption {
  text-align: left;
  margin-bottom: 6px;
  color: var(--heading-color);
  font-size: 0.9em;
}
.content p, .content li, .content td, .content th {
  max-width: 100%;
  word-wrap: break-word;
  white-space: normal;
  hyphens: auto;
}
.content a {
  word-break: break-word;
}

/* ========== СТИЛИЗАЦИЯ СКРОЛЛБАРА (Chrome, Edge) ========== */
.nav-panel::-webkit-scrollbar {
    width: 8px;
}
.nav-panel::-webkit-scrollbar-track {
    background: var(--bg-color);
    border-left: 1px solid var(--border-color);
}
.nav-panel::-webkit-scrollbar-thumb {
    background: var(--text-color);
    border-radius: 0;
}
.nav-panel::-webkit-scrollbar-thumb:hover {
    background: var(--link-color);
}

/* Двухколоночный текст */
.two-columns {
  column-count: 2;
  column-gap: 40px;
  column-rule: 1px solid var(--border-color); /* разделительная линия между колонками */
  text-align: justify;
}

/* Двухколоночный макет для схемы + текст */
.scheme-with-text {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin: 20px 0;
  align-items: flex-start;
}
.scheme-left {
  flex: 2;
  min-width: 280px;
}
.text-right {
  flex: 6;
  min-width: 200px;
  border-left: 1px solid var(--border-color);
  padding-left: 20px;
}

/* Выделение ячеек таблицы */
.highlight-cell {
  background-color: var(--heading-color);
  color: var(--bg-color);
  font-weight: bold;
  border-color: var(--border-color);
}
.highlight-bg {
  background-color: var(--link-color);
  color: inherit;
}
.critical-cell {
  background-color: var(--link-color);
  color: var(--bg-color);
  border: 2px solid var(--border-color);
  font-weight: bold;
}

/* ========== ТАБЛИЦЫ С ФИКСИРОВАННОЙ ШИРИНОЙ (ДЛЯ СТАТБЛОКОВ) ========== */
.fixed-table {
  table-layout: fixed;
  width: 100%;
  margin: 20px 0;
}

.fixed-table tbody tr:first-child td,
.fixed-table tbody tr:first-child th,
.fixed-table tbody tr:nth-child(2) td,
.fixed-table tbody tr:nth-child(2) th {
  text-align: center;
}

.fixed-table th,
.fixed-table tbody tr:first-child td {
  text-align: center;
}

/* Пример распределения ширины для 2, 3, 4 колонок */
.fixed-table.cols-2 th:first-child,
.fixed-table.cols-2 td:first-child { width: 40%; }
.fixed-table.cols-2 th:last-child,
.fixed-table.cols-2 td:last-child { width: 60%; }

.fixed-table.cols-3 th:nth-child(1),
.fixed-table.cols-3 td:nth-child(1) { width: 30%; }
.fixed-table.cols-3 th:nth-child(2),
.fixed-table.cols-3 td:nth-child(2) { width: 30%; }
.fixed-table.cols-3 th:nth-child(3),
.fixed-table.cols-3 td:nth-child(3) { width: 40%; }

.fixed-table.cols-4 th,
.fixed-table.cols-4 td { width: 25%; }

/* Статблок персонажа/врага */
.statblock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0;
  font-family: 'Courier New', monospace;
}

.stat-cell {
  border: 1px solid var(--border-color);
  padding: 8px;
  text-align: center;
  background-color: var(--bg-color);
}

.stat-label {
  font-weight: bold;
  color: var(--link-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 5px;
  padding-bottom: 3px;
}

.stat-value {
  font-size: 1.2em;
  color: var(--text-color);
}

/* ========== КНОПКА СКРЫТИЯ ПАНЕЛИ ========== */
.toggle-nav-btn {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1001;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  color: var(--link-color);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 3px;
}
.toggle-nav-btn:hover {
  background-color: var(--border-color);
  color: var(--bg-color);
}

/* Свёрнутая панель */
.nav-panel.collapsed {
  transform: translateX(-100%);
}

/* Основной контент при свёрнутой панели */
body.nav-collapsed .content {
  margin-left: 0;
}

/* Анимация */
.content { transition: margin-left 0.3s ease; }

/* Кнопка при свёрнутой панели — чуть сдвигаем, чтобы не висела в пустоте */
body.nav-collapsed .toggle-nav-btn {
  left: 10px;
  background: var(--bg-color);
  border-color: var(--border-color);
}

/* Адаптивные изображения */
.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border: 2px solid var(--border-color);
  padding: 4px;
  background-color: var(--bg-color);
}

/* Стилизация изображений под консоль */
.content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border: 2px solid var(--border-color);
  padding: 4px;
  background-color: var(--bg-color);
  filter: grayscale(20%) contrast(120%);      /* стандарт */
  image-rendering: -webkit-optimize-contrast; /* для Chrome/Safari/Edge */
}

/* Эффект свечения (как у старого ЭЛТ-монитора) */
.content img:hover {
  box-shadow: 0 0 8px var(--link-color);
  border-color: var(--link-color);
}

/* ========== МОБИЛЬНАЯ ВЕРСИЯ ========== */
@media (max-width: 1200px) {
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  body { font-size: 16px; }

  .nav-panel {
    width: min(260px, calc(100vw - 48px));
    box-shadow: 8px 0 20px rgba(0, 0, 0, 0.45);
  }

  .content,
  body.nav-collapsed .content {
    margin-left: 0;
    padding: 64px 18px 40px;
    border-left: 0;
  }

  .index-grid { grid-template-columns: 1fr; }
  .index-section { padding: 16px; }

  h1 { font-size: 1.65em; }
  h2 { font-size: 1.4em; }
  h3 { font-size: 1.2em; }

  .two-columns {
    column-count: 1;
    column-rule: none;
  }

  .scheme-with-text { flex-direction: column; }
  .scheme-left,
  .text-right {
    width: 100%;
    min-width: 0;
  }
  .text-right {
    border-left: 0;
    border-top: 1px solid var(--border-color);
    padding: 15px 0 0;
  }

  .statblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fixed-table { table-layout: auto; }
  .table-scroll > table { min-width: 640px; }

  .content ul,
  .content ol { margin-left: 8px; }
  .content th,
  .content td { padding: 7px 8px; }

  .toggle-nav-btn {
    top: 10px;
    left: 10px;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 420px) {
  .statblock { grid-template-columns: 1fr; }
  .content { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}