/* ================= Стили для Генератора (Неоморфизм, ОБА РЕЖИМА) ================= */

/* --- Переключатель режимов (Диапазон / Список) --- */
.mode-switcher {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    padding: 0.3rem;
    background-color: var(--base-color-depressed);
    box-shadow:
        inset 4px 4px 8px var(--shadow-dark),
        inset -4px -4px 8px var(--shadow-light);
}
.mode-switcher button { /* Стили для НЕактивной кнопки */
    flex-grow: 1;
    padding: 0.75rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color-secondary);
    border-radius: 9px;
    transition: all 0.15s ease-in-out;
}
.mode-switcher button.active { /* Стили для АКТИВНОЙ кнопки */
    background-color: var(--base-color);
    color: var(--accent-color); /* Активный режим - синий */
    box-shadow:
        3px 3px 6px var(--shadow-dark),
        -3px -3px 6px var(--shadow-light);
}

/* Сетка для полей */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Группа опций (чекбоксы) */
.options-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.5rem 0;
    align-items: center;
}

/* Контейнер для чекбокса и тултипа (?) */
.checkbox-with-tooltip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Блок результатов */
#result-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--shadow-dark);
}

/* ========================================================
   === НАЧАЛО: ИСПРАВЛЕНИЕ (Центрируем H2) ===
   ======================================================== */
#result-container h2 {
    text-align: center;
}
/* ========================================================
   === КОНЕЦ: ИСПРАВЛЕНИЕ ===
   ======================================================== */


/* Блок отображения результатов (основа) */
#result-display {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
    padding: 1.5rem;
    background-color: var(--base-color-depressed);
    border-radius: 12px;
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
    max-height: 450px;
    overflow-y: auto;
}

/* Блок с отдельным числом */
.result-number {
    position: relative;
    background-color: var(--base-color);
    border-radius: 12px;
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    font-weight: 700;
    font-size: 1.6rem;
    height: 90px;
    min-width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    box-sizing: border-box;
    white-space: nowrap;
}
.result-index {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .8rem;
    color: var(--text-color);
    font-weight: 600;
    background-color: var(--base-color);
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px var(--shadow-dark), -2px -2px 4px var(--shadow-light);
}

.hidden { display: none; }

/* Метка времени */
.timestamp {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-color-secondary);
    margin-top: 1.5rem;
}

/* --- Переключатель формата (Блоки / Список) --- */
.result-format-switcher { /* Стили как у .mode-switcher */
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    padding: 0.3rem;
    background-color: var(--base-color-depressed);
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}
.result-format-switcher button { /* Стили как у .mode-switcher button */
    flex-grow: 1;
    padding: 0.5rem; /* Чуть меньше */
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-color-secondary);
    border-radius: 9px;
    transition: all 0.15s ease-in-out;
}
.result-format-switcher button.active { /* Стили как у .mode-switcher button.active */
    background-color: var(--base-color);
    color: var(--accent-color);
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
}

/* --- Режим "Список" для результатов --- */
#result-display.list-view {
    display: block; /* Переключаем на блочный */
    text-align: left;
    padding: 1.5rem;
    line-height: 1.8;
    white-space: pre-wrap;
    font-family: monospace;
    overflow-wrap: break-word;
}

/* --- Ссылка для повтора --- */
#result-link {
    cursor: pointer;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-color-secondary);
}

/* Ссылка на лотереи */
.lottery-presets {
    text-align: center;
    margin-top: 1.5rem;
}
.lottery-presets a {
    color: var(--text-color-secondary);
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.lottery-presets a:hover {
    color: var(--accent-color);
    background-color: var(--base-color-depressed);
}

/* --- Настройки для формата "Список" --- */
#list-format-options {
    max-width: 500px;
    margin: 1rem auto;
}

/* Описание результата */
.result-summary {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-color-secondary);
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}


/* === Стили для выравнивания поля "Количество" и кнопки "Очистить" === */
.list-controls-grid {
    display: flex; /* Используем Flexbox */
    align-items: flex-end; /* Выравниваем по нижнему краю */
    gap: 1rem; /* Отступ между полем и кнопкой */
    margin-top: 1rem;
    flex-wrap: wrap; /* Разрешаем перенос на очень маленьких экранах */
}

/* Обертка для поля "Количество" */
.list-count-group {
    flex-grow: 1; /* Позволяем полю занять доступное место */
    min-width: 150px; /* Минимальная ширина, чтобы label не сжимался */
}

/* Ограничиваем ширину самого поля ввода */
.list-count-group input#list-count {
    max-width: 150px; /* Ограничиваем ширину поля */
    width: 100%; /* Но позволяем ему быть меньше, если нужно */
}

/* Обертка для кнопки */
.list-clear-action {
    flex-shrink: 0; /* Запрещаем кнопке сжиматься */
    margin-top: 0; /* Убираем старый отступ */
}


/* ========================================================
   === СТИЛИ ДЛЯ FAQ-АККОРДЕОНА (ДОБАВЛЕНО) ===
   ======================================================== */

/* 1. Стилизуем всю "ячейку" (.faq-item) */
.faq-section .faq-item {
    background-color: var(--base-color);
    border-radius: 12px;
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    transition: all 0.15s ease-in-out;
    /* margin-bottom: 1rem; (уже есть из tool-page.css) */
}

/* 2. Стилизуем заголовок (триггер) */
.faq-section .faq-item h3[itemprop="name"] {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    margin: 0;
    text-align: left;
    font-size: 1.1rem;
    color: var(--text-color);
}

/* 3. Стрелочка (теперь flex-item) */
.faq-section .faq-item h3[itemprop="name"]::after {
    content: ' ▼';
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    display: inline-block;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

/* 4. "Вдавленное" состояние (когда .open) */
.faq-section .faq-item.open {
    background-color: var(--base-color-depressed);
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}

/* 5. Заголовок в "вдавленном" состоянии */
.faq-section .faq-item.open h3[itemprop="name"] {
    color: var(--accent-color);
    padding-bottom: 1rem;
}

/* 6. Стрелка в "вдавленном" состоянии */
.faq-section .faq-item.open h3[itemprop="name"]::after {
    transform: rotate(180deg);
}

/* 7. Контент (ответ) - по умолчанию скрыт */
.faq-section .faq-item div[itemprop="acceptedAnswer"] {
    display: none;
    padding: 0 1.5rem 1.25rem 1.5rem;
}

/* 8. Показываем контент, когда ячейка .open */
.faq-section .faq-item.open div[itemprop="acceptedAnswer"] {
    display: block;
    padding-top: 1rem;
    border-top: 1px solid var(--shadow-dark);
}
/* ========================================================
   === КОНЕЦ: СТИЛИ ДЛЯ FAQ-АККОРДЕОНА ===
   ======================================================== */