/* --- UNIVERSAL VISUAL MATH SYSTEM V3 (GLOBAL) --- */

/* 1. Базовые настройки */
.math-font, .logic-math, .logic-step, .app-table td, .math-inline {
    font-family: "Times New Roman", Times, serif;
    font-variant-numeric: lining-nums;
    line-height: 1.5;
}

/* 2. Атомарные элементы (Расширенный список) */
.var { color: #D946EF; font-style: italic; font-weight: 700; font-family: serif; } /* Переменная (x, y) */
.num { color: #059669; font-family: monospace; font-weight: 600; } /* Число (10, 3.14) */
.const { color: #9333EA; font-weight: 700; } /* Константа (pi, e) */
.func { color: #2563EB; font-weight: 600; font-family: sans-serif; } /* Функция (sin, log) */
.op { color: #64748B; margin: 0 3px; font-weight: 500; } /* Оператор (+, =) */
.unit { color: #475569; font-size: 0.85em; margin-left: 2px; font-family: sans-serif; font-weight: 600; } /* Единицы (kg) */
.text { color: #1E293B; font-family: sans-serif; font-size: 0.9em; font-style: normal; margin: 0 4px; } /* Текст */
.keyword { color: #DC2626; font-weight: bold; font-family: monospace; font-size: 0.9em; } /* Logic (IF) */

/* Новые атомарные элементы */
.diff { color: #2563EB; font-style: normal; font-weight: 500; margin-right: 1px; } /* Дифференциал (d, ∂) */
.set { color: #1E293B; font-weight: 900; font-family: serif; letter-spacing: -1px; } /* Множества (R, Z, N) */
.tensor { font-weight: 800; font-family: sans-serif; color: #000; } /* Тензоры/Матрицы (T, A) */
.delim { color: #94A3B8; font-weight: 300; font-size: 1.1em; } /* Разделители ( | ) */
.state { color: #64748B; font-size: 0.75em; vertical-align: sub; font-family: sans-serif; margin-left: 1px; } /* Хим. состояние (g, aq) */
.currency { color: #16A34A; font-weight: 500; margin-right: 1px; } /* Валюта ($, €) */

/* Векторы и украшения */
.vec { display: inline-block; position: relative; text-decoration: none; font-style: italic; font-weight: 700; color: #D946EF; }
.vec::after { content: "→"; position: absolute; top: -0.4em; left: 0; width: 100%; text-align: center; font-size: 0.7em; color: #475569; font-style: normal; }
.bar { text-decoration: overline; }
.hat { position: relative; }
.hat::after { content: "^"; position: absolute; top: -0.5em; left: 0; width: 100%; text-align: center; font-size: 0.8em; color: #475569; }
.dot::after { content: "•"; position: absolute; top: -0.6em; left: 0; width: 100%; text-align: center; font-size: 0.8em; color: #475569; }

/* 3. Контейнеры */
.logic-math {
    display: block;
    background: #F8FAFC;
    padding: 1.5rem;
    border-left: 4px solid var(--primary);
    border-radius: 4px;
    margin: 1.5rem 0;
    overflow-x: auto;
    font-size: 1.2rem;
    color: #334155;
    white-space: nowrap;
}

.math-inline {
    display: inline-block;
    padding: 0 4px;
    background: rgba(241, 245, 249, 0.7);
    border-radius: 4px;
    vertical-align: baseline;
    font-size: 0.95em;
    border: 1px solid rgba(0,0,0,0.05);
}

/* 4. Сложные структуры */

/* Дроби */
.math-frac {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    text-align: center;
    margin: 0 4px;
    font-size: 0.9em;
}
.math-frac__top { border-bottom: 1px solid #334155; padding: 0 2px 1px; display: block; }
.math-frac__bottom { padding: 1px 2px 0; display: block; }

/* Корни */
.math-sqrt { white-space: nowrap; display: inline-block; vertical-align: middle; }
.math-sqrt__symbol { font-size: 1.3em; line-height: 1; vertical-align: bottom; font-weight: 300; }
.math-sqrt__content { border-top: 1px solid #334155; padding-top: 1px; display: inline-block; vertical-align: top; }

/* Большие операторы (Limits, Sums, Integrals) */
.math-stack {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    text-align: center;
    margin-right: 4px;
}
.math-stack__symbol { font-size: 1.6em; line-height: 1; color: #475569; font-weight: 400; }
.math-stack__top { font-size: 0.65em; margin-bottom: -4px; color: #64748B; }
.math-stack__bot { font-size: 0.65em; margin-top: -2px; color: #64748B; }

/* Системы уравнений (Cases) */
.math-cases { display: inline-flex; align-items: center; vertical-align: middle; }
.math-cases__brace { font-size: 2.5em; font-weight: 100; margin-right: 5px; line-height: 1; color: #475569; }
.math-cases__content { display: flex; flex-direction: column; gap: 5px; text-align: left; }

/* Матрицы */
.math-matrix {
    display: inline-grid;
    vertical-align: middle;
    gap: 6px 12px;
    padding: 0 8px;
    margin: 0 4px;
    text-align: center;
    position: relative;
}
.matrix-sq { border-left: 2px solid #334155; border-right: 2px solid #334155; border-radius: 4px; }
.matrix-rnd { border-left: 2px solid #334155; border-right: 2px solid #334155; border-radius: 12px; }
.matrix-det { border-left: 2px solid #334155; border-right: 2px solid #334155; }

/* Химия (Изотопы) */
.math-chem { display: inline-flex; vertical-align: middle; align-items: center; }
.math-chem__nums { display: flex; flex-direction: column; text-align: right; font-size: 0.7em; margin-right: 2px; line-height: 1.1; }
.math-chem__element { font-family: sans-serif; font-weight: 700; color: #000; font-size: 1.1em; }

/* 5. Логические шаги */
.logic-steps { list-style: none; padding: 0; counter-reset: step; }
.logic-steps li { position: relative; padding-left: 30px; margin-bottom: 12px; line-height: 1.6; }
.logic-steps li::before { 
    counter-increment: step; content: counter(step); 
    position: absolute; left: 0; top: 0; 
    background: var(--primary); color: #fff; 
    width: 22px; height: 22px; border-radius: 50%; 
    text-align: center; font-size: 0.8em; line-height: 22px; font-weight: bold;
}
.logic-steps .highlight { background: #EEF2FF; color: var(--primary); padding: 1px 5px; border-radius: 4px; font-weight: 600; border: 1px solid #C7D2FE; }

/* --- TABLES (Responsive) --- */
.table-responsive {
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Force scroll on mobile */
    font-size: 0.95rem;
}
th {
    background: #F1F5F9;
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}
td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
tr:last-child td { border-bottom: none; }
tr:hover { background: #FAFAFA; }

/* --- TOOL UI ISOLATION --- */
/* Wrapper for generated inputs */
#tool-root {
    position: relative;
    z-index: 10;
}

/* --- FAQ ACCORDION --- */
/* --- NEO-BRUTALIST FAQ STYLES --- */
:root {
    --nb-border-color: #000000;      /* Цвет границ */
    --nb-shadow-offset: 4px;         /* Размер тени */
    --nb-accent-color: #fffad2;      /* Желтый акцент при открытии (Yellow-200) */
    --nb-bg-color: #ffffff;          /* Фон карточек */
    --nb-text-main: #0f172a;         /* Основной текст */
    --nb-text-muted: #334155;        /* Текст ответа */
}

/* Контейнер списка */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 1.5rem;
}


.faq-item {
    background: var(--nb-bg-color);
    border: 2px solid var(--nb-border-color);
    border-radius: 6px; /* Легкое скругление для современности */
    box-shadow: var(--nb-shadow-offset) var(--nb-shadow-offset) 0 var(--nb-border-color);
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}


.faq-item:hover {
    transform: translate(-1px, -1px);
    box-shadow: calc(var(--nb-shadow-offset) + 1px) calc(var(--nb-shadow-offset) + 1px) 0 var(--nb-border-color);
}


.faq-item.active {
    background: var(--nb-accent-color);
    transform: translate(var(--nb-shadow-offset), var(--nb-shadow-offset));
    box-shadow: 0 0 0 var(--nb-border-color); 
}

/* Кнопка вопроса */
.faq-question {
    width: 100%;
    padding: 18px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Типографика */
    font-family: inherit; /* Наследуем шрифт сайта */
    font-size: 1.1rem;
    font-weight: 800; /* Жирный шрифт - фишка стиля */
    color: var(--nb-text-main);
    line-height: 1.4;
}

/* Иконка справа */
.faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--nb-border-color);
    color: #fff;
    border-radius: 4px;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 15px;
}

/* Поворот иконки при открытии */
.faq-item.active .faq-icon {
    background: var(--nb-text-main); /* Можно сменить цвет при открытии */
}

/* Блок с ответом */
.faq-answer {
    display: none; /* Скрыто по умолчанию */
    padding: 0 24px 24px 24px;
    color: var(--nb-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
    border-top: 2px solid transparent; /* Резерв места под границу */
}

/* Показываем ответ при активном классе */
.faq-item.active .faq-answer {
    display: block;
    border-top-color: rgba(0,0,0,0.1); /* Легкий разделитель внутри */
    margin-top: -5px; /* Визуальная коррекция */
    padding-top: 15px;
    animation: slideInBrutal 0.25s ease-out forwards;
}

/* Анимация появления текста */
@keyframes slideInBrutal {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Адаптивность для мобильных */
@media (max-width: 600px) {
    :root {
        --nb-shadow-offset: 3px; /* Чуть меньше тень на мобильных */
    }
    .faq-question {
        padding: 15px;
        font-size: 1rem;
    }
    .faq-answer {
        padding: 0 15px 20px 15px;
    }
}