@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@1,400;1,700;1,900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&family=Roboto:wght@500;700&display=swap');

        /* --- ГЛОБАЛЬНЫЙ СБРОС ДЛЯ МОБИЛЬНЫХ (ЦЕНТРОВКА И ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ) ---
           box-sizing: border-box на всех элементах гарантирует, что padding/border
           не вылезают за заданную ширину блоков — это главная причина "съезжающих"
           карточек и горизонтального скролла на мобильных экранах. */
        *, *::before, *::after {
            box-sizing: border-box;
        }
        html {
            overflow-x: hidden;
            width: 100%;
        }

        :root {
            --bg: #050505;
            --surface: #1a1a1a;
            --primary: #bb86fc;
            --secondary: #03dac6;
            --text: #ffffff;
            --border: #2a2a2a;
            --grad: linear-gradient(135deg, #bb86fc 0%, #7c4dff 100%);
            
            /* Твои настройки из песочницы: */
            --s-font-main: 'Lato', sans-serif;
            --s-overlay-top: 0.7;
            --s-overlay-bottom: 0.7;
            --s-card-width: 385px;
            --s-card-radius: 21px;
            --s-card-border-width: 1px;
            --s-card-border-color: #bb86fc;
            --s-card-shadow-opacity: 0.3;
            --s-title-x: -18px;
            --s-title-y: 0px;
            --s-title-width: 110%;
            --s-title-font-size: 19px;
            --s-title-ls: 0px;
            --s-title-lh: 1.2;
            --s-title-padding-v: 11px;
            --s-title-padding-h: 5px;
            --s-title-radius-top: 17px;
            --s-title-radius-bottom: 20px;
            --s-title-blur: 1px;
            --s-title-sat: 140%;
            --s-title-bg-opacity: 0.03;
            --b1-x: 0px;
            --b1-y: 22px;
            --b1-rot: 0deg;
            --b1-ph: 73px;
            --b1-pv: 1px;
            --b1-sz: 12px;
            --b1-rad: 41px;
            --b2-x: 21px;
            --b2-y: -6px;
            --b2-rot: 0deg;
            --b2-ph: 12px;
            --b2-pv: 6px;
            --b2-sz: 12px;
            --b2-rad: 8px;
            --b2-blur: 1px;
            --b3-x: -7px;
            --b3-y: -19px;
            --b3-rot: 0deg;
            --b3-ph: 10px;
            --b3-pv: 6px;
            --b3-sz: 14px;
            --b3-rad: 12px;
            --b4-x: -30px;
            --b4-y: -6px;
            --b4-rot: 0deg;
            --b4-ph: 12px;
            --b4-pv: 5px;
            --b4-sz: 12px;
            --b4-rad: 5px;
            --s-kbju-x: -7px;
            --s-kbju-y: 6px;
            --s-kbju-width: 107%;
            --s-kbju-val-sz: 29px;
            --s-kbju-lbl-sz: 12px;
            --s-kbju-radius: 33px;
            --s-kbju-padding: 17px;
            --s-kbju-blur: 1px;
            --s-kbju-border-width: 0px;
        }
        body {
            font-family: 'Inter', -apple-system, sans-serif;
            margin: 0;
            padding: 0;
            background: transparent; /* УБРАЛИ ЧЕРНЫЙ ФОН, ЧТОБЫ БЫЛА ВИДНА АВРОРА */
            color: var(--text);
            padding-bottom: 120px;
            overflow-x: hidden;
            /* Плавный инерционный скролл на iOS для всей страницы (сама сетка
               ингредиентов скроллится вместе с документом, отдельного
               overflow-контейнера у неё нет) */
            -webkit-overflow-scrolling: touch;
        }
        /* Элегантный расписной шрифт для кнопок */
        .elegant-text {
            font-family: 'Georgia', 'Playfair Display', serif !important;
            font-style: italic;
            font-weight: bold !important;
            letter-spacing: 0.5px;
        }

        .screen {
            display: none;
            position: relative; /* Добавлено, чтобы окна всегда были поверх фона */
            z-index: 10;        /* Выносим контент на передний план */
            max-width: 600px;
            margin: 0 auto;
            animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 25px;
            box-sizing: border-box;
        }

        .screen.active {
            display: block;
        }

        /* Спиннер экрана загрузки (#screen-loading, index.html) — см.
           js/features/auth.js, routeAfterAuthResolved(). */
        .loading-spinner {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 3px solid rgba(187, 134, 252, 0.15);
            border-top-color: var(--primary);
            animation: loadingSpin 0.8s linear infinite;
        }

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

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Кнопки */
        .btn {
            padding: 16px;
            margin: 10px 0;
            font-size: 15px;
            font-weight: 800;
            border: none;
            border-radius: 20px;
            background: var(--grad);
            color: #000;
            cursor: pointer;
            width: 100%;
            text-transform: uppercase;
            /* Быстрый transform для мгновенного тапа + touch-action убирает системную
               задержку ~300мс на iOS/Android (см. .ingredient чуть выше по той же причине) */
            touch-action: manipulation;
            transition: transform 0.1s ease-out, background-color 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 4px 15px rgba(187, 134, 252, 0.3);
            letter-spacing: 1px;
            position: relative;
        }

        .btn:active {
            transform: scale(0.95);
        }

        .btn-secondary {
            background: var(--surface);
            color: var(--text);
            border: 1px solid var(--border);
            box-shadow: none;
        }

        .btn-fridge {
            background: rgba(3, 218, 198, 0.1);
            color: var(--secondary);
            border: 1px solid var(--secondary);
            box-shadow: 0 0 15px rgba(3, 218, 198, 0.2);
        }

        .btn-fav {
            background: rgba(241, 196, 15, 0.1);
            color: #f1c40f;
            border: 1px solid #f1c40f;
            box-shadow: none;
            font-size: 13px;
        }

        .btn-cook {
            background: rgba(255, 107, 107, 0.1);
            color: #ff6b6b;
            border: 1px solid #ff6b6b;
            box-shadow: 0 0 15px rgba(255, 107, 107, 0.2);
        }

        .btn-logout {
            border-color: rgba(255, 71, 87, 0.3);
            color: #ff4757;
            margin-top: 30px;
        }

        /* Замки PRO */
        .locked-feature {
            opacity: 0.4 !important;
            filter: grayscale(100%);
            cursor: not-allowed !important;
        }

        .locked-feature::after {
            content: '👑 PRO';
            position: absolute;
            top: -10px;
            right: 15px;
            background: var(--primary);
            color: #000;
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 900;
            z-index: 10;
            pointer-events: none;
            letter-spacing: 0;
            text-transform: none;
        }

        .toggle-container.locked-feature::after {
            top: -8px;
            right: -5px;
        }

        /* Ввод данных */
        .auth-container {
            text-align: center;
            margin-top: 30px;
        }

        .auth-input,
        select.auth-input {
            padding: 18px;
            width: 100%;
            box-sizing: border-box;
            border-radius: 18px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: white;
            font-size: 16px;
            outline: none;
            margin-bottom: 15px;
            text-align: center;
            transition: 0.3s;
            appearance: none;
        }

        .auth-input:focus {
            border-color: var(--primary);
        }

        /* Пейволл и карточка премиума */
        .premium-card {
            background: linear-gradient(135deg, rgba(187, 134, 252, 0.05) 0%, rgba(124, 77, 255, 0.05) 100%);
            border: 1px solid var(--primary);
            border-radius: 24px;
            padding: 30px 20px;
            text-align: center;
            margin-top: 20px;
            box-shadow: 0 10px 30px rgba(187, 134, 252, 0.1);
        }

        .price-tag {
            font-size: 42px;
            font-weight: 900;
            color: #fff;
            margin: 10px 0;
            font-family: 'Inter', sans-serif;
            transition: 0.3s;
        }

        .price-tag span {
            font-size: 18px;
            color: #888;
            font-weight: 400;
        }

        .feature-list {
            text-align: left;
            margin: 25px 0;
            color: #ccc;
            font-size: 14px;
            line-height: 1.8;
        }

        .feature-list span {
            color: var(--secondary);
            margin-right: 10px;
            font-weight: bold;
        }

        /* Элегантный блок промокода */
        .promo-box {
            margin: 20px auto 10px;
            padding: 0;
            background: transparent;
            border: none;
            max-width: 200px;
            text-align: center;
        }

        .promo-box p {
            font-size: 11px;
            margin: 0 0 8px 0 !important;
            color: #666;
        }

        .promo-input-group {
            display: flex;
            gap: 6px;
            align-items: stretch;
            height: 38px;
        }

        .promo-input-group input {
            flex: 1;
            padding: 0 12px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 3, 3, 0.05);
            color: white;
            font-size: 12px;
            outline: none;
            text-transform: uppercase;
            box-sizing: border-box;
            margin: 0;
        }

        .promo-input-group input:focus {
            border-color: var(--primary);
        }

        .promo-input-group button {
            padding: 0 16px;
            background: transparent;
            color: var(--primary);
            border: 1px solid rgba(187, 134, 252, 0.3);
            border-radius: 8px;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
            transition: 0.3s;
            box-sizing: border-box;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .promo-input-group button:hover {
            background: rgba(187, 134, 252, 0.1);
        }

        #promo-msg {
            font-size: 11px;
            margin-top: 8px;
            font-weight: normal;
            min-height: 14px;
        }

        /* Заголовки */
        .main-header {
            padding: 20px 0 10px;
            text-align: center;
        }

        .main-header h1 {
            font-size: 42px;
            margin: 0;
            background: linear-gradient(270deg, #bb86fc, #03dac6, #bb86fc, #7c4dff);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: neonShimmer 5s ease infinite;
            filter: drop-shadow(0 0 15px rgba(187, 134, 252, 0.5));
        }

        @keyframes neonShimmer {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .elegant-header {
            font-family: 'Georgia', serif;
            font-size: 28px;
            font-style: italic;
            color: var(--primary);
            text-align: center;
            margin: 0 0 20px 0;
            font-weight: normal;
        }

        /* Подзаголовки */
        .section-title {
            font-family: 'Georgia', serif;
            font-style: italic;
            color: var(--primary);
            font-size: 18px;
            margin: 35px 0 15px;
            border-bottom: 1px solid rgba(187, 134, 252, 0.2);
            padding-bottom: 8px;
            text-align: left;
            font-weight: normal;
        }

        .section-title.danger {
            color: #ff4757;
            border-bottom-color: rgba(255, 71, 87, 0.2);
        }

        /* Переключатели */
        .toggle-container {
            position: relative;
            background: rgba(3, 218, 198, 0.05);
            padding: 16px 20px;
            border-radius: 20px;
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid rgba(3, 218, 198, 0.2);
        }

        .toggle-container.cut {
            background: rgba(52, 152, 219, 0.05);
            border-color: rgba(52, 152, 219, 0.2);
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 46px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #333;
            transition: .4s;
            border-radius: 20px;
        }

        input:checked+.slider {
            background-color: var(--secondary);
        }

        .switch.blue-switch input:checked+.slider {
            background-color: #3498db;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider:before {
            transform: translateX(22px);
        }

/* --- СТЕКЛЯННЫЙ БЛОК КАТЕГОРИИ (СТАТИЧНОЕ СТЕКЛО) --- */
/* --- СТЕКЛЯННЫЙ БЛОК КАТЕГОРИИ (APPLE PREMIUM GLASS) --- */
.category-group {
    /* Чистый полупрозрачный темный тон */
    background: rgba(20, 20, 25, 0.45) !important; 
    
    /* СЕКРЕТ АЙФОНА: Размытие + Насыщенность (saturate). 
       Благодаря этому наши летающие цветные шары будут фантастически красиво "сочиться" сквозь стекло */
    backdrop-filter: blur(20px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    
    /* Тончайшая стеклянная грань */
    border: 1px solid rgba(255, 255, 255, 0.07) !important; 
    border-radius: 24px;
    padding: 0 20px 20px 20px; 
    margin-bottom: 35px;
    
    /* СЛОЖНАЯ ТЕНЬ APPLE: 
       1. Глубокая мягкая тень вниз (чтобы оторвать блок от фона)
       2. Внутренний блик сверху (inset 0 1px 0) — имитирует скол стекла, ловящий свет
       3. Едва заметное внутреннее свечение по периметру */
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4), 
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 20px rgba(255, 255, 255, 0.01); 
    
    text-align: center;
    animation: none !important; /* Полностью убираем и отключаем прошлую пульсацию */
    /* GPU-слой для дорогого backdrop-filter — меньше нагрузки на процессор при скролле */
    will-change: transform;
    transform: translateZ(0);
}

/* Сама анимация, которая заставляет темные цвета плавно двигаться */
@keyframes darkGlowFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Принудительно выравниваем сами продукты по левому краю, чтобы они не уехали в центр */
.ingredients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
    gap: 10px;
    text-align: left; 
}

/* --- ПЛАШКА ЗАГОЛОВКА (INNER BOX) --- */
.category-title {
            font-family: 'Inter', sans-serif; 
            font-style: normal;               
            font-weight: 800;                 
            color: #ffffff;                   
            font-size: 16px; /* Чуть уменьшили шрифт для аккуратности */
            
            /* ЦЕНТРОВКА И РАЗМЕР ПЛАШКИ */
            width: fit-content; /* КЛЮЧЕВОЕ: Плашка теперь облегает текст, а не тянется на весь экран */
            margin: 30px auto 15px auto; /* auto слева и справа ставит плашку ровно по центру экрана */
            padding: 6px 24px; /* Уменьшили отступы сверху и снизу (плашка стала тоньше) */
            text-align: center; /* Текст строго по центру */
            
            /* ВИЗУАЛЬНЫЙ СТИЛЬ */
            background: #25172276;              
            border-radius: 10px; /* Чуть смягчили углы */
            border: 1px solid #333333;        
            letter-spacing: 0.5px;
            
            /* ТЕНЬ ПОД ТЕКСТОМ */
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* Полупрозрачная глубокая тень под буквами */
        
    
    /* Магия позиционирования: поднимаем плашку вверх, чтобы она легла на границу большой рамки */
    margin: -18px auto 25px auto; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Тень под плашкой */
}

       /* --- СТЕКЛЯННЫЕ КАРТОЧКИ ИНГРЕДИЕНТОВ --- */
/* --- БАЗОВОЕ СОСТОЯНИЕ: Маленькие бежевые карточки --- */
.ingredient {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    
    /* НОВЫЙ ФОН: Разноцветное стекло в зависимости от категории */
    background: var(--card-bg) !important; 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 18px; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 2px 10px rgba(255, 255, 255, 0.02);
    
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    overflow: hidden;

    /* ОТКЛИК НА ТАП ДОЛЖЕН БЫТЬ МГНОВЕННЫМ:
       1) touch-action: manipulation убирает системную задержку тапа ~300мс на
          iOS/Android (браузер её ставит по умолчанию, чтобы отличить одиночный
          тап от двойного тапа-зума — здесь зум не нужен).
       2) Раньше ЛЮБОЕ изменение (в т.ч. transform на нажатие) анимировалось
          0.3s — на мобильных это ощущалось как "залипание" кнопки. Сама реакция
          на нажатие (transform) теперь 0.1s, смена фона/рамки/тени — 0.15s
          (чуть плавнее, чтобы не мигало, но всё ещё быстро). */
    touch-action: manipulation;
    transition: transform 0.1s ease-out, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

/* Мгновенная визуальная реакция В МОМЕНТ нажатия (ещё до срабатывания клика и
   переключения .selected) — именно её не хватало для ощущения "мгновенного" тапа. */
.ingredient:active {
    transform: scale(0.95);
    transition: transform 0.1s ease-out;
}


/* Уменьшаем размер иконки/эмодзи под новый размер карточки */
.ingredient span {
    position: absolute;
    top: 30%;
    font-size: 28px; /* Было 38px */
    z-index: 1;
    transition: transform 0.1s ease-out;
}

/* Настраиваем мелкий, но читаемый текст внизу карточки */
/* --- Текст названия продукта (Дымка строго по форме букв) --- */
.ingredient .name {
    position: relative;
    z-index: 2;
    width: 100%;
    
    /* Убрали огромный верхний отступ, который был нужен для старого градиента */
    padding: 0 4px 6px; 
    
    font-family: 'Inter', sans-serif;
    font-size: 9px; 
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.3px;
    
    /* ПОЛНОСТЬЮ УБИРАЕМ ЛЮБОЙ ФОН И ГРАДИЕНТЫ */
    background: none !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    
    /* МАГИЯ: 4 слоя темной тени, которые создают эффект темного размытия ровно за буквами */
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 1),
        0 0 5px rgba(0, 0, 0, 1),
        0 0 10px rgba(0, 0, 0, 0.9),
        0 0 16px rgba(0, 0, 0, 0.8);
        
    box-sizing: border-box;
}

.ingredient.selected {
    /* Нежно-оранжевый полупрозрачный фон */
    background: rgba(255, 165, 80, 0.25) !important; 
    /* Тонкая оранжевая рамка */
    border-color: #FFA550 !important;
    color: #fff;
    
    /* Оранжевое свечение (наружу и немного внутрь) */
    box-shadow: 0 0 15px rgba(255, 165, 80, 0.3), inset 0 0 10px rgba(255, 165, 80, 0.2);
    transform: scale(1.05) translateY(-2px); /* Слегка увеличиваем карточку при клике */
}

        

        .ingredient .ingr-icon {
            position: absolute;
            top: 8%;
            left: 8%;
            width: 84%;
            height: 84%;
            object-fit: contain;
            z-index: 1;
            transition: transform 0.1s ease-out;
        }

        .ingredient.selected .ingr-icon,
        .ingredient.selected span {
            transform: scale(1.1);
            filter: drop-shadow(0 5px 15px rgba(187, 134, 252, 0.5));
        }

        

        .ingredient.selected .name {
    color: #fff;
    text-shadow: 0 0 8px #FFA550;
        }

/* --- РАДИКАЛЬНОЕ УПРОЩЕНИЕ ЭКРАНА ИНГРЕДИЕНТОВ ДЛЯ МОБИЛЬНЫХ, 2026-09-06 (итерация 2) ---
   Прошлая итерация убрала ТОЛЬКО принудительную GPU-прослойку (will-change/translateZ) у
   .ingredient — этого хватило не до конца, т.к. сам backdrop-filter (даже без слоя под него)
   у ~250 карточек продукта И у 16 блоков .category-group (плюс blur(64-70px) двух
   огромных фигур #bg-glow позади всего этого) на каждый кадр скролла заново
   пересчитывает размытие того, что находится ПОД элементом — это самый дорогой
   вид перерисовки на слабых/средних мобильных GPU, и именно он держит "тормоза"
   при прокрутке списка продуктов независимо от touch-action. На десктопе размытое
   стекло не трогаем (там ресурсов достаточно и эффект — часть дизайна), а на
   мобильных экранах (<=768px) отключаем самые тяжёлые эффекты полностью:
   1) #bg-glow — убираем сам blur-фильтр (был статичным по цвету и раньше, но
      ФИЛЬТР размытия оставался и всё равно пересчитывался под скроллящимся
      контентом). Теперь это просто плоское тёмное пятно без filter.
   2) .category-group — убираем backdrop-filter (blur+saturate) и оставшийся
      will-change/transform, заменяем на обычный полупрозрачный фон.
   3) .ingredient — убираем backdrop-filter (was blur(8px) на КАЖДОЙ из ~250
      карточек одновременно).
   4) .ingredient.selected — свечение (box-shadow с большим радиусом блюра)
      заменено на обычную цветную обводку без blur — дешевле в перерисовке,
      особенно пока карточка ещё и анимирует transform: scale при выборе. */
@media (max-width: 768px) {
    #bg-glow {
        transition: none !important;
    }
    #bg-glow::before,
    #bg-glow::after {
        filter: none !important;
        -webkit-filter: none !important;
        opacity: 0.55;
    }

    .category-group {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(22, 22, 26, 0.94) !important;
        will-change: auto !important;
        transform: none !important;
    }

    .ingredient {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .ingredient.selected {
        box-shadow: none !important;
        border: 2px solid #FFA550 !important;
    }

    /* Свечение (drop-shadow) на иконке/эмодзи выбранного продукта — тот же
       дорогой фильтр перерисовки, что и blur/box-shadow выше, пересчитывается
       вместе с transform: scale(1.1) при каждом выборе карточки на слабом GPU. */
    .ingredient.selected .ingr-icon,
    .ingredient.selected span {
        filter: none !important;
    }

    /* Бесконечная (infinite) compositor-анимация переливающегося градиента
       заголовка + дорогой drop-shadow — постоянная фоновая нагрузка на GPU,
       не только во время скролла. На мобильных заменяем на статичный градиент
       без анимации и без фильтра. */
    .main-header h1 {
        animation: none !important;
        filter: none !important;
        background-position: 0% 50% !important;
    }

    /* --- НИЖНЯЯ ПЛАВАЮЩАЯ ПАНЕЛЬ (.floating-nav) ---
       position: fixed поверх постоянно скроллящейся сетки ингредиентов —
       её backdrop-filter пересчитывался на КАЖДЫЙ кадр скролла (тот же самый
       эффект, что был у .category-group/.ingredient/#bg-glow выше), а
       will-change: transform держал элемент на отдельном composite-слое
       постоянно, а не только на время анимации. Заменяем на непрозрачный фон
       без блюра, как и остальные элементы в этом медиа-запросе. */
    .floating-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 15, 15, 0.97) !important;
        will-change: auto !important;
    }

    /* Тот же fixed-поверх-скролла случай, что и у .floating-nav выше — пока
       баннер виден, сетка ингредиентов под ним всё ещё скроллится. */
    #cookie-banner {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 15, 15, 0.97) !important;
    }
}

        /* --- НИЖНЯЯ ПАНЕЛЬ: СТЕКЛЯННАЯ КАПСУЛА --- */
/* --- НИЖНЯЯ ПАНЕЛЬ: СТЕКЛЯННАЯ КАПСУЛА --- */
.floating-nav {
    position: fixed;
    bottom: 25px; 
    left: 50%;
    transform: translateX(-50%); 
    
    /* Увеличили ширину и лимит, чтобы дать тексту больше места */
    width: 96%; 
    max-width: 500px; 
    
    background: rgba(15, 15, 15, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important; 
    border-radius: 50px !important;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px !important; /* Чуть увеличили отступ внутри капсулы */
    gap: 10px;
    z-index: 1000;
    will-change: transform;
    backface-visibility: hidden;
}

/* --- БОКОВЫЕ КНОПКИ (Вверх и Закрыть) --- */
.floating-nav button:not(#mainActionBtn) {
    /* Сделали круглые кнопки чуть больше, чтобы они гармонировали с новой высотой */
    width: 58px !important; 
    height: 58px !important; 
    border-radius: 50% !important; 
    
    background: rgba(255, 255, 255, 0.08) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0; 
    transition: transform 0.15s ease, background-color 0.2s ease;
}

.floating-nav button:not(#mainActionBtn):hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.05);
}

/* --- ГЛАВНАЯ КНОПКА (Сгенерировать) --- */
#mainActionBtn {
    flex: 1; 
    border-radius: 40px !important; 
    
    /* ВАЖНО: Разрешаем кнопке расти в высоту, если текст длинный */
    min-height: 58px; /* Минимальная высота как у боковых кнопок */
    height: auto !important; 
    padding: 8px 10px !important; /* Добавили отступы для текста внутри */
    
    margin: 0 !important; 
    border: none !important;
    background: #a87ffb !important; 
    box-shadow: 0 4px 15px rgba(168, 127, 251, 0.4) !important;
}

/* --- ГЛАВНАЯ КНОПКА (Сгенерировать) --- */
#mainActionBtn {
    flex: 1; /* Заставляет кнопку занять всё место между круглыми кнопками */
    border-radius: 40px !important; /* Тоже делаем её округлой формы */
    height: 50px; /* Сравниваем по высоте с боковыми кнопками */
    margin: 0 !important; /* Убираем лишние отступы */
    border: none !important;
    
    /* Твой красивый фиолетовый цвет (если он не прописан в другом месте) */
    background: #a87ffb !important; 
    box-shadow: 0 4px 15px rgba(168, 127, 251, 0.4) !important;
}

        .btn-nav-main {
            flex-grow: 2;
            margin: 0;
            height: 55px;
        }

        .btn-nav-small {
            width: 55px;
            flex-grow: 0;
            margin: 0;
            height: 55px;
            font-size: 20px;
            border-radius: 18px;
        }

        input[type="text"] {
            padding: 18px;
            width: 100%;
            box-sizing: border-box;
            border-radius: 18px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: white;
            font-size: 16px;
            outline: none;
            margin-bottom: 15px;
            transition: 0.3s;
        }

        input[type="text"]:focus {
            border-color: var(--primary);
        }

        /* Рецепт, Порции, Планы и Избранное */
        .portions-slider-box {
            background: rgba(187, 134, 252, 0.05);
            border: 1px dashed var(--primary);
            padding: 15px;
            border-radius: 16px;
            margin: 15px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .portions-slider-box input[type="range"] {
            width: 100%;
            margin: 10px 0;
            accent-color: var(--primary);
        }

        .portions-value {
            font-weight: 900;
            color: var(--primary);
            font-size: 18px;
        }

        #recipeResult,
        .fav-item {
            background: var(--surface);
            padding: 30px 25px;
            border-radius: 24px;
            border: 1px solid var(--border);
            line-height: 1.8;
            margin-top: 10px;
            text-align: left;
            font-size: 15px;
            color: #e0e0e0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        #recipeResult b,
        .fav-item b {
            color: var(--secondary);
            font-weight: 800;
            letter-spacing: 0.5px;
            display: inline-block;
            margin-top: 5px;
        }

        .fav-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding-bottom: 5px;
        }

        .fav-header h3 {
            margin: 0;
            font-size: 20px;
            border: none;
            padding: 0;
            text-align: left;
            flex-grow: 1;
            padding-right: 15px;
        }

        .fav-arrow {
            color: var(--secondary);
            font-size: 14px;
            transition: transform 0.3s ease;
        }

        .fav-content {
            border-top: 1px solid rgba(187, 134, 252, 0.2);
            padding-top: 15px;
            margin-top: 10px;
        }

        /* Аккордеон для Планов */
        details.plan-day {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            margin-bottom: 12px;
        }

        details.plan-day>summary {
            color: var(--primary);
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            padding: 15px 20px;
            list-style: none;
            outline: none;
        }

        details.plan-day>summary::-webkit-details-marker {
            display: none;
        }

        details.plan-day[open]>summary {
            border-bottom: 1px solid rgba(187, 134, 252, 0.2);
        }

        /* Режим готовки (Cook Mode) */
        #cook-mode-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            z-index: 99999;
            display: none;
            overflow-y: auto;
            padding: 30px;
            box-sizing: border-box;
        }

        #cookModeText {
            font-size: 24px;
            line-height: 1.6;
            color: #fff;
            margin-bottom: 100px;
        }

        #cookModeText b {
            color: var(--secondary);
        }

        .hidden {
            display: none !important;
        }

        /* Toast Уведомления */
        #toast-container {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
            width: 90%;
            max-width: 400px;
        }

        .toast {
            background: rgba(26, 26, 26, 0.95);
            border: 1px solid var(--primary);
            color: #fff;
            padding: 14px 20px;
            border-radius: 16px;
            font-size: 14px;
            opacity: 0;
            transform: translateY(20px);
            transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            text-align: center;
            font-weight: bold;
        }

        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* Подвал */
        .footer-links {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .footer-links a {
            color: #666;
            font-size: 12px;
            text-decoration: none;
            transition: 0.3s;
            cursor: pointer;
        }

        .footer-links a:hover {
            color: var(--primary);
        }

        .legal-text {
            font-size: 13px;
            color: #aaa;
            line-height: 1.6;
            text-align: left;
            background: var(--surface);
            padding: 20px;
            border-radius: 16px;
            border: 1px solid var(--border);
            overflow-y: auto;
            max-height: 60vh;
        }

        .legal-text h3 {
            color: #fff;
            margin-top: 0;
            font-size: 16px;
        }
    /* Сетка оборудования */
        .equipment-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .eq-card {
            background: var(--surface);
            border-radius: 20px;
            border: 2px solid var(--border);
            padding: 15px 10px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .eq-card img {
            width: 60px;
            height: 60px;
            object-fit: contain;
            transition: transform 0.3s ease;
            filter: drop-shadow(0 0 0 rgba(0,0,0,0));
        }

        .eq-card span {
            font-size: 11px;
            font-weight: bold;
            color: #aaa;
            transition: color 0.3s;
        }

        .eq-card.selected {
            border-color: var(--primary);
            box-shadow: 0 0 20px rgba(187, 134, 252, 0.2);
            background: rgba(187, 134, 252, 0.05);
        }

        .eq-card.selected img {
            transform: scale(1.1);
            filter: drop-shadow(0 5px 15px rgba(187, 134, 252, 0.5));
        }

        .eq-card.selected span {
            color: #fff;
        }

        /* Переопределяем старый фон рецепта, чтобы было видно матовое стекло */
        #recipeResult { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }

        /* --- ИНТЕРАКТИВНЫЙ ФОН РЕЦЕПТА --- */
        #interactive-bg {
            position: fixed; top: 0; left: 0; width: 100vw;
            height: 100vh; /* Фолбэк для браузеров без поддержки dvh */
            /* БАГ iOS: 100vh считается по максимальной высоте экрана (со скрытой адресной
               строкой), поэтому при её появлении/скрытии снизу оголялась белая полоса.
               100dvh пересчитывается под РЕАЛЬНУЮ видимую область в реальном времени,
               а запас на env(safe-area-inset-bottom) гарантированно перекрывает нижнюю
               челку/индикатор Home даже при округлении. */
            height: 100dvh;
            height: calc(100dvh + env(safe-area-inset-bottom, 0px));
            z-index: 1;
            background-size: contain; background-repeat: no-repeat; background-position: center;
            transform-origin: center; cursor: grab; transition: transform 0.1s ease-out;
            will-change: transform; transform: translateZ(0);
        }
        #interactive-bg:active { cursor: grabbing; }

        #bg-overlay {
            position: fixed; top: 0; left: 0; width: 100vw;
            height: 100vh;
            height: 100dvh;
            height: calc(100dvh + env(safe-area-inset-bottom, 0px));
            z-index: 2; pointer-events: none;
            background: rgba(15, 5, 30, 0.65); /* Размытие УБРАНО! */
        }

        /* ИДЕАЛЬНО БЕЛЫЙ ЗАГОЛОВОК, КАК НА ФОТО */
        #dishTitle {
            font-family: 'Bodoni Moda', 'Georgia', serif !important;
            color: #ffffff !important; 
            font-size: 32px; font-weight: 900; font-style: italic;
            text-align: center; margin: 0 0 30px 0;
            text-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }

        /* КВАДРАТНОЕ ДУБЛИРОВАННОЕ ФОТО С БЛЕСКОМ */
        .glass-duplicate-image-container {
            width: 100%; /* Теперь картинка растянута ровно по ширине блоков */
            margin: 25px 0 40px 0; /* Отступы как у остальных блоков */
            position: relative; overflow: hidden;
            border-radius: 20px; /* Закругление углов точно как у блоков рецепта */
            aspect-ratio: 1 / 1; /* Сохраняем квадратную форму */
            border: 1px solid rgba(255, 255, 255, 0.08); /* Тонкая стеклянная рамка */
            box-shadow: 0 15px 35px rgba(0,0,0,0.4); /* Глубокая тень для объема */
            z-index: 10;
            box-sizing: border-box;
        }
        .glass-duplicate-image-container img {
            width: 100%; height: 100%; object-fit: cover;
        }
        /* Анимация пролетающего блика */
        .glass-duplicate-image-container::after {
            content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            animation: shineEffect 5s infinite; pointer-events: none;
        }
        @keyframes shineEffect {
            0% { left: -150%; } 20% { left: 150%; } 100% { left: 150%; }
        }

        /* --- УНИВЕРСАЛЬНЫЙ СТЕКЛЯННЫЙ БЛОК (Glassmorphism) --- */
        .r-glass-block {
            position: relative; z-index: 10;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.1);
            padding: 25px; margin-bottom: 15px; box-sizing: border-box;
            /* backdrop-filter — один из самых дорогих эффектов на мобильном GPU;
               выносим блок на отдельный слой, чтобы браузер не пересчитывал его
               при каждом скролле/тапе на экране рецепта. */
            will-change: transform;
            transform: translateZ(0);
        }

        .r-header {
            font-family: 'Georgia', serif; font-size: 20px; font-style: italic;
            text-align: center; margin: 0 0 20px 0; color: var(--primary);
            text-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        /* ОБЪЕДИНЕННЫЙ БЛОК ПОРЦИЙ И КБЖУ */
        .r-portions-wrapper { margin-bottom: 25px; }
        .r-portions-header { display: flex; justify-content: space-between; font-size: 14px; color: #ddd; margin-bottom: 12px; }
        .r-portions-val { font-weight: bold; color: var(--primary); font-size: 16px; }
        
        input[type="range"].r-slider-internal {
            width: 100%; accent-color: var(--primary); background: rgba(255,255,255,0.1);
            height: 4px; border-radius: 2px; outline: none; -webkit-appearance: none;
        }
        input[type="range"].r-slider-internal::-webkit-slider-thumb {
            -webkit-appearance: none; width: 16px; height: 16px; background: var(--primary);
            border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px var(--primary);
        }

        .r-kbju-grid { 
            display: flex; justify-content: space-between; align-items: center; 
            border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 20px;
        }
        .r-kbju-item { text-align: center; flex: 1; border-right: 1px solid rgba(255, 255, 255, 0.08); }
        .r-kbju-item:last-child { border-right: none; }
        .r-kbju-val { font-size: 24px; font-weight: 900; margin-bottom: 4px; color: #fff; }
        .r-kbju-val.cyan { 
    color: var(--recipe-rarity-color, var(--secondary)); 
    text-shadow: 0 0 15px currentColor; 
}
        .r-kbju-lbl { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }

        /* Ингредиенты */
        .r-ingr-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
        .r-ingr-row:last-child { border-bottom: none; }
        .r-ingr-name { font-size: 15px; font-weight: bold; flex-grow: 1; color: #e0e0e0; }
        .r-ingr-controls { display: flex; align-items: center; gap: 12px; }
        .r-ingr-weight { min-width: 65px; text-align: center; font-weight: bold; color: #fff; font-size: 14px;}
        
        .r-btn-icon {
            background: none; border: none; color: var(--primary);
            font-size: 20px; cursor: pointer; padding: 0 5px;
            transition: 0.2s; font-weight: bold;
        }
        .r-btn-icon:active { transform: scale(0.8); }

        /* Шаги приготовления */
        .recipe-step {
            display: flex;
            align-items: flex-start;
            gap: 15px; /* Расстояние между картинкой и текстом */
            margin-bottom: 15px;
            background: rgba(255, 255, 255, 0.03); /* Легкий премиальный фон для шага */
            padding: 15px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .recipe-step-img {
            width: 120px;        /* Задаем ширину прямоугольника (можно сделать больше/меньше) */
            height: auto;        /* Высота автоматически подстроится под родные пропорции */
            border-radius: 12px; /* Оставляем мягкое скругление углов */
            flex-shrink: 0;      /* Запрещаем картинке сжиматься, если текста много */
            border: 1px solid var(--recipe-rarity-color, var(--secondary)); 
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        /* Адаптация под мобильные телефоны */
        @media (max-width: 480px) {
            .recipe-step-img { 
                width: 90px;     /* На телефонах прямоугольник будет чуть меньше */
                height: auto; 
            }
            .recipe-step { padding: 12px; gap: 12px; }
            .recipe-step-text { font-size: 13px; }
        }
        
        /* Скрываем кнопки пересчета в Избранном */
        .fav-item .r-ingr-controls .r-btn-icon { display: none !important; }

#swipeCardWrapper {
    perspective: 1500px; /* Глубина 3D-пространства */
}

/* --- САМА КАРТОЧКА --- */
.swipe-card-container {
    position: relative; width: 100%; max-width: var(--s-card-width); aspect-ratio: 3 / 4; margin: 0 auto;
    border-radius: var(--s-card-radius); overflow: hidden;
    border: var(--s-card-border-width) solid var(--card-color, var(--s-card-border-color));
    background-color: #1a1a1a; background-size: cover; background-position: center;
    font-family: var(--s-font-main); 
    cursor: pointer;
    
    /* Плавность для 3D переворота */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    transform-style: preserve-3d; /* Включаем правильный объем */

    /* МАГИЯ СВЕЧЕНИЯ: Анимация пульсации цветом редкости */
    animation: rarityCardGlow 3s ease-in-out infinite alternate;
    /* Карточка и так анимирует transform (флип/свайп) — фиксируем её на отдельном
       GPU-слое, чтобы браузер не пересчитывал layout всего экрана каждый кадр. */
    will-change: transform;
    backface-visibility: hidden;
}

/* Анимация пульсирующего света от карточки (дыхание редкости).
   box-shadow не композитится видеокартой (в отличие от transform/opacity) и
   вызывает перерисовку каждый кадр — слегка уменьшили размах теней, чтобы
   уменьшить площадь перерисовки, сохранив сам эффект "дыхания". */
@keyframes rarityCardGlow {
    0% {
        box-shadow: 0 5px 20px var(--card-color), inset 0 0 8px rgba(0,0,0,0.5);
    }
    100% {
        box-shadow: 0 12px 40px var(--card-color), inset 0 0 22px var(--card-color);
    }
}

        .swipe-card-overlay {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,var(--s-overlay-top)) 0%, transparent 25%, transparent 70%, rgba(0,0,0,var(--s-overlay-bottom)) 100%);
            display: flex; flex-direction: column; justify-content: space-between; padding: 20px 15px 0 15px; pointer-events: none;
        }

        /* --- ОТВЯЗАННЫЕ БЛОКИ --- */
        .swipe-top { text-align: center; padding: 10px 5px 0 5px; width: 100%; box-sizing: border-box; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;}

        .swipe-title { 
            width: var(--s-title-width); 
            transform: translate(var(--s-title-x), var(--s-title-y));
            font-size: var(--s-title-font-size); font-weight: 900; color: #ffffff; 
            line-height: var(--s-title-lh); letter-spacing: var(--s-title-ls);
            margin: -20px auto 15px auto; 
            padding: var(--s-title-padding-v) var(--s-title-padding-h); box-sizing: border-box;
            border-radius: var(--s-title-radius-top) var(--s-title-radius-top) var(--s-title-radius-bottom) var(--s-title-radius-bottom); 
            backdrop-filter: blur(var(--s-title-blur)) saturate(var(--s-title-sat)); -webkit-backdrop-filter: blur(var(--s-title-blur)) saturate(var(--s-title-sat));
            border-bottom: 1px solid rgba(255, 255, 255, 0.18);
            background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, var(--s-title-bg-opacity)) 0%, rgba(0, 0, 0, 0.65) 100%);
            box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.08), inset 0 -4px 10px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.3);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); 
            display: flex; align-items: center; justify-content: center;
        }

        .swipe-sub-title-wrapper {
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-top: -10px; /* Твой настроенный отступ */
    /* Идеально точные отступы, чтобы приклеиться к самым краям карточки */
    width: calc(100% + 40px); 
    margin-left: -20px; 
    box-sizing: border-box;
}

.swipe-cuisine { 
    padding: 6px 15px 6px 15px; 
    font-size: 10px; 
    border-radius: 10px 0 0 10px; 
    text-align: right;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    flex-shrink: 1;

    /* Инвертированный градиент: цвет идет от правого края, затемняясь к центру */
    background: linear-gradient(90deg, rgba(10, 10, 15, 0.95) 10%, var(--card-color) 350%); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff; 
    
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-left: none; /* Убираем рамку внутри карточки */
    border-right: 1.5px solid var(--card-color); /* Цветной кончик на самом краю */
    
    box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.6); 
    font-weight: bold; 
    display: inline-block; 
    text-transform: uppercase; 
}

/* Контейнер для левых бейджей */
.swipe-left-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.swipe-category {
    /* Инвертированный градиент: цвет идет от левого края, затемняясь к центру */
    background: linear-gradient(270deg, rgba(10, 10, 15, 0.95) 10%, var(--card-color) 350%); 
    padding: 6px 15px 6px 15px; 
    border-radius: 0 10px 10px 0; 
    color: #fff; 
    font-size: 11px; 
    
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-right: none; /* Убираем рамку внутри карточки */
    border-left: 1.5px solid var(--card-color); /* Цветной кончик на самом краю */
    
    font-weight: bold; 
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.6);
}
.swipe-category:empty { display: none !important; }

.swipe-spicy, .swipe-diet {
    background: linear-gradient(270deg, rgba(10, 10, 15, 0.95) 10%, var(--card-color) 350%); 
    padding: 5px 12px 5px 15px; 
    border-radius: 0 10px 10px 0; 
    font-size: 14px; 
    
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-right: none;
    border-left: 1.5px solid var(--card-color); 
    
    display: inline-block;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.6);
}
.swipe-spicy:empty, .swipe-diet:empty { display: none !important; }


        .swipe-bottom { width: 100%; display: flex; flex-direction: column; align-items: center; }

        .swipe-rarity-wrapper {
            width: 100%; display: flex; justify-content: center; margin-bottom: 15px;
        }

        .swipe-rarity { 
            transform: translate(var(--b1-x), var(--b1-y)) rotate(var(--b1-rot));
            padding: var(--b1-pv) var(--b1-ph); font-size: var(--b1-sz); border-radius: var(--b1-rad);
            background: var(--card-color, #bb86fc); color: #000; box-shadow: 0 0 15px var(--card-color, #bb86fc); font-weight: 900; 
            display: inline-block; white-space: nowrap; text-transform: uppercase; max-width: max-content;
        }

        .swipe-kbju-dashboard {
            width: calc(var(--s-kbju-width) - 10px);
            margin: 0 auto 20px auto;
            transform: translate(var(--s-kbju-x), var(--s-kbju-y));
            display: flex; justify-content: space-between;
            background: rgba(20, 20, 20, 0.85); 
            backdrop-filter: blur(var(--s-kbju-blur)); -webkit-backdrop-filter: blur(var(--s-kbju-blur));
            border: var(--s-kbju-border-width) solid var(--card-color, var(--s-kbju-border-color)); 
            border-radius: var(--s-kbju-radius); padding: var(--s-kbju-padding) 5px; box-shadow: 0 5px 25px rgba(0,0,0,0.6); box-sizing: border-box;
        }
        .s-kbju-item { text-align: center; flex: 1; border-right: 1px solid rgba(255,255,255,0.15); display: flex; flex-direction: column; justify-content: center; }
        .s-kbju-item:last-child { border-right: none; }
        .s-kbju-val { font-size: var(--s-kbju-val-sz); font-weight: 900; color: #fff; margin-bottom: 4px; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
        .s-kbju-lbl { font-size: var(--s-kbju-lbl-sz); color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; }
        .swipe-controls { display: flex; justify-content: center; gap: 30px; margin-top: 25px; }
        .btn-swipe { width: 70px; height: 70px; border-radius: 50%; border: none; font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
        .btn-swipe.left { background: rgba(255, 71, 87, 0.1); color: #ff4757; border: 2px solid #ff4757; box-shadow: 0 0 20px rgba(255, 71, 87, 0.2); }
        .btn-swipe.right { background: rgba(3, 218, 198, 0.1); color: #03dac6; border: 2px solid #03dac6; box-shadow: 0 0 20px rgba(3, 218, 198, 0.2); }
        .btn-swipe:active { transform: scale(0.9); }

        /* --- СТИЛИ ДЛЯ ИНЛАЙН-КНОПКИ В ТЕКСТЕ --- */
        .inline-sub-btn {
            background: rgba(0, 0, 0, 0.55); /* Полупрозрачный темный фон */
            backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
            border: 1px solid var(--recipe-rarity-color, var(--secondary)); /* Цвет редкости */
            color: var(--recipe-rarity-color, var(--secondary)) !important; /* Цвет редкости */
            padding: 2px 8px; margin: 0 3px; border-radius: 8px;
            cursor: pointer; font-family: var(--font-text);
            font-weight: bold; font-size: 14px;
            display: inline-block; vertical-align: baseline; transition: 0.2s;
        }
        .inline-sub-btn:active {
            background: var(--recipe-rarity-color, var(--secondary));
            color: #000 !important;
            transform: scale(0.95);
        }

        /* --- СТИЛИ ДЛЯ ВСПЛЫВАЮЩЕГО ОКНА-КОММЕНТАРИЯ --- */
        .sub-modal-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
            background: rgba(0, 0, 0, 0.4) !important; /* Чуть усилили затемнение */
            z-index: 999999 !important; /* ЖЕЛЕЗОБЕТОННЫЙ СЛОЙ ПОВЕРХ ВСЕГО */
            display: flex; align-items: flex-start; justify-content: flex-start;
            opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
        }
        .sub-modal-overlay.active { opacity: 1; pointer-events: auto; }
        
        .sub-modal-box {
            position: fixed;
            margin: 0 !important;
            background: rgba(10, 10, 15, 0.95);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border: 1.5px solid var(--recipe-rarity-color, var(--secondary));
            border-radius: 16px;
            padding: 18px;
            width: 300px;
            box-shadow: 
                0 15px 40px rgba(0, 0, 0, 0.8),
                0 0 20px rgba(187, 134, 252, 0.15),
                inset 0 0 20px rgba(255, 255, 255, 0.05);
            z-index: 9999999 !important; /* САМЫЙ ВЫСОКИЙ ПРИОРИТЕТ */
            box-sizing: border-box;
            transform: none !important;
            animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        /* Анимация пружинистого появления */
        @keyframes popIn {
            from { opacity: 0; transform: scale(0.9) translateY(-10px) !important; }
            to { opacity: 1; transform: scale(1) translateY(0) !important; }
        }
        .sub-modal-overlay.active .sub-modal-box { transform: translateY(0); }


/* --- НОВЫЙ ДИЗАЙН КНОПОК --- */

/* 1. Ставим две кнопки в ровный ряд */
.main-buttons-row {
    display: flex;
    gap: 12px;           /* Расстояние между кнопками */
    width: 100%;         /* Ширина на весь экран */
    margin-bottom: 12px; /* Отступ вниз до следующей кнопки */
}

/* Каждая кнопка занимает ровно половину места */
.main-buttons-row .chef-btn {
    flex: 1;             
    margin: 0 !important; 
}

/* 2. Общая форма для всех кнопок */
.chef-btn {
    padding: 14px 20px;
    border-radius: 12px;     /* Скругленные края */
    font-weight: bold;       /* Жирный текст */
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    box-sizing: border-box;
}

/* 3. Эффект размытого стекла (для верхних кнопок) */
.btn-glass {
    background: rgba(255, 255, 255, 0.06) !important; /* Прозрачный фон */
    backdrop-filter: blur(12px) !important;          /* Само размытие */
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Тонкая рамка */
    color: #ffffff !important;                       /* Белый текст */
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.12) !important; /* Чуть светлеет при наведении */
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 4. Переливающийся градиент Редкости (для нижней кнопки) */
/* Переливающийся градиент редкости */
.btn-rarity-gradient {
    width: 100%;
    /* ВАЖНО: используем background-image, чтобы анимация могла двигать фон */
    background-image: linear-gradient(270deg, 
        rgba(0, 112, 221, 0.6),   
        rgba(123, 44, 191, 0.6),  
        rgba(3, 218, 198, 0.6),   
        rgba(0, 112, 221, 0.6)
    ) !important;
    background-size: 300% 300% !important;
    animation: rarityFlow 4s ease infinite !important; /* Сделал 4 секунды, чтобы перелив был бодрее */
    
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.btn-rarity-gradient:hover {
    box-shadow: 0 0 20px rgba(123, 44, 191, 0.4);
}

/* Сама анимация движения (убедись, что она есть в коде) */
@keyframes rarityFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- СТИЛИ ДЛЯ ВЕРХНЕГО МЕНЮ (СТЕКЛО И ПОИСК) --- */

/* Темный стеклянный фон-капсула для заголовков */
.glass-title-only {
    background: rgba(15, 15, 15, 0.75); /* Полупрозрачный глубокий темный тон */
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    
    /* ЭФФЕКТ КАПСУЛЫ */
    width: fit-content;            /* Плашка сжимается ровно по ширине текста */
    max-width: 90%;                /* Ограничение ширины для мобильных экранов */
    margin: 10px auto 20px auto;   /* Выравниваем капсулу строго по центру */
    padding: 10px 35px;            /* Большие отступы по бокам, чтобы получилась форма вытянутой капсулы */
    border-radius: 50px;           /* Максимально круглые края */
    
    /* Свечение и объем */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Тонкая стеклянная рамка вокруг */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);  /* Мягкая объемная тень под капсулой */
    text-align: center;
}

/* Настройки поля поиска */
#searchInput, #publishSearchInput {
    display: block !important;
    width: 90% !important;         
    max-width: 400px !important;   
    margin: 0 auto !important; 
    position: relative !important; 
    z-index: 10 !important;        

    /* Визуальный стиль: Идеальное матовое темное стекло */
    border-radius: 50px !important; 
    background-color: rgba(25, 25, 30, 0.75) !important; /* Чуть светлее черного, приятная прозрачность */
    backdrop-filter: blur(15px) !important; 
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Тонкая стеклянная рамка */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important; /* Мягкая тень под самой строкой */
    
    /* Иконка лупы */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 18px center;
    
    padding: 14px 20px 14px 50px !important; 
    color: #ffffff !important; 
    font-size: 14px !important; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important; 
    font-weight: 600;
    box-sizing: border-box;
}

#searchInput:focus, #publishSearchInput:focus {
    border-color: var(--primary) !important;
    background-color: rgba(35, 35, 45, 0.85) !important; /* При клике фон становится чуть плотнее */
    outline: none;
}

/* Делаем текст подсказки тоже маленьким */
#searchInput::placeholder, #publishSearchInput::placeholder {
    color: rgba(255, 255, 255, 0.75) !important; 
    font-size: 12px !important; /* ВАЖНО: Уменьшили размер самой подсказки */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important; 
}

/* Эффект при клике */
#searchInput:focus, #publishSearchInput:focus {
    border-color: var(--primary) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    outline: none;
}

/* --- СТИЛИ ДЛЯ РАЗМЫТОЙ КАРТОЧКИ (НЕ ХВАТАЕТ ПРОДУКТА) --- */

/* Контейнер карточки (если на ней висит класс locked) */
.recipe-card.locked {
    position: relative;
    overflow: hidden;
}

/* Весь контент рецепта внутри размывается */
.recipe-card.locked .recipe-inner-content {
    filter: blur(10px);
    opacity: 0.6;
    pointer-events: none; /* Запрещаем кликать по размытому тексту/картинке */
    user-select: none;
}

/* Оверлей (темная пленка поверх размытия с текстом и кнопкой) */
.locked-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    background: rgba(10, 10, 10, 0.4);
    z-index: 10;
    padding: 20px;
    text-align: center;
    border-radius: inherit; /* Наследует скругление самой карточки */
}

/* Иконка замка или корзины */
.locked-icon {
    font-size: 45px;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}

/* Текст "Вам нужно докупить..." */
.locked-text {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: -20px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* Кнопка "У меня это есть / Хорошо" */
.btn-unlock {
    background: linear-gradient(135deg, #a87ffb, #7b2cbf);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(123, 44, 191, 0.5);
    transition: transform 0.2s ease;
}

.btn-unlock:active {
    transform: scale(0.95);
}

/* --- СТИЛИ ДЛЯ БЛОКИРОВКИ КАРТОЧКИ --- */
.locked-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    
    background: rgba(15, 15, 20, 0.4); /* Полупрозрачный темный фон */
    
    /* МАГИЯ РАЗМЫТИЯ: размывает карточку под собой */
    backdrop-filter: blur(12px) grayscale(40%); 
    -webkit-backdrop-filter: blur(12px) grayscale(40%);
    
    z-index: 100;
    padding: 20px;
    text-align: center;
    border-radius: inherit; /* Закругляется так же, как сама карточка */
}

.locked-icon { font-size: 55px; margin-bottom: 15px; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.6)); }

.locked-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 25px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
}

.btn-unlock {
    background: linear-gradient(135deg, #a87ffb, #7b2cbf);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(123, 44, 191, 0.5);
    transition: transform 0.2s ease;
}
.btn-unlock:active { transform: scale(0.95); }

/* --- СТИЛИ ДЛЯ БЛОКИРОВКИ КАРТОЧКИ --- */
.locked-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(15, 15, 20, 0.4); 
    
    /* Магия: размывает всё, что находится под этим слоем */
    backdrop-filter: blur(12px) grayscale(40%); 
    -webkit-backdrop-filter: blur(12px) grayscale(40%);
    
    z-index: 100;
    padding: 20px;
    text-align: center;
    border-radius: inherit; /* Закругляется точно как карточка */
}

.locked-icon { font-size: 55px; margin-bottom: 15px; filter: drop-shadow(0 4px 15px rgba(0,0,0,0.6)); }

.locked-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 25px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
}

.btn-unlock {
    background: linear-gradient(135deg, #a87ffb, #7b2cbf);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(123, 44, 191, 0.5);
    transition: transform 0.2s ease;
}
.btn-unlock:active { transform: scale(0.95); }

/* --- СТИЛИ ДЛЯ ДИНАМИЧЕСКОГО СВЕЧЕНИЯ ФОНА (АЙФОН ЭФФЕКТ) --- */

/* Настраиваем сам экран */
#screen-ingredients {
    position: relative;
}

/* --- ДИНАМИЧЕСКОЕ СВЕЧЕНИЕ (ДВА ШАРА ПО КРАЯМ) --- */

/* --- ДИНАМИЧЕСКОЕ СВЕЧЕНИЕ (ЛЕТАЮЩИЕ ШАРЫ) --- */

#bg-glow {
    position: fixed; 
    top: 0; left: 0; 
    width: 0; height: 0; 
    z-index: -1; 
    pointer-events: none;
    background-color: rgba(20, 20, 25, 0.4); 
    transition: background-color 1.5s ease-in-out;
}

/* ПЕРВЫЙ ШАР: статичное мягкое свечение слева-сверху.
   РАНЬШЕ этот шар летал по кругу (orbFloatLeft) и менял цвет через JS
   (initDynamicBackground в fridge.js, IntersectionObserver по категориям) —
   именно эта пара давала главный лаг экрана ингредиентов: непрерывная
   transform-анимация ОГРОМНОГО (70vw/70vh) блюр-слоя ПЛЮС смена его цвета на
   каждой прокрученной категории заставляли браузер перерисовывать/пересчитывать
   layout при каждом кадре скролла. Экран ингредиентов и так самый "тяжёлый"
   (десятки стеклянных карточек с backdrop-filter) — фон здесь принципиально
   упрощён до статичного пятна БЕЗ анимации. На всех остальных экранах
   (#swipe-bg-glow, .glow-orb-1/2) динамика фона не тронута. */
#bg-glow::before {
    content: '';
    position: fixed;
    top: -15vh; left: -20vw;
    width: 70vw;
    height: 70vh;
    border-radius: 50%;

    background-color: inherit;
    background-image: radial-gradient(circle at 40% 40%, rgba(0, 0, 0, 0.85) 0%, transparent 60%);

    filter: blur(64px);
    -webkit-filter: blur(64px);
}

/* ВТОРОЙ ШАР: тоже статичный, справа-снизу (см. комментарий выше) */
#bg-glow::after {
    content: '';
    position: fixed;
    bottom: -15vh; right: -20vw;
    width: 80vw;
    height: 80vh;
    border-radius: 50%;

    background-color: inherit;
    background-image: radial-gradient(circle at 60% 60%, rgba(0, 0, 0, 0.9) 0%, transparent 60%);

    filter: blur(70px);
    -webkit-filter: blur(70px);
}

/* --- ПАУЗА ТЯЖЁЛЫХ ФОНОВЫХ АНИМАЦИЙ ВО ВРЕМЯ СКРОЛЛА (все экраны, кроме ингредиентов) ---
   #bg-glow (экран ингредиентов) выше уже сделан полностью статичным, поэтому
   его тут больше нет — пауза нужна только там, где фон по-прежнему анимирован
   (свайп-колода, главный экран), чтобы весь бюджет кадра при скролле уходил на
   сам скролл. Возобновляется через 150мс после остановки скролла (см. ui.js). */
body.is-scrolling #swipe-bg-glow::before,
body.is-scrolling #swipe-bg-glow::after,
body.is-scrolling .glow-orb-1,
body.is-scrolling .glow-orb-2 {
    animation-play-state: paused !important;
}

/* --- ЭКРАН СВАЙПОВ (Apple Music Style) --- */

/* Стеклянная кнопка "Назад" слева сверху */
.glass-back-btn {
    position: absolute; top: 15px; left: 0px; z-index: 100;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.08); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.glass-back-btn:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.15); }

/* --- ИСПРАВЛЕННЫЕ БОКОВЫЕ СТРЕЛКИ (Круглые, как в плеере) --- */
.side-swipe-btn {
    position: fixed; /* Приклеиваем их строго к краям экрана! */
    top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%; /* Идеальный круг */
    background: rgba(255, 255, 255, 0.08); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease; z-index: 100;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
/* Разносим их по краям */
.side-swipe-btn.left { left: 15px; }
.side-swipe-btn.right { right: 15px; }

.side-swipe-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; transform: translateY(-50%) scale(1.1); }
.side-swipe-btn:active { background: rgba(255, 255, 255, 0.25); transform: translateY(-50%) scale(0.9); }

/* --- ИСПРАВЛЕННЫЙ ФОН "СМОКИ АВРОРА" С ЦВЕТАМИ ИЗ ФОТО --- */
#swipe-bg-glow {
    position: fixed; top: 0; left: 0;
    width: 100vw;
    height: 100vh; /* Фолбэк */
    /* Тот же фикс белой полосы снизу на iOS, что и у #interactive-bg: 100dvh
       следует за реальной видимой областью, запас на safe-area перекрывает низ. */
    height: 100dvh;
    height: calc(100dvh + env(safe-area-inset-bottom, 0px));
    z-index: 0; /* Изменили с -2 на 0, чтобы фон перестал прятаться */
    pointer-events: none;
    overflow: hidden;
    background: #050505; /* Самый нижний слой - чистый черный */
}

/* СЛОЙ 1: Картинка блюда (Размытая + БЕСКОНЕЧНОЕ ЖИДКОЕ ВРАЩЕНИЕ) */
#swipe-bg-glow::before {
    content: ''; position: absolute;
    /* Делаем слой гигантским кругом, чтобы углы картинки никогда не оголялись при вращении */
    top: -50vh; left: -50vw; width: 200vw; height: 200vh;
    border-radius: 50%;
    background-image: var(--swipe-bg-img, none);
    background-color: var(--swipe-bg-color, rgba(20, 20, 25, 0.4));
    background-size: cover; 
    background-position: center;
    /* Ультра-мягкое размытие для смешивания цветов (blur чуть уменьшили — визуально
       незаметно, а нагрузка на GPU у больших blur-радиусов растёт нелинейно) */
    filter: blur(75px) brightness(0.35) saturate(200%);
    -webkit-filter: blur(75px) brightness(0.35) saturate(200%);
    transition: background-image 0.8s ease-in-out, background-color 0.8s ease-in-out;
    z-index: 1;
    /* Запускаем мягкое круговое движение со скоростью 35 секунд */
    animation: circularGlowMove 35s linear infinite;
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
}

/* СЛОЙ 2: Живой черный дым (Вращается навстречу цветам) */
#swipe-bg-glow::after {
    content: ''; position: absolute;
    top: -40vh; left: -40vw; width: 180vw; height: 180vh;
    border-radius: 50%;
    background-image: 
        radial-gradient(circle at 35% 35%, rgba(0, 0, 0, 0.98) 0%, transparent 55%),
        radial-gradient(circle at 65% 65%, rgba(0, 0, 0, 0.98) 0%, transparent 55%);
    background-size: cover;
    filter: blur(60px);
    -webkit-filter: blur(60px);
    z-index: 2;
    /* Крутится в другую сторону и чуть быстрее для создания 3D-объема */
    animation: circularSmokeFloat 25s linear infinite;
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
}

/* --- ИДЕАЛЬНЫЕ КРУГОВЫЕ АНИМАЦИИ (ЭФФЕКТ ЖИДКОГО СТЕКЛА) --- */
@keyframes circularGlowMove {
    0% { transform: rotate(0deg) translate(0, -5vh) scale(1); }
    25% { transform: rotate(90deg) translate(5vw, 0) scale(1.08); }
    50% { transform: rotate(180deg) translate(0, 5vh) scale(1); }
    75% { transform: rotate(270deg) translate(-5vw, 0) scale(1.08); }
    100% { transform: rotate(360deg) translate(0, -5vh) scale(1); }
}

@keyframes circularSmokeFloat {
    0% { transform: rotate(360deg) translate(0, 4vh) scale(1.05); }
    50% { transform: rotate(180deg) translate(-4vw, -4vh) scale(0.95); }
    100% { transform: rotate(0deg) translate(0, 4vh) scale(1.05); }
}

/* --- ЗАКРЕПЛЕННАЯ ПАНЕЛЬ ПОИСКА (ФРОСТ-СТЕКЛО) --- */
.sticky-top-panel {
    position: sticky;
    top: 0;
    z-index: 150;
    
    /* Расширяем панель на всю ширину экрана, игнорируя отступы */
    margin: -25px -25px 20px -25px; 
    padding: 25px 25px 15px 25px;
    
    /* Глубокий матовый фон: скрывает уезжающие под него карточки */
    background: rgba(5, 5, 8, 0.85); 
    backdrop-filter: blur(25px) saturate(150%);
    -webkit-backdrop-filter: blur(25px) saturate(150%);
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
    /* sticky + тяжёлый backdrop-filter пересчитывается на каждый кадр скролла —
       собственный composite-слой заметно сглаживает скролл списка ингредиентов. */
    will-change: transform;
    transform: translateZ(0);
}

/* Дизайн новых кнопок-настроений */
.mood-card {
    flex: 0 0 85px;
    height: 100px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    text-align: center;
    font-size: 24px;
    cursor: pointer;
    transition: 0.3s;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.mood-card span { 
    font-size: 10px; 
    text-transform: uppercase; 
    font-weight: 800; 
    display: block; 
    margin-top: 5px; 
}
.mood-card:active { 
    transform: scale(0.95); 
    background: var(--primary); 
    color: #000;
}
/* Прячем полосу прокрутки для карусели на телефонах */
.mood-card::-webkit-scrollbar {
    display: none;
}
/* --- СТИЛИ ДЛЯ ПРЕМИАЛЬНЫХ ФИЛЬТРОВ (Apple Style) --- */

/* Контейнер скрывает скроллбар, но оставляет возможность свайпать пальцем */
.filter-scroll-container {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none; /* Для Firefox */
}
.filter-scroll-container::-webkit-scrollbar { 
    display: none; /* Для Chrome и Safari (iPhone) */
}

/* Дорожка, в которой лежат кнопки */
.filter-track {
    display: flex;
    gap: 10px;
    width: max-content; /* Дорожка растягивается по ширине кнопок */
    padding-bottom: 5px;
}

/* Сами кнопки: матовое стекло */
.filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #bbb;
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: 'Inter', sans-serif;
}

/* Кнопка при нажатии (Активная) */
.filter-btn.active {
    background: rgba(187, 134, 252, 0.15); /* Твой фирменный фиолетовый */
    border-color: #bb86fc;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(187, 134, 252, 0.3);
}

.filter-btn:active {
    transform: scale(0.95);
}
/* --- КВАДРАТНЫЕ КНОПКИ (APPLE SQUIRCLE) --- */
.squircle-btn {
    background: rgba(255, 255, 255, 0.05); /* Полупрозрачный фон */
    backdrop-filter: blur(15px); /* Эффект стекла */
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Тонкая светлая рамка */
    border-radius: 24px; /* Сильное закругление краев */
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Глубокая тень */
    aspect-ratio: 1 / 1; /* ДЕЛАЕТ КНОПКУ ИДЕАЛЬНО КВАДРАТНОЙ */
    will-change: transform;
}

/* Анимация при нажатии */
.squircle-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.12);
}

.sq-icon {
    font-size: 32px;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

.sq-text {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

/* Нижние кнопки делаем прямоугольными, но в том же стиле */
.small-sq {
    aspect-ratio: auto; /* Отключаем жесткий квадрат */
    padding: 12px 5px;
    border-radius: 18px;
}
.small-sq .sq-icon { font-size: 24px; margin-bottom: 5px; }
.small-sq .sq-text { font-size: 11px; }

/* =========================================
   НОВЫЙ ДИЗАЙН ГЛАВНОГО ЭКРАНА (АНИМАЦИИ И МАТРЕШКА)
========================================= */

/* АНИМАЦИИ ФОНА (Медленное плавание сфер) */
@keyframes floatOrb1 {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(40px, -50px) scale(1.1); }
    66% { transform: translate(-30px, 30px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes floatOrb2 {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(-50px, 40px) scale(1.2); }
    66% { transform: translate(40px, -40px) scale(0.85); }
    100% { transform: translate(0px, 0px) scale(1); }
}

/* Сферы теперь используют анимацию */
.glow-orb-1 {
    position: fixed; width: 280px; height: 280px; background: #bb86fc;
    filter: blur(70px); opacity: 0.25; top: 5%; left: -10%; z-index: -1;
    border-radius: 50%; pointer-events: none;
    animation: floatOrb1 6s ease-in-out infinite; /* Бесконечное плавное движение */
    will-change: transform; transform: translateZ(0); backface-visibility: hidden;
}
.glow-orb-2 {
    position: fixed; width: 320px; height: 320px; background: #03dac6;
    filter: blur(75px); opacity: 0.15; bottom: 15%; right: -10%; z-index: -1;
    border-radius: 50%; pointer-events: none;
    animation: floatOrb2 6s ease-in-out infinite; /* Двигается в другом ритме */
    will-change: transform; transform: translateZ(0); backface-visibility: hidden;
}

/* 1. ГЛАВНАЯ ОБЕРТКА (Большой контейнер) */
.category-group {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 40px;
    padding: 15px;
    margin-bottom: 25px; /* Нормальный отступ от планов */
}

/* 3. Длинные кнопки */
.flat-rect-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    padding: 9px 20px;
    transition: transform 0.15s ease, background-color 0.2s ease;
}
.flat-rect-btn:active { transform: scale(0.98); background: rgba(255, 255, 255, 0.1); }

/* 5. Тумблеры (iOS Switch) */
.ios-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.ios-switch input { opacity: 0; width: 0; height: 0; }
.ios-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.2); transition: .3s; border-radius: 26px; }
.ios-switch .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
.ios-switch input:checked + .slider { background-color: #bb86fc; }
.ios-switch input:checked + .slider:before { transform: translateX(20px); }

/* =========================================
   НОВЫЕ НЕОНОВЫЕ КНОПКИ (ИЗ РЕФЕРЕНСА)
========================================= */

/* Базовая форма "Таблетка" */
.pill-btn {
    width: 100%;
    border-radius: 50px; /* Идеально круглые края */
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    border: none;
    outline: none;
}

.pill-btn:active {
    transform: scale(0.96);
}

.pill-icon {
    font-size: 20px;
}

.pill-text {
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase; /* Все буквы заглавные, как на скрине */
    letter-spacing: 1px;
}

/* 1. Яркий фиолетовый стиль (Свечение + Черный текст) */
.pill-purple {
    background: linear-gradient(90deg, #a87aff, #854bff); /* Тот самый оттенок из скрина */
    color: #000; /* Черный текст для мощного контраста */
    box-shadow: 0 0 25px rgba(133, 75, 255, 0.4); /* Неоновое свечение вокруг */
}

/* 2. Темный стиль с пунктиром (Для Десертов) */
.pill-dashed {
    background: #150e1f; /* Глубокий темный фон */
    color: #a87aff; /* Текст в цвет обводки */
    border: 1.5px dashed #854bff; /* Пунктирная неоновая рамка */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Только внутренняя тень, без внешнего свечения */
}

/* Цветные выделения для тумблеров (С сильным закруглением) */
.color-mass {
    background: rgba(187, 134, 252, 0.08) !important;
    border: 1px solid rgba(187, 134, 252, 0.4) !important;
    border-radius: 20px !important; /* Увеличили закругление */
}
.color-slim {
    background: rgba(3, 218, 198, 0.08) !important;
    border: 1px solid rgba(3, 218, 198, 0.4) !important;
    border-radius: 20px !important; /* Увеличили закругление */
}

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

/* Анимация пролетающего блика для всех кнопок */
@keyframes sweepShine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* Базовые стили для всех кнопок настроений */
.mood-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
    
    /* Добавляем четкую, но тонкую рамку */
    border: 0px solid rgba(146, 21, 142, 0.318); 
    border-radius: 20px;
    
    /* Сохраняем объем */
    background: linear-gradient(180deg, rgb(255, 5, 5) 0%, rgb(255, 0, 0) 100%);
    color: #fffefe !important; 
    
    /* Тень для объема */
    box-shadow: inset 0 1px 15px rgb(0, 0, 0), 0 4px 10px rgba(0,0,0,0.3);
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.585);
    
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    display: flex;
}

/* Сам пролетающий блик (сделали его чуть прозрачнее, чтобы не перекрывал черный текст) */
.mood-btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg); animation: sweepShine 6s infinite; pointer-events: none;
}

.mood-btn:active { 
    transform: scale(0.95); 
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0,0,0,0.2); 
}

/* Форма 1: Длинная главная кнопка */
.long-mood {
    grid-column: span 2; /* Растягиваем на всю ширину сетки */
    flex-direction: row; /* Иконка и текст в один ряд */
    align-items: center;
    justify-content: center; /* ✨ МАГИЯ ЗДЕСЬ: Центрируем контент */
    padding: 16px 20px;
    gap: 12px;
}
.long-mood .mood-icon { font-size: 26px; }
.long-mood .mood-text { font-size: 16px; font-weight: 900; }

/* Форма 2: Компактная прямоугольная кнопка */
.rect-mood {
    flex-direction: row; /* Иконка и текст выстраиваются в один ряд */
    align-items: center;
    justify-content: flex-start; /* Прижимаем контент к левому краю */
    padding: 12px 14px; /* Уменьшаем высоту кнопки */
    gap: 8px; /* Расстояние между иконкой и текстом */
    text-align: left;
}
.rect-mood .mood-icon { 
    font-size: 22px; /* Чуть уменьшили иконку */
    margin: 0;
    flex-shrink: 0; /* Запрещаем иконке сплющиваться */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); 
}
.rect-mood .mood-text { 
    font-size: 14px; /* Компактный шрифт, чтобы длинные слова влезали */
    font-weight: 900; 
    line-height: 1.15; 
}

/* Кнопки планов (На неделю / На месяц) */
.plan-rect-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 110px;
    color: #fff; font-weight: bold; font-size: 13px; cursor: pointer; transition: transform 0.15s ease, background-color 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0,0,0,0.3);
}
.plan-rect-btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg); animation: sweepShine 6s infinite 1s; pointer-events: none; /* Задержка 1с, чтобы бликовали по очереди */
}
.plan-rect-btn:active { transform: scale(0.95); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1); }

/* Нижние прямоугольные кнопки */
.bottom-rect-btn {
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 16px 5px; color: #fff; font-weight: bold; font-size: 12px; cursor: pointer; transition: transform 0.15s ease, background-color 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0,0,0,0.3);
}
.bottom-rect-btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-20deg); animation: sweepShine 6s infinite 2s; pointer-events: none; /* Задержка 2с */
}
.bottom-rect-btn:active { transform: scale(0.95); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1); }

/* Цвета для нижних увеличенных кнопок (Тоже переведены в 3D градиент) */
.color-fridge { background: linear-gradient(180deg, rgba(52, 152, 219, 0.25) 0%, rgba(52, 152, 219, 0.05) 100%); border: 1px solid rgba(52, 152, 219, 0.4); border-radius: 18px; }
.color-equip { background: linear-gradient(180deg, rgba(230, 126, 34, 0.25) 0%, rgba(230, 126, 34, 0.05) 100%); border: 1px solid rgba(230, 126, 34, 0.4); border-radius: 18px; }
.color-fav { background: linear-gradient(180deg, rgba(241, 196, 15, 0.25) 0%, rgba(241, 196, 15, 0.05) 100%); border: 1px solid rgba(241, 196, 15, 0.4); border-radius: 18px; }

/* --- АНИМАЦИЯ ЗАГРУЗКИ ВНУТРИ КАРТОЧКИ --- */
.card-loading-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 50; /* Висит поверх текста и картинки карточки */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0c29 50%, #240b36 100%);
    background-size: 300% 300%;
    animation: gradientMove 3s ease infinite;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    border-radius: inherit; /* Идеально повторяет закругления самой карточки */
}

.card-loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-robot {
    font-size: 60px;
    margin-bottom: 20px;
    animation: floatRobot 2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(187, 134, 252, 0.6));
}

.loader-gears {
    font-size: 30px;
    position: absolute;
    top: -10px;
    right: -20px;
    animation: spinGear 4s linear infinite;
}

.loader-text {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    line-height: 1.4;
    padding: 0 20px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.loader-subtext {
    color: var(--primary);
    font-size: 13px;
    margin-top: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulseText 1.5s infinite;
}

@keyframes floatRobot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes spinGear { 100% { transform: rotate(360deg); } }
@keyframes gradientMove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes pulseText { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* --- КОЛЛЕКЦИЯ РЕЦЕПТОВ (СЕТКА) --- */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 карточки в ряд на телефоне */
    gap: 15px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}

.collection-card {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4; /* Пропорции как у свайп-карточек */
    border-radius: 16px;
    overflow: hidden;
    background-color: #1a1a1a;
    border: 1px solid var(--card-color, #bb86fc);
    box-shadow: 0 4px 15px var(--card-color, rgba(187, 134, 252, 0.3));
    cursor: pointer;
    transition: transform 0.2s ease;
}

.collection-card:active {
    transform: scale(0.95);
}

.collection-card-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 40%, rgba(0,0,0,0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
}

.collection-card-title {
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    text-align: center;
    line-height: 1.2;
}

.collection-card-rarity {
    font-size: 10px;
    font-weight: bold;
    color: var(--card-color);
    text-transform: uppercase;
    text-align: center;
    background: rgba(0,0,0,0.6);
    padding: 4px;
    border-radius: 8px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid currentColor;
}

/* Красивая Пагинация (Страницы) */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.btn-page {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    padding: 0;
}

.btn-page svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.btn-page:active { transform: scale(0.9); background: rgba(255,255,255,0.2); }
.btn-page:disabled { opacity: 0.2; pointer-events: none; }

#collectionPageIndicator {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
    background: rgba(187, 134, 252, 0.15);
    border: 1px solid rgba(187, 134, 252, 0.4);
    padding: 10px 24px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(187, 134, 252, 0.2);
}

/* --- СТИЛИ ДЛЯ СОЦИАЛЬНОГО ПРОФИЛЯ (СЕТКА) --- */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px; /* Плотная сетка, как в соцсетях */
    padding-bottom: 20px;
}

.grid-recipe-card {
    width: 100%;
    aspect-ratio: 3/4;
    position: relative;
    background: #111;
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px; /* Легкое, аккуратное скругление */
}

.grid-recipe-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.grid-recipe-card:active img {
    transform: scale(1.05); /* Эффект нажатия */
}

.grid-card-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Тот самый градиент: сильное затемнение сверху и снизу, прозрачно в центре */
    background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.7) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 4px;
    pointer-events: none;
}

.grid-card-title {
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    line-height: 1.2;
    /* Мощная обводка и тень, чтобы текст читался ИДЕАЛЬНО на любом фоне */
    text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,1);
}

.grid-card-rarity {
    font-size: 12px;
    text-align: center;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
}

/* --- АНИМАЦИИ ДЛЯ ЭКРАНА КОЛЛЕКЦИИ --- */
.collection-dark-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
    background: rgba(10, 0, 20, 0.65); /* Мягкое темное затемнение */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: -1;
    opacity: 0;
    animation: smoothFadeIn 0.8s ease forwards;
}

.collection-header-anim {
    opacity: 0;
    /* Появление в центре (с размытием) -> пауза -> полет наверх */
    animation: cinematicTitle 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.collection-grid-anim {
    opacity: 0;
    /* Рецепты ждут 1.5 секунды, пока заголовок летит наверх */
    animation: cinematicGrid 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.5s forwards;
}

@keyframes smoothFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cinematicTitle {
    0% { opacity: 0; filter: blur(20px); transform: translateY(35vh) scale(1.4); }
    30% { opacity: 1; filter: blur(0px); transform: translateY(35vh) scale(1.4); }
    60% { opacity: 1; filter: blur(0px); transform: translateY(35vh) scale(1.4); }
    100% { opacity: 1; filter: blur(0px); transform: translateY(0) scale(1); }
}

@keyframes cinematicGrid {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Анимация появления Рецепта снизу вверх */
@keyframes recipeSlideUp {
    0% { transform: translateY(120px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* --- СТИЛИ ДЛЯ СЧЕТЧИКА В UGC ПУБЛИКАЦИИ --- */
.publish-counter {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    margin-bottom: 6px;
    padding: 3px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}
.cnt-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-weight: bold;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: 0.2s;
}
.cnt-btn:active { background: rgba(255, 255, 255, 0.4); transform: scale(0.9); }
.cnt-input {
    background: transparent;
    border: none;
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    width: 40px;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}
.cnt-input::-webkit-outer-spin-button,
.cnt-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Кнопки для сохранения ингредиентов (Пропорция 15% / 15% / 70%) --- */

/* Маленькие стеклянные кнопки (+ и Микрофон) */
#screen-publish-ingredients .floating-nav button#publishAddCustomIngBtn,
#screen-publish-ingredients .floating-nav button#publishAddMicBtn {
    flex: 1.5 !important; /* Каждая занимает по 1.5 доли (15%) */
    width: auto !important; 
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 40px !important;
    height: 55px !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: 0.2s !important;
    backdrop-filter: blur(10px) !important;
}

/* Большая фиолетовая кнопка (70%) */
#screen-publish-ingredients .floating-nav button#publishSaveBtn {
    flex: 7 !important; /* Занимает 7 долей (70%) */
    width: auto !important; 
    background: #a87ffb !important; 
    color: #ffffff !important;
    border-radius: 40px !important;
    box-shadow: 0 4px 15px rgba(168, 127, 251, 0.4) !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    height: 55px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}

/* Анимация пульсации для микрофона (чтобы работал эффект при записи) */
#screen-publish-ingredients .floating-nav button#publishAddMicBtn.pulse-record {
    animation: pulseRecord 1.5s infinite !important;
}

/* Анимация при нажатии для всех трех кнопок */
#screen-publish-ingredients .floating-nav button#publishSaveBtn:active, 
#screen-publish-ingredients .floating-nav button#publishAddCustomIngBtn:active,
#screen-publish-ingredients .floating-nav button#publishAddMicBtn:active {
    transform: scale(0.95) !important;
}
/* --- Анимация пульсации для диктофона --- */
@keyframes pulseRecord {
    0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255, 71, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
}

.pulse-record {
    animation: pulseRecord 1.5s infinite !important;
}

/* ==========================================================
   ЮРИДИЧЕСКИЙ РАЗДЕЛ (152-ФЗ/149-ФЗ), 2026-09-06
   Футер приложения, cookie-баннер, чекбокс согласия на ПДн,
   ИИ-дисклеймер и отдельные HTML-страницы документов
   (privacy.html / terms.html / recommendation-rules.html).
   Везде — то же стекло/скругления/полупрозрачные тёмные фоны,
   что и в остальном приложении, без единого дефолтного белого фона.
   ========================================================== */

/* --- Подвал внутри приложения (screen-main / screen-ingredients) --- */
.site-footer {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    padding: 20px 18px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    text-align: center;
}

.site-footer .footer-brand {
    font-size: 12px;
    color: #ccc;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.site-footer .footer-requisites {
    font-size: 11px;
    color: #888;
    line-height: 1.6;
    margin: 0 0 14px 0;
}

.site-footer nav.footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 14px;
}

.site-footer nav.footer-nav a {
    color: var(--secondary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(3, 218, 198, 0.35);
    padding-bottom: 1px;
}

.site-footer .footer-note {
    font-size: 10px;
    color: #777;
    line-height: 1.6;
    margin: 6px 0 0 0;
}

.site-footer .footer-copy {
    font-size: 10px;
    color: #555;
    margin: 14px 0 0 0;
}

/* --- Короткий ИИ-дисклеймер под сгенерированным рецептом --- */
.ai-disclaimer {
    position: relative;
    z-index: 10;
    margin-top: 15px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    font-size: 11px;
    color: #999;
    line-height: 1.6;
    text-align: center;
}

.ai-disclaimer b { color: #bbb; }

/* --- Ссылка на правила рекомендаций у колоды карточек --- */
.recommendation-note {
    text-align: center;
    color: #777;
    font-size: 11px;
    line-height: 1.6;
    margin-top: 10px;
    padding: 0 20px;
}

.recommendation-note a {
    color: var(--secondary);
    text-decoration: underline;
}

/* --- Чекбокс согласия на обработку ПДн (формы регистрации) ---
   Требование 152-ФЗ: чек-бокс НЕ взведён по умолчанию (см. HTML — без
   атрибута checked), пользователь обязан отметить его сам; кнопка отправки
   формы заблокирована (disabled), пока согласие не отмечено (см. auth.js). */
.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 5px 0 15px 0;
}

.consent-row input[type="checkbox"] {
    margin: 2px 0 0 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.consent-row label {
    font-size: 12px;
    color: #ccc;
    line-height: 1.5;
    cursor: pointer;
}

.consent-row label a {
    color: var(--secondary);
    text-decoration: underline;
}

/* --- Cookie-баннер (152-ФЗ) ---
   Стилизован как всплывающая стеклянная карточка снизу экрана, в той же
   манере, что и остальные модалки приложения. Аналитика (Яндекс.Метрика)
   физически не инициализируется в коде, пока баннер не даст согласие —
   см. window.initAnalyticsIfConsented() в js/features/legal.js. */
#cookie-banner {
    position: fixed;
    left: 50%;
    /* 110px — не 20px: на экранах с .floating-nav (bottom: 25px, своя высота
       и внутренний padding) баннер иначе лёг бы прямо поверх кнопки
       «Сгенерировать». Приподнимаем его выше плавающей панели, чтобы обе
       оставались видны и кликабельны одновременно. */
    bottom: 110px;
    transform: translateX(-50%) translateY(0);
    width: calc(100% - 30px);
    max-width: 480px;
    z-index: 999998;
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    padding: 20px;
    box-sizing: border-box;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#cookie-banner.hidden {
    display: none !important;
}

#cookie-banner .cookie-title {
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px 0;
}

#cookie-banner .cookie-text {
    font-size: 12px;
    color: #bbb;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

#cookie-banner .cookie-text a {
    color: var(--secondary);
    text-decoration: underline;
}

#cookie-banner .cookie-actions {
    display: flex;
    gap: 10px;
}

/* Обе кнопки одинаково заметны — «Отказаться» не спрятана и не бледнее */
#cookie-banner .cookie-actions button {
    flex: 1;
    border: none;
    border-radius: 16px;
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease;
}

#cookie-banner .cookie-actions button:active { transform: scale(0.96); }

#cookie-banner #cookieDecline {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
}

#cookie-banner #cookieAccept {
    background: var(--grad);
    color: #000;
}

/* --- Отдельные страницы документов (privacy.html/terms.html/recommendation-rules.html) ---
   Те же экраны SPA не используются намеренно — юридические страницы должны
   открываться без загрузки всего приложения и быть доступны по прямой
   ссылке/поисковику. Общий вид (тёмный фон, стекло, шрифты) — тот же. */
body.legal-body {
    background: var(--bg);
    min-height: 100vh;
    min-height: 100dvh;
}

.legal-page-wrap {
    max-width: 700px;
    margin: 0 auto;
    padding: 25px 18px 60px;
    box-sizing: border-box;
}

.legal-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 10px 18px;
    border-radius: 40px;
    margin-bottom: 25px;
    transition: 0.2s;
}

.legal-back-link:active { transform: scale(0.96); }

.legal-page-wrap h1 {
    font-size: 28px;
    color: #fff;
    margin: 0 0 6px 0;
}

.legal-meta {
    font-size: 12px;
    color: #888;
    margin: 0 0 8px 0;
}

.legal-warning {
    font-size: 12px;
    color: #FFD700;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 14px;
    padding: 14px 16px;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* Расширяем существующий .legal-text под самостоятельную страницу */
.legal-page-wrap .legal-text {
    font-size: 14px;
}

.legal-page-wrap .legal-text h3 {
    font-size: 17px;
    margin-top: 26px;
}

.legal-page-wrap .legal-text h3:first-child { margin-top: 0; }

.legal-page-wrap .legal-text p { margin: 0 0 12px 0; }

.legal-page-wrap .legal-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 18px 0;
    font-size: 12px;
}

.legal-page-wrap .legal-text th,
.legal-page-wrap .legal-text td {
    border: 1px solid var(--border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.legal-page-wrap .legal-text th {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.legal-crosslinks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-crosslinks a {
    color: var(--secondary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
}

/* ==========================================================
   UGC/СОЦИАЛЬНАЯ ПЛАШКА АВТОРА НА СВАЙП-КАРТОЧКЕ, 2026-09-06
   ========================================================== */
.swipe-author-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    max-width: calc(100% - 28px);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 15, 15, 0.55);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 5px 14px 5px 5px;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.15s ease;
}

.swipe-author-badge:active { transform: scale(0.95); }

.swipe-author-badge img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex-shrink: 0;
}

.swipe-author-badge span {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}