/* ========================================= */
/* 🥗 NUTRITION MODULE STYLES (FINAL v2)     */
/* ========================================= */

/* --- 1. GLOBAL LAYOUT & OVERRIDES --- */
#nutrition-modal {
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    background: var(--bg) !important;
}

/* Скрытие навигации (меню) при открытых модалках */
body:has(#nutrition-modal[style*="display: flex"]) #nav-bar,
body:has(#nutrition-modal[style*="display: block"]) #nav-bar,
body:has(#nutrition-modal.active) #nav-bar,
body:has(#nutrition-modal.open) #nav-bar,
body:has(#scanner-overlay-layer:not([style*="none"])) #nav-bar {
    display: none !important;
}

body:has(#nutrition-modal[style*="display: flex"]) #app {
    padding-bottom: 0 !important;
}

/* --- 2. HEADER ACTIONS & BADGES --- */
.header-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-pill-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text);
}

    .header-pill-btn.rp-btn {
        border-color: rgba(145, 71, 255, 0.4);
        background: rgba(145, 71, 255, 0.1);
        color: var(--primary);
    }

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

    .header-pill-btn .material-symbols-outlined {
        font-size: 18px;
    }

.header-circle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-sec);
    transition: all 0.2s;
}

    .header-circle-btn:active {
        transform: scale(0.90);
    }

    .header-circle-btn:hover {
        background: var(--hover);
        color: var(--text);
        border-color: rgba(255,255,255,0.2);
    }

    .header-circle-btn.alert-btn {
        color: var(--primary);
    }

.streak-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(255, 61, 0, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
    color: #ff3d00;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 61, 0, 0.2);
    font-weight: 700;
    font-size: 13px;
    height: 36px;
    margin-right: 8px;
    box-shadow: 0 2px 5px rgba(255, 61, 0, 0.1);
    animation: fadeIn 0.3s ease-out;
}

    .streak-badge.empty {
        filter: grayscale(1);
        opacity: 0.5;
        background: var(--hover);
        border-color: var(--border);
    }

/* --- 3. DATE NAVIGATION (Compact & Spaced) --- */
.date-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    margin-bottom: 8px !important; /* Единый отступ */
}

.date-nav-btn {
    width: 50px !important;
    height: 40px !important;
    flex: 0 0 50px !important;
    border-radius: 10px !important;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-sec);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all 0.2s;
}

    .date-nav-btn:hover {
        border-color: var(--primary);
        background: var(--hover);
        color: var(--text);
    }

.date-nav-current {
    height: 40px !important;
    border-radius: 10px !important;
    background: var(--surface);
    border: 1px solid var(--border);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
}

/* --- 4. TOP SUMMARY BARS (FIXED ALIGNMENT & SPACING) --- */
/* БЛОК 4 на вашем скриншоте */
.macro-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px !important;
    /* ОТСТУП СНИЗУ (до блока 3) - Эталон 8px */
    margin-bottom: 8px !important;
    background: rgba(20, 20, 20, 0.7) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
    box-shadow: none !important;
}

.ms-item {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.ms-track {
    position: relative;
    height: 20px;
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.ms-fill {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
    transition: width 0.5s ease-out;
}

    .ms-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
        pointer-events: none;
    }

/* --- ИСПРАВЛЕНИЕ ШРИФТОВ КБЖУ --- */
.ms-overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    z-index: 2;
    /* Единый шрифт для контейнера */
    font-size: 10px !important;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

    /* Принудительное выравнивание для цифр (span) */
    .ms-overlay-text span {
        font-size: 10px !important; /* Такой же размер как у текста */
        font-weight: 800 !important;
        color: #fff !important;
        line-height: 1;
    }

/* Gradients */
.ms-fill.cal, .progress-fill.cal {
    background: linear-gradient(90deg, #FF9800, #FF5722) !important;
}

.ms-fill.prot, .progress-fill.prot {
    background: linear-gradient(90deg, #7C4DFF, #D500F9) !important;
}

.ms-fill.fat, .progress-fill.fat {
    background: linear-gradient(90deg, #2979FF, #00B0FF) !important;
}

.ms-fill.carb, .progress-fill.carb {
    background: linear-gradient(90deg, #FF1744, #F50057) !important;
}


/* --- 5. ACTION BUTTONS (BLOCK 3) --- */
.nutrition-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    /* ОТСТУП СНИЗУ (до блока 2) - Делаем 8px, чтобы было как между 3 и 4 */
    margin-bottom: 8px !important;
}

.action-btn-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(20, 20, 20, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 10px 8px;
    color: #ffffff !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    transition: transform 0.2s, background 0.2s;
}

    .action-btn-large:active {
        transform: scale(0.96);
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .action-btn-large .material-symbols-outlined {
        font-size: 22px;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


/* --- 6. TIMING SELECTOR (BLOCK 2) & FIXES --- */
.timing-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    /* ОТСТУП СНИЗУ (до блока 1) - Делаем 8px, чтобы было равномерно */
    margin-bottom: 8px !important;
}

/* Контейнер селектора */
.timing-select-wrapper {
    flex: 1;
    height: 40px !important;
    border-radius: 10px !important;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .timing-select-wrapper:hover, .square-icon-btn:hover {
        border-color: var(--primary);
        background: var(--hover);
        color: var(--text);
    }

/* --- ИСПРАВЛЕНИЕ СЕЛЕКТОРА (Вертикальное выравнивание) --- */
.timing-select {
    width: 100%;
    height: 100%;
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    text-align: center;
    text-align-last: center; /* Центрирует текст в Chrome/Safari */
    /* Убираем внутренние отступы, которые смещают текст */
    padding: 0 40px !important;
    margin: 0 !important;
    appearance: none;
    outline: none;
    cursor: pointer;
    /* Ключевое исправление: высота строки равна высоте контейнера */
    line-height: 40px !important;
    display: block;
}

.timing-icon-left {
    position: absolute;
    left: 12px;
    font-size: 16px !important;
    color: var(--primary);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* Стрелочка селектора */
.timing-select-wrapper::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    right: 12px;
    font-size: 16px;
    color: var(--text-sec);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.square-icon-btn {
    width: 50px !important;
    height: 40px !important;
    min-width: 50px !important;
    flex: 0 0 50px !important;
    border-radius: 10px !important;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-sec);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all 0.2s;
}

    .square-icon-btn:active {
        transform: scale(0.98);
    }


/* --- 7. JOURNAL HEADER (BLOCK 1) --- */
.journal-header-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 44px !important;
    /* Убираем margin-top, так как отступ задан у элемента выше (Block 2) */
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}

    .journal-header-modern:active {
        transform: scale(0.98);
        background: var(--hover) !important;
    }

.journal-title-text {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 0 40px;
    width: 100%;
}

.journal-icon-left {
    position: absolute;
    left: 15px;
    color: var(--primary);
    font-size: 20px !important;
    pointer-events: none;
}

.journal-icon-right {
    position: absolute;
    right: 15px;
    color: var(--text-sec);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}


/* --- 8. REST OF THE STYLES (Meal Cards, etc.) --- */

.rp-meal-card {
    background: var(--surface);
    border-radius: 14px !important;
    padding: 10px;
    margin-bottom: 8px !important;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    overflow: hidden;
    color: #ffffff !important;
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(10px);
}

    .rp-meal-card.workout-meal {
        background: var(--surface) !important;
        background-color: var(--surface) !important;
        background-image: none !important;
        border: 1px solid rgba(145, 71, 255, 0.4) !important;
        box-shadow: none !important;
        border-radius: 14px !important;
    }

        .rp-meal-card.workout-meal::before, .rp-meal-card.workout-meal::after {
            display: none !important;
        }

.rp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 6px 0 !important;
    margin-bottom: 4px !important;
    border-bottom: none !important;
}

.rp-card-title {
    font-size: 13px !important;
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: 0.3px;
}

.macro-grid {
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px !important;
    margin-bottom: 8px !important;
}

.macro-box {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    padding: 2px !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .macro-box.highlight {
        background: rgba(145, 71, 255, 0.1) !important;
        border: 1px solid rgba(145, 71, 255, 0.3) !important;
    }

        .macro-box.highlight .macro-label {
            color: #FFD600;
            font-weight: bold;
        }

        .macro-box.highlight .progress-fill {
            background: #FFD600 !important;
        }

.macro-label {
    font-size: 7px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 0 !important;
}

.macro-val {
    font-size: 9px !important;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 1px !important;
}

.progress-track {
    background: rgba(0, 0, 0, 0.06) !important;
    border-radius: 2px;
    height: 4px;
    overflow: hidden;
    width: 100%;
}

.progress-fill {
    border-radius: 2px;
    box-shadow: none !important;
    height: 100%;
}

.meal-items-list {
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.meal-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

    .meal-item-row:last-child {
        border-bottom: none !important;
        padding-bottom: 0;
    }

.food-name {
    font-size: 12px !important;
    font-weight: 600;
    color: #ffffff !important;
    margin-bottom: 0 !important;
}

.food-meta {
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-top: 1px !important;
}

.rp-add-btn {
    margin: 6px 0 0 0 !important;
    padding: 8px !important;
    width: auto !important;
    border-radius: 8px !important;
    background: var(--surface);
    border: 1px dashed var(--primary);
    color: var(--primary);
    font-weight: 700;
    font-size: 11px !important;
    height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

/* Advice Box */
.rp-advice-wrapper {
    border-top: 1px solid var(--border);
    margin-top: 10px;
    padding-top: 8px;
}

.rp-advice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 5px 0;
    user-select: none;
}

.journal-container-glass {
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-radius: 16px !important;
    overflow: hidden;
    margin-top: 8px;
    padding: 0;
}

#food-journal-list > div {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 10px 8px !important;
}

    #food-journal-list > div:last-child {
        border-bottom: none !important;
    }

.journal-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    opacity: 0.7;
}

#food-journal-list > div:hover .journal-actions {
    opacity: 1;
}

.journal-btn {
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .journal-btn.edit {
        color: var(--text-sec);
        background: rgba(255,255,255,0.05);
    }

    .journal-btn.del {
        color: var(--error, #ff1744);
        background: rgba(255, 23, 68, 0.05);
    }

/* --- 9. INPUTS & SEARCH ELEMENTS --- */
.food-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    width: 100%;
}

.food-search-input-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50px !important;
    padding: 0 15px !important;
    display: flex;
    align-items: center;
    height: 44px;
    width: 100%;
    position: relative;
}

#fs-search-input {
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    color: var(--text) !important;
    outline: none !important;
}

#search-clear-icon {
    font-size: 20px;
    padding: 5px;
    margin-right: -5px;
    opacity: 0.6;
    cursor: pointer;
}

/* Modern Search Input (in Modal) */
.modern-search-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 0 12px !important;
    height: 48px !important;
    margin-bottom: 15px !important;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

    .modern-search-wrapper .unified-search-input {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 100% !important;
        font-size: 15px !important;
        width: 100% !important;
        color: var(--text) !important;
        outline: none !important;
    }

    .modern-search-wrapper:focus-within {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px rgba(145, 71, 255, 0.15);
    }

/* Input with Icon */
.input-with-icon-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 10px 0 15px;
    margin-bottom: 15px;
    height: 46px;
    position: relative;
    transition: border-color 0.2s;
}

    .input-with-icon-wrapper:focus-within {
        border-color: var(--primary);
    }

    .input-with-icon-wrapper input {
        flex: 1;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 100% !important;
        outline: none !important;
        font-size: 14px;
        color: var(--text);
    }

    .input-with-icon-wrapper .material-symbols-outlined {
        padding: 8px;
        color: var(--text-sec);
        cursor: pointer;
        font-size: 22px;
        display: flex;
    }

.search-result-item {
    padding: 8px 10px !important;
}

/* Quick Actions & Tabs */
.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0 2px;
}

.quick-action-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

    .quick-action-card:active {
        transform: scale(0.96);
        background: var(--hover);
    }

.qa-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .qa-icon-box span {
        font-size: 20px;
    }

    .qa-icon-box.manual {
        background: rgba(145, 71, 255, 0.1);
        color: var(--primary);
        border: 1px solid rgba(145, 71, 255, 0.2);
    }

    .qa-icon-box.create {
        background: rgba(0, 230, 118, 0.1);
        color: #00E676;
        border: 1px solid rgba(0, 230, 118, 0.2);
    }

.qa-card-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qa-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.qa-subtitle {
    font-size: 10px;
    color: var(--text-sec);
    margin-top: 2px;
}

.qa-tabs-wrapper {
    display: flex;
    background: var(--bg);
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--border);
    margin-bottom: 15px;
    width: 100%;
}

.qa-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sec);
    border-radius: 10px;
    cursor: pointer;
}

    .qa-tab.active {
        background: var(--surface);
        color: var(--text);
        border: 1px solid rgba(255,255,255,0.05);
    }

.qa-view {
    display: none;
    width: 100%;
}

/* --- 10. MODAL STRUCTURE & ANIMATIONS --- */
.modal-overlay-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3000;
}

    .modal-overlay-fixed[style*="display: flex"], .modal-overlay-fixed[style*="display:flex"] {
        display: flex !important;
    }

#modal-food-search, #modal-food-add, #modal-recipe-creator, #food-editor-overlay, #product-creator-overlay, #modal-ingredient-add {
    display: none;
}

.bottom-sheet-card {
    background: var(--surface);
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    position: relative;
    box-sizing: border-box;
}

/* Z-Indices */
#scanner-container {
    z-index: 4500 !important;
}

#modal-food-search, #modal-food-add {
    z-index: 3100;
}

#modal-recipe-creator {
    z-index: 3500;
}

#food-editor-overlay, #product-creator-overlay, #modal-ingredient-add {
    z-index: 4100;
}

@media (max-width: 500px) {
    .modal-overlay-fixed {
        align-items: flex-end;
    }

    .bottom-sheet-card {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        animation: slideUp 0.3s ease-out;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Accordions */
.rp-list-container, .journal-list-container {
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.3s ease;
    max-height: 5000px;
    opacity: 1;
}

    .rp-list-collapsed, .journal-list-container.collapsed {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none;
        border: none !important;
    }

/* --- 11. FOOD EDITOR & PRODUCT CREATOR --- */
#food-editor-overlay .bottom-sheet-card,
#product-creator-overlay .bottom-sheet-card {
    height: auto !important;
    padding: 15px !important;
    max-width: 360px !important;
    margin: 0 auto;
}

.fe-header {
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    flex-shrink: 0;
}

.fe-drag-line {
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 15px auto;
}

.fe-title-input {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--border);
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    padding: 5px;
    margin-bottom: 5px;
    outline: none;
    border-radius: 0;
}

.fe-huge-input {
    font-size: 26px;
    font-weight: 900;
    color: var(--primary);
    text-shadow: 0 2px 10px rgba(145, 71, 255, 0.2);
    padding: 0;
    background: transparent;
    border: none;
    text-align: center;
    width: 100%;
    outline: none;
    height: auto;
    margin: 0;
}

#food-editor-overlay #fe-cal,
#product-creator-overlay #new-prod-cal {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    color: var(--primary) !important;
    padding: 0 !important;
    height: auto !important;
    margin-top: -5px;
    text-align: center;
    width: 100%;
}

    #food-editor-overlay #fe-cal::-webkit-inner-spin-button,
    #food-editor-overlay #fe-cal::-webkit-outer-spin-button,
    #product-creator-overlay #new-prod-cal::-webkit-inner-spin-button,
    #product-creator-overlay #new-prod-cal::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.fe-input-group {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 70px;
    justify-content: space-between;
}

.fe-label {
    font-size: 10px;
    color: var(--text-sec);
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0;
}

#food-editor-overlay .fe-input-group:has(#fe-cal),
#product-creator-overlay .fe-input-group:has(#new-prod-cal) {
    border: 1px dashed var(--primary);
    background: rgba(145, 71, 255, 0.05) !important;
    min-height: auto !important;
    padding: 10px !important;
}

    #food-editor-overlay .fe-input-group:has(#fe-cal) .fe-label,
    #product-creator-overlay .fe-input-group:has(#new-prod-cal) .fe-label {
        color: var(--primary);
        font-weight: 800;
    }

.fe-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.fe-macros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 15px;
}

.fe-macro-item {
    text-align: center;
    background: var(--bg) !important;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
}

.fe-macro-input {
    width: 100%;
    text-align: center;
    background: transparent;
    border: none;
    font-weight: bold;
    font-size: 16px;
    color: var(--text);
}

.unit-toggle-wrapper {
    display: flex;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.unit-toggle-item {
    font-size: 9px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-sec);
    transition: all 0.2s;
}

    .unit-toggle-item.active {
        background: var(--primary);
        color: white;
    }

.row-btns {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 5px;
}

    .row-btns button {
        flex: 1;
        margin-bottom: 0;
        padding: 12px;
        font-size: 13px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* --- 12. RECIPES & WIZARD & SCANNER --- */
.btn-create-recipe {
    width: 100%;
    padding: 14px;
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(145, 71, 255, 0.3);
    margin-bottom: 15px;
}

.ingredient-item {
    background: var(--bg) !important;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 6px;
    padding: 10px 12px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

/* RP Wizard */
#modal-setup-wizard {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000 !important;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
}

    #modal-setup-wizard .modal-content {
        background: var(--surface);
        border: 1px solid var(--border);
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        border-radius: 20px;
        padding: 25px;
        width: 90%;
        max-width: 400px;
        animation: slideUp 0.3s ease-out;
    }

.rp-input-group {
    margin-bottom: 15px;
}

.rp-label {
    display: block;
    font-size: 12px;
    color: var(--text-sec);
    margin-bottom: 6px;
    margin-left: 4px;
}

.rp-select, .rp-input {
    width: 100%;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    padding: 12px;
    border-radius: 12px;
    outline: none;
    font-size: 14px;
}

    .rp-input:focus, .rp-select:focus {
        border-color: var(--primary) !important;
    }

/* Scanner */
#scanner-overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: radial-gradient(circle, transparent 150px, rgba(0,0,0,0.7) 151px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scanner-target-box {
    width: 250px;
    height: 250px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    position: relative;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.5);
    transition: all 0.2s;
}

    #scanner-target-box::before, #scanner-target-box::after {
        content: '';
        position: absolute;
        width: 40px;
        height: 40px;
        border-color: var(--primary);
        border-style: solid;
        border-width: 4px;
    }

    #scanner-target-box::before {
        top: -2px;
        left: -2px;
        border-right: 0;
        border-bottom: 0;
        border-radius: 16px 0 0 0;
    }

    #scanner-target-box::after {
        bottom: -2px;
        right: -2px;
        border-left: 0;
        border-top: 0;
        border-radius: 0 0 16px 0;
    }

    #scanner-target-box.scan-success {
        border-color: #00E676;
        box-shadow: 0 0 30px rgba(0, 230, 118, 0.6);
        transform: scale(1.05);
    }

/* ========================================= */
/* ☀️ LIGHT MODE OVERRIDES                   */
/* ========================================= */
body:not(.dark-mode) .macro-summary-grid,
body:not(.dark-mode) .rp-meal-card,
body:not(.dark-mode) .journal-container-glass {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    color: #000000 !important;
}

body:not(.dark-mode) .journal-container-glass {
    background: rgba(255, 255, 255, 0.6) !important;
}

body:not(.dark-mode) .ms-val {
    color: #000000 !important;
}

    body:not(.dark-mode) .ms-label, body:not(.dark-mode) .ms-val span {
        color: rgba(0, 0, 0, 0.5) !important;
    }

body:not(.dark-mode) .ms-track {
    background: rgba(0, 0, 0, 0.05) !important;
}

body:not(.dark-mode) .ms-overlay-text {
    color: #000000 !important;
    text-shadow: none !important;
}

    body:not(.dark-mode) .ms-overlay-text span {
        color: #000000 !important;
        opacity: 1 !important;
    }

body:not(.dark-mode) .rp-card-title {
    color: #000000 !important;
}

body:not(.dark-mode) .macro-box {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

    body:not(.dark-mode) .macro-box.highlight {
        background: rgba(145, 71, 255, 0.1) !important;
        border-color: var(--primary) !important;
    }

body:not(.dark-mode) .macro-label {
    color: rgba(0, 0, 0, 0.5) !important;
}

body:not(.dark-mode) .macro-val, body:not(.dark-mode) .text-prot, body:not(.dark-mode) .text-fat, body:not(.dark-mode) .text-carb {
    color: #000000 !important;
}

body:not(.dark-mode) .meal-items-list {
    background: rgba(255, 255, 255, 0.3) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

body:not(.dark-mode) .meal-item-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

body:not(.dark-mode) .food-name {
    color: #000000 !important;
}

body:not(.dark-mode) .food-meta {
    color: rgba(0, 0, 0, 0.6) !important;
}

body:not(.dark-mode) .rp-add-btn {
    color: var(--primary);
    border-color: rgba(0,0,0,0.1);
}

body:not(.dark-mode) .action-btn-large {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #000000 !important;
}

body:not(.dark-mode) .journal-header-modern {
    color: #000 !important;
}

body:not(.dark-mode) #food-journal-list > div {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body:not(.dark-mode) .workout-meal {
    background-color: #ffffff !important;
    border-color: rgba(145, 71, 255, 0.4) !important;
}

body:not(.dark-mode) .quick-action-card {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* --- 13. MEDIA QUERIES --- */
@media (max-height: 500px) {
    .fe-huge-input {
        font-size: 20px;
    }

    .fe-main-grid {
        margin-bottom: 10px;
    }
}

/* ============================================================ */
/* 📱 MOBILE KEYBOARD ADAPTATION (CLEAN & ROBUST)               */
/* Фикс для iOS/Android: когда открыта клавиатура (высота < 650px) */
/* ============================================================ */

@media (max-height: 650px) {

    /* 1. ПРИЖИМАЕМ ОКНА К ВЕРХУ */
    /* Касается всех модалок, где есть ввод данных */
    #modal-food-add,
    #modal-food-search,
    #food-editor-overlay,
    #product-creator-overlay,
    #modal-ingredient-add,
    #modal-recipe-creator {
        align-items: flex-start !important; /* Отменяем центрирование, прижимаем к верху */
        padding-top: 15px !important; /* Небольшой отступ от "челки" */
        padding-bottom: 0 !important;
        overflow-y: auto !important; /* Разрешаем скролл всего оверлея */
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    }

    /* 2. НАСТРОЙКА КАРТОЧКИ */
    /* Карточка должна сжиматься и давать место для скролла */
    .bottom-sheet-card {
        margin: 0 auto 50px auto !important; /* Отступ снизу, чтобы клавиатура не перекрывала контент */
        max-height: none !important; /* Убираем ограничение высоты */
        height: auto !important; /* Высота по содержимому */
        min-height: auto !important;
        border-radius: 0 0 20px 20px !important; /* Скругляем только низ, если прижато к верху (вкусовщина) */
        transform: none !important; /* Убираем любые трансформации центрирования */
    }

    /* Для Food Editor и Product Creator делаем карточку чуть компактнее */
    #food-editor-overlay .bottom-sheet-card,
    #product-creator-overlay .bottom-sheet-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 16px 16px !important;
        padding-bottom: 40px !important; /* Доп. место внутри карточки */
    }

    /* 3. ФИКС ШРИФТОВ (IOS ZOOM FIX) */
    /* Если шрифт < 16px, iPhone зумит экран при вводе. Исправляем это. */
    input,
    select,
    textarea,
    .fe-huge-input,
    .fe-macro-input,
    #new-prod-name {
        font-size: 16px !important;
    }

    /* Уменьшаем огромные цифры калорий, чтобы они влезали на экран с клавиатурой */
    .fe-huge-input {
        font-size: 22px !important;
    }

    /* Скрываем ненужные элементы при открытой клавиатуре для экономии места */
    .fe-header .fe-drag-line {
        display: none !important;
    }

    /* Компактные отступы внутри форм */
    .fe-input-group {
        min-height: auto !important;
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .fe-macros-grid {
        margin-bottom: 10px !important;
    }
}

/* --- ANIMATIONS: INPUT BLINK --- */
@keyframes field-pulse {
    0% {
        border-color: var(--border);
        box-shadow: none;
        background: transparent;
    }

    50% {
        border-color: var(--primary);
        box-shadow: 0 0 15px rgba(145, 71, 255, 0.4);
        background: rgba(145, 71, 255, 0.05);
        transform: scale(1.02);
    }

    100% {
        border-color: var(--border);
        box-shadow: none;
        background: transparent;
        transform: scale(1);
    }
}

.input-blink {
    animation: field-pulse 0.8s ease-in-out 3; /* Мигнет 3 раза */
    border-radius: 8px; /* Чтобы подсветка была красивой */
}