/* Тёмная тема: переключатель добавляет атрибут data-theme="dark" на <html> */
:root {
  --ki-border: #e0e0e0;
  --ki-zebra: #f9f9f9;
  --ki-soft: #f8f9fa;
  --ki-hover: #eef1f4;
  --ki-success-bg: #e8f5e9;
  --ki-info-bg: #eaf2fb;
  --ki-info-border: #bcd4ee;
  --ki-disabled: #c8ccd0;
}

html[data-theme="dark"] {
  --ki-bg: #14171c;
  --ki-panel: #1e232b;
  --ki-text: #dfe5ec;
  --ki-accent: #0c1016;
  --ki-success: #2ecc71;
  --ki-danger: #e74c3c;
  --ki-secondary: #98a3b0;
  --ki-new: #5dade2;
  --ki-border: #39414d;
  --ki-zebra: #232a34;
  --ki-soft: #242b35;
  --ki-hover: #2c3542;
  --ki-success-bg: #14321f;
  --ki-info-bg: #16263a;
  --ki-info-border: #2f4a63;
  --ki-disabled: #3a4148;
}

/* Цвет текста заголовков и акцентов на тёмном фоне */
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .version-title,
html[data-theme="dark"] .feature-card strong,
html[data-theme="dark"] .conv-results td.value,
html[data-theme="dark"] .in-dev-box strong,
html[data-theme="dark"] .faq-q {
  color: var(--ki-text);
}

/* Ссылки-разделы на карте сайта в тёмной теме */
html[data-theme="dark"] ul.sitemap a { color: var(--ki-text); }

/* Формы: тёмный фон и светлый текст */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #1f2530;
  color: #e6e8ec;
  border-color: #39414d;
}

/* Скроллбары и системные элементы в тёмной теме */
html[data-theme="dark"] { color-scheme: dark; }

/* Кнопка переключателя темы в меню */
.theme-toggle {
  position: sticky;
  right: 0;
  flex-shrink: 0;
  z-index: 5;
  border: none;
  background: var(--ki-accent, #2c3e50);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.7rem 0.5rem;
  border-radius: 4px;
  line-height: 1;
  transition: filter 0.2s;
}
.theme-toggle:hover { filter: brightness(1.35); }

/* Хлебные крошки */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--ki-secondary);
  margin: 0 0 1rem 0;
  padding: 0.4rem 0;
}
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before {
  content: "›";
  color: var(--ki-secondary);
  margin-right: 0.35rem;
}
.breadcrumbs a {
  color: var(--ki-new);
  text-decoration: none;
  font-weight: 600;
}
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] {
  color: var(--ki-text);
  font-weight: 600;
}