/* ============================================================
   ДЕМОНИЧЕСКИЙ СТИЛЬ (демон/адская тема)
   Активируется, когда у <html> есть класс .demon.
   Подключается ПОСЛЕ style.css, поэтому переопределяет его.
   ============================================================ */

/* Плавный переход при переключении темы */
html.demon,
html.demon body,
html.demon .header,
html.demon .hero,
html.demon .features,
html.demon .footer,
html.demon .sidebar,
html.demon .card,
html.demon .btn,
html.demon .logo,
html.demon .main-nav a,
html.demon .sidebar-group a {
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ===== Палитра демонической темы ===== */
html.demon {
  --accent: #ef4444;
  --accent-dark: #b91c1c;
  --accent-light: #401a1a;
  --text: #f5e6e6;
  --text-muted: #a98f8f;
  --bg: #0a0506;
  --card: #160f0f;
  --border: #2e1a1a;
  --code-bg: #100707;
  --code-text: #f7e8e4;
  --code-comment: #a06848;
  --sidebar-bg: #120c0c;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 6px 22px rgba(220, 38, 38, 0.12);
  scrollbar-color: #7f1d1d #0d0707;
}

/* ===== Анимированный фон-«бездна» ===== */
html.demon body {
  background-color: #070304;
  background-image:
    radial-gradient(1100px 750px at 15% 8%,  rgba(220, 38, 38, 0.16), transparent 62%),
    radial-gradient(950px 640px at 85% 42%, rgba(249, 115, 22, 0.11), transparent 58%),
    radial-gradient(800px 560px at 55% 100%, rgba(127, 29, 29, 0.20), transparent 62%);
  background-attachment: fixed;
  animation: demon-bg 26s ease-in-out infinite alternate;
}

@keyframes demon-bg {
  0%   { background-position: 0% 0%,    0% 0%,    0% 0%; }
  100% { background-position: 12% 18%,  -14% 6%,  4% -10%; }
}

/* ===== Выделение и скроллбар ===== */
html.demon ::selection {
  background: rgba(239, 68, 68, 0.55);
  color: #fff;
}

html.demon ::-webkit-scrollbar { width: 12px; height: 12px; }
html.demon ::-webkit-scrollbar-track { background: #0d0707; }
html.demon ::-webkit-scrollbar-thumb {
  background: #7f1d1d;
  border-radius: 6px;
  border: 2px solid #0d0707;
}
html.demon ::-webkit-scrollbar-thumb:hover { background: #991b1b; }

/* ===== Шапка и логотип ===== */
html.demon .header {
  background: rgba(12, 6, 6, 0.92);
  border-bottom: 1px solid #3a1a1a;
  backdrop-filter: blur(6px);
}

html.demon .logo {
  color: #f87171;
  animation: demon-flicker 3.4s ease-in-out infinite;
}

html.demon .logo .logo-ico {
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #170b0b;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.65);
}

html.demon .main-nav a { color: #b98c8c; }
html.demon .main-nav a:hover {
  color: #fda4a4;
  background: rgba(220, 38, 38, 0.22);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}
html.demon .main-nav a.active {
  color: #f87171;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

@keyframes demon-flicker {
  0%, 100% { text-shadow: 0 0 8px rgba(239, 68, 68, 0.45),  0 0 34px rgba(249, 115, 22, 0.22); }
  40%      { text-shadow: 0 0 18px rgba(239, 68, 68, 0.85), 0 0 56px rgba(249, 115, 22, 0.45); }
  60%      { text-shadow: 0 0 6px rgba(239, 68, 68, 0.30),  0 0 26px rgba(249, 115, 22, 0.16); }
}

/* ===== Сайдбар ===== */
html.demon .sidebar {
  background: rgba(18, 12, 12, 0.95);
  border: 1px solid #3a1a1a;
}

html.demon .sidebar-title, html.demon .sidebar-group h4 { color: #8f6b6b; }

html.demon .sidebar-group a { color: #b98c8c; }
html.demon .sidebar-group a:hover {
  color: #fda4a4;
  background: rgba(220, 38, 38, 0.20);
  box-shadow: inset 0 0 14px rgba(239, 68, 68, 0.15);
}

html.demon .sidebar-group a.active {
  color: #f87171;
  background: rgba(220, 38, 38, 0.25);
  border-left-color: #ef4444;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.30);
}

/* ===== Заголовки с «адским» свечением ===== */
html.demon .lesson-header h1,
html.demon .page-title h1,
html.demon .hero h1 {
  animation: demon-flicker 4.5s ease-in-out infinite;
}

html.demon h2 {
  border-top: 1px solid rgba(239, 68, 68, 0.45);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.10), transparent 70%);
  color: #fbe3e3;
}

html.demon .page-title h2 { border: 0; background: none; }

html.demon h3 { color: #f3d3d3; }

html.demon strong { color: #ffecec; }

html.demon .content a {
  color: #f87171;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
}

/* ===== Код — пульсирующее пламя ===== */
html.demon .code-block {
  border: 1px solid rgba(239, 68, 68, 0.35);
  animation: demon-breath 4.5s ease-in-out infinite;
}

@keyframes demon-breath {
  0%, 100% { box-shadow: 0 0 13px rgba(239, 68, 68, 0.16), var(--shadow); }
  50%      { box-shadow: 0 0 30px rgba(239, 68, 68, 0.38), var(--shadow); }
}

html.demon .code-block pre .comment,
html.demon .code-block pre code.comment {
  color: #b0704a;
}

html.demon .comment { color: #996b40; }

html.demon .code-inline,
html.demon code {
  background: rgba(220, 38, 38, 0.16);
  color: #fca5a5;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.30);
}

html.demon .code-block .code-inline,
html.demon .code-block pre code {
  background: transparent;
  color: var(--code-text);
  box-shadow: none;
}

/* ===== Плашки-советы ===== */
html.demon .tip {
  background: rgba(16, 185, 129, 0.09);
  border-color: #10b981;
}
html.demon .tip::before { color: #34d399; }

html.demon .note {
  background: rgba(59, 130, 246, 0.09);
  border-color: #3b82f6;
}
html.demon .note::before { color: #60a5fa; }

html.demon .warning {
  background: rgba(245, 158, 11, 0.10);
  border-color: #f59e0b;
}
html.demon .warning::before { color: #fbbf24; }

/* ===== Таблицы ===== */
html.demon .data-table th {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
  color: #ffe0e0;
}
html.demon .data-table tr:nth-child(even) { background: #1d1212; }
html.demon .data-table td { border-bottom-color: #2e1a1a; }
html.demon .data-table td:first-child { color: #f87171; }

/* ===== Поиск ===== */
html.demon .search-box input {
  background: #16100f;
  color: #f5e6e6;
  border-color: #3a2020;
}
html.demon .search-box input:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}
html.demon #no-results { color: #a98f8f; }

/* ===== Главная: секции ===== */
html.demon .hero {
  background:
    radial-gradient(800px 520px at 28% 18%, rgba(239, 68, 68, 0.32), transparent 60%),
    radial-gradient(720px 460px at 78% 82%, rgba(249, 115, 22, 0.25), transparent 60%),
    linear-gradient(160deg, #190505, #2b0808 55%, #110303);
  animation: demon-hero 15s ease-in-out infinite alternate;
}

@keyframes demon-hero {
  from { background-position: 0% 0%, 0% 0%, 0% 0%; }
  to   { background-position: 12% -10%, -9% 10%, 0% 0%; }
}

html.demon .features { background: #120b0b; border-top-color: #2e1a1a; }
html.demon .feature span, html.demon .feature p { color: #a98f8f; }

html.demon .about-site { background: #120b0b; border-top-color: #2e1a1a; }
html.demon .about-site h2 {
  color: #f3d3d3;
  background: none;
  border: 0;
}
html.demon .about-site p { color: #a98f8f; }
html.demon .about-site strong { color: #f87171; }

/* ===== Карточки ===== */
html.demon .card {
  background: linear-gradient(180deg, #1a1010, #120b0b);
  border-color: #2e1a1a;
}

html.demon .card:hover {
  border-color: #ef4444;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.32), 0 12px 32px rgba(0, 0, 0, 0.55);
}

html.demon .card p { color: #a98f8f; }
html.demon .card .card-meta { color: #f87171; }

/* затемнённые «фирменные» цвета иконок карточек */
html.demon .bg-blue   { background: #1e2b4a; }
html.demon .bg-green  { background: #13331f; }
html.demon .bg-purple { background: #2a1e3d; }
html.demon .bg-amber  { background: #3a2c0e; }
html.demon .bg-red    { background: #4a1111; }
html.demon .bg-cyan   { background: #0f2f38; }
html.demon .bg-orange { background: #3d2408; }

/* ===== Кнопки — раскалённая лава ===== */
html.demon .btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c 60%, #f97316);
  color: #ffe7e7;
  animation: demon-glow-pulse 3s ease-in-out infinite;
}

html.demon .btn:hover {
  background: linear-gradient(135deg, #ef4444, #b91c1c 60%, #f97316);
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.85);
}

@keyframes demon-glow-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.45); }
  50%      { box-shadow: 0 0 24px rgba(239, 68, 68, 0.90); }
}

html.demon .btn-outline {
  background: transparent;
  color: #f87171;
  border-color: #f87171;
  animation: none;
}
html.demon .btn-outline:hover { background: rgba(239, 68, 68, 0.15); }

/* ===== Значки разделов ===== */
html.demon .badge {
  background: #401a1a;
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* ===== Футер ===== */
html.demon .footer {
  background: #120b0b;
  border-top-color: #2e1a1a;
  color: #a98f8f;
}
html.demon .footer a { color: #f87171; }

/* ===== Кнопка переключения темы в демоническом виде ===== */
html.demon #theme-toggle {
  background: linear-gradient(135deg, #7f1d1d, #1a0a0a);
  border-color: #991b1b;
  color: #f9e3e3;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.45);
  animation: demon-glow-pulse 2.6s ease-in-out infinite;
}
html.demon #theme-toggle:hover { box-shadow: 0 0 30px rgba(239, 68, 68, 0.85); }

/* ===== Мобильные: бургер и выезжающий сайдбар ===== */
html.demon #mobile-overlay {
  background: rgba(0, 0, 0, 0.6);
}

html.demon .mobile-menu-toggle {
  background: #160f0f;
  color: #f87171;
  border-color: #2e1a1a;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}
html.demon .mobile-menu-toggle:hover {
  border-color: #ef4444;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.5);
}

@media (max-width: 900px) {
  html.demon .sidebar {
    box-shadow: 12px 0 34px rgba(0, 0, 0, 0.65);
  }
  html.demon .sidebar-group a.active {
    background: rgba(220, 38, 38, 0.28);
    border-left-color: #ef4444;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
  }
}

/* ===== Уважение к настройке «уменьшить движение» ===== */
@media (prefers-reduced-motion: reduce) {
  html.demon body,
  html.demon .hero,
  html.demon .logo,
  html.demon .lesson-header h1,
  html.demon .page-title h1,
  html.demon .hero h1,
  html.demon .code-block,
  html.demon .btn,
  html.demon #theme-toggle {
    animation: none;
  }
  html.demon .code-block,
  html.demon .btn,
  html.demon #theme-toggle {
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.30);
  }
}