.accordion-body {
    background-color: #22252a; /* Темный тон в цвет заголовков */
    color: #ffffff; /* Белый текст */
    border: 1px solid #00ff00; /* Зеленая неоновая рамка под стиль матрицы */
}

/* ==========================================
   ОБЩАЯ РАМКА АККОРДЕОНА
   ========================================== */
/* Внешняя граница всего блока, подстроенная под зеленую матричную тему */
.converter-item {
  border: 1px solid #20c997 !important; /* Светло-зеленый цвет рамки */
  background: transparent;              /* Прозрачный фон для правильного наложения */
}


/* ==========================================
   1. ЗАГОЛОВОК АККОРДЕОНА (СЕРЫЙ)
   ========================================== */
/* Стили для самой плашки заголовка */
.converter-header {
  background-color: #6c757d !important; /* Серый фон заголовка */
  color: #ffffff !important;           /* Белый цвет текста названия */
}

/* Перекрашивание стандартной стрелочки-галочки Bootstrap в белый цвет */
.converter-header::after {
  filter: invert(1) grayscale(1) brightness(2); /* Делает иконку полностью белой */
}

/* Отмена стандартного синего свечения Bootstrap при клике/фокусе на заголовок */
.converter-header:focus {
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.125);
}


/* ==========================================
   2. ТЕЛО АККОРДЕОНА (БЕЛОЕ)
   ========================================== */
/* Внутреннее пространство, где находятся списки и кнопка */
.converter-body {
  background-color: #ffffff !important; /* Белый фон внутри раскрытого списка */
  color: #212529 !important;           /* Темно-серый цвет для текста подписей (label) */
}


/* ==========================================
   3. ОКНА ВЫБОРА / СЕЛЕКТЫ (СЕРЫЕ С БЕЛЫМ ТЕКСТОМ)
   ========================================== */
/* Стили для закрытого выпадающего списка */
.converter-select {
  background-color: #495057 !important; /* Темно-серый фон самого окна выбора */
  color: #ffffff !important;           /* Белый цвет выбранного текста */
  border-color: #495057 !important;     /* Серый цвет рамки вокруг окна */
}

/* Стили для элементов списка (вариантов формата) при клике и раскрытии */
.converter-select option {
  background-color: #495057;            /* Темно-серый фон внутри выпадающего меню */
  color: #ffffff;                       /* Белый текст названий форматов */
}

/* Поведение окон выбора при клике на них (Фокус) */
.converter-select:focus {
  border-color: #6c757d !important;                             /* Цвет рамки при активном выборе */
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25) !important; /* Легкое серое свечение вокруг */
}


/* ==========================================
   4. ЦЕНТРАЛЬНАЯ КНОПКА ОБМЕНА СТРЕЛОК
   ========================================== */
/* Базовые размеры круглой кнопки, чтобы она была ровным кругом */
.converter-btn-swap {
  width: 50px;                           /* Ширина кнопки */
  height: 50px;                          /* Высота кнопки */
  transition: all 0.2s ease-in-out;      /* Плавная анимация при наведении */
}

/* Эффект при наведении курсора мыши на кнопку со стрелками */
.converter-btn-swap:hover {
  background-color: #6c757d;             /* Заливка кнопки серым цветом при наведении */
  color: #ffffff;                        /* Смена цвета стрелочек на белый */
}