/* =========================================
   📘 ПОЛНЫЙ ФАЙЛ СТИЛЕЙ (style.css)
   Каждый блок и свойство подробно расписано.
   Комментарии не влияют на работу сайта.
   ========================================= */

/* =========================================
   1. ГЛОБАЛЬНЫЙ СБРОС И ОСНОВА СТРАНИЦЫ
   ========================================= */
* { 
    margin: 0;                /* Убираем стандартные внешние отступы у всех элементов */
    padding: 0;               /* Убираем стандартные внутренние отступы */
    box-sizing: border-box;   /* Ширина и высота элемента включают padding и border (чтобы вёрстка не "разъезжалась") */
}

body { 
    font-family: 'Segoe UI', sans-serif; /* Шрифт по умолчанию для всей страницы */
    background: #f8f9fa;      /* Светло-серый фон всей страницы */
    min-height: 100vh;        /* Минимальная высота = 100% высоты экрана */
    color: #333;              /* Базовый цвет текста (тёмно-серый) */
}

/* =========================================
   2. ВЕРХНЯЯ ШАПКА САЙТА
   ========================================= */
.top-header { 
    background: white;        /* Белый фон шапки */
    padding: 20px 30px;       /* Внутренние отступы (верх/низ 20px, лево/право 30px) */
    border-bottom: 2px solid #e2e8f0; /* Синяя линия снизу шапки */
    position: fixed;          /* Фиксируем шапку на экране (не скроллится) */
    top: 0; left: 260px; right: 0; /* Прижимаем к верху, отступ слева под меню, растягиваем вправо */
    z-index: 100;             /* Поверх других элементов */
}
/* === ГЛАВНЫЙ ЗАГОЛОВОК (ФИНАЛЬНЫЙ ВАРИАНТ) === */
.header-text {
    font-size: 23px !important;       /* Оптимальный размер */
    font-weight: 700 !important;      /* Жирный, но не экстремально */
    font-style: italic;
    text-align: center;
    margin: 0;
    padding: 10px 20px;               /* Минимум отступов */
    line-height: 1.3;                 /* Компактные строки */
    
    /* РАДУГА */
    background: linear-gradient(90deg, 
        #ef4444 0%, 
        #fb923c 20%, 
        #facc15 40%, 
        #22c55e 60%, 
        #3b82f6 80%, 
        #d52ba2 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    display: block;
    width: 100%;
    /*letter-spacing: 1px; /* <--- ЭТУ СТРОЧКУ ДОБАВИТЬ (раздвигает буквы) */
     /* ЧЁРНАЯ ОКАНТОВКА (вокруг букв) */
    -webkit-text-stroke: 1px black;
    text-stroke: 2px black;
    
    display: block;
    width: 100%;
}

/* =========================================
   3. ОСНОВНАЯ ОБЁРТКА ПРИЛОЖЕНИЯ
   ========================================= */
.app-container { 
    display: flex;            /* Элементы внутри выстраиваются в ряд (меню + контент) */
    min-height: 100vh;        /* Занимает всю высоту экрана */
}

/* =========================================
   4. БОКОВОЕ МЕНЮ (СЛЕВА)
   ========================================= */
.sidebar { 
    width: 260px;             /* Фиксированная ширина меню */
    background: #f0f4f8;      /* Светло-серо-голубой фон */
    padding: 80px 20px 20px 20px; /* Отступ сверху (чтобы не налезло на шапку), остальные по 20px */
    position: fixed;          /* Меню фиксировано слева */
    height: 100vh;            /* Высота на весь экран */
    overflow-y: auto;         /* Если пунктов много, появляется вертикальный скролл */
    border-right: 1px solid #ddd; /* Тонкая серая линия справа (разделитель) */
}

.menu-btn { 
    width: 100%;              /* Кнопка на всю ширину меню */
    padding: 15px;            /* Внутренний отступ */
    margin-bottom: 10px;      /* Отступ снизу между кнопками */
    background: white;        /* Белый фон кнопки */
    border: 2px solid #3498db;/* Синяя рамка толщиной 2px */
    border-radius: 8px;       /* Скругление углов */
    color: #2c3e50;           /* Тёмно-синий цвет текста */
    font-weight: bold;        /* Жирный шрифт */
    font-style: italic;       /* Курсив */
    font-size: 15px;          /* Размер текста */
    text-align: left;         /* Текст прижат влево */
    cursor: pointer;          /* Курсор меняется на "руку" при наведении */
    transition: 0.3s;         /* Плавная анимация смены цвета за 0.3 сек */
}

.menu-btn:hover { 
    background: #3498db;      /* При наведении фон становится синим */
    color: white;             /* Текст становится белым */
}

.menu-btn.active { 
    background: #2980b9;      /* Активная кнопка: тёмно-синий фон */
    color: white;             /* Белый текст */
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3); /* Мягкая синяя тень снизу */
}

/* =========================================
   5. ОСНОВНАЯ ОБЛАСТЬ КОНТЕНТА
   ========================================= */
.main-content { 
    margin-left: 260px;       /* Отступ слева равен ширине меню */
    padding: 90px 40px 40px 40px; /* Отступы: сверху 90px (под шапку), остальные 40px */
    width: calc(100% - 260px);/* Ширина = 100% экрана минус ширина меню */
    max-width: 1000px;        /* Максимальная ширина контента (чтобы на больших экранах не растягивалось) */
}

/* Механизм переключения страниц */
.section { display: none; }       /* По умолчанию все страницы скрыты */
.section.active { display: block; } /* Только страница с классом .active видна */

.placeholder { 
    background: white;        /* Белый фон заглушки */
    padding: 30px;            /* Внутренние отступы */
    border-radius: 10px;      /* Скругление */
    text-align: center;       /* Текст по центру */
    color: #999;              /* Серый цвет текста */
    margin-top: 20px;         /* Отступ сверху */
    border: 1px dashed #ccc;  /* Пунктирная серая рамка */
}

/* =========================================
   6. ГЛАВНАЯ СТРАНИЦА (4 ИНФО-БЛОКА)
   ========================================= */
.info-card { 
    background: #ffffff;      /* Белый фон карточки */
    border-radius: 12px;      /* Скругление углов */
    padding: 24px;            /* Внутренний отступ */
    margin-bottom: 24px;      /* Отступ снизу между карточками */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Лёгкая тень для объёма */
    border-top: 6px solid transparent; /* Верхняя рамка прозрачная (позже красится через классы) */
}

.info-card h3 { 
    margin-top: 0;            /* Убираем отступ сверху у заголовка */
    margin-bottom: 12px;      /* Отступ снизу */
    font-size: 18px;          /* Размер заголовка */
    color: #2c3e50;           /* Тёмно-синий цвет */
}

.info-card p, .info-card ul { 
    color: #555;              /* Цвет основного текста и списков */
    line-height: 1.6;         /* Межстрочный интервал (воздух между строками) */
}

/* Классы для раскраски верхней полоски карточек */
.border-blue   { border-top-color: #3498db; }  /* Синий */
.border-red    { border-top-color: #e74c3c; }  /* Красный */
.border-yellow { border-top-color: #f1c40f; }  /* Жёлтый */
.border-green  { border-top-color: #2ecc71; }  /* Зелёный */

/* =========================================
   7. КАЛЬКУЛЯТОР: ОПИСАНИЕ ФОРМУЛЫ
   ========================================= */
.formula-description { 
    background: #f8fafc;      /* Очень светлый серо-голубой фон */
    padding: 15px 20px;       /* Внутренние отступы */
    border-radius: 10px;      /* Скругление */
    border-top: 4px solid #2563eb; /* Ярко-синяя полоска СВЕРХУ */
    margin-bottom: 25px;      /* Отступ снизу */
}

/* =========================================
   8. КАЛЬКУЛЯТОР: ВКЛАДКИ (ТАБЫ)
   ========================================= */
.tabs-container { 
    background: white;        /* Белый фон контейнера вкладок */
    border-radius: 8px;       /* Скругление */
    overflow: hidden;         /* Обрезает дочерние элементы по скруглению */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Лёгкая тень */
    margin-top: 20px;         /* Отступ сверху */
}

.tabs-header { 
    display: flex;            /* Кнопки в ряд */
    gap: 0;                   /* Без промежутков между кнопками */
    margin-bottom: 0; 
    border-bottom: 2px solid #e2e8f0; /* Серая линия-разделитель снизу заголовка */
    padding: 0; 
    background: #f8fafc;      /* Светлый фон шапки вкладок */
}

.tab-btn { 
    flex: 1;                  /* Кнопки делят ширину поровну */
    padding: 15px 20px;       /* Внутренние отступы */
    background: transparent;  /* Прозрачный фон (по умолчанию) */
    border: none;             /* Без рамок */
    cursor: pointer;          /* Курсор-рука */
    font-weight: 600;         /* Полужирный текст */
    color: #64748b;           /* Серый цвет текста */
    transition: 0.2s;         /* Плавность смены фона */
    font-size: 15px; 
    /* ВНИМАНИЕ: Ниже есть переопределение этих стилей в блоке "НОВЫЙ ДИЗАЙН ВКЛАДОК" */
}

.tab-btn:hover { 
    background: #f1f5f9;      /* При наведении фон чуть темнее */
}

.tab-btn.active { 
    background: #2563eb;      /* Активная вкладка: синий фон */
    color: white;             /* Белый текст */
    /* ВНИМАНИЕ: Ниже есть переопределение этих стилей в блоке "НОВЫЙ ДИЗАЙН ВКЛАДОК" */
}

.tab-content { 
    display: none;            /* Содержимое вкладок скрыто по умолчанию */
    padding: 30px;            /* Внутренний отступ контента */
    animation: fadeIn 0.3s ease; /* Плавная анимация появления */
}

.tab-content.active { 
    display: block;           /* Активная вкладка видна */
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(5px); } /* Начало: прозрачно и чуть ниже */
    to { opacity: 1; transform: translateY(0); }     /* Конец: видно и на месте */
}

/* =========================================
   9. КАЛЬКУЛЯТОР: ФОРМА ВВОДА
   ========================================= */
.calc-form-simple { 
    max-width: 550px;         /* Ограничиваем ширину формы */
    display: grid;            /* Сетка для полей */
    gap: 18px;                /* Расстояние между полями */
}

.form-group-simple label { 
    display: block;           /* Метка занимает всю строку */
    margin-bottom: 8px;       /* Отступ от метки до поля ввода */
    font-weight: 600;         /* Полужирный текст */
    color: #334155;           /* Тёмно-серый цвет */
}

.form-group-simple input[type="number"] { 
    width: 100%;              /* Поле на всю ширину */
    padding: 12px;            /* Внутренний отступ */
    border: 1px solid #cbd5e1;/* Тонкая серая рамка */
    border-radius: 8px;       /* Скругление */
    font-size: 15px; 
    background: #ffffff;      /* Белый фон */
    /* ВНИМАНИЕ: Ниже есть переопределение в блоке "НОВЫЙ ДИЗАЙН ВКЛАДОК" */
}

.form-group-simple input:focus { 
    outline: none;            /* Убираем стандартную синюю обводку браузера */
    border-color: #2563eb;    /* Рамка становится синей при клике */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); /* Синее свечение вокруг */
    /* ВНИМАНИЕ: Ниже есть переопределение в блоке "НОВЫЙ ДИЗАЙН ВКЛАДОК" */
}

/* Радио-кнопки (Пол / Активность) */
.radio-group, .radio-group-vertical { 
    display: flex;            /* В ряд */
    flex-wrap: wrap;          /* Перенос на новую строку если не влезает */
    gap: 12px;                /* Промежуток между вариантами */
}
.radio-group-vertical { flex-direction: column; } /* Вертикальный список */

.radio-label { 
    display: flex;            /* Кружок и текст в ряд */
    align-items: center;      /* Выравнивание по центру по вертикали */
    gap: 8px;                 /* Отступ между кружком и текстом */
    cursor: pointer;          /* Можно кликать на текст */
    font-size: 14px; 
    color: #475569;           /* Серый цвет текста */
}

/* =========================================
   10. КАЛЬКУЛЯТОР: КНОПКИ
   ========================================= */
/* Общие настройки для обеих кнопок */
.calc-submit-btn, .calc-reset-btn { 
    padding: 14px 24px;       /* Внутренние отступы */
    border-radius: 8px;       /* Скругление */
    font-weight: 700;         /* Жирный текст */
    cursor: pointer;          /* Курсор-рука */
    transition: 0.2s;         /* Плавность анимации */
    margin-top: 15px;         /* Отступ сверху */
    width: 100%;              /* Кнопка на всю ширину формы */
    font-size: 16px;          /* Размер текста */
}

/* 🔥 КНОПКА "РАССЧИТАТЬ" (Белая с зелёной полоской) */
.calc-submit-btn { 
    background: #ffffff;      /* Белый фон */
    color: #166534;           /* Тёмно-зелёный текст */
    border: 1px solid #ffffff;/* Белая рамка (скрывается на белом фоне) */
    border-top: 4px solid #22c55e; /* ЖИРНАЯ ЗЕЛЁНАЯ ПОЛОСКА СВЕРХУ */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Лёгкая тень снизу */
}

.calc-submit-btn:hover { 
    background: #f0fdf4;      /* При наведении фон становится светло-зелёным */
    transform: translateY(-2px); /* Кнопка чуть "всплывает" вверх */
}

/* КНОПКА "ПЕРЕСЧИТАТЬ" */
.calc-reset-btn { 
    background: #ffffff;           /* Белый фон */
    color: #000000;                /* Чёрный текст */
    border: none;                  /* Без боковых/нижних рамок */
    border-top: 4px solid #fb923c; /* Оранжевая полоска сверху */
    border-radius: 10px !important; 
    padding: 18px 30px;            /* 🔹 Увеличены отступы (кнопка стала шире и выше) */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
    font-weight: 700;              /* Жирнее */
    font-style: italic;            /* Курсив */
    font-size: 18px;               /* 🔹 Шрифт увеличен */
    cursor: pointer;
    width: 100%;                   /* Растягивается на всю ширину контейнера */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Эффект при наведении */
.calc-reset-btn:hover {
    background: #f5c47a;          /* Чуть более серый фон при наведении */
}

/* =========================================
   11. КАЛЬКУЛЯТОР: БЛОКИ РЕЗУЛЬТАТОВ
   ========================================= */
/* БАЗОВЫЙ МЕТАБОЛИЗМ - УВЕЛИЧЕННЫЙ ШРИФТ */
.bmr-info-box h4 {
    font-size: 18px !important;
    font-style: italic !important;
    font-weight: 500 !important;
    color: #000000 !important;
    margin-bottom: 10px !important;
}

/* ЦИФРА КАЛОРИЙ (1177) - КРУПНАЯ И ЖИРНАЯ */
#res-bmr {
    font-size: 24px !important;  /* 🔹 КРУПНЫЙ РАЗМЕР */
    font-weight: 700 !important; /* 🔹 ЖИРНЫЙ */
    font-style: normal !important; /* ПРЯМОЙ */
    color: #000000 !important;
}

/* Сводка (Поддержание веса + Переваривание) */
.result-summary {
   border-top: 4px solid #2563eb !important; /* Синяя полоска СВЕРХУ */ 
    display: flex;            /* Два блока в ряд */
    gap: 20px;                /* Расстояние между ними */
    background: white;        /* Белый фон */
    padding: 20px !important;            /* Внутренний отступ */
    border-radius: 10px !important;      /* Скругление */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Тень */
    margin-bottom: 25px;      /* Отступ снизу */
}
.summary-item { flex: 1; }    /* Элементы делят ширину поровну */
.summary-item .label { 
    display: block; 
    font-size: 13px; 
    color: #64748b;           /* Серый цвет подписи */
    margin-bottom: 4px; 
}
.summary-item .value { 
    font-size: 22px; 
    font-weight: 700; 
    color: #0f172a;           /* Очень тёмный цвет для цифр */
}

/* =========================================
   12. КАЛЬКУЛЯТОР: ТАБЛИЦА ДЕФИЦИТА
   ========================================= */

/* Основная таблица */
#strategy-table-container table {
    width: 100%;              /* Таблица на всю ширину */
    border-collapse: separate; /* 🔑 РАЗРЕШАЕМ скругление углов (collapse его ломает!) */
    border-spacing: 0;         /* 🔑 Убираем щели между ячейками, чтобы выглядело цельно */
    margin: 15px 0;           /* Отступы сверху/снизу */
    background: white;        /* Белый фон */
    border-radius: 10px;      /* Скругление углов */
    overflow: hidden;          /* 🔑 Обрезает всё лишнее строго по радиусу */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Тень */
    border-top: 4px solid #22c55e; /*  ЗЕЛЁНАЯ ПОЛОСКА (автоматически закруглится по углам!) */
    position: relative;       /* 🔹 Для позиционирования псевдоэлемента */
}

/* 🔥 ШАПКА ТАБЛИЦЫ (Стратегия / Ккал/день / Скорость / Вердикт) */
#strategy-table-container th { 
    background: #ffffff;      /* Белый фон */
    color: #090909;           /* Серый текст */
    font-size: 13px;          /* Размер шрифта */
    font-weight: 700;         /* Жирный */
    padding: 16px 15px;       /* 🔹 Увеличенные отступы сверху (чтобы полоска не давила) */
    text-align: left;         /* Текст слева */
    border-bottom: 1px solid #e2e8f0; /* Линия снизу */
    text-transform: uppercase; /* Заглавные буквы */
    letter-spacing: 0.5px;    /* Расстояние между буквами */
}

/* Ячейки с данными (строки 5%, 10%, 15%, 20%) */
#strategy-table-container td { 
    padding: 12px 15px;       /* Внутренние отступы */
    border-bottom: 1px solid #f1f5f9; /* Тонкая линия между строками */
    font-size: 14px;          /* Размер шрифта */
    color: #0c0c0c;           /* Тёмно-серый текст */
}

/* =========================================
   ЦВЕТНЫЕ СТРОКИ ТАБЛИЦЫ (ЛЕВАЯ ТОНКАЯ ПОЛОСКА)
   ========================================= */

/* Базовая настройка: готовим место под тонкую полоску в первой ячейке каждой строки */
table.strategy-table td:first-child {
    border-left: 3px solid transparent; /* 🔹 Тонкая прозрачная полоска слева (резерв) */
}

/* 🟡 Строка 5% - Медленный дефицит */
table.strategy-table tr.row-yellow td:first-child { 
    border-left-color: #fbbf24 !important; /* 🔹 ТОНКАЯ ЖЁЛТАЯ ПОЛОСКА СЛЕВА */
}
table.strategy-table tr.row-yellow { background: #fff2cc !important; } /* Светло-жёлтый фон всей строки */

/* 🔵 Строка 10% - Оптимальный дефицит */
table.strategy-table tr.row-blue td:first-child { 
    border-left-color: #3b82f6 !important; /* 🔹 ТОНКАЯ СИНЯЯ ПОЛОСКА СЛЕВА */
}
table.strategy-table tr.row-blue { background: #c9daf8 !important; } /* Светло-синий фон всей строки */

/* 🟢 Строка 15% - Активный дефицит */
table.strategy-table tr.row-green td:first-child { 
    border-left-color: #d9ead3 !important; /* 🔹 ТОНКАЯ ЗЕЛЁНАЯ ПОЛОСКА СЛЕВА */
}
table.strategy-table tr.row-green { background: #cbf0d6 !important; } /* Светло-зелёный фон всей строки */

/* 🔴 Строка 20% - Опасный дефицит */
table.strategy-table tr.row-red td:first-child { 
    border-left-color: #ea9999 !important; /* 🔹 ТОНКАЯ КРАСНАЯ ПОЛОСКА СЛЕВА */
}
/* 👇 ВОТ ЭТОГО НЕ ХВАТАЛО: Светло-красный фон всей строки 👇 */
table.strategy-table tr.row-red { background: #f0d5d5 !important; } 

/* ✨ Выбранная строка */
table.strategy-table tr.selected-row { 
    font-weight: bold !important; /* Жирный текст */
    filter: brightness(0.9);      /* Затемнение */
}

/* 👆 Интерактивность */
table.strategy-table tbody tr { 
    cursor: pointer; /* Курсор-рука */
}
table.strategy-table tbody tr:hover { 
    filter: brightness(0.95); /* Подсветка при наведении */
}

/* =========================================
   13. КАЛЬКУЛЯТОР: БЛОК "ВАЖНО" 
   ========================================= */
.pms-note { 
    background: #ffffff;          /* 🔹 Белый фон */
    border: none;                 /* 🔹 Убираем старую голубую рамку */
    border-top: 4px solid #fbbf24; /* 🟡 ЖЁЛТАЯ ПОЛОСКА СВЕРХУ (как у других блоков) */
    border-radius: 10px;          /* 🔹 Скругление углов (идентично таблице и другим блокам) */
    padding: 20px;                /* 🔹 Внутренние отступы */
    margin: 25px 0;               /* 🔹 Отступы сверху/снизу */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 🔹 Лёгкая тень для объёма */
}
.pms-note strong { color: #0369a1; } /* Тёмно-голубой цвет для слова "Важно" */
.pms-note ul { margin: 10px 0 0 20px; } /* Отступы для списка */

/* =========================================
   14. БЛОК "ВАШ ПЛАН" 
   ========================================= */

/* 🟤 1. ГЛАВНЫЙ КОНТЕЙНЕР - Серая полоска сверху */
.selected-plan {
    background: #ffffff;          /* Белый фон */
    border: none;                 /* Убираем синюю рамку */
    border-top: 4px solid #94a3b8; /* СЕРАЯ полоска СВЕРХУ */
    border-radius: 10px !important; /* Закругление 10px */
    padding: 25px;
    margin-top: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;             /* Обрезает по скруглению */
}



/* 🟡 6. БЛОК РЕКОМЕНДАЦИЙ (Жидкость, Режим) - БЕЛЫЙ + ЖЁЛТАЯ ПОЛОСКА */
.recommendations {
    background: #ffffff;          /* Белый фон */
    border-top: 4px solid #fbbf24; /* ЖЁЛТАЯ полоска СВЕРХУ */
    border-radius: 10px !important; /* Закругление 10px */
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Тень как у остальных */
    overflow: hidden;             /* Обрезка углов */
}

/* Текст внутри рекомендаций - прямой и аккуратный */
.recommendations p {
    margin: 8px 0;
    font-size: 14px;
    font-style: normal;           /* Без курсива */
    color: #334155;               /* Тёмно-серый текст */
}

/* =========================================
   14. ВКЛАДКА "ИНФОРМАЦИЯ"
   ========================================= */
.info-section { 
    line-height: 1.6;         /* Межстрочный интервал */
    color: #334155;           /* Цвет текста */
}

.activity-table { 
    width: 100%; 
    border-collapse: collapse;
    margin-top: 15px; 
    background: white; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.04); /* Лёгкая тень */
}
.activity-table th, .activity-table td { 
    padding: 10px 15px; 
    border-bottom: 1px solid #e2e8f0; /* Линия между строками */
    text-align: left; 
}
.activity-table th { 
    background: #f1f5f9;      /* Серый фон заголовков таблицы */
    font-weight: 600;         /* Полужирный текст */
}

/* =========================================
   15. ЦВЕТНЫЕ СТРОКИ ТАБЛИЦЫ АКТИВНОСТИ
   ========================================= */
.activity-table thead {
    border-top: 3px solid #475569; /* Серая окантовка СВЕРХУ шапки */
    background-color: #cbd5e1;     /* Сероватый фон заголовков */
}

/* Жёлтая строка (Минимальная активность) */
.activity-table tr.min-activity { 
    border-left: 4px solid #fbbf24;  /* Жёлтая полоска слева */
    background-color: #fffbeb;       /* Светло-жёлтый фон */
}

/* Зелёная строка (Лёгкая активность) */
.activity-table tr.easy-activity { 
    border-left: 4px solid #22c55e;  /* Зелёная полоска слева */
    background-color: #f0fdf4;       /* Светло-зелёный фон */
}

/* Синяя строка (Средняя активность) */
.activity-table tr.medium-activity { 
    border-left: 4px solid #3b82f6;  /* Синяя полоска слева */
    background-color: #eff6ff;       /* Светло-синий фон */
}

/* Красная строка (Высокая активность) */
.activity-table tr.high-activity { 
    border-left: 4px solid #ef4444;  /* Красная полоска слева */
    background-color: #fef2f2;       /* Светло-красный фон */
}

/* =========================================
   16. 🟢 НОВЫЙ ДИЗАЙН ВКЛАДОК И ПОЛЕЙ (ЗЕЛЁНЫЙ)
   (Эти стили переопределяют старые, т.к. идут ниже в файле)
   ========================================= */

/* 1. ВКЛАДКИ (Общий вид) */
.tab-btn {
    background: #ffffff;          /* Белое окошко */
    color: #64748b;               /* Серый текст */
    border-top: 3px solid transparent; /* Прозрачная верхняя граница (резерв под полоску) */
    border-radius: 8px 8px 0 0;   /* Скругление только сверху */
}

/* 2. АКТИВНАЯ ВКЛАДКА (Когда нажали) */
.tab-btn.active {
    background-color: #f0fdf4;    /* Светло-зеленый фон */
    color: #166534;               /* Темно-зеленый текст */
    border-top: 4px solid #22c55e; /* Ярко-зеленая полоска СВЕРХУ */
    font-weight: 700;             /* Жирный шрифт */
}

/* 3. ПОЛЯ ВВОДА (Возраст, Рост, Вес) */
.form-group-simple input[type="number"] {
    background-color: #ffffff;    /* Белый фон */
    border: 1px solid #22c55e;    /* Тонкая зеленая окантовка ВКРУГОВУЮ */
    border-radius: 8px;           /* Скругленные углы */
    color: #1f2937;               /* Темный текст */
}

/* 4. ПОЛЯ ПРИ НАЖАТИИ (Фокус/Ввод) */
.form-group-simple input[type="number"]:focus {
    border-color: #15803d;        /* Окантовка темнее при вводе */
    box-shadow: 0 0 0 2px #dcfce7; /* Легкое зелёное свечение */
    outline: none;                /* Убираем стандартную обводку браузера */
}

/* =========================================
   17. АДАПТИВНОСТЬ (ДЛЯ ТЕЛЕФОНОВ)
   ========================================= */
@media (max-width: 600px) {
    .plan-stats { 
        grid-template-columns: repeat(2, 1fr); /* На телефонах КБЖУ в 2 колонки */
    }
    .result-summary { 
        flex-direction: column; /* Сводка становится вертикальной */
    }
}
/* Боковое меню */
.sidebar {
    background: white !important;
    border-right: 1px solid #cbd5e1;
}
/* === ЦВЕТНЫЕ КНОПКИ МЕНЮ (РАМКА + ЗАПОЛНЕНИЕ ПРИ НАЖАТИИ) === */

/* Базовый стиль: всегда белый фон, тёмный текст */
.sidebar .menu-btn {
    background: white !important;
    color: #1e293b !important;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: none !important; /* Убираем любые тени */
}

/* 1. ГЛАВНАЯ — КРАСНЫЙ  */
.sidebar .menu-btn:nth-of-type(1) { border-color: #ef4444 !important; }
.sidebar .menu-btn:nth-of-type(1).active,
.sidebar .menu-btn:nth-of-type(1):hover {
    background: #ef4444 !important;
    color: white !important;
}

/* 2. СУТОЧНАЯ НОРМА — СИНИЙ 🔵 */
.sidebar .menu-btn:nth-of-type(2) { border-color: #3b82f6 !important; }
.sidebar .menu-btn:nth-of-type(2).active,
.sidebar .menu-btn:nth-of-type(2):hover {
    background: #3b82f6 !important;
    color: white !important;
}

/* 3. ПОИСК ПРОДУКТОВ — ЗЕЛЁНЫЙ 🟢 */
.sidebar .menu-btn:nth-of-type(3) { border-color: #22c55e !important; }
.sidebar .menu-btn:nth-of-type(3).active,
.sidebar .menu-btn:nth-of-type(3):hover {
    background: #22c55e !important;
    color: white !important;
}

/* 4. ВАШ ПРОДУКТ — ЖЁЛТЫЙ 🟡 */
.sidebar .menu-btn:nth-of-type(4) { border-color: #facc15 !important; }
.sidebar .menu-btn:nth-of-type(4).active,
.sidebar .menu-btn:nth-of-type(4):hover {
    background: #facc15 !important;
    color: #000000 !important; /* Чёрный текст, чтобы читалось на жёлтом */
}

/* 5. ДНЕВНИК ПИТАНИЯ — ГОЛУБОЙ  */
.sidebar .menu-btn:nth-of-type(5) { border-color: #60a5fa !important; }
.sidebar .menu-btn:nth-of-type(5).active,
.sidebar .menu-btn:nth-of-type(5):hover {
    background: #60a5fa !important;
    color: white !important;
}

/* 6. ТРЕКЕР ЖИДКОСТИ — РОЗОВЫЙ 🌸 */
.sidebar .menu-btn:nth-of-type(6) { border-color: #f472b6 !important; }
.sidebar .menu-btn:nth-of-type(6).active,
.sidebar .menu-btn:nth-of-type(6):hover {
    background: #f472b6 !important;
    color: white !important;
}

/* 7. РЕЦЕПТЫ — ОРАНЖЕВЫЙ 🟠 */
.sidebar .menu-btn:nth-of-type(7) { border-color: #fb923c !important; }
.sidebar .menu-btn:nth-of-type(7).active,
.sidebar .menu-btn:nth-of-type(7):hover {
    background: #fb923c !important;
    color: white !important;
}
/* === УБИРАЕМ СИНЮЮ ЛИНИЮ ПОД ШАПКОЙ === */
.top-header {
    border-bottom: none !important;
    box-shadow: none !important; /* Убираем тень, если она есть */
}

/* Если линия осталась, убираем у контейнера */
.header-text {
    border-bottom: none !important;
    margin-bottom: 0;
}
/* === УБИРАЕМ СИНЮЮ ЛИНИЮ СЛЕВА === */
.sidebar {
    border-right: none !important;
}

.main-content {
    border-left: none !important;
}

/* Если есть контейнер страницы */
#page-container {
    border: none !important;
}
/* Заголовки таблицы дефицита — чёрный курсив */
.strategy-table th {
    color: #000000 !important;
    font-style: italic !important;
    font-weight: 500 !important;
}
/* === БЛОК "ВАЖНО" (ТОНКАЯ ЖЕЛТАЯ РАМКА) === */
.pms-note {
    background: #ffffff;
    border: 2px solid #facc15; /* Тонкая рамка по всему периметру */
    border-radius: 10px;
    padding: 20px;
    margin: 25px 0;
    box-shadow: none;
}

.pms-note strong {
    display: block;
    font-size: 18px;
    font-style: italic;
    font-weight: 600;
    color: #000000;
    margin-bottom: 15px;
}

.pms-note ul {
    margin: 0;
    padding-left: 25px;
}

.pms-note li {
    font-size: 15px;
    font-style: italic;
    color: #121212;
    line-height: 1.6;
    margin-bottom: 10px;
}
/* === ИСПРАВЛЕНИЕ ДЛЯ КАРТОЧЕК КБЖУ (Ваш план) === */

/* Сброс старых стилей для карточек */
.plan-stats .stat-box {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 15px 5px !important;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    
    /* Убираем верхние полоски, делаем полную рамку */
    border-top: none !important;
    border-left: none !important;
    border: 2px solid transparent !important; /* Базовая рамка */
}

/* ЦВЕТНЫЕ РАМКИ (по твоей схеме) */
.stat-kcal { border-color: #ef4444 !important; } /* Красная */
.stat-pro  { border-color: #fb923c !important; } /* Оранжевая */
.stat-fat  { border-color: #3b82f6 !important; } /* Синяя */
.stat-carb { border-color: #22c55e !important; } /* Зелёная */

/* ШРИФТ ЦИФР - Чёрный, нежирный, прямой (без курсива) */
.plan-stats .stat-box span[id^="plan-"] {
    color: #000000 !important;
    font-weight: 400 !important; /* НЕЖИРНЫЙ */
    font-style: normal !important; /* ПРЯМОЙ (не курсив) */
    font-size: 24px !important;
    display: block;
    margin-bottom: 5px;
}

/* ПОДПИСИ (ккал, г белков...) - серый курсив */
.plan-stats .stat-label {
    color: #64748b !important;
    font-style: italic !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
/* =========================================
   ИСПРАВЛЕНИЕ ДЛЯ БЛОКА "ВАШ ПЛАН"
   Черный шрифт и Цветные рамки
   ========================================= */

/* 1. Контейнер карточек */
.plan-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

/* 2. Общий стиль для каждой карточки */
.plan-stats .stat-box {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 15px 10px !important;
    text-align: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
    
    /* Убираем старые стили, ставим общую рамку, цвет зададим ниже */
    border: 2px solid transparent !important; 
}

/* 3. ЦВЕТНЫЕ РАМКИ (по твоей схеме) */
/* Ккал - Красная */
.plan-stats .stat-box:nth-child(1) { border-color: #ef4444 !important; }
/* Белки - Оранжевая */
.plan-stats .stat-box:nth-child(2) { border-color: #fb923c !important; }
/* Жиры - Синяя */
.plan-stats .stat-box:nth-child(3) { border-color: #3b82f6 !important; }
/* Углеводы - Зеленая */
.plan-stats .stat-box:nth-child(4) { border-color: #22c55e !important; }

/* 4. ЦИФРЫ - ЧЁРНЫЕ, НЕЖИРНЫЕ, ПРЯМЫЕ */
.plan-stats .stat-box span {
    color: #000000 !important;  /* СТРОГО ЧЁРНЫЙ */
    font-weight: 400 !important; /* НЕЖИРНЫЙ */
    font-style: normal !important; /* ПРЯМОЙ */
    font-size: 24px !important;
    display: block;
    margin-bottom: 5px;
}

/* 5. ПОДПИСИ (ккал, г белков...) - ТОЖЕ ЧЁРНЫЕ (или темно-серые, если хочешь совсем черные - поставь #000000) */
.plan-stats .stat-box small,
.plan-stats .stat-box span[style*="color"] {
    color: #000000 !important; /* ЧЁРНЫЙ ТЕКСТ */
    font-size: 13px !important;
    font-style: normal !important; /* ПРЯМОЙ */
    font-weight: 400 !important;
}
/* ЦИФРЫ В КАРТОЧКАХ КБЖУ - ЖИРНЫЕ И КРУПНЫЕ */
.plan-stats .stat-box span[id^="plan-"] {
    font-weight: 700 !important;  /* ЖИРНЫЙ */
    font-size: 26px !important;   /* КРУПНЫЙ (как 1119 на скриншоте) */
    color: #000000 !important;
    display: block;
    margin-bottom: 5px;
}
/* Подписи под цифрами (ккал, г белков...) - УВЕЛИЧЕННЫЙ РАЗМЕР */
.plan-stats .stat-box span:last-child {
    font-size: 16px !important;      /* Увеличиваем (как в описании метаболизма) */
    font-style: italic !important;   /* Курсив */
    color: #000000 !important;       /* Чёрный цвет для четкости */
    font-weight: 500 !important;     /* Чуть плотнее, чтобы читалось лучше */
}