/* 
 * Стилизация интерфейса генератора уравнений (Задача 6.2)
 * Соответствие макетам: https://www.figma.com/design/L4MlWHikHgdWCEBarKZQMT
 * node-id: 2019-3231
 */

/* ============================================
   CSS-переменные (цвета, шрифты, отступы)
   ============================================ */
:root {
    /* Цвета */
    --color-primary: #007AFF; /* Синий цвет для активных элементов и основной кнопки */
    --color-primary-hover: #0056CC; /* Темнее для hover */
    --color-primary-active: #004499; /* Еще темнее для active */
    --color-border: #E5E5E5; /* Светло-серая рамка */
    --color-border-active: #D1D1D1; /* Темно-серая рамка для активных кнопок (из макета) */
    --color-text: #000000; /* Основной текст */
    --color-text-secondary: #666666; /* Вторичный текст */
    --color-background: #FFFFFF; /* Белый фон */
    --color-background-radio-group: rgba(0, 0, 0, 0.05); /* Серый фон контейнера segmented button (черный 5%) */
    --color-background-active: #FFFFFF; /* Белый фон для активной кнопки */
    
    /* Шрифты */
    --font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-title: 24px;
    --font-size-button: 16px;
    --font-size-content-title: 18px;
    --font-size-content: 16px;
    --font-size-math-formula: 1.1em; /* Размер математических формул (KaTeX) */
    --font-size-math-formula-button: 1.25em; /* Размер формул в кнопках (увеличен) */
    --font-size-math-variable: 1.4em; /* Размер переменных в тексте (увеличен для лучшей читаемости) */
    --font-weight-title: 600;
    --font-weight-button: 500;
    --font-weight-content-title: 600;
    
    /* Отступы */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Размеры */
    --button-height: 44px;
    --button-padding-horizontal: 20px;
    --button-border-radius: 16px; /* Внутреннее скругление кнопки (из макета) */
    --radio-group-border-radius: 24px; /* Внешнее скругление контейнера группы (из макета) */
    --content-border-radius: 24px; /* Скругление центральной карточки 24px */
    --content-padding: 24px;
    
    /* Тени (если нужны) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Сброс стилей
   ============================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-content);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Скрытие элементов для доступности
   ============================================ */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
    /* Убираем из потока документа, чтобы не влиять на flexbox */
    display: inline !important;
}

/* ============================================
   Основной контейнер приложения
   ============================================ */
.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
    min-height: 100vh;
}

/* ============================================
   Заголовок приложения
   ============================================ */
.app-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.app-title {
    margin: 0;
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-title);
    color: var(--color-text);
    line-height: 1.2;
}

.app-version {
    margin: var(--spacing-xs) 0 0 0;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    line-height: 1.2;
}

/* ============================================
   Блок выбора параметров (Radio Button Groups)
   ============================================ */
.controls-section {
    margin-bottom: var(--spacing-lg);
}

.radio-button-groups {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Группа radio buttons (сегментированный контрол) */
.radio-group {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-background-radio-group); /* Серый фон контейнера (черный 5%) */
    border: none; /* Убрана обводка */
    border-radius: 24px; /* Внешнее скругление контейнера 24px */
    padding: 8px; /* Внутренний отступ контейнера 8px */
    gap: 4px; /* Отступ между кнопками 4px */
}


/* Label для radio button (стилизуется как кнопка в сегментированном контроле) */
.radio-button-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--button-height) - 8px); /* Учитываем padding контейнера */
    min-height: 36px;
    padding: 0 var(--button-padding-horizontal);
    font-family: var(--font-family);
    font-size: 14px; /* Уменьшенный размер шрифта для кнопок */
    font-weight: 500; /* Medium (500) из макета */
    color: var(--color-text);
    background-color: transparent; /* Прозрачный фон по умолчанию */
    border: none; /* Убираем рамку, она на контейнере */
    border-radius: var(--button-border-radius); /* Внутреннее скругление 16px */
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

.radio-button-label:hover {
    background-color: rgba(255, 255, 255, 0.5); /* Белый полупрозрачный hover эффект */
}

.radio-button-label:active {
    transform: scale(0.98);
}

/* Скрытие нативного radio button */
.radio-button-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* Активное состояние radio button */
.radio-button-input:checked + .radio-button-text {
    color: var(--color-text); /* Текст остается черным в активном состоянии */
}

/* Активное состояние label (когда radio checked) - используем :has() для современных браузеров */
.radio-button-label:has(.radio-button-input:checked) {
    background-color: var(--color-background-active); /* Белый фон для активной кнопки */
    /* Рамка только на контейнере, у кнопки рамки нет */
}

/* Fallback для браузеров без поддержки :has() - будет добавлен класс через JavaScript */
.radio-button-label.active {
    background-color: var(--color-background-active); /* Белый фон для активной кнопки */
    /* Рамка только на контейнере, у кнопки рамки нет */
}

/* Disabled состояние для radio button label */
.radio-button-label.disabled,
.radio-button-label:has(.radio-button-input:disabled) {
    color: rgba(0, 0, 0, 0.25); /* Серый текст 25% прозрачности */
    cursor: not-allowed;
    pointer-events: none; /* Блокируем все взаимодействия */
    background-color: transparent; /* Прозрачный фон */
}

/* Disabled input внутри label */
.radio-button-input:disabled {
    cursor: not-allowed;
}

.radio-button-label.active .radio-button-text {
    color: var(--color-text); /* Текст остается черным */
}

/* Focus состояние для доступности */
.radio-button-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--button-border-radius);
}

.radio-button-label:has(.radio-button-input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Текст внутри radio button */
.radio-button-text {
    display: flex; /* Используем flex для лучшего центрирования содержимого */
    align-items: center; /* Центрируем по вертикали */
    line-height: 1.2; /* Умеренное значение для хорошей читаемости */
    pointer-events: none;
    transition: color 0.2s ease;
}

/* ============================================
   Область отображения контента
   ============================================ */
.content-display-section {
    margin-bottom: var(--spacing-xl);
    max-width: 760px; /* Максимальная ширина карточки 760px */
    margin: 0 auto var(--spacing-xl) auto; /* Центрирование карточки */
    padding: var(--content-padding);
    background-color: var(--color-background);
    border: 2px solid var(--color-border); /* Толщина обводки 2px */
    border-radius: var(--content-border-radius); /* Скругление 24px */
    box-shadow: none; /* Тень убрана */
}

/* Шапка карточки с переключателем режимов */
.content-header {
    margin-bottom: 40px; /* Отступ между переключателем и контентом (увеличен на 16px) */
    display: flex;
    justify-content: center;
}

/* Segmented control для переключения режимов внутри карточки наследует стили от .radio-group */

.content-display {
    min-height: 60px; /* Минимальная высота уменьшена для компактности */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* Контент прижат к верху вместо центрирования */
    /* Убраны рамка, padding и фон - они теперь на content-display-section */
}

/* Заголовок контента */
.content-title {
    font-size: var(--font-size-content-title);
    font-weight: var(--font-weight-content-title);
    color: var(--color-text);
    margin-bottom: 0; /* Убран отступ для компактности */
    line-height: 1.3;
}

/* Контент уравнения */
.equation-content {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}

/* Секция решения (без верхнего отступа) */
.solution-section {
    margin-top: 0;
}

/* Заголовок "Описание решения" с нижним отступом */
.solution-section .content-title {
    margin-bottom: 24px; /* Увеличенный отступ для визуального разделения */
}

/* Контент решения */
.solution-content {
    font-size: var(--font-size-content);
    color: var(--color-text);
    line-height: 1.4; /* Уменьшена для компактности */
}

.solution-content p {
    margin-bottom: var(--spacing-sm);
}

/* Wrapper для ответа (flexbox для горизонтальной компоновки, аналогично task-content-wrapper) */
.answer-wrapper {
    display: flex;
    flex-direction: row;
    align-items: baseline; /* Выравнивание по базовой линии текста */
    gap: 16px; /* Отступ между текстом "Ответ:" и формулой */
    flex-wrap: nowrap;
    margin-top: var(--spacing-sm); /* Отступ перед ответом */
}

.answer-label {
    font-weight: var(--font-weight-content-title);
    font-size: var(--font-size-content-title);
    line-height: 1.3; /* Как у .content-title */
    margin-bottom: 0;
    flex-shrink: 0; /* Текст "Ответ:" не сжимается */
    display: inline-block; /* Для корректного baseline */
}

/* Математическая формула в ответе (аналогично solution-step-equation) */
.answer-math {
    flex-shrink: 0; /* Формула не сжимается */
    margin: 0;
    line-height: 1; /* Минимальная высота строки, дроби управляют высотой */
    text-align: left; /* Выравнивание влево на десктопе */
}

/* KaTeX display режим в ответе */
.answer-math .katex-display {
    margin: 0; /* Убираем отступы, используются через flex gap */
    text-align: left; /* Выравнивание влево вместо центра */
}

/* Математические переменные в тексте описания (крупнее обычных формул для читаемости) */
.math-variable {
    display: inline;
    font-size: var(--font-size-math-variable);
    vertical-align: baseline; /* Выравниваем по базовой линии текста */
}

/* Специфичное правило для элемента с комбинацией классов math-variable katex-rendered katex-inline */
.math-variable.katex-rendered.katex-inline {
    display: inline !important;
    vertical-align: baseline !important; /* Выравниваем по базовой линии (нижней, а не верхней) */
    line-height: 1 !important;
}

.math-variable .katex {
    display: inline !important;
    vertical-align: baseline !important; /* Принудительное выравнивание KaTeX по базовой линии */
    line-height: 0 !important; /* Убираем line-height, который может сдвигать */
}

.math-variable .katex-inline {
    display: inline !important;
    vertical-align: baseline !important; /* Принудительное выравнивание вложенных элементов */
}

.math-variable .katex .base {
    vertical-align: baseline !important; /* Выравниваем внутренний base элемент KaTeX */
}

/* ============================================
   Шаги решения (Задача 6.6: Отображение сгенерированного уравнения)
   ============================================ */
.solution-step {
    margin-bottom: var(--spacing-sm); /* Уменьшен отступ между шагами с 16px до 8px */
}

.solution-step:last-child {
    margin-bottom: 0;
}

/* Wrapper для описания и уравнения (flexbox для горизонтальной компоновки) */
.solution-step-content {
    display: flex;
    flex-direction: row;
    align-items: baseline; /* Выравнивание по базовой линии текста */
    gap: 16px; /* Отступ между описанием и формулой */
    flex-wrap: nowrap;
}

.solution-step-description {
    font-size: var(--font-size-content);
    color: var(--color-text);
    line-height: 1.4; /* Уменьшена высота строки для компактности */
    margin-bottom: 0; /* Убираем отступ, используем gap во wrapper */
    flex-shrink: 1; /* Текст может сжиматься */
}

.solution-step-equation {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text);
    margin: 0; /* Убираем отступы, используем gap во wrapper */
    line-height: 1; /* Минимальная высота строки, чтобы дроби управляли высотой */
    flex-shrink: 0; /* Формула не сжимается */
    text-align: left; /* Выравнивание влево на десктопе */
}

.solution-step-explanation {
    font-size: var(--font-size-content);
    color: var(--color-text-secondary);
    font-style: italic;
    margin-left: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    line-height: 1.5;
}

/* Пустое состояние */
.empty-state-message {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-content);
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
}

/* ============================================
   Состояние загрузки (Задача 6.9)
   ============================================ */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) 0;
    min-height: 200px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: var(--spacing-md);
}

.loading-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-content);
    text-align: center;
}

/* ============================================
   Сообщения об ошибках (Задача 6.9)
   ============================================ */
.error-message {
    padding: var(--spacing-md) 0;
}

.error-message-text {
    color: var(--color-text);
    font-size: var(--font-size-content);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.error-hint {
    color: var(--color-text-secondary);
    font-size: 14px;
    margin-top: var(--spacing-md);
    line-height: 1.5;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border-left: 3px solid var(--color-primary);
}

/* ============================================
   Кнопки действий
   ============================================ */
.actions-section {
    margin-bottom: var(--spacing-lg);
}

.actions-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: stretch;
    max-width: 760px; /* Максимальная ширина 760px, как у карточки */
    margin: 0 auto; /* Центрирование блока */
    flex-wrap: nowrap; /* Кнопки всегда в одну строку */
}

/* Базовая стилизация кнопок действий */
.action-button {
    flex: 1; /* Кнопки растягиваются и имеют одинаковый размер */
    height: var(--button-height);
    padding: 0 var(--button-padding-horizontal);
    font-family: var(--font-family);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-button);
    border-radius: var(--button-border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    border: 1px solid transparent;
}

.action-button:disabled {
    background-color: rgba(0, 0, 0, 0.03); /* Серый фон 3% */
    color: rgba(0, 0, 0, 0.25); /* Серый текст 25% */
    border-color: rgba(0, 0, 0, 0.03); /* Серый border 3% */
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1; /* Убираем opacity, используем конкретные цвета */
}

.action-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Кнопка генерации (белая с синей рамкой) */
.action-button--generate {
    background-color: var(--color-background);
    border: 2px solid rgba(0, 122, 255, 0.75); /* Толщина обводки 2px, прозрачность 75% */
    color: var(--color-primary);
}

.action-button--generate:hover:not(:disabled) {
    background-color: rgba(0, 122, 255, 0.05); /* Легкий синий фон 5% при hover */
    border-color: rgba(0, 86, 204, 0.75); /* Прозрачность 75% для hover */
    color: var(--color-primary-hover);
}

.action-button--generate:active:not(:disabled) {
    transform: scale(0.98);
    background-color: var(--color-background-active);
}

/* Кнопка скачивания PDF (синяя) */
.action-button--download {
    background-color: var(--color-primary);
    border: none; /* Убрана обводка у кнопки с заливкой */
    color: var(--color-background);
}

.action-button--download:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.action-button--download:active:not(:disabled) {
    transform: scale(0.98);
    background-color: var(--color-primary-active);
}

/* Иконки в кнопках */
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.button-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.button-text {
    line-height: 1;
}

/* ============================================
   Адаптивность (базовая)
   ============================================ */
@media (max-width: 768px) {
    .app-container {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .radio-button-groups {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* Обычные группы (уровень сложности) - растягиваются */
    .radio-group:not(.radio-group--equation-type):not(.radio-group--view-mode) {
        width: 100%;
        display: flex; /* Меняем на flex для растягивания кнопок */
    }
    
    /* Группа переключения режимов внутри карточки */
    .radio-group--view-mode {
        width: 100%;
        max-width: none; /* На мобильных растягиваем на всю ширину */
    }
    
    /* Кнопки внутри обычных групп растягиваются на доступную ширину */
    .radio-group:not(.radio-group--equation-type) .radio-button-label {
        flex: 1 1 0; /* Растягиваются равномерно, минимальный размер 0 */
        min-width: 0; /* Позволяет кнопкам сжиматься */
    }
    
    /* Для группы типа уравнения (4 кнопки) - тоже растягиваются равномерно */
    .radio-group--equation-type {
        width: 100%;
        display: flex; /* Меняем на flex для растягивания кнопок */
    }
    
    .radio-group--equation-type .radio-button-label {
        flex: 1 1 0; /* Растягиваются равномерно, как и в других группах */
        min-width: 0; /* Позволяет кнопкам сжиматься */
    }
    
    /* На очень маленьких экранах уменьшаем padding кнопок типа уравнения */
    @media (max-width: 480px) {
        .radio-group--equation-type .radio-button-label {
            padding: 0 8px; /* Уменьшаем padding для 4 кнопок */
            font-size: 13px;
        }
    }
    
    .actions-buttons {
        flex-direction: column;
    }
    
    .action-button {
        width: 100%;
        height: 56px; /* Увеличенная высота кнопок действий на мобильных */
        min-height: 56px; /* Минимальная высота для гарантии */
    }
}

/* ============================================
   Утилиты для состояний загрузки
   ============================================ */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: var(--spacing-sm);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Стили для математических формул (KaTeX)
   Задача 6.10: Интеграция рендеринга математических формул
   ============================================ */

/* Контейнер для уравнения в режиме задания */
.equation-content.katex-rendered {
    /* KaTeX уже применяет свои стили, дополняем их */
    margin: 0 0 var(--spacing-md) 0; /* Убираем верхний margin для уменьшения отступа от заголовка */
    text-align: left; /* На десктопе выравниваем влево (в одну строку с заголовком) */
}

/* В wrapper контейнере уравнение также выравнивается влево */
.task-content-wrapper .equation-content.katex-rendered {
    margin: 0; /* Убираем все margins в wrapper, используем gap */
    text-align: left;
}

.solution-step-equation.katex-rendered {
    margin: 0; /* Отступы управляются через flex gap */
}

/* Display режим (отдельная строка, центрированная формула) */
.katex-display {
    margin: 0; /* Убираем margin, отступы управляются через flex gap */
    text-align: center;
    font-size: var(--font-size-math-formula);
    min-height: 3em; /* Достаточная высота для дробей в display режиме */
    line-height: 1; /* Минимальная высота, дроби сами определяют размер */
}

/* Inline режим (формула в строке текста) */
.katex-inline {
    display: inline-block;
    margin: 0;
    font-size: var(--font-size-math-formula);
    min-height: 2em; /* Минимальная высота для inline дробей */
    vertical-align: middle;
    line-height: 1; /* Минимальная высота, дроби сами определяют размер */
}

/* Стили для ошибок рендеринга */
.katex-error {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Контейнер для задания с заголовком и уравнением (Задача 6.10 - улучшение компоновки) */
.task-content-wrapper {
    display: flex;
    flex-direction: row; /* На десктопе в одну строку */
    align-items: baseline; /* Выравнивание по базовой линии текста */
    gap: 16px; /* Отступ между заголовком "Решите уравнение:" и уравнением */
    flex-wrap: nowrap; /* Не переносим на десктопе */
}

/* Заголовок задания в одной строке с уравнением */
.task-content-wrapper .content-title {
    margin-bottom: 0;
    white-space: nowrap; /* Заголовок не переносится */
    flex-shrink: 0; /* Заголовок не сжимается */
}

/* Уравнение в одной строке с заголовком */
.task-content-wrapper .equation-content {
    margin: 0; /* Убираем margin, используем gap контейнера */
    text-align: left; /* На десктопе выравниваем влево */
}

/* Улучшаем читаемость формул - ЕДИНЫЙ размер для всех формул (кроме кнопок) */
.katex {
    font-size: var(--font-size-math-formula);
    line-height: 1; /* Минимальная высота, дроби сами определяют нужную высоту */
    min-height: 2em; /* Минимальная высота для размещения дробей */
}

/* Формулы в кнопках (крупнее, но не слишком жирные) */
.radio-button-text .katex {
    font-size: var(--font-size-math-formula-button);
    font-weight: 500; /* Средняя жирность для элегантности */
    line-height: 1.2; /* Соответствует line-height родителя */
    display: inline-flex; /* Flex для внутреннего содержимого */
    align-items: center; /* Центрируем внутреннее содержимое */
}

.radio-button-text .katex-inline {
    font-size: inherit;
    line-height: inherit;
    display: inline-flex;
    align-items: center;
}

/* Адаптивность для формул на мобильных устройствах */
@media (max-width: 768px) {
    :root {
        --font-size-math-formula: 1.15em; /* Золотая середина для формул в основном контенте */
        --font-size-math-formula-button: 1.1em; /* Умеренный размер для кнопок */
        --font-size-math-variable: 1.35em; /* Переменные в тексте (увеличен) */
    }
    
    /* На мобильных устройствах оставляем в строку, но разрешаем перенос */
    .task-content-wrapper {
        flex-wrap: wrap; /* Переносится только если не помещается */
        align-items: baseline; /* Выравнивание по базовой линии */
    }
    
    /* Шаги решения: оставляем в строку, разрешаем перенос */
    .solution-step-content {
        flex-wrap: wrap; /* Переносится только если не помещается */
        align-items: baseline;
    }
    
    .solution-step-equation {
        text-align: left; /* Выравнивание по левому краю */
    }
    
    /* Ответ: оставляем в строку, разрешаем перенос */
    .answer-wrapper {
        flex-wrap: wrap; /* Переносится только если не помещается */
        align-items: baseline;
    }
    
    .answer-math {
        text-align: left; /* Выравнивание по левому краю */
    }
    
    /* Уравнение в задании - выравнивание по левому краю */
    .task-content-wrapper .equation-content {
        text-align: left;
    }
    
    .task-content-wrapper .equation-content.katex-rendered {
        text-align: left; /* На мобильных выравниваем по левому краю */
    }
    
    /* Все display-формулы на мобильных выравниваем по левому краю */
    .katex-display {
        text-align: left;
    }
    
    /* Исключение: формулы в кнопках остаются центрированными */
    .radio-button-text .katex-display,
    .radio-button-text .katex {
        text-align: center;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-math-formula: 1.1em; /* Золотая середина для маленьких мобильных */
        --font-size-math-formula-button: 1.05em; /* Умеренный размер для кнопок */
        --font-size-math-variable: 1.2em; /* Переменные в тексте (увеличен) */
    }
}