From bfe3074a26872ad9ae2092aa6a919e2ddecd8145 Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Sat, 4 Apr 2026 21:49:00 +0200
Subject: [PATCH] Redesign meal plan editor

---
 js/data/catalog.js             |   9 +-
 js/services/pantryShopping.js  |   2 +-
 js/services/planIngredients.js |   2 +-
 js/services/planStore.js       |   2 +-
 js/ui/mealCalendar.js          |   4 +-
 js/ui/mealPlanEditor.js        | 146 +++++++++++++++++++++++----------
 js/views/Filter.js             |   2 +-
 js/views/MealPlanner.js        |   8 +-
 js/views/Pantry.js             |   2 +-
 js/views/RecipeDetail.js       |   2 +-
 js/views/RecipeDetailV2.js     |   6 +-
 js/views/RecipeList.js         |   6 +-
 12 files changed, 129 insertions(+), 62 deletions(-)

diff --git a/js/data/catalog.js b/js/data/catalog.js
index a16ec00..0fc297f 100644
--- a/js/data/catalog.js
+++ b/js/data/catalog.js
@@ -177,6 +177,13 @@ export const INGREDIENTS = {
         pantryUnit: 'g',
         nutritionPer100g: { kcal: 44, protein: 0.7, fat: 0.4, carbs: 10 },
     },
+    rokitnik_zwyczajny: {
+        id: 'rokitnik_zwyczajny',
+        name: 'Rokitnik zwyczajny - rokitnik pospolity (Hippophae rhamnoides)',
+        category: 'owoce',
+        pantryUnit: 'g',
+        nutritionPer100g: { kcal: 82, protein: 1.2, fat: 5.4, carbs: 5.5 },
+    },
     /* ── Suche i kasze ────────────────────────────────── */
     makaron_suchy: {
         id: 'makaron_suchy',
@@ -430,7 +437,7 @@ export const RECIPES = {
             { ingredientId: 'miod', amount: 10, unit: 'g' },
             { ingredientId: 'orzechy_wloskie', amount: 50, unit: 'g', alternatives: ['orzechy_laskowe', 'orzechy_nerkowca', 'migdaly', 'orzechy_pekan'] },
             { ingredientId: 'truskawki', amount: 100, unit: 'g', alternatives: ['banany'] },
-            { ingredientId: 'borowki_amerykanskie', amount: 80, unit: 'g', alternatives: ['jagody'] },
+            { ingredientId: 'borowki_amerykanskie', amount: 80, unit: 'g', alternatives: ['jagody', 'rokitnik_zwyczajny'] },
         ],
         steps: [
             'Przełóż serek wiejski do miseczki.',
diff --git a/js/services/pantryShopping.js b/js/services/pantryShopping.js
index 792100d..2bcef1f 100644
--- a/js/services/pantryShopping.js
+++ b/js/services/pantryShopping.js
@@ -1,4 +1,4 @@
-import { INGREDIENTS, CATEGORY_LABELS } from '../data/catalog.js';
+import { INGREDIENTS, CATEGORY_LABELS } from '../data/catalog.js?v=2';
 import { PANTRY_STORAGE_KEY, SHOPPING_STORAGE_KEY } from '../storageKeys.js';
 
 export const KITCHEN_LIST_ID = 'kitchen';
diff --git a/js/services/planIngredients.js b/js/services/planIngredients.js
index 9a49a1c..0450fd4 100644
--- a/js/services/planIngredients.js
+++ b/js/services/planIngredients.js
@@ -1,4 +1,4 @@
-import { INGREDIENTS, RECIPES } from '../data/catalog.js';
+import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=2';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import { addDays } from './dateUtils.js';
 import { getDayPlan } from './planStore.js';
diff --git a/js/services/planStore.js b/js/services/planStore.js
index 6432a39..6b731f2 100644
--- a/js/services/planStore.js
+++ b/js/services/planStore.js
@@ -1,4 +1,4 @@
-import { INGREDIENTS, RECIPES } from '../data/catalog.js';
+import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=2';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import { PLANS_STORAGE_KEY } from '../storageKeys.js';
 import { startOfDay } from './dateUtils.js';
diff --git a/js/ui/mealCalendar.js b/js/ui/mealCalendar.js
index eacd75e..6c6d9da 100644
--- a/js/ui/mealCalendar.js
+++ b/js/ui/mealCalendar.js
@@ -32,11 +32,11 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr) {
     const text = isSelected ? '#f2efe8' : (isDimmed ? '#7d7a74' : '#d7d2c8');
     const dot = isSelected ? '#f2efe8' : '#a59f92';
     const opacity = isDimmed ? '0.72' : '1';
-    const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.3rem] w-full min-w-0 max-w-full items-center justify-center rounded-full border text-xs font-medium transition-colors leading-tight overflow-hidden`;
+    const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full border text-xs font-medium transition-colors leading-tight overflow-hidden`;
     const innerClass = mode === 'month'
         ? 'relative flex h-full w-full flex-col items-center justify-center'
         : 'relative flex h-full w-full items-center justify-center';
-    const dotBottom = mode === 'month' ? '0.18rem' : '0.15rem';
+    const dotBottom = mode === 'month' ? '0.24rem' : '0.2rem';
     const tagName = isDisabled ? 'div' : 'button';
     const buttonAttrs = isDisabled ? '' : ` type="button" ${dayAttr}="${day.getTime()}"`;
 
diff --git a/js/ui/mealPlanEditor.js b/js/ui/mealPlanEditor.js
index 5bb309a..ea6bb06 100644
--- a/js/ui/mealPlanEditor.js
+++ b/js/ui/mealPlanEditor.js
@@ -1,4 +1,4 @@
-import { INGREDIENTS, RECIPES } from '../data/catalog.js';
+import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=2';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
     addDays,
@@ -38,8 +38,8 @@ const slotLabel = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
 export function getMealPlanEditorHTML() {
     return `
     <div id="mpe-overlay" class="absolute inset-0 z-[55] bg-black/45 hidden flex items-end" style="pointer-events:none">
-        <div id="mpe-sheet" class="w-full bg-white rounded-t-3xl shadow-lg flex flex-col" style="pointer-events:auto; max-height:95vh; transform:translateY(100%); transition:transform 300ms cubic-bezier(0.32,0.72,0,1)">
-            <div class="shrink-0 px-5 pt-3 pb-2.5 border-b border-gray-100">
+        <div id="mpe-sheet" class="w-full bg-[#2d2e2b] rounded-t-3xl shadow-lg flex flex-col overflow-hidden" style="pointer-events:auto; background:#2d2e2b !important; background-image:none !important; backdrop-filter:none !important; height:100dvh; max-height:100dvh; transform:translateY(100%); transition:transform 300ms cubic-bezier(0.32,0.72,0,1)">
+            <div class="shrink-0 px-5 pt-3 pb-2.5 border-b border-gray-100 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
                 <div class="w-10 h-1 bg-gray-200 rounded-full mx-auto mb-3"></div>
                 <div class="flex items-center justify-between">
                     <div class="min-w-0 flex-1">
@@ -51,8 +51,8 @@ export function getMealPlanEditorHTML() {
                     </button>
                 </div>
             </div>
-            <div id="mpe-body" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 py-3">
-                <div id="mpe-cal-section" class="hidden mb-4">
+            <div id="mpe-cal-wrap" class="hidden relative z-[1] shrink-0 px-5 pt-3 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
+                <div id="mpe-cal-section" class="hidden">
                     ${createCalendarTopbarHTML({
         titleId: 'mpe-cal-title',
         prevId: 'mpe-cal-prev',
@@ -66,16 +66,24 @@ export function getMealPlanEditorHTML() {
                     <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mt-3 mb-2">Pora posiłku</p>
                     <div id="mpe-slot-chips" class="flex flex-wrap gap-1.5"></div>
                 </div>
-                <div id="mpe-nutrition-section" class="mb-4"></div>
-                <div id="mpe-servings-row" class="flex items-center justify-between mb-4"></div>
+            </div>
+            <div id="mpe-summary-wrap" class="relative z-[1] shrink-0 px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
+                <div class="flex items-stretch gap-3">
+                    <div id="mpe-nutrition-section" class="flex-1 min-w-0"></div>
+                    <div id="mpe-servings-row" class="shrink-0 w-[6.75rem]"></div>
+                </div>
+                <div id="mpe-top-shadow" class="pointer-events-none absolute inset-x-0 -bottom-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
+            </div>
+            <div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
                 <div id="mpe-ing-section" class="mb-4">
                     <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Składniki</p>
                     <div id="mpe-ing-list" class="space-y-1.5"></div>
                     <div id="mpe-add-area" class="mt-2"></div>
                 </div>
             </div>
-            <div class="shrink-0 px-5 pb-8 pt-3 border-t border-gray-100">
-                <button id="mpe-confirm-btn" type="button" class="w-full bg-gray-900 hover:bg-black text-white py-3 rounded-xl font-semibold text-[13px] transition-colors flex items-center justify-center gap-2">
+            <div id="mpe-footer-wrap" class="relative z-[1] shrink-0 px-5 pt-2 pb-3 flex justify-center bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important; padding-bottom:calc(1.1rem + env(safe-area-inset-bottom));">
+                <div id="mpe-footer-shadow" class="pointer-events-none absolute inset-x-0 -top-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to top, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
+                <button id="mpe-confirm-btn" type="button" class="border text-white px-4 py-3 rounded-xl font-semibold text-[13px] transition-colors inline-flex items-center justify-center gap-2" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important; border-color:#444442 !important;">
                     <i class="fas fa-check text-xs"></i> <span id="mpe-confirm-label">Dodaj do planu</span>
                 </button>
             </div>
@@ -148,8 +156,18 @@ export function setupMealPlanEditor() {
     /* ── Calendar ──────────────────────────────────── */
 
     function renderCal() {
+        const wrap = document.getElementById('mpe-cal-wrap');
         const sec = document.getElementById('mpe-cal-section');
-        if (!sec || !S.showCal) { sec?.classList.add('hidden'); return; }
+        const summary = document.getElementById('mpe-summary-wrap');
+        if (!sec || !wrap) return;
+        if (summary) summary.style.paddingTop = S.showCal ? '0' : '0.75rem';
+        if (!S.showCal) {
+            wrap.classList.add('hidden');
+            sec.classList.add('hidden');
+            syncScrollShadows();
+            return;
+        }
+        wrap.classList.remove('hidden');
         sec.classList.remove('hidden');
         const grid = document.getElementById('mpe-cal-grid');
         const title = document.getElementById('mpe-cal-title');
@@ -186,6 +204,7 @@ export function setupMealPlanEditor() {
                 };
             },
         });
+        syncScrollShadows();
     }
 
     function renderSlots() {
@@ -195,21 +214,48 @@ export function setupMealPlanEditor() {
         if (!r) return;
         el.innerHTML = MEAL_SLOTS.filter((s) => r.allowedSlots.includes(s.id)).map((s) => {
             const sel = s.id === S.slotId;
-            return `<button type="button" class="mpe-slot-btn px-3 py-1.5 rounded-lg border text-[12px] font-semibold transition-all ${sel ? 'border-gray-900 bg-gray-900 text-white' : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-gray-400'}" data-slot-id="${s.id}">${esc(s.label)}</button>`;
+            const bg = sel ? '#23221e' : '#2f2f2d';
+            const border = sel ? '#787876' : '#444442';
+            const text = sel ? '#f2efe8' : '#d7d2c8';
+            return `<button type="button" class="mpe-slot-btn px-3 py-1.5 rounded-full border text-[12px] font-semibold transition-colors" data-slot-id="${s.id}" style="background:${bg} !important; background-image:none !important; box-shadow:none !important; border-color:${border} !important; color:${text} !important;">${esc(s.label)}</button>`;
         }).join('');
     }
 
+    function syncScrollShadows() {
+        const body = document.getElementById('mpe-ing-scroll');
+        const topShadow = document.getElementById('mpe-top-shadow');
+        const bottomShadow = document.getElementById('mpe-footer-shadow');
+        if (!body) {
+            if (topShadow) topShadow.style.opacity = '0';
+            if (bottomShadow) bottomShadow.style.opacity = '0';
+            return;
+        }
+        if (topShadow) topShadow.style.opacity = body.scrollTop > 6 ? '1' : '0';
+        if (bottomShadow) {
+            const remaining = body.scrollHeight - body.clientHeight - body.scrollTop;
+            bottomShadow.style.opacity = remaining > 6 ? '1' : '0';
+        }
+    }
+
     /* ── Servings ──────────────────────────────────── */
 
     function renderServings() {
         const el = document.getElementById('mpe-servings-row');
         if (!el) return;
         el.innerHTML = `
-            <span class="text-[13px] font-semibold text-gray-900">Porcje</span>
-            <div class="flex items-center gap-0.5 bg-gray-100 p-0.5 rounded-lg">
-                <button type="button" id="mpe-serv-minus" class="w-7 h-7 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[9px]"></i></button>
-                <span id="mpe-serv-count" class="font-bold text-gray-900 text-[13px] w-5 text-center tabular-nums">${S.servings}</span>
-                <button type="button" id="mpe-serv-plus" class="w-7 h-7 bg-white rounded-md shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[9px]"></i></button>
+            <div class="h-full rounded-xl pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
+                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Porcje</p>
+                <div class="flex items-center pt-2">
+                    <div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;">
+                        <button type="button" id="mpe-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
+                            <i class="fas fa-minus text-[10px]"></i>
+                        </button>
+                        <span id="mpe-serv-count" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${S.servings}</span>
+                        <button type="button" id="mpe-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
+                            <i class="fas fa-plus text-[10px]"></i>
+                        </button>
+                    </div>
+                </div>
             </div>`;
     }
 
@@ -239,22 +285,24 @@ export function setupMealPlanEditor() {
             const disp = base * S.servings;
             const modified = id in S.overrides;
 
-            const rowBorder = swapped ? 'border-amber-200' : 'border-gray-200';
-            const rowBg = swapped ? 'bg-amber-50/30' : 'bg-white';
+            const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;';
 
             const shuffleBtn = hasAlts
-                ? `<button type="button" class="mpe-shuffle shrink-0 w-5 h-5 rounded-full ${swapped ? 'bg-amber-50 text-amber-500' : 'bg-gray-100 text-gray-400 hover:bg-gray-200'} flex items-center justify-center transition-colors" data-orig-id="${esc(id)}"><i class="fas fa-shuffle text-[8px]"></i></button>`
+                ? `<button type="button" class="mpe-shuffle shrink-0 w-5 h-5 flex items-center justify-center transition-colors text-gray-400 hover:text-gray-300" style="background:transparent !important; box-shadow:none !important;" data-orig-id="${esc(id)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
                 : '';
             const modDot = modified ? '<span class="w-1.5 h-1.5 rounded-full bg-amber-400 shrink-0"></span>' : '';
 
-            html += `<div class="mpe-ing-row rounded-xl border ${rowBorder} ${rowBg} p-2.5" data-orig-id="${esc(id)}" data-type="recipe">`;
+            html += `<div class="mpe-ing-row rounded-xl p-2.5" style="${rowStyle}" data-orig-id="${esc(id)}" data-type="recipe">`;
             html += `<div class="flex items-center gap-2">`;
-            html += `<div class="flex-1 min-w-0 flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(eName)}</span>${shuffleBtn}</div>`;
+            html += `<div class="flex-1 min-w-0"><span class="text-[12px] font-semibold text-gray-900 truncate block">${esc(eName)}</span></div>`;
+            html += `<div class="shrink-0 flex items-center gap-2">`;
+            html += shuffleBtn;
             html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-orig-id="${esc(id)}" data-type="recipe">`;
             html += `${modDot}<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(disp)}</span>`;
             html += `<span class="text-[11px] text-gray-500">${esc(ing.unit)}</span></button>`;
             html += removeBtn('mpe-remove-ing', `data-orig-id="${esc(id)}" data-type="recipe"`);
             html += `</div>`;
+            html += `</div>`;
 
             if (hasAlts && altOpen) {
                 const opts = [id, ...ing.alternatives];
@@ -263,13 +311,14 @@ export function setupMealPlanEditor() {
                     const def = INGREDIENTS[altId];
                     const name = def?.name || altId;
                     const isSel = eid === altId;
-                    const isOrig = altId === id;
-                    const cls2 = isSel ? 'border-gray-900 bg-gray-50 ring-1 ring-gray-900' : 'border-gray-200 bg-white hover:border-gray-300';
-                    const radio = `<div class="w-3.5 h-3.5 rounded-full border-2 shrink-0 ${isSel ? 'border-gray-900' : 'border-gray-300'} flex items-center justify-center">${isSel ? '<div class="w-1.5 h-1.5 rounded-full bg-gray-900"></div>' : ''}</div>`;
-                    const tag = isOrig ? `<span class="text-[9px] px-1.5 py-0.5 rounded ${isSel ? 'bg-gray-200 text-gray-600' : 'bg-gray-100 text-gray-400'} font-medium ml-auto shrink-0">Domyślny</span>` : '';
+                    const checkbox = `
+                        <span class="ml-auto self-center w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center"
+                              style="border:1.5px solid #56534f; background:transparent;">
+                            ${isSel ? '<i class="fas fa-check" style="color:#9b978f; font-size:8px; line-height:1; display:block; transform:translateY(0.5px);"></i>' : ''}
+                        </span>`;
                     const n = nutFor(altId, disp, ing.unit);
                     const nLine = n ? `<div class="text-[10px] text-gray-400 mt-0.5 tabular-nums">${n.kcal} kcal · ${n.protein}g B · ${n.fat}g T · ${n.carbs}g W</div>` : '';
-                    html += `<button type="button" class="mpe-alt-pick w-full text-left p-2 rounded-lg border transition-all ${cls2}" data-orig-id="${esc(id)}" data-alt-id="${esc(altId)}"><div class="flex items-center gap-2">${radio}<span class="text-[11px] font-semibold text-gray-900">${esc(name)}</span>${tag}</div>${nLine}</button>`;
+                    html += `<button type="button" class="mpe-alt-pick w-full text-left p-2.5 rounded-lg transition-all" style="background:#2f2f2d !important; background-image:none !important; border:none !important; box-shadow:none !important;" data-orig-id="${esc(id)}" data-alt-id="${esc(altId)}"><div class="flex items-center gap-3"><div class="min-w-0 flex-1"><div class="text-[11px] font-semibold text-gray-900">${esc(name)}</div>${nLine}</div>${checkbox}</div></button>`;
                 }
                 html += '</div>';
             }
@@ -281,9 +330,9 @@ export function setupMealPlanEditor() {
             const def = INGREDIENTS[a.ingredientId];
             const name = def?.name || a.ingredientId;
             const disp = a.amount * S.servings;
-            html += `<div class="mpe-ing-row rounded-xl border border-dashed border-gray-300 bg-white p-2.5" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
+            html += `<div class="mpe-ing-row rounded-xl p-2.5" style="background:#393937 !important; background-image:none !important; box-shadow:none !important; border:none !important;" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
             html += `<div class="flex items-center gap-2">`;
-            html += `<div class="flex-1 min-w-0 flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="text-[9px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-400 font-medium shrink-0">Dodany</span></div>`;
+            html += `<div class="flex-1 min-w-0 flex items-center gap-1.5"><span class="text-[12px] font-semibold text-gray-900 truncate">${esc(name)}</span><span class="shrink-0 inline-flex items-center justify-center text-[#8f8b84]" title="Dodany składnik" aria-label="Dodany składnik"><i class="fas fa-plus text-[8px]"></i></span></div>`;
             html += `<button type="button" class="mpe-edit-amt shrink-0 flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
             html += `<span class="text-[12px] font-semibold text-gray-900 tabular-nums">${fmtAmt(disp)}</span>`;
             html += `<span class="text-[11px] text-gray-500">${esc(a.unit)}</span></button>`;
@@ -307,7 +356,7 @@ export function setupMealPlanEditor() {
         const el = document.getElementById('mpe-add-area');
         if (!el) return;
         if (!S.addOpen) {
-            el.innerHTML = `<button type="button" id="mpe-add-btn" class="w-full py-2 rounded-xl border border-dashed border-gray-200 text-[12px] font-semibold text-gray-500 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 transition-colors"><i class="fas fa-plus text-[10px] mr-1.5 opacity-70"></i>Dodaj składnik</button>`;
+            el.innerHTML = `<button type="button" id="mpe-add-btn" class="w-full py-2 rounded-xl border border-dashed text-[12px] font-semibold transition-colors" style="border-color:#444442; color:#9b978f; background:transparent !important; box-shadow:none !important; -webkit-tap-highlight-color:transparent;"><i class="fas fa-plus text-[10px] mr-1.5 opacity-70"></i>Dodaj składnik</button>`;
             return;
         }
         const recipe = RECIPES[S.recipeId];
@@ -318,15 +367,15 @@ export function setupMealPlanEditor() {
         const q = S.addQuery.toLowerCase().trim();
         const avail = Object.values(INGREDIENTS).filter((i) => !usedIds.has(i.id) && (!q || i.name.toLowerCase().includes(q)));
         el.innerHTML = `
-            <div class="border border-gray-200 rounded-xl bg-gray-50 p-3">
+            <div class="rounded-xl p-3" style="background:#393937 !important; border:1px solid #444442;">
                 <div class="flex items-center gap-2 mb-2">
-                    <input type="text" id="mpe-add-search" class="flex-1 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-[12px] outline-none focus:border-gray-400 placeholder:text-gray-400" placeholder="Szukaj składnika…" value="${esc(S.addQuery)}">
-                    <button type="button" id="mpe-add-cancel" class="text-[11px] font-semibold text-gray-500 hover:text-gray-900 px-2 py-1">Anuluj</button>
+                    <input type="text" id="mpe-add-search" class="flex-1 rounded-lg px-3 py-1.5 text-[12px] outline-none placeholder:text-[#8f8b84]" style="background:#2f2f2d !important; border:1px solid #444442; color:#ddd6ca;" placeholder="Szukaj składnika…" value="${esc(S.addQuery)}">
+                    <button type="button" id="mpe-add-cancel" class="text-[11px] font-semibold px-2 py-1 transition-colors" style="color:#9b978f;">Anuluj</button>
                 </div>
                 <div class="max-h-40 overflow-y-auto space-y-0.5 no-scrollbar" id="mpe-add-results">
                     ${avail.length === 0
-                        ? '<p class="text-[11px] text-gray-400 text-center py-3">Brak wyników</p>'
-                        : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg hover:bg-white transition-colors text-[12px] font-medium text-gray-800" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-gray-400 text-[10px]">${esc(i.category)}</span></button>`).join('')}
+                        ? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
+                        : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-[10px]" style="color:#9b978f;">${esc(i.category)}</span></button>`).join('')}
                 </div>
             </div>`;
     }
@@ -342,13 +391,14 @@ export function setupMealPlanEditor() {
         const q = S.addQuery.toLowerCase().trim();
         const avail = Object.values(INGREDIENTS).filter((i) => !usedIds.has(i.id) && (!q || i.name.toLowerCase().includes(q)));
         results.innerHTML = avail.length === 0
-            ? '<p class="text-[11px] text-gray-400 text-center py-3">Brak wyników</p>'
-            : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg hover:bg-white transition-colors text-[12px] font-medium text-gray-800" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-gray-400 text-[10px]">${esc(i.category)}</span></button>`).join('');
+            ? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
+            : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-[10px]" style="color:#9b978f;">${esc(i.category)}</span></button>`).join('');
     }
 
     function renderIngredients() {
         renderIngList();
         renderAddArea();
+        requestAnimationFrame(syncScrollShadows);
     }
 
     /* ── Nutrition summary ─────────────────────────── */
@@ -358,15 +408,20 @@ export function setupMealPlanEditor() {
         if (!el) return;
         const n = totalNutrition();
         el.innerHTML = `
-            <div class="rounded-xl border border-gray-100 bg-gray-50/80 p-3">
-                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze${S.servings > 1 ? ` · ${S.servings} porcje` : ''}</p>
-                <div class="grid grid-cols-4 gap-3 text-center">
-                    <div><span class="block text-[14px] font-bold text-gray-900 tabular-nums">${n.kcal}</span><span class="text-[10px] text-gray-500">kcal</span></div>
-                    <div><span class="block text-[14px] font-bold text-gray-900 tabular-nums">${n.protein} g</span><span class="text-[10px] text-gray-500">Białko</span></div>
-                    <div><span class="block text-[14px] font-bold text-gray-900 tabular-nums">${n.carbs} g</span><span class="text-[10px] text-gray-500">Węgle</span></div>
-                    <div><span class="block text-[14px] font-bold text-gray-900 tabular-nums">${n.fat} g</span><span class="text-[10px] text-gray-500">Tłuszcze</span></div>
+            <div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
+                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
+                <div class="flex-1 flex items-center">
+                    <div class="rounded-xl border px-3 py-2" style="border-color:#444442 !important;">
+                        <div class="grid grid-flow-col auto-cols-max gap-3 text-left">
+                            <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.kcal}</span><span class="text-[9px] text-gray-500">kcal</span></div>
+                            <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.protein}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Białko</span></div>
+                            <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.carbs}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Węgle</span></div>
+                            <div><span class="block text-[15px] font-semibold text-[#ddd6ca] tabular-nums leading-none">${n.fat}<span class="ml-0.5 text-[12px] font-medium text-[#9b978f]">g</span></span><span class="text-[9px] text-gray-500">Tłuszcze</span></div>
+                        </div>
+                    </div>
                 </div>
             </div>`;
+        requestAnimationFrame(syncScrollShadows);
     }
 
     /* ── Render all ────────────────────────────────── */
@@ -409,6 +464,9 @@ export function setupMealPlanEditor() {
         document.getElementById('mpe-confirm-label').textContent = S.mode === 'edit' ? 'Zapisz zmiany' : 'Dodaj do planu';
 
         renderAll();
+        const body = document.getElementById('mpe-ing-scroll');
+        if (body) body.scrollTop = 0;
+        syncScrollShadows();
 
         overlay.classList.remove('hidden');
         overlay.style.pointerEvents = 'auto';
@@ -500,6 +558,8 @@ export function setupMealPlanEditor() {
         renderSlots();
     });
 
+    document.getElementById('mpe-ing-scroll')?.addEventListener('scroll', syncScrollShadows);
+
     document.getElementById('mpe-servings-row')?.addEventListener('click', (e) => {
         if (e.target.closest('#mpe-serv-minus')) { if (S.servings <= 1) return; S.servings--; }
         else if (e.target.closest('#mpe-serv-plus')) { if (S.servings >= 12) return; S.servings++; }
diff --git a/js/views/Filter.js b/js/views/Filter.js
index 057ba14..9458009 100644
--- a/js/views/Filter.js
+++ b/js/views/Filter.js
@@ -1,4 +1,4 @@
-import { RECIPES } from '../data/catalog.js';
+import { RECIPES } from '../data/catalog.js?v=2';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import { applyFilters, getFilterState, getFilteredCount, refreshRecipeList } from './RecipeList.js';
 
diff --git a/js/views/MealPlanner.js b/js/views/MealPlanner.js
index efaa706..8b23fd9 100644
--- a/js/views/MealPlanner.js
+++ b/js/views/MealPlanner.js
@@ -1,4 +1,4 @@
-import { INGREDIENTS, RECIPES } from '../data/catalog.js';
+import { INGREDIENTS, RECIPES } from '../data/catalog.js?v=2';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import {
     addDays,
@@ -60,7 +60,7 @@ function syncTodayButton(mode, weekStart, monthAnchor, selected) {
 
 export function getMealPlannerHTML() {
     return `
-    <div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-gray-50 z-10 pb-24">
+    <div id="planner-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden bg-[#2d2e2b] z-10 pb-24">
         <div class="shrink-0 bg-white border-b border-gray-200 mt-3">
             ${createCalendarTopbarHTML({
         titleId: 'cal-period-label',
@@ -83,14 +83,14 @@ export function getMealPlannerHTML() {
             </div>
         </div>
 
-        <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-4">
+        <div id="planner-scroll" class="flex-1 overflow-y-auto px-4 pt-3 pb-4 bg-[#2d2e2b]">
             <div class="flex items-center justify-between mb-2">
                 <p id="planner-day-heading" class="text-[13px] font-semibold text-gray-900 tabular-nums"></p>
                 <button type="button" id="planner-copy-day" class="shrink-0 text-[11px] font-semibold text-gray-500 hover:text-gray-900 px-2.5 py-1 rounded-lg hover:bg-gray-100 transition-colors flex items-center gap-1.5">
                     <i class="fas fa-copy text-[9px]"></i>Kopiuj dzień
                 </button>
             </div>
-            <div id="planner-summary-card" class="rounded-xl border border-amber-200/80 bg-gradient-to-br from-amber-50 to-white p-2.5 shadow-sm mb-3">
+            <div id="planner-summary-card" class="rounded-xl border border-amber-200/80 bg-[#2d2e2b] p-2.5 shadow-sm mb-3">
                 <div class="flex items-start justify-between gap-2 mb-2">
                     <div>
                         <p class="text-[10px] font-semibold uppercase tracking-wide text-amber-900/70">Dziś — podsumowanie</p>
diff --git a/js/views/Pantry.js b/js/views/Pantry.js
index 62f2085..ea34f4b 100644
--- a/js/views/Pantry.js
+++ b/js/views/Pantry.js
@@ -2,7 +2,7 @@ import {
     INGREDIENTS,
     CATEGORY_LABELS,
     pantryQtyStep,
-} from '../data/catalog.js';
+} from '../data/catalog.js?v=2';
 import { addIngredientToKitchenList, categoryLabel, loadPantry, setPantryQty } from '../services/pantryShopping.js';
 import { showAppToast } from '../ui/toast.js';
 
diff --git a/js/views/RecipeDetail.js b/js/views/RecipeDetail.js
index f919f7f..cdd6fcb 100644
--- a/js/views/RecipeDetail.js
+++ b/js/views/RecipeDetail.js
@@ -1,4 +1,4 @@
-import { RECIPES, INGREDIENTS } from '../data/catalog.js';
+import { RECIPES, INGREDIENTS } from '../data/catalog.js?v=2';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 import { addDays, addMonths, sameDay, sameMonth, startOfDay, startOfMonth, startOfWeekMonday } from '../services/dateUtils.js';
 import { dateKey, loadPlans, newPlanEntryId, savePlans } from '../services/planStore.js';
diff --git a/js/views/RecipeDetailV2.js b/js/views/RecipeDetailV2.js
index 97a0ce0..521f86a 100644
--- a/js/views/RecipeDetailV2.js
+++ b/js/views/RecipeDetailV2.js
@@ -1,4 +1,4 @@
-import { RECIPES, INGREDIENTS } from '../data/catalog.js';
+import { RECIPES, INGREDIENTS } from '../data/catalog.js?v=2';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 
 function escapeHtml(s) {
@@ -13,7 +13,7 @@ const slotLabelMap = Object.fromEntries(MEAL_SLOTS.map((s) => [s.id, s.label]));
 
 export function getRecipeDetailHTML() {
     return `
-    <div id="recipe-detail-view" class="absolute inset-0 bg-white z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
+    <div id="recipe-detail-view" class="absolute inset-0 bg-[#2d2e2b] z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
         <div class="absolute top-0 w-full p-3.5 flex justify-between z-40 mt-3">
             <button onclick="closeRecipeDetail()" class="w-9 h-9 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
                 <i class="fas fa-arrow-left text-[13px]"></i>
@@ -28,7 +28,7 @@ export function getRecipeDetailHTML() {
             <span id="rd-hero-label" class="absolute inset-0 flex items-center justify-center text-white font-medium text-[15px]"></span>
         </div>
 
-        <div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
+        <div class="bg-[#2d2e2b] rounded-t-3xl -mt-6 relative z-30 pt-6 flex flex-col flex-1 overflow-hidden">
             <div class="mb-3 px-5 shrink-0">
                 <div class="flex justify-between items-start mb-2.5">
                     <h1 id="rd-title" class="text-xl font-bold text-gray-900"></h1>
diff --git a/js/views/RecipeList.js b/js/views/RecipeList.js
index c9c4de5..3fced1e 100644
--- a/js/views/RecipeList.js
+++ b/js/views/RecipeList.js
@@ -1,4 +1,4 @@
-import { RECIPES } from '../data/catalog.js';
+import { RECIPES } from '../data/catalog.js?v=2';
 import { MEAL_SLOTS } from '../planner/mealSlots.js';
 
 function escapeHtml(s) {
@@ -98,7 +98,7 @@ function renderGrid() {
 
 export function getRecipeListHTML() {
     return `
-    <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-gray-50 z-10">
+    <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10">
         <div class="p-4 border-b border-gray-200 mt-4 bg-white">
             <div class="flex items-center w-full border border-gray-300 rounded-lg bg-white focus-within:border-gray-400 transition-colors">
                 <div class="pl-3 pr-2 text-gray-400"><i class="fas fa-search"></i></div>
@@ -110,7 +110,7 @@ export function getRecipeListHTML() {
             </div>
         </div>
 
-        <div class="flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-gray-50">
+        <div class="flex-1 overflow-y-auto px-4 pt-4 pb-24 bg-[#2d2e2b]">
             <div id="recipe-grid" class="grid grid-cols-2 gap-3"></div>
         </div>
     </div>