:root{
  --bg:#f7fafc; --card:#ffffff; --border:#e5e7eb; --muted:#6b7280; --shadow:0 8px 24px rgba(17,24,39,.08);
  --accent:#10b981; --text:#0f172a;
  --chip-protein:#3b82f6; --chip-fats:#f59e0b; --chip-veggies:#22c55e; --chip-fruits:#ec4899; --chip-other:#8b5cf6;
}
.sfc-wrap{
  max-width:1100px;margin:24px auto;padding:24px;border-radius:18px;
  background: radial-gradient(60rem 30rem at -10% -20%, rgba(34,197,94,.12), transparent),
              radial-gradient(50rem 24rem at 110% 0%, rgba(59,130,246,.12), transparent),
              var(--bg);
  box-shadow: var(--shadow);
}
.sfc-head{text-align:center;margin-bottom:16px}
.sfc-head h2{font-size:28px;margin:0;color:var(--text)}
.sfc-sub{color:var(--muted);font-size:14px;margin-top:6px}
.sfc-controls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:10px 0 16px}
#sfc-search{
  padding:12px 14px;border-radius:14px;border:1px solid var(--border);min-width:280px;flex:1;max-width:420px;
  background:#fff; box-shadow: var(--shadow);
}
.sfc-cats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sfc-chip{
  border:none;border-radius:999px;padding:8px 14px;background:#fff;color:#111827;font-weight:700;cursor:pointer;
  box-shadow: var(--shadow); transition: transform .08s ease, filter .2s ease;
}
.sfc-chip:hover{transform: translateY(-2px);}
.sfc-chip.active{filter: saturate(1.2) brightness(1.02); color:#fff}
.sfc-chip[data-cat="Protein"].active{background:var(--chip-protein)}
.sfc-chip[data-cat="Fats"].active{background:var(--chip-fats)}
.sfc-chip[data-cat="Veggies"].active{background:var(--chip-veggies)}
.sfc-chip[data-cat="Fruits"].active{background:var(--chip-fruits)}
.sfc-chip[data-cat="Other"].active{background:var(--chip-other)}
.sfc-chip[data-cat="All"].active{background:var(--accent)}

.sfc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.sfc-card{
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  border:1px solid var(--border); border-radius:16px; padding:14px; cursor:pointer;
  box-shadow: var(--shadow); transition: transform .08s ease, box-shadow .2s ease;
}
.sfc-card:hover{transform: translateY(-3px); box-shadow: 0 10px 28px rgba(17,24,39,.10);}
.sfc-title{font-weight:800;color:#111827;margin-bottom:6px}
.sfc-kcal{color:var(--muted);font-size:13px}
.sfc-tag{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:#fff;padding:2px 8px;border-radius:999px}
.sfc-tag.Protein{background:var(--chip-protein)}
.sfc-tag.Fats{background:var(--chip-fats)}
.sfc-tag.Veggies{background:var(--chip-veggies)}
.sfc-tag.Fruits{background:var(--chip-fruits)}
.sfc-tag.Other{background:var(--chip-other)}

.sfc-detail{
  margin-top:16px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow: var(--shadow);
}
.sfc-detail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sfc-detail-head h3{margin:0}
.sfc-close{background:#fff;border:1px solid var(--border);border-radius:10px;padding:6px 10px;cursor:pointer}
.sfc-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.sfc-num{background:linear-gradient(135deg,#f8fafc,#eef2ff);border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center}
.sfc-num .h{color:var(--muted);font-size:12px}
.sfc-num .v{font-weight:900;font-size:20px;color:#0f172a}
.sfc-qty{margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sfc-qty input{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-width:120px}
.sfc-btn{background:var(--accent);color:#fff;border:none;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;box-shadow: var(--shadow)}

@media(max-width:600px){
  .sfc-nums{grid-template-columns:repeat(2,1fr)}
}