:root {
  /* Навигационная панель */
  --color-nav-bg: #F6F6F6;
  --color-nav-text: #23232C;
  --color-nav-fill: #e5e5e5;
}

/* Базовые стили */
body {
  color: #23232C; /* Цвет текста лого и  */
  background: #FFFFFF; /* Изменить цвет фона всей страницы */
}

/* Навигационная панель */
#nav-bar {
  color: var(--color-nav-text);
  background: var(--color-nav-bg);
}

#nav-bar button {
  color: var(--color-nav-text);
}

#nav-bar svg {
  color: var(--color-nav-text);
}

/* Выпадающая панель оглавления */
#nav-bar .group div a {
  color: var(--color-nav-text);
}

/* Кнопка сердечка */
.heart-btn {
  color: var(--color-nav-text);
  transition: color 0.2s ease;
  position: relative;
  overflow: visible;
}

/* Кнопка сердечка - максимальная специфичность */
#nav-bar .heart-btn.liked,
#heart-btn.liked,
.heart-btn.liked {
  color: #ef4444;
}

/* SVG внутри кнопки сердечка - наследует от родителя */
#nav-bar .heart-btn svg,
#heart-btn svg,
.heart-btn svg {
  color: inherit;
}

#nav-bar .heart-btn.liked svg,
#heart-btn.liked svg,
.heart-btn.liked svg {
  color: inherit;
}

/* Анимация конфетти */
.confetti-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
}

/* Модальное окно */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.modal-content {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  transform: scale(0.8);
}

/* Fade-in и fade-out анимации для выпадающей панели */
.dropdown-fade-in {
  animation: fadeIn 0.2s forwards;
}

.dropdown-fade-out {
  animation: fadeOut 0.2s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Универсальный класс для плавного перехода фона */
.bg-fade {
  transition: background-color 0.25s;
}

.group:hover svg { color: #2AABEE !important; }